123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 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>