mall-laonong/pagesB/ucenter/ucenter.vue

<template>
	<view v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="个人中心" :marginBottom="0"></status-nav>
		<view class="ucenter-bg border-box" :style="{'min-height':windoHeight - statusHeight - 50+'px'}">
			<view class="ucenter">
				<view class="item item-first flex">
					<view class="title">头像</view>
					<view class="img">
						<image :src="headImgUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex">
					<view class="title">昵称</view>
					<view class="msg">{{nickName}}</view>
				</view>
				<view class="item flex" @tap="openEdit('real_name')">
					<view class="title">真实姓名</view>
					<input class="msg" type="text" v-model="realName" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex" style="position: relative;">
					<view class="title">联系电话</view>
					<input class="msg" type="number" v-model="mobile" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
					<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></button>
				</view>
				<picker mode="region" @change="change">
					<view class="item flex">
						<view class="title">联系地址</view>
						<input class="msg" type="text" v-model="area" disabled="true">
						<view class="more">
							<image src="/static/icon/icon-join.png" mode="widthFix"></image>
						</view>
					</view>
				</picker>
				<view class="item flex" @tap="openEdit('address')">
					<view class="title">详细地址</view>
					<input class="msg" type="text" v-model="address" disabled="true">
					<view class="more">
						<image src="/static/icon/icon-join.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 修改信息 -->
		<view class="pull-bg" style="background-color: rgba(0,0,0,.3);"  v-show="isOpen" @tap="closeEdit"></view>
		<view class="vip-box-bg border-box" v-if="isOpen">
			<view class="vip-box radius20 background-white font30">
				<view class="title">{{title}}</view>
				<view class="vip-list">
					<view class="vip-item mar-s20">
						<view class="tips color-99">{{subtitle}}</view>
						<input class="input" type="text" v-model="msg" :placeholder="placeholder" placeholder-style="color:#000000">
					</view>
				</view>
				<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEdit">提交修改</view>
				<view class="close-btn" @tap="closeEdit">
					<image src="/static/icon/close-btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windoHeight:uni.getSystemInfoSync().windowHeight,
				statusHeight:uni.getSystemInfoSync().statusBarHeight,
				headImgUrl:'', //头像链接
				nickName:'', //昵称
				businessCode:'', //会员码
				realName:'',//真实姓名
				mobile:'',//电话
				area:'',//联系地址
				address:'',//详细地址
				isOpen:false, //是否显示
				title:'', //标题
				subtitle:'', //副标题
				msg:'', //修改内容
				field:'', //修改位置
				placeholder:'', //默认信息
				headImg:'', //缓存头像链接
				province:'', //省
				city:'', //市
				county:'', //区
				isLoading:false,
			}
		},
		onLoad(op) {
			this.getUserData();
		},
		onShow() {
			
		},
		methods: {
			// 获取用户信息
			getUserData(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/user/info').then(res=>{
					console.log(res,'用户信息')
					if(res.code==0) {
						this.headImgUrl = res.data.headimgurl;
						this.nickName = res.data.nickname;
						this.businessCode = res.data.business_code;
						this.realName= res.data.real_name;
						this.mobile= res.data.mobile;
						this.area= res.data.province+res.data.city+res.data.county;
						this.address= res.data.address;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 选择修改信息
			openEdit(type){
				if(type == 'real_name'){
					this.title = '真实姓名';
					this.subtitle = '真实姓名';
					this.placeholder = '请输入真实姓名';
					this.msg = this.realName==''?'':this.realName;
					this.isOpen = true;
					this.field = 'real_name';
				}
				if(type == 'address'){
					this.title = '详细地址';
					this.subtitle = '详细地址';
					this.placeholder = '请输入详细地址';
					this.msg = this.address==''?'':this.address;
					this.isOpen = true;
					this.field = 'address';
				}
			},
			// 选择省市区
			change(e){
				this.area = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.county = e.detail.value[2];
				this.field = 'area'
				setTimeout(()=>{
					this.submitEdit()
				},200)
			},
			// 提交修改
			submitEdit(){
				if(this.field == 'real_name'){
					var params = {
						real_name:this.msg
					}
					console.log(params,123)
				}
				if(this.field == 'address'){
					var params = {
						address:this.msg
					}
				}
				if(this.field == 'area'){
					var params = {
						province:this.province,
						city:this.city,
						county:this.county
					}
				}
				
				uni.showLoading({
					title:'修改中'
				});
				if(params){
					this.$requst.post('/api/user/edit-info',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('修改成功');
							// 关闭弹窗
							this.closeEdit();
							// 刷新用户信息
							this.getUserData();
						}
					})
				}else{
					this.$toolAll.tools.showToast('您没有更改信息');
					// 关闭弹窗
					this.closeEdit();
				}
				uni.hideLoading();
			},
			
			// 关闭弹窗
			closeEdit(){
				this.title = '';
				this.subtitle = '';
				this.msg='';
				this.isOpen = false;
				this.type=''
			},
			
			// 获取授权信息
			onGetPhoneNumber(e){  
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){ //用户决绝授权  
					this.$toolAll.tools.showToast('您已拒绝授权');
				}else{ //允许授权  
					let params={
						iv:e.detail.iv,
						encryptedData:e.detail.encryptedData
					}
					this.$requst.post('/api/user/bind-phone',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('绑定成功');
							// 刷新用户信息
							this.getUserData();
						}else{
							this.$toolAll.tools.showToast(res.msg);
						}
					})
					
				}  
			},
		}
	}
</script>

<style>
	
</style>