美文网首页
发送验证码及倒计时

发送验证码及倒计时

作者: 萤火kin | 来源:发表于2022-03-29 18:40 被阅读0次

    发送验证码及倒计时

    <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
                >{{ "重发" }}{{ ` ${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>
    

    相关文章

      网友评论

          本文标题:发送验证码及倒计时

          本文链接:https://www.haomeiwen.com/subject/uucpjrtx.html