<template>
|
<div class="safety">
|
<assets-head :backFunc="() => $router.push('/userCenter')" />
|
<div class="content">
|
<div class="title textColor">{{ $t('安全') }}</div>
|
<div class="tit1 textColor">{{ $t('双重身份认证') }}</div>
|
<div class="tit2">{{ $t('为了保护您的财产，建议至少开启一个双重身份验证（2FA）。') }}</div>
|
</div>
|
<van-grid :column-num="2" :gutter="12" class="verify">
|
<van-grid-item v-for="(item, index) in verifyList" :key="index"
|
@click="gotoVerify(item.url, item.isVerify, item.type)">
|
<div class="verifyBox">
|
<div class="left">
|
<div class="imgBox">
|
<img v-if="item.isVerify" :src="item.icon.verify" alt="">
|
<img v-else :src="item.icon.verifyno" alt="">
|
</div>
|
</div>
|
<div class="right icon">
|
<img src="@/assets/image/userCenter/more.png" alt="">
|
</div>
|
</div>
|
<div class="name textColor">{{ item.title }}</div>
|
</van-grid-item>
|
</van-grid>
|
<div class="content">
|
<div v-for="(obj, index) in list" :key="index" @click="$router.push(obj.url)"
|
class="flex justify-between items-center h-102 text-black ">
|
<div class="textColor">{{ obj.name }}</div>
|
<div class="icon"><img src="@/assets/image/userCenter/more.png" alt=""></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import { Grid, GridItem } from 'vant'
|
import Axios from "@/API/userCenter.js";
|
export default {
|
props: {
|
|
},
|
components: {
|
assetsHead,
|
[Grid.name]: Grid,
|
[GridItem.name]: GridItem
|
},
|
data() {
|
return {
|
goHome: true,
|
verifyList: [
|
{
|
title: this.$t('谷歌验证器'),
|
name: "google",
|
icon: {
|
verifyno: require('@/assets/image/userCenter/gooleVerifyno.png'),
|
verify: require('@/assets/image/userCenter/gooleVerify.png')
|
},
|
isVerify: false,
|
url: '/bindVerify?type=3',
|
type: 3
|
},
|
// {
|
// title: this.$t('手机验证'),
|
// name: "phone",
|
// icon: {
|
// verifyno: require('@/assets/image/userCenter/phoneVerifyno.png'),
|
// verify: require('@/assets/image/userCenter/phoneVerify.png')
|
// },
|
// isVerify: false,
|
// url: '/bindVerify?type=1',
|
// type: 1
|
// },
|
{
|
title: this.$t('邮箱验证'),
|
name: "email",
|
icon: {
|
verifyno: require('@/assets/image/userCenter/emialVerifyno.png'),
|
verify: require('@/assets/image/userCenter/emialVerify.png')
|
},
|
isVerify: false,
|
url: '/bindVerify?type=2',
|
type: 2
|
}
|
],
|
list: [
|
{
|
name: this.$t('修改登录密码'),
|
url: "/changePassword"
|
},
|
{
|
name: this.$t('修改资金密码'),
|
url: "/changeFundsPassword"
|
},
|
{
|
name: this.$t('人工重置'),
|
url: "/resetVerify?type=0"
|
}
|
],
|
}
|
},
|
mounted() {
|
this.getVerifTarget()
|
},
|
methods: {
|
getVerifTarget() {
|
Axios.getVerifTarget({
|
}).then((res) => {
|
this.dataRest(res.data)
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
dataRest(data) {
|
this.verifyList.forEach(item => {
|
if (item.name == 'google') {
|
item.isVerify = data.google_auth_bind;
|
} else if (item.name == 'phone') {
|
item.isVerify = data.phone_authority;
|
} else if (item.name == 'email') {
|
item.isVerify = data.email_authority;
|
}
|
})
|
},
|
gotoVerify(url, isVerify, type) {
|
if (isVerify) {
|
this.$router.push(`/changeVerify?type=${type}`);
|
} else {
|
this.$router.push(url)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.safety {
|
width: 100%;
|
box-sizing: border-box;
|
|
::v-deep .van-grid-item__content {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 24px;
|
margin-bottom: 24px;
|
}
|
|
.content {
|
padding: 0 32px;
|
}
|
|
.tit1 {
|
font-size: 30px;
|
font-weight: 400;
|
}
|
|
.tit2 {
|
color: #868D9A;
|
font-size: 24px;
|
margin-top: 9px;
|
}
|
|
.verify {
|
font-size: 24px;
|
color: #222832;
|
margin-top: 42px;
|
font-weight: 700;
|
|
.verifyBox {
|
display: flex;
|
justify-content: space-between;
|
padding-left: 28px;
|
padding-right: 54px;
|
box-sizing: border-box;
|
align-items: center;
|
width: 100%;
|
|
.left {
|
.imgBox {
|
width: 90px;
|
height: 68px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.name {
|
width: 100%;
|
padding-left: 28px;
|
margin-top: 20px;
|
}
|
}
|
|
.icon {
|
width: 26px;
|
height: 26px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
