<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>
|
