373 lines
8.9 KiB
Vue
373 lines
8.9 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="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:#000000">
|
|
</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:'', //会员码
|
|
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 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>
|