From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/forget/safeVerify.vue | 284 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 154 insertions(+), 130 deletions(-)
diff --git a/src/page/forget/safeVerify.vue b/src/page/forget/safeVerify.vue
index ffb4ac5..6a76a2e 100644
--- a/src/page/forget/safeVerify.vue
+++ b/src/page/forget/safeVerify.vue
@@ -1,171 +1,195 @@
<template>
- <div class="verify">
- <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>
- <div class="content">
- <div class="title textColor">{{ $t('安全验证') }}</div>
- <p v-if="type == 3">{{ $t('verifyGoogleTips') }}</p>
- <span class="label textColor">{{ type == 2 ? $t('邮箱验证') : type == 1 ? $t('手机验证') : $t('谷歌验证') }}</span>
- <p v-if="type == 2">{{ $t('verifyEmailTips', { 'account': account }) }}</p>
- <p v-if="type == 1">{{ $t('verifyPhoneTips', { 'account': account }) }}</p>
- <div class="iptbox inputBackground">
- <input type="text" class="inputBackground textColor" :placeholder="$t('请输入验证码')" v-model="verifycode"
- @input="changeInput">
- <span v-if="type != 3" @click="senCode">{{ $t('重新发送验证码') }}<template v-if="time"> ({{
- time }})s</template></span>
- </div>
- <button :disabled="!hightLight" class="btn"
- @click="$router.push({ name: 'resetPassword', query: { type, account, verifycode, username } })"
- :class="hightLight ? 'hightLight' : ''">{{ $t('下一步')
- }}</button>
- </div>
+ <div class="verify">
+ <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>
+ <div class="content">
+ <div class="title textColor">{{ $t("安全验证") }}</div>
+ <p v-if="type == 3">{{ $t("verifyGoogleTips") }}</p>
+ <span class="label textColor">{{
+ type == 2 ? $t("邮箱验证") : type == 1 ? $t("手机验证") : $t("谷歌验证")
+ }}</span>
+ <p v-if="type == 2">{{ $t("verifyEmailTips", { account: account }) }}</p>
+ <p v-if="type == 1">{{ $t("verifyPhoneTips", { account: account }) }}</p>
+ <div class="iptbox inputBackground">
+ <input
+ type="text"
+ class="inputBackground textColor"
+ :placeholder="$t('请输入验证码')"
+ v-model="verifycode"
+ @input="changeInput"
+ />
+ <span v-if="type != 3" @click="senCode"
+ >{{ $t("重新发送验证码")
+ }}<template v-if="time"> ({{ time }})s</template></span
+ >
+ </div>
+ <button
+ :disabled="!hightLight"
+ class="btn"
+ @click="
+ $router.push({
+ name: 'resetPassword',
+ query: { type, account, verifycode, username },
+ })
+ "
+ :class="hightLight ? 'hightLight' : ''"
+ >
+ {{ $t("下一步") }}
+ </button>
+ </div>
+ </div>
</template>
<script>
import API from "@/API/login.js";
import Axios from "@/API/userCenter.js";
export default {
- props: {
-
+ props: {},
+ components: {},
+ data() {
+ return {
+ verifycode: "",
+ type: "",
+ account: "",
+ username: "",
+ hightLight: false,
+ timer: "",
+ time: 0,
+ };
+ },
+ mounted() {
+ let type = this.$route.query.type;
+ this.type = type;
+ this.account = this.$route.query.account;
+ this.username = this.$route.query.username;
+ if (this.type != 3) {
+ clearInterval(this.timer);
+ this.senCode();
+ }
+ },
+ methods: {
+ changeInput() {
+ if (this.verifycode.length == 6) {
+ this.hightLight = true;
+ } else {
+ this.hightLight = false;
+ }
},
- components: {
-
- },
- data() {
- return {
- verifycode: '',
- type: '',
- account: '',
- username: '',
- hightLight: false,
- timer: '',
- time: 0
- }
- },
- mounted() {
- let type = this.$route.query.type;
- this.type = type;
- this.account = this.$route.query.account;
- this.username = this.$route.query.username;
- if (this.type != 3) {
- clearInterval(this.timer)
- this.senCode()
- }
- },
- methods: {
- changeInput() {
- if (this.verifycode.length == 6) {
- this.hightLight = true;
- } else {
- this.hightLight = false;
- }
- },
- senCode() {
+ senCode() {
+ if (this.time > 0) {
+ return false;
+ }
+ API.sendVerifyCode({
+ target: this.account,
+ })
+ .then((res) => {
+ this.time = 30;
+ this.timer = setInterval(() => {
if (this.time > 0) {
- return false
+ this.time = this.time - 1;
+ } else {
+ this.time = 0;
+ clearInterval(this.timer);
}
- API.sendVerifyCode({
- target: this.account,
- }).then((res) => {
- 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)); }
- });
- }
+ }, 1000);
+ })
+ .catch((error) => {
+ if (error.code === "ECONNABORTED") {
+ this.$toast(this.$t("网络超时！"));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
},
- beforeDestroy() {
- clearInterval(this.timer)
- },
-}
+ },
+ beforeDestroy() {
+ clearInterval(this.timer);
+ },
+};
</script>
<style lang="scss" scoped>
.verify {
- font-size: 26px;
- padding: 0 32px;
+ font-size: 26px;
+ padding: 0 32px;
}
.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;
}
.title {
- font-weight: 700;
- font-size: 52px;
- margin-top: 54px;
- margin-bottom: 33px;
+ font-weight: 700;
+ font-size: 52px;
+ margin-top: 54px;
+ margin-bottom: 33px;
}
.label {
- margin-top: 23px;
+ margin-top: 23px;
}
.content {
- p {
- color: #868D9A;
- font-size: 30px;
- margin-bottom: 50px;
+ p {
+ color: #868d9a;
+ font-size: 30px;
+ margin-bottom: 50px;
+ }
+
+ .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;
}
- .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;
- }
+ span {
+ color: #1d91ff;
}
+ }
}
.btn {
- @include themify() {
- background: themed("bg_dark");
- }
+ @include themify() {
+ background: themed("bg_dark");
+ }
- color: #C0C4CC;
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 32px;
- margin-top: 180px;
- border-radius: 10px;
- width: 100%;
- border: none;
+ color: #c0c4cc;
+ height: 88px;
+ line-height: 88px;
+ text-align: center;
+ font-size: 32px;
+ margin-top: 180px;
+ border-radius: 10px;
+ width: 100%;
+ border: none;
}
.hightLight {
- @include themify() {
- background: themed("btn_main");
- }
+ @include themify() {
+ background: themed("btn_main");
+ }
- color: #fff;
+ color: #fff;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3