232 lines
6.7 KiB
Vue
232 lines
6.7 KiB
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>
|