From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/register/gooleVerify.vue | 377 ++++++++++++++++++++++++++++-------------------------
1 files changed, 201 insertions(+), 176 deletions(-)
diff --git a/src/page/register/gooleVerify.vue b/src/page/register/gooleVerify.vue
index f15fbc9..28679e1 100644
--- a/src/page/register/gooleVerify.vue
+++ b/src/page/register/gooleVerify.vue
@@ -1,238 +1,263 @@
<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 }}
- <img src="@/assets/image/reload.png" @click="getGoogleauth" alt="" />
- </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 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 { PasswordInput, NumberKeyboard } from "vant";
import Axios from "@/API/userCenter.js";
export default {
- props: {
-
+ 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) => {});
},
- components: {
- Step,
- [PasswordInput.name]: PasswordInput,
- [NumberKeyboard.name]: NumberKeyboard,
+ 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));
+ }
+ });
},
- data() {
- return {
- google_auth_secret: '',
- imgshow: true,
- google_auth_url: '',
- value: '',
- showKeyboard: false
- }
+ 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));
+ }
+ });
},
- mounted() {
- this.getGoogleauth();
+ submit() {
+ if (this.value.length < 6) {
+ this.$toast(this.$t("请输入验证码"));
+ return false;
+ }
+ this.bindGoogleauth();
},
- 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();
- }
+ async pastCont() {
+ this.value = await navigator.clipboard.readText();
},
- watch: {
- value(value) {
- if (value.length === 6) {
- this.showKeyboard = false
- }
- },
+ },
+ 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;
+ 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;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 26px;
+ font-size: 28px;
+ height: 100px;
+ line-height: 100px;
}
.stepBox {
- padding: 0 30px;
+ padding: 0 30px;
}
.title {
- font-weight: 700;
- font-size: 52px;
- margin-top: 54px;
- margin-bottom: 52px;
+ font-weight: 700;
+ font-size: 52px;
+ margin-top: 54px;
+ margin-bottom: 52px;
}
.imgbox {
- @include themify() {
- border: 1px solid themed("line_color");
- }
+ @include themify() {
+ border: 1px solid themed("line_color");
+ }
- padding: 30px;
- width: 364px;
- height: 364px;
- box-sizing: border-box;
+ padding: 30px;
+ width: 364px;
+ height: 364px;
+ box-sizing: border-box;
- img {
- width: 100%;
- height: 100%;
- }
+ img {
+ width: 100%;
+ height: 100%;
+ }
}
.code {
- font-size: 30px;
- font-weight: 300;
- line-height: 36px;
- margin-top: 44px;
- height: 36px;
+ font-size: 30px;
+ font-weight: 300;
+ line-height: 36px;
+ margin-top: 44px;
+ height: 36px;
- img {
- width: 26px;
- height: 26px;
- margin-left: 10px;
- }
+ img {
+ width: 26px;
+ height: 26px;
+ margin-left: 10px;
+ }
}
.tips {
- margin-top: 20px;
- color: #999999;
+ margin-top: 20px;
+ color: #999999;
}
.copy {
- border-radius: 8px;
- width: 264px;
- height: 80px;
- margin-top: 32px;
+ border-radius: 8px;
+ width: 264px;
+ height: 80px;
+ margin-top: 32px;
- @include themify() {
- border: 2px solid themed("line_color");
- }
+ @include themify() {
+ border: 2px solid themed("line_color");
+ }
- line-height: 80px;
+ line-height: 80px;
}
.bottom {
- padding: 40px 32px 14px 32px;
+ padding: 40px 32px 14px 32px;
- p {
- padding-bottom: 26px;
- }
+ p {
+ padding-bottom: 26px;
+ }
}
.btn {
- color: #fff;
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 32px;
- margin-top: 40px;
- border-radius: 10px;
+ color: #fff;
+ height: 88px;
+ line-height: 88px;
+ text-align: center;
+ font-size: 32px;
+ margin-top: 40px;
+ border-radius: 10px;
}
.van-password-input {
- margin: 0;
+ margin: 0;
}
.van-password-input__security li {
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
- width: 100px;
- height: 100px;
+ width: 100px;
+ height: 100px;
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3