|
|
<template>
|
|
|
<view class="main">
|
|
|
<navBar navTitle="" :hasLogo="true" :hasRight="true" :backToUrl="'/pages/mine/index'" :isSwitchTab="true"
|
|
|
@clickRight="clickRight" :color="'#000000'" :backBackGroundColor="'rgb(105, 154, 112)'" />
|
|
|
<view class="avtor">
|
|
|
<image :src="userInfo.avatar + '?x-oss-process=image/resize,w_158,h_158'"></image>
|
|
|
<view>
|
|
|
<u-button :text="$t('avatar.def')" shape="circle" class="size" style="background-color: #000000;"
|
|
|
@click="backDafult"></u-button>
|
|
|
<u-upload :fileList="fileList" name="1" accept="image" @afterRead="upLoaded">
|
|
|
<u-button :text="$t('avatar.update')" shape="circle" class="size"></u-button>
|
|
|
</u-upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info">
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('userInfo.name') }}</view>
|
|
|
<view class="gray" style="display:flex;justify-content: center;align-items: center;">
|
|
|
<view>{{ userInfo.nickName }}</view>
|
|
|
<text class="rz" @click="showName = true">{{ $t('userInfo.updateName') }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-divider></u-divider>
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('userInfo.createTime') }}</view>
|
|
|
<view class="gray">{{ userInfo.createdAt }}</view>
|
|
|
</view>
|
|
|
<u-divider></u-divider>
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('userInfo.idNum') }}</view>
|
|
|
<view class="gray">{{ userInfo.ID }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info">
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('userInfo.phone') }}</view>
|
|
|
<view class="gray" style="display: flex;">
|
|
|
<u--text mode="phone" :text="userInfo.telNum" format="encrypt"></u--text>
|
|
|
<view class="rz" style="background-color:#676767;" @click="goChangeNum">{{ $t('phone.update') }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="width: 100%; text-align: right;color: #656565;margin-top: 20upx;font-size:20rpx">
|
|
|
*{{ $t('phone.verInfo') }}</view>
|
|
|
<view v-if="!userInfo.realName" class="info" style="margin-top: 20upx;">
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('user.realName') }}</view>
|
|
|
<view class="gray"><text class="rz" @click="goRealName">{{ $t('user.verfy') }}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="userInfo.realName" class="info" style="margin-top: 20upx;">
|
|
|
<view class="item">
|
|
|
<view class="title" style="display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;">
|
|
|
{{ $t('user.username') }}
|
|
|
<view
|
|
|
style="background-color:#699A70 ;border-radius: 40rpx;font-size: 20rpx;padding: 0 15rpx 0 15rpx;color:#FFFFFF;margin-left:10rpx">
|
|
|
{{ $t('user.verDone') }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="gray">
|
|
|
{{ userInfo.realName }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-divider></u-divider>
|
|
|
<view class="item">
|
|
|
<view class="title">{{ $t('user.idNum') }}</view>
|
|
|
<view class="gray">{{ userInfo.idNum }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn">
|
|
|
<u-button :text="$t('account.logout')" shape="circle" class="size"
|
|
|
style=" background-color:#ED6666;color: #fff;border: 0;margin-right: 20upx;"
|
|
|
@click="showDestory = true"></u-button>
|
|
|
<u-button @click="showLogout = true" :text="$t('account.signOut')" shape="circle" class="size"
|
|
|
style="background-color: #3E3E3E;color: #fff;border: 0;"></u-button>
|
|
|
</view>
|
|
|
<u-popup :show="showName" mode="center" @close="showName = false" bgColor="transparent">
|
|
|
<view class="popupLocale-box">
|
|
|
<view class="title" style="color:#FFFFFF;font-size:40rpx">{{ $t('set.name') }}</view>
|
|
|
<view class="item">
|
|
|
<u--input :placeholder="$t('set.input')" shape="circle" v-model="changeName"
|
|
|
style="background-color: rgba(255, 255, 255, 0.5);border: 0;margin-left: 50upx;"
|
|
|
class="setName"></u--input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="display: flex;">
|
|
|
<u-button :text="$t('navbar.back')" color="#EDC466" @click="showName = false"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
<u-button :text="$t('comfrim')" color="#699A70" @click="updateName"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<feedback :showQa="showQa" @closeFeed='closeFeed' />
|
|
|
<u-popup :show="showDestory" mode="center" @close="showDestory = false" bgColor="transparent">
|
|
|
<view class="popupLocale-box">
|
|
|
<view class="title" style="margin-bottom: 0;">
|
|
|
<image style="width: 76upx;height: 76upx;" src="../../../static/image/mine/warning.png"></image>
|
|
|
</view>
|
|
|
<view class="item" style="font-size: 32upx;">{{ $t('logout.info') }}</view>
|
|
|
</view>
|
|
|
<view style="display: flex;">
|
|
|
<u-button :text="$t('navbar.back')" color="#EDC466" @click="showDestory = false"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
<u-button :text="$t('comfrim')" color="#ED6666" @click="goConfirm"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-popup :show="confirmDestory" mode="center" @close="confirmDestory = false" bgColor="transparent">
|
|
|
<view class="popupLocale-box">
|
|
|
<view class="title" style="margin-bottom: 0;">
|
|
|
<image style="width: 76upx;height: 76upx;" src="../../../static/image/mine/confim-warning.png"></image>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="sec">
|
|
|
<view>{{ $t('sendCode.send') }}{{ userInfo.telNum }}</view>
|
|
|
<view class="resend" @tap="getCode">{{ tips }}</view>
|
|
|
</view>
|
|
|
<view class="code-box">
|
|
|
<u-code-input v-model="Code" :focus="focus"></u-code-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="action-box">
|
|
|
<view class="confirm-input">
|
|
|
<view style="margin-bottom: 15upx;color: rgba(255, 255, 255, 0.6);">{{ $t('password.input') }}：
|
|
|
</view>
|
|
|
<u-code-input v-model="actCode"></u-code-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tips">*注意：此操作将彻底删除该账号所有信息</view>
|
|
|
|
|
|
</view>
|
|
|
<view style="display: flex;">
|
|
|
<u-button :text="$t('navbar.back')" color="#ECC366" @click="confirmDestory = false"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
<u-button :text="$t('logout.btn')" color="#ED6666" @click="destoryAccount"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-popup :show="showLogout" mode="center" @close="showLogout = false" bgColor="transparent">
|
|
|
<view class="popupLocale-box">
|
|
|
<view class="title" style="margin-bottom: 0;">
|
|
|
<image style="width: 80upx;height: 80upx;" src="../../../static/image/mine/warning.png"></image>
|
|
|
</view>
|
|
|
<view class="item" style="font-size: 30upx;">{{ $t('signout.info') }}</view>
|
|
|
</view>
|
|
|
<view style="display: flex;">
|
|
|
<u-button :text="$t('navbar.back')" color="#ECC366" @click="showLogout = false"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
<u-button :text="$t('comfrim')" color="#ED6666" @click="logout"
|
|
|
style="width: 260rpx;height: 56rpx;border-radius: 40rpx;margin-top: 30rpx;"></u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-code :seconds="seconds" @start="start" ref="uCode" @change="codeChange"></u-code>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import feedback from '../feedback/feedback.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
feedback
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showName: false,
|
|
|
showQa: false,
|
|
|
showDestory: false,
|
|
|
showLogout: false,
|
|
|
confirmDestory: false,
|
|
|
fileList: [],
|
|
|
tips: '',
|
|
|
seconds: 60,
|
|
|
wathTime: 10,
|
|
|
changeName: '',
|
|
|
focus: false,
|
|
|
Code: '',
|
|
|
actCode: '',
|
|
|
userInfo: {},
|
|
|
// content: ''
|
|
|
};
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getInfo()
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取信息
|
|
|
async getInfo() {
|
|
|
let res = await this.$api.mine.getInfo();
|
|
|
if (res.status === 0) {
|
|
|
this.userInfo = res.data;
|
|
|
} else {
|
|
|
this.$common.msgToast(res.msg, null, 'error');
|
|
|
}
|
|
|
},
|
|
|
// 获取头像
|
|
|
uploadFilePromise(url) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const Authorization = uni.getStorageSync('token');
|
|
|
const userId = uni.getStorageSync('mall-user-info').ID
|
|
|
let a = uni.uploadFile({
|
|
|
url: this.$baseUrl + '/mall/upload/file',
|
|
|
filePath: url,
|
|
|
name: 'file',
|
|
|
formData: {
|
|
|
type: 'image',
|
|
|
source: 'user',
|
|
|
mask: userId
|
|
|
},
|
|
|
header: {
|
|
|
Authorization
|
|
|
},
|
|
|
success: res => {
|
|
|
resolve(res.data);
|
|
|
|
|
|
this.updateInfo({
|
|
|
avatar: JSON.parse(res.data).data.ori_url
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
// 上传头像
|
|
|
async upLoaded(file, lists, name) {
|
|
|
this.uploadFilePromise(file.file.url);
|
|
|
},
|
|
|
// 发送验证码
|
|
|
start() {
|
|
|
uni.$u.toast(this.$t('sendCode'));
|
|
|
},
|
|
|
// 改变提示
|
|
|
codeChange(text) {
|
|
|
this.tips = text;
|
|
|
},
|
|
|
async destoryAccount() {
|
|
|
if (!this.Code || !this.actCode) {
|
|
|
this.$common.msgToast(this.$t('code.actPass'), null, 'error');
|
|
|
return;
|
|
|
}
|
|
|
const data = {
|
|
|
password: this.actCode,
|
|
|
code: this.Code
|
|
|
}
|
|
|
const res = await this.$api.mine.logout(data)
|
|
|
if (res.status === 0) {
|
|
|
console.log(res)
|
|
|
this.confirmDestory = false;
|
|
|
this.logout()
|
|
|
} else {
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
},
|
|
|
// 获取验证码
|
|
|
async getCode() {
|
|
|
if (this.$refs.uCode.canGetCode) {
|
|
|
uni.showLoading({
|
|
|
title: this.$t('sendCode.loading')
|
|
|
});
|
|
|
|
|
|
let res = await this.$api.mine.mineCode({
|
|
|
TelNum: this.userInfo.telNum
|
|
|
});
|
|
|
if (res.status === 0) {
|
|
|
uni.hideLoading();
|
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
|
this.focus = true;
|
|
|
this.$refs.uCode.start();
|
|
|
// 通知验证码组件内部开始倒计时
|
|
|
} else {
|
|
|
uni.hideLoading();
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
} else {
|
|
|
uni.$u.toast(this.$t('sendCode.toast'));
|
|
|
}
|
|
|
},
|
|
|
// 退出登录
|
|
|
logout() {
|
|
|
// uni.removeStorageSync("mall-user-info");
|
|
|
// uni.removeStorageSync("token");
|
|
|
uni.clearStorageSync();
|
|
|
uni.switchTab({
|
|
|
url: '/pages/index/index'
|
|
|
});
|
|
|
},
|
|
|
// 确认销毁
|
|
|
goConfirm() {
|
|
|
this.showDestory = false;
|
|
|
this.confirmDestory = true;
|
|
|
},
|
|
|
// 修改电话
|
|
|
goChangeNum() {
|
|
|
if (!this.userInfo.realName) {
|
|
|
return
|
|
|
}
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/mine/changePhone/changePhone?telNum=' + this.userInfo.telNum
|
|
|
});
|
|
|
},
|
|
|
// 实名认证
|
|
|
goRealName() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/mine/realName/realName'
|
|
|
});
|
|
|
},
|
|
|
// 更新昵称
|
|
|
async updateName() {
|
|
|
await this.updateInfo({
|
|
|
nickName: this.changeName
|
|
|
})
|
|
|
this.showName = false
|
|
|
},
|
|
|
// 更新信息
|
|
|
async updateInfo(data) {
|
|
|
let res = await this.$api.mine.update(data);
|
|
|
if (res.status === 0) {
|
|
|
uni.$u.toast(this.$t('update.succes'));
|
|
|
this.getInfo()
|
|
|
uni.setStorageSync('mall-user-info', this.userInfo);
|
|
|
|
|
|
} else {
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
},
|
|
|
// ，默认头像
|
|
|
backDafult() {
|
|
|
this.updateInfo({
|
|
|
avatar: 'https://dci-file.bj.bcebos.com/shop-main/prod/image/0/user/6ae57adf-7d05-4f84-9053-d39967870327.jpg'
|
|
|
})
|
|
|
|
|
|
},
|
|
|
// 反馈
|
|
|
clickRight() {
|
|
|
this.showQa = true;
|
|
|
},
|
|
|
closeFeed(isShow) {
|
|
|
this.showQa = isShow
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: url('@/static/image/home/new_bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
color: #434343;
|
|
|
}
|
|
|
|
|
|
.sec {
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
top: 120upx;
|
|
|
|
|
|
.resend {
|
|
|
margin-left: 100upx;
|
|
|
color: #fcb462;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.code-box {
|
|
|
margin-top: 70upx;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/ .u-code-input__item {
|
|
|
border: 0;
|
|
|
border-radius: 20upx;
|
|
|
background-color: rgba(255, 255, 255, 0.65);
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
display: grid;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
.avtor {
|
|
|
margin-top: 40upx;
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
image {
|
|
|
width: 160upx;
|
|
|
height: 160upx;
|
|
|
border-radius: 40upx;
|
|
|
}
|
|
|
|
|
|
.size {
|
|
|
color: #fff;
|
|
|
border: 0;
|
|
|
background-color: #699A70;
|
|
|
margin-bottom: 20upx;
|
|
|
width: 348upx;
|
|
|
height: 64upx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.action-box {
|
|
|
|
|
|
margin-top: 50upx;
|
|
|
position: relative;
|
|
|
height: 250upx;
|
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
|
|
|
|
.confirm-input {
|
|
|
position: absolute;
|
|
|
top: 30%;
|
|
|
left: 4%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
width: 600upx;
|
|
|
background: #FFFFFF;
|
|
|
margin-top: 65upx;
|
|
|
padding: 34rpx 40upx;
|
|
|
|
|
|
.item {
|
|
|
font-size: 30upx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.rz {
|
|
|
box-sizing: border-box;
|
|
|
margin-left: 10upx;
|
|
|
font-size: 20rpx;
|
|
|
background-color: #699A70;
|
|
|
color: #FFFFFF;
|
|
|
border-radius: 40upx;
|
|
|
padding: 6rpx 34rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.gray {
|
|
|
color: #878787;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
margin-top: 100upx;
|
|
|
width: 100%;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.popupLocale-box {
|
|
|
background: rgba(0, 0, 0, 0.8);
|
|
|
width: 582rpx;
|
|
|
overflow: hidden;
|
|
|
padding: 30rpx 42rpx;
|
|
|
|
|
|
.title {
|
|
|
font-size: 40rpx;
|
|
|
text-align: center;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.u-button {
|
|
|
width: 260rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 34rpx 0 38rpx 0;
|
|
|
}
|
|
|
|
|
|
.tips {
|
|
|
color: #DC0023;
|
|
|
font-size: 20rpx;
|
|
|
text-align: center;
|
|
|
margin-top: 80rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.setName {
|
|
|
/deep/ .uni-input-placeholder {
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
/deep/ .uni-input-input {
|
|
|
color: #ffffff;
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
}</style>
|