502 lines
13 KiB
Vue
502 lines
13 KiB
Vue
<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>
|