<template>
|
<div class="right-view">
|
<div
|
class="right-header"
|
style="background-color: transparent; margin-bottom: 20px"
|
>
|
<div class="account-view">
|
<div class="account-left-header light-background-color">
|
<!-- <div class="font-size28 font-bold">-->
|
<!-- {{ $t("message.user.zhanghuanquan") }}-->
|
<!-- </div>-->
|
<!-- 验证方式 -->
|
<div class="account-icon-view">
|
<verify-img :verrify="googleverif" label="gugeyanzhengqi" />
|
<verify-img :verrify="emailverif" label="youxiangrenzheng" />
|
<verify-img :verrify="identityverif" label="shenfenrenzheng" />
|
<verify-img :verrify="advancedverif" label="gaojirenzheng" />
|
</div>
|
</div>
|
<!-- <div class="header-icon-view">-->
|
<!-- <img src="@/assets/myImages/icon-image/account-security/security-icon.png" width="122" height="100" />-->
|
<!-- </div>-->
|
</div>
|
</div>
|
<!-- 多重验证-->
|
<div class="account-content-box">
|
<div class="margin-left10 font-size20 margin-top-bottom10">
|
{{ $t("message.user.duochongrenzheng") }}
|
</div>
|
<!-- 谷歌验证 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/1.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>
|
{{ $t("message.user.gugeyanzhengqi") }}（{{
|
$t("message.user.tuijian")
|
}}）
|
</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.baohunindejiaoyihezhanghuanquan") }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-center list-icon justify-flex-end">
|
<verify-img
|
:verrify="googleverif"
|
:label="googleverif ? 'qiyong' : 'weibangding'"
|
/>
|
</div>
|
<div class="justify-flex-end">
|
<button
|
v-if="!googleverif"
|
class="light-grey-button"
|
@click="() => handleModalStatus(true, 'isShowGoogle')"
|
>
|
{{ $t("message.user.bangding") }}
|
</button>
|
<button v-else class="light-grey-button" @click="unbind(1)">
|
{{ $t("message.user.chongzhi2") }}
|
</button>
|
</div>
|
</div>
|
<!-- 邮箱验证 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/3.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.youxiangrenzheng") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.baohunindejiaoyihezhanghuanquan") }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-center list-icon justify-flex-end">
|
<verify-img :verrify="emailverif" />
|
<div v-if="emailverif">{{ email }}</div>
|
<div v-else>{{ $t("message.user.weibangding") }}</div>
|
</div>
|
<div class="justify-flex-end">
|
<button
|
v-if="!emailverif"
|
class="light-grey-button"
|
@click="() => handleModalStatus(true, 'isShowEmail')"
|
>
|
{{ $t("message.user.bangding") }}
|
</button>
|
<button v-else class="light-grey-button" @click="unbind(3)">
|
{{ $t("message.user.chongzhi2") }}
|
</button>
|
</div>
|
</div>
|
<!-- 身份认证 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/4.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.shenfenrenzheng") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.baohunindejiaoyihezhanghuanquan")
|
}}{{ kyc_status }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-center list-icon justify-flex-end">
|
<verify-img :verrify="identityverif" />
|
<div v-if="identifyStatus == 3" class="red">
|
{{ $t("message.user.shenheweitongguo")
|
}}{{ identifyMsg ? `-${identifyMsg}` : "" }}
|
</div>
|
<div v-else-if="identifyStatus == 1" class="yellow">
|
{{ $t("message.user.shenhezhong") }}
|
</div>
|
<div v-else>
|
{{ $t(`message.user.${statusMap[identifyStatus]}`) }}
|
</div>
|
</div>
|
<div class="justify-flex-end">
|
<button
|
class="light-grey-button"
|
@click="() => handleModalStatus(true, 'isShowIdentity')"
|
>
|
{{
|
!identityverif
|
? $t("message.user.bangding")
|
: $t("message.user.chakan")
|
}}
|
</button>
|
</div>
|
</div>
|
<!-- 高级认证 -->
|
<div class="account-list margin-bottom30">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/5.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.gaojirenzheng") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.baohunindejiaoyihezhanghuanquan") }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-center list-icon justify-flex-end">
|
<verify-img :verrify="advancedverif" />
|
<div v-if="highStatus == 3" class="red">
|
{{ $t("message.user.shenheweitongguo")
|
}}{{ highMsg ? `-${highMsg}` : "" }}
|
</div>
|
<div v-else-if="highStatus == 1" class="yellow">
|
{{ $t("message.user.shenhezhong") }}
|
</div>
|
<div v-else>
|
{{ $t(`message.user.${statusMap[highStatus]}`) }}
|
</div>
|
</div>
|
<div class="justify-flex-end">
|
<button class="light-grey-button" @click="openAdvance">
|
{{
|
!advancedverif
|
? $t("message.user.bangding")
|
: $t("message.user.chakan")
|
}}
|
</button>
|
</div>
|
</div>
|
</div>
|
<!-- 账号设置-->
|
<div class="account-content-box">
|
<div class="margin-left10 font-size20 margin-top-bottom10">
|
{{ $t("message.user.zhanghaoshezhi") }}
|
</div>
|
<!-- 登录密码 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/6.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.denglumima") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.yongyuguanlininzhanghudedenglumima") }}
|
</div>
|
</div>
|
</div>
|
<div class="justify-flex-end">
|
<button
|
class="light-grey-button"
|
@click="() => handleModalStatus(true, 'isShowLoginPassword')"
|
>
|
{{ $t("message.user.xiugai") }}
|
</button>
|
</div>
|
</div>
|
<!-- 资金密码 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/7.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.zijinmima") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.yongyuguanlininzhanghudezijinmima") }}
|
</div>
|
</div>
|
</div>
|
<div class="justify-flex-end">
|
<button
|
class="light-grey-button"
|
@click="() => handleModalStatus(true, 'isShowFund')"
|
>
|
{{ $t("message.user.xiugai") }}
|
</button>
|
</div>
|
</div>
|
<!-- 人工重置 -->
|
<div class="account-list">
|
<div class="flex-row-center">
|
<img
|
class="list-left-img"
|
src="@/assets/myImages/icon-image/account-security/8.png"
|
alt=""
|
/>
|
<div class="margin-left10">
|
<div>{{ $t("message.user.rengongchongzhi") }}</div>
|
<div class="linght-grey-color margin-top5">
|
{{ $t("message.user.lianxirengongkefuchongzhi") }}
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-center list-icon justify-flex-end">
|
<div class="red" v-if="manualStatus == 1">
|
{{ $t("message.user.shenhezhong") }}
|
</div>
|
<div class="green" v-if="manualStatus == 2">
|
{{ $t("message.user.shenhetongguo") }}
|
</div>
|
<div class="red" v-if="manualStatus == 3">
|
{{ $t("message.user.shenheweitongguo")
|
}}{{ manualMsg ? `-${manualMsg}` : "" }}
|
</div>
|
</div>
|
<div class="justify-flex-end">
|
<button class="light-grey-button" @click="unbind(0)">
|
{{ $t("message.user.chongzhi2") }}
|
</button>
|
</div>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<email-bind
|
:isShowEmail="isShowEmail"
|
@changeModalShow="handleModalStatus"
|
></email-bind>
|
|
<google-bind
|
:isShowGoogle="isShowGoogle"
|
@changeModalShow="handleModalStatus"
|
></google-bind>
|
<login-password
|
:isShowLoginPassword="isShowLoginPassword"
|
@changeModalShow="handleModalStatus"
|
></login-password>
|
<funds-password
|
:isShowFund="isShowFund"
|
@changeModalShow="handleModalStatus"
|
></funds-password>
|
<identity-authenty
|
:isShowIdentity="isShowIdentity"
|
@changeModalShow="handleModalStatus"
|
></identity-authenty>
|
<advance-certify
|
:isShowAdvance="isShowAdvance"
|
@changeModalShow="handleModalStatus"
|
></advance-certify>
|
<manual-reset
|
:isShowManual="isShowManual"
|
:status="manualStatus"
|
:selectType="radioType"
|
@changeModalShow="handleModalStatus"
|
></manual-reset>
|
</div>
|
</template>
|
<script>
|
import AdvanceCertify from "./components/advanceCertify.vue";
|
import emailBind from "./components/emailBind.vue";
|
import FundsPassword from "./components/fundsPassword.vue";
|
import GoogleBind from "./components/googleBind.vue";
|
import IdentityAuthenty from "./components/identityAuthenty.vue";
|
import LoginPassword from "./components/loginPassword.vue";
|
import ManualReset from "./components/manualReset.vue";
|
import PhoneBind from "./components/phoneBind.vue";
|
import verifyImg from "./components/verifyImg.vue";
|
import Axios2 from "@/api/my.js";
|
import { ElMessage } from "element-plus";
|
export default {
|
components: {
|
emailBind,
|
PhoneBind,
|
GoogleBind,
|
LoginPassword,
|
FundsPassword,
|
IdentityAuthenty,
|
AdvanceCertify,
|
ManualReset,
|
verifyImg,
|
},
|
data() {
|
return {
|
//认证状态，false为未绑定，true为绑定
|
googleverif: false,
|
emailverif: false,
|
phoneverif: false,
|
identityverif: false,
|
advancedverif: false,
|
//弹窗
|
isShowEmail: false,
|
isShowGoogle: false,
|
isShowLoginPassword: false,
|
isShowFund: false,
|
isShowIdentity: false,
|
isShowAdvance: false,
|
isShowManual: false,
|
email: "",
|
phone: "",
|
showEmail: "",
|
identifyStatus: "", //身份认证状态
|
|
identifyMsg: "", //身份认证驳回原因
|
highStatus: "", //高级认证状态
|
highMsg: "", //高级认证驳回原因
|
// ("0已申请未审核=未绑定 ，1审核中 ，2 审核通过,3审核未通过")
|
statusMap: [
|
"weibangding",
|
"shenhezhong",
|
"yirenzheng",
|
"shenheweitongguo",
|
],
|
manualStatus: null, //人工重置的审核状态
|
manualMsg: "", //人工重置驳回原因
|
radioType: 0, //人工重置单选框选中的值
|
kyc_status: "",
|
};
|
},
|
mounted() {
|
// if(this.$store.state.token){
|
this.getUserInfo();
|
this.getManualInfo();
|
this.getIdentifyInfo();
|
this.getHighInfo();
|
// }
|
},
|
methods: {
|
// 获取用户信息
|
getUserInfo() {
|
Axios2.getUserInfo().then((res) => {
|
const {
|
phone,
|
email,
|
googleverif,
|
emailverif,
|
phoneverif,
|
identityverif,
|
advancedverif,
|
kyc_status,
|
} = res.data || {};
|
this.googleverif = googleverif;
|
this.emailverif = emailverif;
|
this.phoneverif = phoneverif;
|
this.identityverif = identityverif;
|
this.advancedverif = advancedverif;
|
this.kyc_status = kyc_status;
|
|
//邮箱和手机事情打*显示的
|
if (email) {
|
let arremail = email.split("@");
|
this.email = email.substring(0, 3) + "*****" + "@" + arremail[1];
|
}
|
|
if (phone) {
|
this.phone = phone.replace(phone.substr(3, 4), "****");
|
}
|
});
|
},
|
// 获取人工审核的状态
|
getManualInfo() {
|
Axios2.getSafewordApply({}).then((res) => {
|
if (res.data.length > 0) {
|
this.manualStatus = res.data[0].status;
|
this.manualMsg = res.data[0].msg;
|
}
|
});
|
},
|
// 获取身份认证的状态
|
getIdentifyInfo() {
|
Axios2.getIdentify({}).then((res) => {
|
this.identifyStatus = res.data.status;
|
this.identifyMsg = res.data.msg;
|
});
|
},
|
// 获取高级认证，测试要加的，神烦
|
getHighInfo() {
|
Axios2.getHighIdentify().then((res) => {
|
this.highStatus = res.data.status;
|
this.highMsg = res.data.msg;
|
});
|
},
|
// 弹窗控制
|
handleModalStatus(status, type) {
|
this[type] = status;
|
},
|
|
//高级认证
|
openAdvance() {
|
if (!this.identityverif) {
|
ElMessage.warning(
|
this.$t("message.home.shenfenrenzhenghoujinxinggaojirenzheng")
|
);
|
return;
|
}
|
this.isShowAdvance = true;
|
},
|
|
//重置谷歌，邮箱和人工重置功能
|
unbind(type) {
|
if (!this.identityverif) {
|
ElMessage.warning(
|
this.$t("message.home.weishimingrenzhnegqingxainshimingrenzheng")
|
);
|
return;
|
}
|
this.getManualInfo();
|
this.radioType = type; //0 人工重置，1.谷歌重置 3.邮箱重置
|
this.isShowManual = true;
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
/* 头部样式 */
|
.account-view {
|
display: flex;
|
height: 58.97px;
|
line-height: 58.97px;
|
}
|
|
.account-view > div {
|
flex: 1;
|
}
|
|
.account-left-header {
|
display: flex;
|
flex-direction: column;
|
//padding: 25px 50px;
|
min-width: 1000px;
|
}
|
|
.account-left-header > div {
|
flex: 1;
|
}
|
|
.account-icon-view {
|
display: flex;
|
margin-left: 40px;
|
font-size: 12px;
|
}
|
|
.account-icon-view > div {
|
flex-direction: row;
|
flex: 1;
|
}
|
|
.account-icon-view > div > img,
|
.list-icon > img {
|
width: 25px;
|
height: 25px;
|
display: inline-block;
|
margin-right: 10px;
|
}
|
|
.header-icon-view {
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 50px;
|
padding-top: 10px;
|
}
|
|
/* 内容块 */
|
.account-list {
|
display: flex;
|
align-items: center;
|
padding: 24px 0;
|
border-bottom: 1px solid #e5e5e5;
|
}
|
|
.account-list > div {
|
flex: 1;
|
display: flex;
|
}
|
|
.list-img {
|
display: inline-block;
|
width: 25px;
|
height: 25px;
|
}
|
|
.list-left-img {
|
display: inline-block;
|
width: 24px;
|
height: 24px;
|
}
|
|
.account-content-box {
|
border-radius: 15px;
|
padding: 36px 42px 14px;
|
font-size: 12px;
|
width: 1200px;
|
//margin: 20px 50px;
|
border: 1px solid rgb(236, 241, 248);
|
margin-bottom: 20px;
|
}
|
|
.margin-top5 {
|
margin-top: 5px;
|
}
|
.right-view {
|
width: 1200px;
|
margin: 0px auto 20px;
|
border-radius: 6px;
|
min-height: calc(100% - 20px);
|
box-sizing: border-box;
|
}
|
.light-grey-button {
|
background-color: #f7b328;
|
color: rgb(255, 255, 255);
|
}
|
</style>
|
