shenweishi/pages/my/index.vue

<template>
	<view class="my">
		<img class="imgMy" src="../../static/images/11.jpg" alt="">
		<view class="name_box" v-if="getHasLogin">
			<view class="img_box">
				<img class="imgs" src="../../static/images/head.png" alt="" />
			</view>
			<view class="right">
				<view class="text_box">
					<view class="name" @click="editor">
						<text>患友_0001</text>
						<image class="name_img" src="../../static/my/2.png" alt="" />
					</view>
					<view  style="">
						<text class="sex_box">男</text>
						<text class="sex_box">36</text>
					</view>
				</view>
				
			</view>
		</view>
		<!--  -->
		<view class="button_box" v-else>
			<button class="butt" open-type="getPhoneNumber" bindtap="getUserProfile" @getphonenumber="wxLogin">登录</button>
		</view>
		
		<view class="mainBox">
			<view class="shareBox">
				<view class="share" @click="toRecord">
					<view>
						<img src="../../static/my/5.png" alt="" style="width: 56rpx;height: 56rpx;">
						<text>我的健康档案</text>
					</view>
					<img class="rightArrow" src="../../static/images/icon4.png" alt="">
				</view>
			</view>
			<view class="signOut" >
				<button class="share" open-type="share" style="width: 100%;padding: 0;">
					<view>
						<img src="../../static/my/6.png" alt="" style="width: 56rpx;height: 56rpx;">
						<text>分享给朋友</text>
					</view>
					<img class="rightArrow" src="../../static/images/icon4.png" alt="">
				</button>
			</view>
			<view class="signOut" >
				<!-- <button class="share" open-type="share" style="width: 100%;padding: 0;"> -->
					<view>
						<img src="../../static/my/7.png" alt="" style="width: 56rpx;height: 56rpx;">
						<text>关于圣卫士</text>
					</view>
					<img class="rightArrow" src="../../static/images/icon4.png" alt="">
				<!-- </button> -->
			</view>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import Toast from '@/wxcomponents/vant/toast/toast';
	import {
		shareMixins
	} from '@/mixins/share'
	import {
		getCode,
		login,
		getMobile,
		getFieldConfig,
		getDataConfig,
		getKey,
		getOrg
	} from '@/api/api.js';
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [shareMixins],
		data() {
			return {
				userName: "",
				shareData: {
					title: '分享给朋友',
					path: '/pages/index' // 分享的页面路径
				},
				session_key: '',
				phoneNumber: '',
				code: '',
				loginResCode:'',
				appID:'',
				orgInfo:'',
				dialysis_no:''
			}
		},
		computed: {
			...mapGetters(['getHasLogin', 'getBind'])
		},
		onLoad() {
			const accountInfo = uni.getAccountInfoSync();
			this.appID = accountInfo.miniProgram.appId
			let that = this
			uni.login({
				provider:"weixin",
				success:(login_res => {
					let code = login_res.code;
					that.code = code
					console.log('that.code',login_res)
					that.getKey()
				})
			})
		},
		methods: {
			...mapMutations(['setHasLogin','setLogout','setConfigList', 'setFiledList', 'setOrg']),
			async getKey(){
				let params = {
					js_code: this.code
				}
				let res = await getKey(params)
				console.log('key',res.data);
				this.session_key = res.data.data.data.session_key
			},
			async wxLogin(e) {
				console.log('111111',e)
				const that = this
				if(e.detail.errMsg == "getPhoneNumber:ok"){
					let params = {
						// appid:'wx253b63b84a9c9494',wxcdf53b48b7df107e
						appid:'wxcdf53b48b7df107e',
						key:this.session_key,
						encryptedData:e.detail.encryptedData,
						iv:e.detail.iv
					}
					console.log('222222')
					let res = await this.getMobile(params)
					console.log('res',res);
					if(res.data.data.list != null){
						this.phoneNumber = res.data.data.list.phoneNumber
						console.log('333333',this.phoneNumber)
						this.getLogin(this.phoneNumber)
					}else{
						Toast('获取失败,重新获取');
					}
				}else{
					Toast('获取失败,重新获取');
				}
			},
			// 健康档案
			toRecord(){
				if(!this.getHasLogin){
					Toast('请先登录');
				}else{
					if(!this.getBind){
						uni.showModal({
						    title: '未绑定',
						    content: '是否去绑定',
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateTo({
						            	url: '/pages/userBinding/index'
						            })
						        } else if (res.cancel) {
						        }
						    }
						});
					}else{
						uni.navigateTo({
							url: '/subpackagesA/pages/medicalRecord/index'
						})
					}
				}
			},
			async getLogin(mobile){
				let params = {
					mobile: mobile.toString()
				};
				let res = await login(params, true)
				if(res.data.state == 1){
					Toast('登录成功');
				}
				let data = {
					is_bind:res.data.data.is_bind,
					userInfo:res.data.data.patient
				}
				this.setHasLogin(data)
				if(res.data.data.patient.id > 0){
					this.getDataConfig(res.data.data.patient.id)
					this.getFieldConfig(res.data.data.patient.id)
					this.getOrg(res.data.data.patient.id)
				}
				console.log('666666',res.data);
				this.userName = res.data.data.role.patient_name
				this.dialysis_no= res.data.data.patient.dialysis_no
			},
			async getMobile(params){
				let data = await getMobile(params,true)
				return data
			},
			async getFieldConfig(patient_id){
				let params = {
					patient_id: patient_id
				}
				let res = await getFieldConfig(params)
				let data = {
					filedList:res.data.data
				}
				console.log('77777',data);
				this.setFiledList(data)
			},
			async getDataConfig(patient_id){
				let params = {
					patient_id: patient_id
				}
				let res = await getDataConfig(params)
				let data = {
					configList:res.data.data.list
				}
				console.log('88888',data);
				this.setConfigList(data)
				
			},
			
			async getOrg(patient_id){
				let params = {
					patient_id:patient_id
				}
				let res = await getOrg(params)
				this.orgInfo = res.data.data.orgInfo.org_name
			},
			// 个人信息编辑
			editor(){
				console.log('个人信息');
				wx.navigateTo({
					url:'/pages/my/personage'
				})
			}
		},
		// 1.发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				// imageUrl: this.share.imageUrl,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.shareData.title,
				path: this.shareData.path,
				// imageUrl: this.share.imageUrl,
			}
		},
	}
