<template>
|
<div class="gooleVerify">
|
<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 class="textColor" @click="$router.push('/finish')">
|
{{ $t("跳过") }}
|
</div>
|
</div>
|
<Step :step="3"></Step>
|
<div class="title textColor">{{ $t("安全绑定") }}</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 }}
|
<span @click="getGoogleauth">
|
<img src="@/assets/image/reload.png" alt="" />
|
</span>
|
</div>
|
<p class="tips">{{ $t("(请妥善备份密钥以防丢失)") }}</p>
|
<div class="copy textColor" @click="copy">{{ $t("复制") }}</div>
|
</div>
|
<div class="flex justify-between mt-48 mb-20">
|
<div class="textColor">{{ $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 class="btn btnMain" @click="submit">{{ $t("确定") }}</div>
|
</div>
|
</template>
|
|
<script>
|
import Step from "./step.vue";
|
import { PasswordInput, NumberKeyboard } from "vant";
|
import Axios from "@/API/userCenter.js";
|
|
export default {
|
props: {},
|
components: {
|
Step,
|
[PasswordInput.name]: PasswordInput,
|
[NumberKeyboard.name]: NumberKeyboard,
|
},
|
data() {
|
return {
|
google_auth_secret: "",
|
imgshow: true,
|
google_auth_url: "",
|
value: "",
|
showKeyboard: false,
|
};
|
},
|
mounted() {
|
this.getGoogleauth();
|
},
|
methods: {
|
copy() {
|
this.$copyText(this.google_auth_secret)
|
.then((message) => {
|
this.$toast(this.$t("复制成功"));
|
})
|
.catch((err) => {});
|
},
|
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() {
|
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.$toast(this.$t("绑定成功"));
|
this.$router.push("/finish");
|
} 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));
|
}
|
});
|
},
|
submit() {
|
if (this.value.length < 6) {
|
this.$toast(this.$t("请输入验证码"));
|
return false;
|
}
|
this.bindGoogleauth();
|
},
|
async pastCont() {
|
this.value = await navigator.clipboard.readText();
|
},
|
},
|
watch: {
|
value(value) {
|
if (value.length === 6) {
|
this.showKeyboard = false;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.gooleVerify {
|
padding: 32px;
|
padding-bottom: 108px;
|
font-size: 26px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 26px;
|
font-size: 28px;
|
height: 100px;
|
line-height: 100px;
|
}
|
|
.stepBox {
|
padding: 0 30px;
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 54px;
|
margin-bottom: 52px;
|
}
|
|
.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;
|
}
|
}
|
|
.btn {
|
color: #fff;
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
font-size: 32px;
|
margin-top: 40px;
|
border-radius: 10px;
|
}
|
|
.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>
|
