發(fā)送驗證碼及倒計時

<template>
  <div class="forgot">
    <van-form @submit="onSubmit" ref="ruleForm" :show-error="false">
      <van-field
        v-model.trim="ruleForm.phone"
        clearable
        name="phone"
        label="手機號碼"
        placeholder="請輸入手機號碼"
        :rules="rules.phone"
      />
      <van-field
        v-model.trim="ruleForm.verificationCode"
        clearable
        name="verificationCode"
        label="驗證碼"
        placeholder="請輸入驗證碼"
        :rules="rules.verificationCode"
      >
        <template #button>
          <van-button
            round
            color="#FFBD3A"
            plain
            size="small"
            native-type="button"
            v-if="!isSendCode"
            @click="getCode"
            :loading="codeLoading"
            :disabled="codeDisabled"
            >{{ "獲取驗證碼" }}</van-button
          >
          <van-button
            size="small"
            type="default"
            native-type="button"
            :disabled="true"
            v-else
            >{{ "重發(fā)" }}{{ ` ${t} s` }}</van-button
          >
        </template>
      </van-field>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "Forgot",
  data() {
    return {
      username: "",
      password: "",
      isSendCode: false,
      t: 60,
      codeLoading: false,
      codeDisabled: false,
      ruleForm: {
        phone: "",
        verificationCode: "",
        newPassword: "",
        confirmPassword: "",
      },
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    getCode() {
      const name = "phone";
      this.$refs.ruleForm.validate(name).then(() => {
        console.log(1);
        this.sendCode();
      });
    },
    async sendCode() {
      //   try {
      //     let {
      //       verificationType,
      //       ruleForm: { phone, email, accountName, userName },
      //     } = this;
      //     accountName = this.accountName ? this.accountName : accountName;
      //     userName = this.userName ? this.userName : userName;
      //     this.codeLoading = true;
      //     this.codeDisabled = true;
      //     const { result } = await verifyContactApi({
      //       accountName,
      //       userName,
      //       verificationType,
      //       contact: verificationType === "PHONE" ? phone : email,
      //       language: this.language === "en-US" ? "ENGLISH" : "CHINESE",
      //     });
      //     if (result) {
      //       this.t = verificationType === "PHONE" ? 60 : 120;
      //       this.isSendCode = true;
      //       this.timer = window.setInterval(() => {
      //         if (this.t > 1) {
      //           this.t--;
      //         } else {
      //           window.clearInterval(this.timer);
      //           this.isSendCode = false;
      //         }
      //       }, 1000);
      //       this.codeLoading = false;
      //       this.codeDisabled = false;
      //     }
      //   } catch (error) {
      //     this.codeLoading = false;
      //     this.codeDisabled = false;
      //   }
      this.codeLoading = true;
      this.codeDisabled = true;
      this.t = 60;
      this.isSendCode = true;
      this.timer = window.setInterval(() => {
        if (this.t > 1) {
          this.t--;
        } else {
          window.clearInterval(this.timer);
          this.isSendCode = false;
        }
      }, 1000);
      this.codeLoading = false;
      this.codeDisabled = false;
    },
  },
};
</script>