<template>
|
<div class="gooleVerify">
|
<div class="header">
|
<div class="flex items-center" @click="$router.go(-1)"><img
|
src="../../assets/image/assets-center/left-arrow.png" alt="" class="leftReturn" /></div>
|
<div class="textColor" @click="$router.push('/finish')">{{ $t('skip') }}</div>
|
</div>
|
<Step :step="3"></Step>
|
<div class="title textColor">{{ $t('safeBind') }}</div>
|
<div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
|
<div class="imgbox">
|
<canvas id="QRcodeCanvas" v-show="!imgshow"></canvas>
|
<img :src="google_auth_url" alt="" v-show="imgshow" class="QRcodeImg" />
|
</div>
|
<div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
|
<img src="@/assets/image/reload.png" @click="getGoogleauth" alt="" />
|
</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 class="textColor">{{ $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>
|
<van-button class="w-full" style="margin-top:10px;" type="primary" @click="submit">{{ $t('sure') }}
|
</van-button>
|
</div>
|
</template>
|
|
<script setup>
|
import Step from "./step.vue";
|
import { PasswordInput, NumberKeyboard } from 'vant';
|
import { _getGoogleauth, _bindGoogleauth } from '@/service/user.api.js'
|
import { ref, onMounted, watch } from "vue";
|
import { showToast } from "vant";
|
import { useRouter } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
import useClipboard from "vue-clipboard3";
|
const { t } = useI18n()
|
const { toClipboard } = useClipboard();
|
const router = useRouter()
|
|
const google_auth_secret = ref('')
|
const imgshow = ref(true)
|
const google_auth_url = ref('')
|
const googleverifyCode = ref('')
|
const showKeyboard = ref(false)
|
|
onMounted(() => {
|
getGoogleauth();
|
})
|
|
const copy = async () => {
|
try {
|
await toClipboard(google_auth_secret.value);
|
showToast(t('copySuccess'));
|
} catch (e) {
|
console.error(e);
|
}
|
}
|
const getGoogleauth = () => {
|
_getGoogleauth({}).then((res) => {
|
google_auth_secret.value = res.googleAuthSecret;
|
google_auth_url.value = res.googleAuthImg
|
}).catch((error) => {
|
showToast(t(error.msg));
|
});
|
}
|
const bindGoogleauth = () => {
|
_bindGoogleauth({
|
secret: google_auth_secret.value,
|
code: googleverifyCode.value
|
}).then((res) => {
|
console.log(res)
|
let google_auth_bind = res.google_auth_bind;
|
if (google_auth_bind) {
|
showToast(t('bindSuccess'));
|
router.push('/finish')
|
} else {
|
showToast(t('bindFailed'));
|
}
|
}).catch((error) => {
|
showToast(t(error.msg));
|
});
|
}
|
const submit = () => {
|
if (googleverifyCode.value.length < 6) {
|
showToast(t('entryVerifyCode'));
|
return false
|
}
|
bindGoogleauth()
|
}
|
const pastCont = async () => {
|
googleverifyCode.value = await navigator.clipboard.readText();
|
}
|
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;
|
}
|
|
|
.gooleVerify {
|
padding: 16px;
|
padding-bottom: 54px;
|
font-size: 13px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 13px;
|
font-size: 14px;
|
height: 50px;
|
line-height: 50px;
|
}
|
|
.stepBox {
|
padding: 0 30px;
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 26px;
|
margin-top: 27px;
|
margin-bottom: 26px;
|
}
|
|
.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: 13px;
|
height: 13px;
|
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 12px 16px;
|
|
p {
|
padding-bottom: 13px;
|
}
|
}
|
|
.van-password-input {
|
margin: 0;
|
}
|
|
:deep(.van-password-input__security li) {
|
background: $input_background;
|
width: 50px;
|
height: 50px;
|
color: $text_color;
|
}
|
</style>
|
