手机号切换

pages/usercenter/usercenter.vue

@@ -1,9 +1,26 @@
 <template>
 	<view class="page-usercenter">
-		<view class="user-wrapper" @click="toUserModify">
+		<view class="user-wrapper" v-if="uinfo">
-			<img :src="uinfo.user_avatar" class="avator" v-if="uinfo.user_avatar">
+			<view class="change-account">
-			<img :src="cssUrl+'user_grey.svg'" class="avator" v-else>
+				<img :src="cssUrl+'switch.svg'">
-			<view class="ucode PfScMedium over2" v-if="uinfo.user_code">{{uinfo.user_code}}</view>
+				切换账号
+				<button class="getphone-box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
+			</view>
+
+			<view class="user-info-box flex">
+				<view class="user-left">
+					<img :src="uinfo.user_avatar" class="avator" v-if="uinfo.user_avatar">
+					<img :src="cssUrl+'user_grey.svg'" class="avator" v-else>
+					<view class="ucode PfScMedium over2" v-if="uinfo.user_code">{{uinfo.user_code}}</view>
+				</view>
+
+				<view class="user-right">
+					<view class="realname PfScMedium">{{uinfo.realname ? uinfo.realname : '未设置真实姓名'}}</view>
+					<view class="phone">{{uinfo.phone ? '手机号：'+uinfo.phone : '未设置手机号'}}</view>
+				</view>
+			</view>
+
+
 		</view>
 
 		<view class="menu">
@@ -28,7 +45,7 @@
 		data() {
 			return {
 				cssUrl:this.cssUrl,
-				uinfo:{}
+				uinfo:false
 			}
 		},
 		components:{
@@ -52,7 +69,22 @@
 			},
 			toUserModify(){
 				this.$nav.navToPath('/pages/user_modify/user_modify')
-			}
+			},
+			getPhoneNumber(e) {
+				if (e.detail.errMsg === 'getPhoneNumber:ok') {
+					this.$http.req('api/user/bind_phone', {phonecode:e.detail.code}, 'POST').then(data=>{
+						if(data == -1) return
+						this.getUser()
+						uni.showToast({
+							title: '切换成功',
+							icon: 'none',
+							mask: true
+						})
+					});
+				} else {
+
+				}
+			},
 		}
 	}
 </script>
@@ -63,12 +95,52 @@
 		height: 100vh;
 		overflow-y: auto;
 		background: #F8F8F8;
+		.user-wrapper{
+			margin: 24rpx 36rpx;
+			.change-account{
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				color: #333333;
+				column-gap: 12rpx;
+				height: 39rpx;
+				width: 100%;
+				position: relative;
+				justify-content: flex-end;
+				.getphone-box{
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					z-index: 10;
+					opacity: 0;
+				}
+				img{
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+			.user-info-box{
+				align-items: center;
+				column-gap: 42rpx;
+				.realname{
+					font-size: 38rpx;
+					font-weight: 500;
+					color: #333333;
+				}
+				.phone{
+					font-size: 26rpx;
+					color: #666666;
+					margin-top: 24rpx;
+				}
+			}
+		}
 		.avator{
 			display: block;
 			width: 160rpx;
 			height: 160rpx;
 			border-radius: 100%;
-			margin: 20rpx auto 24rpx;
 		}
 		.ucode{
 			width: 80%;