<template>
|
<div class="bindVerify">
|
<fx-header>
|
<template #title>
|
{{ title }}
|
</template>
|
</fx-header>
|
<div class="content">
|
<!-- 手机邮箱验证 -->
|
<div v-if="type == 1 || type == 2">
|
<ExInput :label="type == 2 ? $t('email') : $t('phoneNum')"
|
:placeholderText="type == 2 ? $t('entryEmail') : $t('entryPhone')" v-model="account" :area="isArea"
|
@selectArea="onSelectArea" :dialCode="dialCode" :icon="icon" />
|
<p class="label mt-2 textColor">{{ $t('verificationCode') }}</p>
|
<div class="iptbox inputBackground">
|
<input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')"
|
v-model="verifyCode">
|
<span v-if="type != 3" @click="senCode">{{ $t('sendVerifyCode') }}<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">
|
<van-image :src="google_auth_url">
|
<template v-slot:loading>
|
<van-loading type="spinner" size="20" />
|
</template>
|
</van-image>
|
</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('saveKeyTips') }}</p>
|
<div class="copy textColor" @click="copy">{{ $t('copy') }}</div>
|
</div>
|
<div class="flex justify-between mt-6 mb-3">
|
<div>{{ $t('googleVerificationCode') }}</div>
|
<div class="flex items-center">
|
<div class="colorMain" @click="googleverifyCode = ''">{{ $t('clear') }}</div>
|
<div class="colorMain ml-30" @click="pastCont">{{ $t('paste') }}</div>
|
</div>
|
</div>
|
<van-password-input :value="googleverifyCode" :gutter="16" :focused="showKeyboard"
|
@focus="showKeyboard = true" :mask="false" />
|
<van-number-keyboard v-model="googleverifyCode" :show="showKeyboard" @blur="showKeyboard = false" />
|
<div class="mt-2"></div>
|
<div class="mt-5 bottom tabBackground textColor">
|
<p>{{ $t('precautions') }}</p>
|
<p>{{ $t('precautionsTips1') }}</p>
|
<p>{{ $t('precautionsTips2') }}</p>
|
</div>
|
</div>
|
<van-button class="w-full" style="margin-top:10px;" type="primary" @click="submit">{{ $t('confirm') }}
|
</van-button>
|
</div>
|
<nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName">
|
</nationality-list>
|
</div>
|
</template>
|
|
<script setup>
|
import ExInput from "@/components/ex-input/index.vue";
|
import { _sendVerifyCode } from "@/service/login.api";
|
import { _bindEmail, _bindPhone, _getGoogleauth, _bindGoogleauth } from "@/service/user.api.js";
|
import nationalityList from '../authentication/components/nationalityList.vue'
|
import { PasswordInput, NumberKeyboard, showToast, Image as VanImage } from 'vant';
|
import { ref, onMounted, watch } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
import useClipboard from "vue-clipboard3";
|
const route = useRoute()
|
const router = useRouter()
|
const { t } = useI18n()
|
const { toClipboard } = useClipboard();
|
|
const title = ref('')
|
const account = ref('')
|
const isArea = ref(false)
|
const type = ref(0)
|
const verifyCode = ref('')
|
const google_auth_secret = ref('')
|
const showKeyboard = ref(false)
|
const googleverifyCode = ref('') //谷歌验证码code
|
const imgshow = ref(true)
|
const google_auth_url = ref('')
|
const dialCode = ref(0) //电话号前缀
|
const timer = ref(null)
|
const time = ref(0)
|
const icon = ref('')
|
|
onMounted(() => {
|
init();
|
clearInterval(timer.value)
|
timer.value = null
|
})
|
|
|
const init = () => {
|
type.value = route.query.type;
|
if (type.value == 1) {
|
title.value = t("bindPhone");
|
isArea.value = true
|
} else if (type.value == 2) {
|
title.value = t("bindEmail");
|
} else if (type.value == 3) {
|
title.value = t("googleAuthenticatorEn");
|
getGoogleauth()
|
}
|
}
|
const senCode = () => {
|
if (type.value == 2) {
|
if (account.value == '') {
|
showToast(t('entryEmail'));
|
return
|
}
|
if (account.value.indexOf('@') === -1) {
|
showToast(t('请输入正确的邮箱地址'));
|
return
|
}
|
}
|
if (type.value == 1 && account.value == '') {
|
showToast(t('entryPhone'));
|
return
|
}
|
if (type.value == 1 && isNaN(account.value)) {
|
showToast(t('请输入正确的手机号码'));
|
return
|
}
|
if (time.value > 0) {
|
return false
|
}
|
_sendVerifyCode({
|
target: type.value == 1 ? `${dialCode.value}${account.value}` : account.value,
|
}).then((res) => {
|
showToast(t('sendSuccess'));
|
time.value = 30;
|
timer.value = setInterval(() => {
|
if (time.value > 0) {
|
time.value = time.value - 1
|
} else {
|
time.value = 0;
|
clearInterval(timer.value)
|
timer.value = null
|
}
|
}, 1000);
|
})
|
}
|
const submit = () => {
|
if (type.value == 2) {
|
if (account.value == '') {
|
showToast(t('entryEmail'));
|
return
|
}
|
if (account.value.indexOf('@') === -1) {
|
showToast(t('请输入正确的邮箱地址'));
|
return
|
}
|
}
|
if (type.value == 1 && account.value == '') {
|
showToast(t('entryPhone'));
|
return
|
}
|
if (type.value == 1 && isNaN(account.value)) {
|
showToast(t('请输入正确的手机号码'));
|
return
|
}
|
if (type.value == 1) {
|
bindPhone()
|
} else if (type.value == 2) {
|
bindEmail()
|
} else if (type.value == 3) {
|
bindGoogleauth()
|
}
|
}
|
const bindEmail = () => {
|
_bindEmail({
|
email: account.value,
|
verifcode: verifyCode.value
|
}).then((res) => {
|
showToast(t('bindSuccess'));
|
router.push('/safety')
|
})
|
}
|
const bindPhone = () => {
|
_bindPhone({
|
phone: `${dialCode.value || ""}${account.value}`,
|
verifcode: verifyCode.value
|
}).then((res) => {
|
showToast(t('bindSuccess'));
|
router.push('/safety')
|
})
|
}
|
const getGoogleauth = () => {
|
_getGoogleauth({
|
}).then((res) => {
|
google_auth_secret.value = res.googleAuthSecret;
|
google_auth_url.value = res.googleAuthImg
|
})
|
}
|
const bindGoogleauth = () => {
|
if (!googleverifyCode.value) {
|
showToast(t('请输入谷歌验证码'))
|
return
|
}
|
_bindGoogleauth({
|
secret: google_auth_secret.value,
|
code: googleverifyCode.value
|
}).then((res) => {
|
let google_auth_bind = res.google_auth_bind;
|
if (google_auth_bind) {
|
showToast(t('bindSuccess'));
|
router.push('/safety')
|
} else {
|
showToast(t('bindFailed'));
|
}
|
})
|
}
|
|
const copy = async () => {
|
try {
|
await toClipboard(google_auth_secret.value);
|
showToast(t('copySuccess'));
|
} catch (e) {
|
console.error(e);
|
}
|
}
|
const pastCont = async () => {
|
googleverifyCode.value = await navigator.clipboard.readText();
|
}
|
|
// 选择了国家
|
const getName = (params) => {
|
icon.value = params.code;
|
dialCode.value = params.dialCode;
|
}
|
|
const controlChildRef = ref(null)
|
const onSelectArea = () => {
|
controlChildRef.value.open();
|
}
|
|
watch(googleverifyCode, (val, oldVal) => {
|
if (googleverifyCode.value.length === 6) {
|
showKeyboard.value = false
|
}
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.van-key) {
|
background: $black;
|
}
|
|
:deep(.van-number-keyboard__body) {
|
background: $selectSymbol_background;
|
}
|
|
.bindVerify {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.content {
|
font-size: 12px;
|
padding: 0 16px;
|
}
|
|
.iptbox {
|
height: 44px;
|
margin-top: 8px;
|
padding: 0 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-radius: 3px;
|
|
input {
|
flex: 1;
|
height: 100%;
|
border: none;
|
}
|
|
span {
|
color: $color_main;
|
}
|
}
|
|
.imgbox {
|
border: 1px solid $border-grey;
|
padding: 5px;
|
width: 182px;
|
height: 182px;
|
box-sizing: border-box;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.code {
|
font-size: 15px;
|
font-weight: 300;
|
line-height: 18px;
|
margin-top: 22px;
|
height: 18px;
|
|
img {
|
width: 14px;
|
height: 14px;
|
margin-left: 5px;
|
}
|
}
|
|
.tips {
|
margin-top: 10px;
|
color: #999999;
|
}
|
|
.copy {
|
border-radius: 4px;
|
width: 132px;
|
height: 40px;
|
margin-top: 16px;
|
border: 1px solid $border-grey;
|
line-height: 40px;
|
}
|
|
.bottom {
|
padding: 20px 16px 7px 16px;
|
|
p {
|
padding-bottom: 13px;
|
}
|
}
|
|
.van-password-input {
|
margin: 0;
|
}
|
|
.van-password-input__security li {
|
background: $input_background;
|
width: 50px;
|
height: 50px;
|
color: $text_color;
|
}
|
|
:deep(.van-password-input__security li) {
|
background: $input_background;
|
width: 50px;
|
height: 50px;
|
color: $text_color;
|
}
|
</style>
|