</script>

<style>
	.my {
		height: 100%;
	}
	.imgMy {
		width: 100%;
		height: 423rpx;
		z-index: -2;
	}
	
	.shareBox {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0px 14rpx 16rpx 0px rgba(56, 104, 244, 0.07);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin: 30rpx auto 0;
	}

	.shareBox button:last-child {
		border-bottom: 0;
	}

	.shareBox view:last-child img {
		width: 48rpx;
		height: 46rpx;
	}

	.share {
		padding: 0 36rpx;
		height: 110rpx;
		border-bottom: 1px solid #EBEEF8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
	}

	button::after {
		border: none;
	}
	.share view {
		display: flex;
		align-items: center;
	}
	.share img {
		width: 56rpx;
		height: 56rpx;
	}
	.share text {
		font-size: 30rpx;
		color: #333333;
		margin-left: 20rpx;
	}

	.rightArrow {
		width: 18rpx !important;
		height: 30rpx !important;
	}

	.signOut {
		padding: 0 36rpx;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 670rpx;
		margin: 0rpx auto 0;
		background: #FFFFFF;
		box-shadow: 0px 14rpx 16rpx 0px rgba(56, 104, 244, 0.07);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
	}

	.signOut view {
		display: flex;
		align-items: center;
	}

	.signOut text {
		font-size: 30rpx;
		color: #333333;
		margin-left: 20rpx;
	}

	.signOut img {
		width: 56rpx;
		height: 56rpx;
	}
	.button_box{
		width: 80%;
		margin: 0 auto;
	}
	.butt{
		background: linear-gradient(to right,#52c995,#79d5ae);
		color: white;
	}
	
</style>
<style lang='scss'>
	.name_box{
		display: flex;
		position: absolute;
		top: 15%;
		left: 10%;
		.img_box{
			width:41%;
			.imgs{
				width: 150rpx;
				height: 150rpx;
				border-radius: 100rpx;
			}
		}
		.right{
			width: 60%;
			.text_box{
				margin-left: 20rpx;
				color: white;
				.name{
					margin-bottom: 20rpx;
					.name_img{
						width: 30rpx;height: 40rpx;
					}
				}
				.sex_box{
					display: inline-block;
					background: #69d9bf;
					width: 60rpx;
					padding: 10rpx;
					margin-right: 10rpx;
					border-radius: 20rpx;
					text-align: center;
				}
			}
		}
	}
</style>