first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/forget/safeVerify.vue

@@ -1,25 +1,48 @@
<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 @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="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>
        <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>
      <button
        :disabled="!hightLight"
        class="btn"
        @click="
          $router.push({
            name: 'resetPassword',
            query: { type, account, verifycode, username },
          })
        "
        :class="hightLight ? 'hightLight' : ''"
      >
        {{ $t("下一步") }}
      </button>
        </div>
    </div>
</template>
@@ -28,22 +51,18 @@
import API from "@/API/login.js";
import Axios from "@/API/userCenter.js";
export default {
    props: {

    },
    components: {

    },
  props: {},
  components: {},
    data() {
        return {
            verifycode: '',
            type: '',
            account: '',
            username: '',
      verifycode: "",
      type: "",
      account: "",
      username: "",
            hightLight: false,
            timer: '',
            time: 0
        }
      timer: "",
      time: 0,
    };
    },
    mounted() {
        let type = this.$route.query.type;
@@ -51,8 +70,8 @@
        this.account = this.$route.query.account;
        this.username = this.$route.query.username;
        if (this.type != 3) {
            clearInterval(this.timer)
            this.senCode()
      clearInterval(this.timer);
      this.senCode();
        }
    },
    methods: {
@@ -65,30 +84,35 @@
        },
        senCode() {
            if (this.time > 0) {
                return false
        return false;
            }
            API.sendVerifyCode({
                target: this.account,
            }).then((res) => {
      })
        .then((res) => {
                this.time = 30;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
              this.time = this.time - 1;
                    } else {
                        this.time = 0;
                        clearInterval(this.timer)
              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)); }
            });
        })
        .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)
    clearInterval(this.timer);
    },
}
};
</script>

<style lang="scss" scoped>
@@ -119,7 +143,7 @@

.content {
    p {
        color: #868D9A;
    color: #868d9a;
        font-size: 30px;
        margin-bottom: 50px;
    }
@@ -140,7 +164,7 @@
        }

        span {
            color: #1D91FF;
      color: #1d91ff;
        }
    }
}
@@ -150,7 +174,7 @@
        background: themed("bg_dark");
    }

    color: #C0C4CC;
  color: #c0c4cc;
    height: 88px;
    line-height: 88px;
    text-align: center;