luban-mall/pagesB/ucenter/ucenter.vue

<template>
	<view :class="editRealName&editMobile&editArea&editAddress?'':'pad-b150'">
		<status-nav :ifReturn="true" navBarTitle="个人中心" :marginBottom="0"></status-nav>
		<view class="ucenter">
			<view class="item flex">
				<view class="title">头像</view>
				<view class="img"><!-- @tap="changeHeadImg" -->
					<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/public/icon-my-more.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/public/icon-my-more.png" mode="widthFix"></image>
				</view>
				<button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></button>
			</view>
			<view class="item flex" @tap="openEdit('area')">
				<view class="title">联系地址</view>
				<input class="msg" type="text" v-model="area" disabled="true">
				<view class="more">
					<image src="/static/public/icon-my-more.png" mode="widthFix"></image>
				</view>
			</view>
			<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/public/icon-my-more.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex" v-if="businessCode!==''">
				<view class="title">会员码</view>
				<view class="msg">{{businessCode}}</view>
			</view>
		</view>
		<!-- 修改弹窗 -->
		<view class="pull-all-bg" v-show="isOpen" @tap="closeEdit"></view>
		<view class="edit-box-bg"v-if="isOpen">
			<view class="edit-box">
				<view class="title">{{title}}</view>
				<view class="subtitle">{{subtitle}}</view>
				<input class="input" type="text" v-model="msg" :placeholder="placeholder" placeholder-color="#c9c9c9" v-if="type=='input'">
				<textarea class="textarea" v-model="msg" :placeholder="placeholder" placeholder-color="#c9c9c9" v-if="type=='textarea'"></textarea>
				<view class="edit-btns">
					<view class="btn" @tap="closeEdit">取消</view>
					<view class="btn" @tap="submitEdit(field,msg)">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav
		},
		data() {
			return {
				headImgUrl:'', //头像链接
				nickName:'', //昵称
				businessCode:'', //会员码
				realName:'',//真实姓名
				mobile:'',//电话
				area:'',//联系地址
				address:'',//详细地址
				isOpen:false, //是否显示
				title:'', //标题
				subtitle:'', //副标题
				msg:'', //修改内容
				field:'', //修改位置
				type:'input',
				placeholder:'', //默认信息
				headImg:'', //缓存头像链接
				cacheBusinessId:-1, //商户id
			}
		},
		computed:{
			
		},
		onLoad(op) {
			if(op.business_id){
				this.cacheBusinessId = op.business_id;
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.getUserData();
						userInfoEv();
					}
				})
			}else{
				this.getUserData();
				userInfoEv();
			}
		},
		methods: {
			// 获取用户信息
			getUserData(){
				uni.showLoading();
				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.area;
						this.address= res.data.address;
					}
					uni.hideLoading();
				})
			},
			
			// 选择修改信息
			openEdit(type){
				if(type == 'real_name'){
					this.title = '姓名';
					this.subtitle = '姓名';
					this.placeholder = this.realName;
					this.isOpen = true;
					this.type='input';
					this.field = 'real_name';
				}
				if(type == 'mobile'){
					this.title = '电话';
					this.subtitle = '电话';
					this.placeholder = this.mobile;
					this.isOpen = true;
					this.type='input';
					this.field = 'mobile';
				}
				if(type == 'area'){
					this.title = '联系地址';
					this.subtitle = '联系地址';
					this.placeholder = this.area;
					this.isOpen = true;
					this.type='input';
					this.field = 'area';
				}
				if(type == 'address'){
					this.title = '详细地址';
					this.subtitle = '详细地址';
					this.placeholder = this.address;
					this.isOpen = true;
					this.type='textarea';
					this.field = 'address';
				}
			},
			// 提交修改
			submitEdit(field,value){
				uni.showLoading();
				if(field!==''&&value!==''){
					let params={
						field:field,
						value:value
					}
					this.$requst.post('/api/user/update-info',params).then(res=>{
						if(res.code==0) {
							this.$toolAll.tools.showToast('修改成功');
							// 关闭弹窗
							this.closeEdit();
							// 刷新用户信息
							this.getUserData();
						}
						uni.hideLoading();
					})
				}else{
					this.$toolAll.tools.showToast('您没有更改信息');
					// 关闭弹窗
					this.closeEdit();
				}
				
			},
			
			// 关闭弹窗
			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);
						}
					})
					
				}  
			},
			// 选择图片
			changeHeadImg(){
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album','camera'], //从相册选择
					success: (res)=> {
						this.headImg = res.tempFilePaths[0];
						this.uploadImg();
					}
				})
			},
			// 上传图片
			uploadImg(){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/file/upload/image',{path:this.headImg}).then(res=>{
					if(res.code==0) {
						this.headImgUrl = this.$hostHttp+res.data.src;
						// 修改信息
						this.submitEdit('headimgurl',this.headImgUrl);
					}
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	
</style>