<template>
|
<div class="bindVerify">
|
<assets-head :title="title" />
|
<div class="content">
|
<!-- 手机邮箱验证 -->
|
<div v-if="type == 1 || type == 2">
|
<ExInput :label="type == 2 ? $t('邮箱') : $t('手机号')"
|
:placeholderText="type == 2 ? $t('请输入您的邮箱') : $t('请输入您的手机号码')" v-model.trim="account" :area="isArea"
|
@selectArea="onSelectArea" :dialCode="dialCode" :icon="icon" />
|
<p class="label mt-14 textColor">{{ $t('验证码') }}</p>
|
<div class="iptbox inputBackground">
|
<input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
|
<span v-if="type != 3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time">
|
({{ time }})s</template></span>
|
</div>
|
</div>
|
<!-- 谷歌验证 -->
|
<div v-if="type == 3">
|
<div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
|
<div class="imgbox">
|
<img :src="google_auth_url" alt="" class="QRcodeImg" />
|
</div>
|
<div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
|
<img src="@/assets/image/reload.png" alt="" @click="getGoogleauth" />
|
</div>
|
<p class="tips">{{ $t('(请妥善备份密钥以防丢失)') }}</p>
|
<div class="copy textColor" @click="copy">{{ $t('复制') }}</div>
|
</div>
|
<div class="flex justify-between mt-48 mb-20 textColor">
|
<div>{{ $t('谷歌验证码') }}</div>
|
<div class="flex items-center">
|
<div class="colorMain" @click="value = ''">{{ $t('清除') }}</div>
|
<div class="colorMain ml-30" @click="pastCont">{{ $t('粘贴') }}</div>
|
</div>
|
</div>
|
<van-password-input :value="value" :gutter="16" :focused="showKeyboard" @focus="showKeyboard = true"
|
:mask="false" />
|
<van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
|
<div class="mt-20"></div>
|
<div class="mt-44 bottom tabBackground textColor">
|
<p>{{ $t('注意事项') }}</p>
|
<p>{{ $t('1.下载Google身份验证器APP') }}</p>
|
<p>{{ $t('2.扫描上图二维码输入验证码完成绑定') }}</p>
|
</div>
|
</div>
|
<div class="btn btnMain" @click="submit">{{ $t('确认') }}</div>
|
</div>
|
<nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
|
</nationality-list>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import ExInput from "@/components/ex-input";
|
import ApiLogin from "@/API/login.js";
|
import Axios from "@/API/userCenter.js";
|
import nationalityList from '@/page/authentication/components/nationalityList.vue'
|
import { PasswordInput, NumberKeyboard } from 'vant';
|
export default {
|
props: {
|
|
},
|
components: {
|
nationalityList,
|
assetsHead,
|
ExInput,
|
[PasswordInput.name]: PasswordInput,
|
[NumberKeyboard.name]: NumberKeyboard,
|
},
|
data() {
|
return {
|
title: '',
|
account: '',
|
isArea: false,
|
type: 0,
|
verifyCode: '',
|
google_auth_secret: 'PSDJKL2LKLLAJNGJ',
|
showKeyboard: false,
|
value: '', //谷歌验证码code
|
imgshow: true,
|
google_auth_url: '',
|
dialCode: 0, //电话号前缀
|
timer: '',
|
time: 0,
|
icon: ''
|
}
|
},
|
mounted() {
|
this.init();
|
clearInterval(this.timer)
|
},
|
methods: {
|
init() {
|
let type = this.$route.query.type;
|
this.type = type;
|
if (type == 1) {
|
this.title = this.$t("手机号绑定");
|
this.isArea = true
|
} else if (type == 2) {
|
this.title = this.$t("邮箱认证");
|
} else if (type == 3) {
|
this.title = this.$t("Google验证器");
|
this.getGoogleauth()
|
}
|
},
|
senCode() {
|
if (this.type == 2 && this.account == '') {
|
this.$toast(this.$t('请输入邮箱'));
|
return
|
}
|
if (this.type == 1 && this.account == '') {
|
this.$toast(this.$t('请输入手机号'));
|
return
|
}
|
if (this.time > 0) {
|
return false
|
}
|
ApiLogin.sendVerifyCode({
|
target: this.type == 1 ? `${this.dialCode}${this.account}` : this.account,
|
}).then((res) => {
|
this.$toast(this.$t('发送成功'));
|
this.time = 30;
|
this.timer = setInterval(() => {
|
if (this.time > 0) {
|
this.time = this.time - 1
|
} else {
|
this.time = 0;
|
clearInterval(this.timer)
|
}
|
}, 1000);
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
submit() {
|
if (this.type == 2 && this.account == '') {
|
this.$toast(this.$t('请输入邮箱'));
|
return
|
}
|
if (this.type == 1 && this.account == '') {
|
this.$toast(this.$t('请输入手机号'));
|
return
|
}
|
if (this.type == 1) {
|
this.bindPhone()
|
} else if (this.type == 2) {
|
this.bindEmail()
|
} else if (this.type == 3) {
|
this.bindGoogleauth()
|
}
|
},
|
bindEmail() {
|
Axios.bindEmail({
|
email: this.account,
|
verifcode: this.verifyCode
|
}).then((res) => {
|
this.$toast(this.$t('绑定成功'));
|
this.$router.push('/safety')
|
}).catch((error) => {
|
if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
else if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
});
|
},
|
bindPhone() {
|
Axios.bindPhone({
|
phone: `${this.dialCode}${this.account}`,
|
verifcode: this.verifyCode
|
}).then((res) => {
|
this.$toast(this.$t('绑定成功'));
|
this.$router.push('/safety')
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
getGoogleauth() {
|
Axios.getGoogleauth({
|
}).then((res) => {
|
this.google_auth_secret = res.data.google_auth_secret;
|
this.google_auth_url = res.data.google_auth_url
|
console.log(res)
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
bindGoogleauth() {
|
if (this.value.length < 6) {
|
this.$toast(this.$t('请输入验证码'));
|
return false
|
}
|
Axios.bindGoogleauth({
|
secret: this.google_auth_secret,
|
code: this.value
|
}).then((res) => {
|
let google_auth_bind = res.data.google_auth_bind;
|
if (google_auth_bind) {
|
this.$store.commit('user/SET_USERINFO', { googleverif: true })
|
this.$toast(this.$t('绑定成功'));
|
this.$router.push('/safety')
|
} else {
|
this.$toast(this.$t('绑定失败'));
|
}
|
}).catch((error) => {
|
if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
|
else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
|
});
|
},
|
copy() {
|
this.$copyText(this.google_auth_secret).then(message => {
|
this.$toast(this.$t('复制成功'));
|
}).catch(err => {
|
|
})
|
},
|
async pastCont() {
|
this.value = await navigator.clipboard.readText();
|
},
|
getName(params) {
|
this.icon = params[1];
|
this.dialCode = params[2];
|
console.log(params[2])
|
},
|
onSelectArea() {
|
this.openBtn();
|
},
|
//打开国家列表底部弹窗
|
openBtn() {
|
this.$refs.controlChild.open();
|
},
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
},
|
watch: {
|
value(value) {
|
if (value.length === 6) {
|
this.showKeyboard = false
|
} else {
|
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.bindVerify {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
|
|
|
|
.content {
|
font-size: 24px;
|
padding: 0 32px;
|
}
|
|
.iptbox {
|
height: 88px;
|
margin-top: 16px;
|
padding: 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-radius: 6px;
|
|
input {
|
flex: 1;
|
height: 100%;
|
border: none;
|
}
|
|
span {
|
color: #1D91FF;
|
}
|
}
|
|
.btn {
|
color: #fff;
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
font-size: 32px;
|
margin-top: 40px;
|
border-radius: 10px;
|
}
|
|
.imgbox {
|
@include themify() {
|
border: 1px solid themed("line_color");
|
}
|
|
padding: 30px;
|
width: 364px;
|
height: 364px;
|
box-sizing: border-box;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.code {
|
font-size: 30px;
|
font-weight: 300;
|
line-height: 36px;
|
margin-top: 44px;
|
height: 36px;
|
|
img {
|
width: 26px;
|
height: 26px;
|
margin-left: 10px;
|
}
|
}
|
|
.tips {
|
margin-top: 20px;
|
color: #999999;
|
}
|
|
.copy {
|
border-radius: 8px;
|
width: 264px;
|
height: 80px;
|
margin-top: 32px;
|
|
@include themify() {
|
border: 2px solid themed("line_color");
|
}
|
|
line-height: 80px;
|
}
|
|
.bottom {
|
padding: 40px 32px 14px 32px;
|
|
p {
|
padding-bottom: 26px;
|
}
|
}
|
|
.van-password-input {
|
margin: 0;
|
}
|
|
|
.van-password-input__security li {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
width: 100px;
|
height: 100px;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
</style>
|
