leave-unused/pages/my/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" @tap="openEdit('nick_name')">
					<view class="title">昵称</view>
					<input class="msg" type="text" v-model="nickName" disabled="true">
					<view class="more">
						<image src="/static/icon-join.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item flex" style="position: relative;" @tap="this.$toolAll.tools.showToast('暂不支持修改手机号');">
					<view class="title">联系电话</view>
					<input class="msg" type="number" v-model="mobile" disabled="true">
					<view class="more">
						<image src="/static/icon-join.png" mode="widthFix"></image>
					</view>
					<!-- <button class="get-phone-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"></button> -->
				</view>
			</view>
		</view>
		<!-- 修改信息 -->
		<view class="pull-bg" style="background-color: rgba(0,0,0,.3);"  v-show="isOpen" @tap="closeEdit"></view>
		<view class="pull-box-bg border-box" v-if="isOpen">
			<view class="pull-box radius20 background-white font30">
				<view class="title font32">{{title}}</view>
				<view class="pull-list">
					<view class="pull-item mar-s20">
						<view class="tips color-8c">{{subtitle}}</view>
						<input class="input" type="text" v-model="msg" :placeholder="placeholder" placeholder-style="color:#666666">
					</view>
				</view>
				<view class="submit-btn font32 background-blue radius30 color-ff mar-s50 flex" @tap="submitEdit">提交修改</view>
				<view class="close-btn" @tap="closeEdit">
					<image src="/static/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:'', //会员码
				mobile:'',//电话
				isOpen:false, //是否显示
				title:'', //标题
				subtitle:'', //副标题
				msg:'', //修改内容
				field:'', //修改位置
				placeholder:'', //默认信息
				headImg:'', //缓存头像链接
				isLoading:false,
			}
		},
		onLoad(op) {
			this.getUserData();
		},
		methods: {
			// 获取用户信息
			getUserData(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/v1/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.mobile= res.data.mobile;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 选择修改信息
			openEdit(type){
				if(type == 'nick_name'){
					this.title = '昵称';
					this.subtitle = '昵称';
					this.placeholder = '请输入昵称';
					this.msg = this.nickName==''?'':this.nickName;
					this.isOpen = true;
					this.field = 'nick_name';
				}
			},
			// 提交修改
			submitEdit(){
				if(this.field == 'nick_name'){
					var params = {
						field:'nickname',
						value:this.msg
					}
				}
				uni.showLoading({
					title:'修改中'
				});
				if(params){
					this.$requst.post('/api/v1/user/update-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/v1/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 scoped>
	.ucenter-bg{
		width: 100%;
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}
	.ucenter{
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.ucenter .item{
		flex-wrap: nowrap;
		align-items: center;
		height: 100rpx;
		position: relative;
	}
	.ucenter .item .title{
		width: 170rpx;
		font-size: 30rpx;
		color: #000000;
	}
	.ucenter .item .more{
		margin-left: 20rpx;
	}
	.ucenter .item .more image{
		width: 14rpx;
		height: 26rpx;
	}
	.ucenter .item .msg{
		width: calc(100% - 204rpx);
		height: 60rpx;
		font-size: 24rpx;
		color: #8c8c9b;
		text-align: right;
	}
	
	
	.ucenter .item-first{
		justify-content: space-between;
		height: 146rpx;
		padding: 5rpx 0;
	}
	.ucenter .item .img{
		width: 136rpx;
		height: 136rpx;
		border-radius: 100%;
		margin-right: 34rpx;
		overflow: hidden;
	}
	.ucenter .item .img image{
		width: 136rpx;
		min-height: 136rpx;
	}
	.ucenter .get-phone-btn{
		display: block;
		width: 100%;
		height: 100rpx;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
	}
	/* 弹窗 */
	.pull-bg{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.47);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.pull-box-bg{
		padding: 34rpx 60rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		top: 50%;
		z-index: 999;
		transform: translateY(-50%);
	}
	.pull-box{
		padding: 40rpx 60rpx;
		line-height: 1.5;
		position: relative;
	}
	.pull-box .title{
		text-align: center;
		font-weight: bold;
	}
	.pull-box .input{
		height: 80rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.pull-box .close-btn{
		width: 76rpx;
		height: 76rpx;
		position: absolute;
		top: -34rpx;
		right: -30rpx;
	}
	.pull-box .close-btn>image{
		width: 100%;
	}
	.pull-box .submit-btn{
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	.pull-box .submit-btn>image{
		width: 56rpx;
		margin-right: 30rpx;
	}
	.pull-box .addr-input{
		width: 100%;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.pull-box .addr-input .input-box{
		justify-content: space-between;
		align-items: center;
		width: calc(33% - 20rpx);
		border-bottom: 2rpx solid #e6e6e6;
	}
	.pull-box .addr-input .input-box .input-flex{
		width: calc(100% - 35rpx);
		height: 80rpx;
	}
	.pull-box .addr-input .input-box>image{
		width: 15rpx;
		height: 28rpx;
	}
	.pull-box .shear-btn{
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
</style>