565 lines
13 KiB
Vue
565 lines
13 KiB
Vue
<template>
|
|
<view class="user-profile p-t-10">
|
|
<view class="content">
|
|
<view class="bg-white">
|
|
<view class="user-avatar-box flex-col col-center">
|
|
<uploader @after-read="afterRead" use-slot preview-size="120rpx">
|
|
<image class="user-avatar" :src="userInfo.avatar || '/static/images/portrait_empty.png'" />
|
|
</uploader>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="xs muted flex row-center m-t-20" @tap="getUserProfileFun">更新微信头像</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="row-info flex bdb-line" @tap="changeName">
|
|
<view class="label md">昵称</view>
|
|
<view class="md flex-1">{{ userInfo.nickname }}</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
<view class="row-info flex bdb-line" @tap="changeSex">
|
|
<view class="label md">性别</view>
|
|
<view class="md flex-1" :class="userInfo.sex == 0 ? 'muted' : ''">{{ userInfo.sex }}</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
<view class="row-info flex bdb-line">
|
|
<view class="label md">手机号</view>
|
|
<view
|
|
class="md flex-1"
|
|
:class="{ 'muted': !userInfo.mobile }"
|
|
>{{ userInfo.mobile ? userInfo.mobile : "未绑定" }}</view>
|
|
<!-- #ifdef H5 || APP-PLUS || MP-WEIXIN-->
|
|
<view
|
|
class="bd-btn br60 flex row-center"
|
|
@tap="showModifyMobile"
|
|
>{{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<view class="row-info flex row-between" @tap="showPwdPop">
|
|
<view class="label md">登录密码</view>
|
|
<view class="flex">
|
|
<view class="muted">点击设置</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row-info flex row-between bdb-line mt10" @tap="goToExplain(0)">
|
|
<view class="label md">服务协议</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
<view class="row-info flex row-between bdb-line" @tap="goToExplain(1)">
|
|
<view class="label md">隐私政策</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
<view class="row-info flex row-between bdb-line" @tap="goLicense()">
|
|
<view class="label md">资质信息</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
<view class="row-info flex row-between" @tap="goToExplain(4)">
|
|
<view class="label md">关于我们</view>
|
|
<u-icon name="arrow-right" />
|
|
<!-- <view>v{{ version }}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-primary white save-btn flex row-center lg" @tap="logout">退出登录</view>
|
|
|
|
<!-- 版权信息 -->
|
|
<view class="license xs text-center" v-if="appConfig.copyright_info">
|
|
<view>{{ appConfig.copyright_info }}</view>
|
|
<view>{{ appConfig.icp_number }}</view>
|
|
</view>
|
|
|
|
|
|
<u-popup type="center" closeable v-model="showMobile" mode="center" border-radius="14">
|
|
<view class="modify-container bg-white" v-show="showMobile">
|
|
<view class="title xl text-center">{{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}</view>
|
|
<u-field
|
|
label="+86"
|
|
v-if="userInfo.mobile"
|
|
label-width="100"
|
|
disabled
|
|
v-model="userInfo.mobile"
|
|
></u-field>
|
|
<u-field label="+86" v-else label-width="140" v-model="new_mobile" placeholder="请输入手机号"></u-field>
|
|
<u-field v-model="mobileCode" label="验证码" label-width="140" placeholder="请输入验证码">
|
|
<view slot="right" class="primary send-code-btn br60 flex row-center" @tap="sendSmsFun">
|
|
<u-verification-code
|
|
:keep-running="true"
|
|
unique-key="mobile"
|
|
ref="uCode"
|
|
@change="codeChange"
|
|
></u-verification-code>
|
|
<view class="sm">{{ codeTips }}</view>
|
|
</view>
|
|
</u-field>
|
|
<u-field
|
|
label="新手机号"
|
|
v-if="userInfo.mobile"
|
|
label-width="140"
|
|
placeholder="请输入新的手机号码"
|
|
v-model="new_mobile"
|
|
></u-field>
|
|
<view class="primary m-t-10 xs">{{ userInfo.mobile ? '更改' : '绑定' }}手机号码成功后，您的账号将会变更为该设置号码</view>
|
|
<view class="btn bg-primary white flex row-center" @tap="changeUserMobileFun">确定</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<u-popup v-model="showNickName" :closeable="true" mode="center" border-radius="14">
|
|
<view class="modify-container bg-white" v-show="showNickName">
|
|
<view class="title xl text-center">修改用户名</view>
|
|
<u-field v-model="newNickname" label="新昵称" placeholder="请输入新的昵称"></u-field>
|
|
<view class="btn bg-primary white flex row-center" @tap="changeNameConfirm">确定</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
<u-popup v-model="showPwd" closeable mode="center" border-radius="14">
|
|
<view class="modify-container bg-white">
|
|
<view class="title xl text-center">设置密码</view>
|
|
<u-field label="+86" disabled label-width="100" v-model="userInfo.mobile"></u-field>
|
|
<u-field v-model="pwdCode" label="验证码" label-width="140" placeholder="请输入验证码">
|
|
<view slot="right" class="primary send-code-btn br60 flex row-center" @tap="sendSmsFun">
|
|
<u-verification-code
|
|
unique-key="password"
|
|
:keep-running="true"
|
|
ref="uCode"
|
|
@change="codeChange"
|
|
></u-verification-code>
|
|
<view class="sm">{{ codeTips }}</view>
|
|
</view>
|
|
</u-field>
|
|
<u-field label="设置密码" label-width="140" type="password" placeholder="请输入新密码" v-model="pwd"></u-field>
|
|
<u-field
|
|
label="确认密码"
|
|
label-width="140"
|
|
type="password"
|
|
placeholder="再次输入新密码确认"
|
|
v-model="comfirmPwd"
|
|
></u-field>
|
|
<view class="btn bg-primary white flex row-center" @tap="forgetPwdFun">确定</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<u-picker
|
|
mode="selector"
|
|
v-model="showPicker"
|
|
:default-selector="[0]"
|
|
:range="sexList"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
userLogout,
|
|
getUserInfo,
|
|
getWxMnpMobile,
|
|
setUserInfo,
|
|
setWechatInfo,
|
|
changeUserMobile
|
|
} from "@/api/user";
|
|
import {
|
|
baseURL,
|
|
version
|
|
} from '@/config/app';
|
|
import {
|
|
sendSms,
|
|
forgetPwd,
|
|
} from '@/api/app'
|
|
import {
|
|
SMSType
|
|
} from '@/utils/type'
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import {
|
|
uploadFile,
|
|
isWeixinClient,
|
|
trottle,
|
|
|
|
} from '@/utils/tools'
|
|
import {
|
|
getWxCode,
|
|
getUserProfile
|
|
} from '@/utils/login'
|
|
|
|
const FieldType = {
|
|
NONE: '',
|
|
SEX: 'sex',
|
|
NICKNAME: 'nickname',
|
|
AVATAR: 'avatar',
|
|
MOBILE: 'mobile'
|
|
}
|
|
export default {
|
|
name: 'userProfile',
|
|
data() {
|
|
return {
|
|
action: baseURL + '/api/file/formimage',
|
|
fileList: [],
|
|
userInfo: {},
|
|
new_mobile: '',
|
|
pwdCode: '',
|
|
mobileCode: '',
|
|
newNickname: '',
|
|
sexList: ['男', '女'],
|
|
fieldType: FieldType.NONE,
|
|
showPicker: false,
|
|
showMobile: false,
|
|
showPwd: false,
|
|
showNickName: false,
|
|
codeTips: '',
|
|
canSendSms: true,
|
|
pwd: '',
|
|
comfirmPwd: '',
|
|
smsType: '',
|
|
code: '',
|
|
version
|
|
}
|
|
},
|
|
methods: {
|
|
codeChange(text) {
|
|
this.codeTips = text;
|
|
},
|
|
onSuccess(e) {
|
|
console.log(e)
|
|
},
|
|
// 文件上传读取
|
|
afterRead(e) {
|
|
const file = e
|
|
console.log(file)
|
|
uni.showLoading({
|
|
title: '正在上传中...',
|
|
mask: true
|
|
});
|
|
file.forEach(item => {
|
|
uploadFile(item.path).then(res => {
|
|
uni.hideLoading();
|
|
this.fieldType = FieldType.AVATAR
|
|
this.setUserInfoFun(res.base_uri)
|
|
});
|
|
})
|
|
},
|
|
// 更新小程序头像信息
|
|
async getUserProfileFun() {
|
|
const {
|
|
userInfo
|
|
} = await getUserProfile()
|
|
const {
|
|
avatarUrl,
|
|
nickName,
|
|
gender
|
|
} = userInfo
|
|
const {
|
|
msg,
|
|
code
|
|
} = await setWechatInfo({
|
|
nickname: nickName,
|
|
avatar: avatarUrl,
|
|
sex: gender
|
|
})
|
|
if (code == 1) {
|
|
this.$toast({
|
|
title: msg
|
|
});
|
|
this.getUserInfoFun()
|
|
}
|
|
},
|
|
|
|
// end
|
|
logout() {
|
|
// 退出登录
|
|
userLogout().then(res => {
|
|
if (res.code == 1) {
|
|
this.$store.commit("logout");
|
|
this.$toast({
|
|
title: '退出成功'
|
|
})
|
|
setTimeout(() => {
|
|
this.$Router.replaceAll('/pages/index/index')
|
|
}, 500)
|
|
}
|
|
})
|
|
},
|
|
goToExplain(value) {
|
|
this.$Router.push({
|
|
path: '/bundle/pages/server_explan/server_explan',
|
|
query: {
|
|
type: value
|
|
}
|
|
})
|
|
},
|
|
goLicense() {
|
|
this.$Router.push({
|
|
path: '/bundle/pages/license/license',
|
|
query: {
|
|
id: ''
|
|
}
|
|
})
|
|
},
|
|
|
|
// 发送短信
|
|
sendSmsFun(type) {
|
|
if (!this.$refs.uCode.canGetCode) return
|
|
sendSms({
|
|
mobile: this.userInfo.mobile || this.new_mobile,
|
|
key: this.smsType
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.$toast({
|
|
title: res.msg
|
|
});
|
|
this.$refs.uCode.start();
|
|
}
|
|
})
|
|
},
|
|
getUserInfoFun() {
|
|
getUserInfo().then(res => {
|
|
if (res.code == 1) {
|
|
this.userInfo = res.data;
|
|
}
|
|
})
|
|
},
|
|
// 更换手机号
|
|
showModifyMobile() {
|
|
this.new_mobile = '';
|
|
this.showMobile = true
|
|
this.smsType = this.userInfo.mobile ? SMSType.CHANGE_MOBILE : SMSType.BIND
|
|
},
|
|
changeUserMobileFun() {
|
|
if (!this.mobileCode) {
|
|
this.$toast({
|
|
title: '请输入验证码'
|
|
})
|
|
return;
|
|
}
|
|
if (!this.new_mobile) {
|
|
this.$toast({
|
|
title: '请输入新的手机号码'
|
|
})
|
|
return;
|
|
}
|
|
|
|
changeUserMobile({
|
|
mobile: this.userInfo.mobile,
|
|
new_mobile: this.new_mobile,
|
|
code: this.mobileCode,
|
|
action: this.userInfo.mobile ? 'change' : 'binding'
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.showMobile = false;
|
|
this.$toast({
|
|
title: res.msg
|
|
})
|
|
this.getUserInfoFun();
|
|
}
|
|
})
|
|
},
|
|
// 修改用户信息
|
|
setUserInfoFun(value) {
|
|
setUserInfo({
|
|
field: this.fieldType,
|
|
value: value
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.$toast({
|
|
title: res.msg
|
|
});
|
|
this.getUserInfoFun()
|
|
|
|
}
|
|
})
|
|
},
|
|
onConfirm(value) {
|
|
this.setUserInfoFun(value[0] + 1);
|
|
this.showPicker = false;
|
|
},
|
|
changeSex(e) {
|
|
this.showPicker = true;
|
|
this.fieldType = FieldType.SEX;
|
|
},
|
|
|
|
// 修改密码
|
|
showPwdPop() {
|
|
if (!this.userInfo.mobile) {
|
|
this.$toast({
|
|
title: '请绑定手机后再设置密码'
|
|
})
|
|
return;
|
|
}
|
|
this.smsType = SMSType.FINDPWD
|
|
this.showPwd = true
|
|
},
|
|
forgetPwdFun() {
|
|
let {
|
|
pwdCode,
|
|
pwd,
|
|
comfirmPwd
|
|
} = this;
|
|
if (!pwdCode) {
|
|
this.$toast({
|
|
title: '请输入短信验证码'
|
|
});
|
|
return;
|
|
}
|
|
if (!pwd) {
|
|
this.$toast({
|
|
title: '请输入新密码'
|
|
});
|
|
return;
|
|
}
|
|
if (!comfirmPwd) {
|
|
this.$toast({
|
|
title: '再次输入新密码确认'
|
|
});
|
|
return;
|
|
}
|
|
if (pwd != comfirmPwd) {
|
|
this.$toast({
|
|
title: '两次密码输入不一致'
|
|
});
|
|
return;
|
|
}
|
|
let data = {
|
|
mobile: this.userInfo.mobile,
|
|
code: pwdCode,
|
|
password: pwd,
|
|
repassword: comfirmPwd
|
|
};
|
|
forgetPwd(data).then(res => {
|
|
if (res.code == 1) {
|
|
this.showPwd = false;
|
|
this.$toast({
|
|
title: '设置密码成功'
|
|
});
|
|
this.getUserInfoFun();
|
|
}
|
|
})
|
|
},
|
|
// 修改昵称
|
|
changeName() {
|
|
this.fieldType = FieldType.NICKNAME;
|
|
this.newNickname = '';
|
|
this.showNickName = true;
|
|
},
|
|
changeNameConfirm() {
|
|
this.setUserInfoFun(this.newNickname);
|
|
this.showNickName = false;
|
|
},
|
|
// 微信获取手机号
|
|
// #ifdef MP-WEIXIN
|
|
async getPhoneNumber(e) {
|
|
console.log(e, this.code)
|
|
const {
|
|
encryptedData,
|
|
iv
|
|
} = e.detail;
|
|
const params = {
|
|
code: this.code,
|
|
encrypted_data: encryptedData,
|
|
iv
|
|
}
|
|
this.fieldType = FieldType.MOBILE
|
|
if (encryptedData) {
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await getWxMnpMobile(params)
|
|
if (code == 1) {
|
|
this.$toast({
|
|
title: msg
|
|
});
|
|
// #ifdef MP-WEIXIN
|
|
getWxCode().then(res => {
|
|
this.code = res
|
|
})
|
|
// #endif
|
|
this.getUserInfoFun()
|
|
}
|
|
}
|
|
},
|
|
// #endif
|
|
},
|
|
onLoad() {
|
|
this.getUserInfoFun()
|
|
// #ifdef MP-WEIXIN
|
|
getWxCode().then(res => {
|
|
this.code = res
|
|
})
|
|
// #endif
|
|
this.getUserProfileFun = trottle(this.getUserProfileFun, 500, this)
|
|
},
|
|
computed: {
|
|
...mapGetters(['token', 'appConfig'])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.user-profile {
|
|
min-height: calc(100vh - env(safe-area-inset-bottom));
|
|
display: flex;
|
|
flex-direction: column;
|
|
.content {
|
|
// flex: 1;
|
|
border-top-left-radius: 28rpx;
|
|
border-top-right-radius: 28rpx;
|
|
|
|
.user-avatar-box {
|
|
padding: 30rpx;
|
|
|
|
.user-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.row-info {
|
|
padding: 30rpx 20rpx;
|
|
|
|
.label {
|
|
width: 180rpx;
|
|
}
|
|
|
|
.bd-btn {
|
|
padding: 8rpx 24rpx;
|
|
border: 1px solid $-color-primary;
|
|
color: $-color-primary;
|
|
}
|
|
}
|
|
|
|
.bdb-line {
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
}
|
|
}
|
|
.license {
|
|
margin-top: 80rpx;
|
|
color: #a7a7a7;
|
|
}
|
|
|
|
.save-btn {
|
|
margin: 40rpx 54rpx 0;
|
|
height: 88rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.modify-container {
|
|
padding: 30rpx;
|
|
width: 620rpx;
|
|
border-radius: 30rpx;
|
|
|
|
.title {
|
|
padding: 26rpx 0rpx;
|
|
}
|
|
|
|
.btn {
|
|
height: 80rpx;
|
|
border-radius: 20rpx;
|
|
margin: 60rpx 50rpx 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|