<template>
|
<div class="forget">
|
<div class="header">
|
<div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
|
class="w-14 h-27" /></div>
|
</div>
|
<div class="title textColor">{{ $t('重置登录密码') }}</div>
|
<div class="flex re-tab text-grey">
|
<div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('邮箱') }}</div>
|
<div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('手机号') }}</div>
|
<div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('谷歌验证') }}</div>
|
</div>
|
|
<ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model="account" :dialCode="dialCode"
|
@selectArea="onSelectArea" :area="isArea" :icon="icon" />
|
<div class="btn" @click="next">{{ $t('下一步') }}</div>
|
<nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
|
</nationality-list>
|
</div>
|
</template>
|
|
<script>
|
import ExInput from "@/components/ex-input";
|
import Axios from "@/API/userCenter.js";
|
import nationalityList from '../authentication/components/nationalityList.vue'
|
export default {
|
props: {
|
|
},
|
components: {
|
ExInput,
|
nationalityList
|
},
|
data() {
|
return {
|
account: '',
|
activeIndex: 0,
|
isArea: false,
|
dialCode: 0, //电话号前缀
|
icon: ''
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
changeIndex(index) {
|
this.activeIndex = index;
|
if (index == 1) {
|
this.isArea = true
|
} else {
|
this.isArea = false
|
}
|
},
|
next() {
|
if (this.account == "") {
|
this.$toast(this.$t("请输入账号"))
|
return;
|
}
|
this.getUserNameVerifTarget()
|
|
},
|
getUserNameVerifTarget() {
|
|
let type;
|
if (this.activeIndex == 0) {
|
type = 2
|
} else if (this.activeIndex == 1) {
|
type = 1
|
} else if (this.activeIndex == 2) {
|
type = 3
|
}
|
Axios.getUserNameVerifTarget({
|
username: type == 1 ? `${this.dialCode}${this.account}` : this.account,
|
verifcode_type: type //验证类型 1手机 2 邮箱 3谷歌验证器
|
}).then((res) => {
|
if (type == 1 && !res.data.phone_authority) {
|
this.$toast(this.$t('未绑定手机号'));
|
return false
|
} else if (type == 2 && !res.data.email_authority) {
|
this.$toast(this.$t('未绑定邮箱'));
|
return false
|
} else if (type == 3 && !res.data.google_auth_bind) {
|
this.$toast(this.$t('未绑定谷歌验证器'));
|
return false
|
}
|
let account;
|
if (type == 1) {
|
account = res.data.phone
|
} else if (type == 2) {
|
account = res.data.email
|
}
|
this.$router.push({ name: 'safeVerify', query: { type: type, account: account, username: this.account } })
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
onSelectArea() {
|
this.openBtn();
|
},
|
//打开国家列表底部弹窗
|
openBtn() {
|
this.$refs.controlChild.open();
|
},
|
getName(params) {
|
this.icon = params[1];
|
this.dialCode = params[2];
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.forget {
|
width: 100%;
|
box-sizing: border-box;
|
padding: 30px;
|
font-size: 26px;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 26px;
|
font-size: 28px;
|
height: 100px;
|
line-height: 100px;
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 54px;
|
margin-bottom: 66px;
|
}
|
|
.re-tab {
|
margin-bottom: 44px;
|
|
div {
|
padding: 0 36px;
|
height: 68px;
|
line-height: 68px;
|
text-align: center;
|
border-radius: 8px;
|
margin-right: 20px;
|
}
|
|
.active {
|
@include themify() {
|
background: themed("cont_background");
|
}
|
}
|
}
|
|
.btn {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
color: #fff;
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
font-size: 35px;
|
margin-top: 36px;
|
border-radius: 10px;
|
}
|
</style>
|
