获取验证码在倒计时未完成前清除验证码

场景：

在点击获取验证码后，验证码开始倒计时，在点击登录后，出现弹窗不跳转页面。因此在出现弹窗后，即使倒计时没有结束，也要将倒计时的文字变为重新获取验证码。

template代码

javascript 复制代码

    <div class="form-box">
      <el-form ref="form" :model="form">
        <el-form-item prop="phoneNo">
          <el-input
            v-model="form.phoneNo"
            type="number"
            placeholder="请输入手机号"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="validateCode" class="code">
          <el-input
            v-model="form.validateCode"
            placeholder="请输入验证码"
            maxlength="6"
          >
          </el-input>
          <el-button
            :disabled="btnStatus"
            @click="getMyCode"
            class="code-btn"
            >{{ codeMessage }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="form-subimt" @click="toLoginH5">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

css代码

javascript 复制代码

  .form-box {
    padding: 0px 20px 0px 20px;
    margin-bottom: 24px;
    ::v-deep .el-form-item {
      margin-bottom: 12px;
    }
    ::v-deep .el-input__inner {
      border: none;
      border-radius: 30px;
    }
    ::v-deep .el-form-item__content {
      margin-left: 0px;
      display: flex;
    }
    .code {
      background: #fff;
      border-radius: 30px;
      /deep/.el-input {
        width: 60%;
      }
      //   ::v-deep .el-form-item__content {
      //     margin-left: 0px;
      //   }

      /deep/.el-button {
        border-radius: 20px;
        // width: 43%;
        padding: 12px;
        // margin-left: 2%;
        background: #fff;
        color: #1448ff;
        border: none;
        flex: 1;
        text-align: right;
      }
    }
    .form-subimt {
      border-radius: 30px;
      background: radial-gradient(
          85.8% 72.34% at 49.85% 92.55%,
          #349eff 0%,
          rgba(53, 72, 255, 0) 100%
        ),
        linear-gradient(180deg, rgba(53, 71, 255, 0) 15.92%, #3385ff 102.36%),
        linear-gradient(89deg, #1463ff -5.8%, #7214ff 119.36%);
      box-shadow: 0px 4px 10px 0px rgba(20, 72, 255, 0.2);
      width: 100%;
      color: #fff;
      text-align: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px; /* 150% */
      margin-top: 8px;
      height: 48px;
    }
  }

js代码

javascript 复制代码

data(){
 timePromise: null,
 codeMessage: "获取验证码",
 btnStatus: false,
}

 //登陆
    toLoginH5() {
      if (this.form.phoneNo === "") {
        this.$message.error("请输入手机号");
        return false;
      }
      if (
        !/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(
          this.form.phoneNo
        )
      ) {
        this.$message.error("手机号格式错误");
        return false;
      }
      if (!this.form.validateCode.length) {
        this.$message.error("请输入验证码");
        return false;
      }
      loginH5({
        telephone: this.form.phoneNo,
        validateCode: this.form.validateCode,
      }).then((res) => {
        if (res.data.data.type == 1) {
          this.showModalAlready = true;  弹窗开关
          clearInterval(this.timePromise);  在获取到结果后就清除倒计时
          this.codeMessage = "重发验证码";
          this.btnStatus = false;
          this.form = {
            phoneNo: "",
            validateCode: "",
          };
      });
    },
    //获取验证码
    getMyCode() {
      this.btnStatus = true;
      if (this.form.phoneNo == "") {
        this.btnStatus = false;
        return false;
      }
      if (
        !/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/.test(
          this.form.phoneNo
        )
      ) {
        this.btnStatus = false;
        return false;
      }
      var second = null;
      this.timePromise = undefined;
      if (second === null) {
        second = 60;
        getCode({ phoneNo: this.form.phoneNo })
          .then((res) => {
            if (res.data.code == "0") {
              this.$message.success("验证码发送成功");
              this.loading = false;
              const _this = this;
              this.timePromise = setInterval(function () {
                if (second <= 0) {
                  clearInterval(this.timePromise);
                  this.timePromise = undefined;
                  second = null;
                  _this.codeMessage = "重发验证码";
                  _this.btnStatus = false;
                } else {
                  _this.codeMessage = second + "s";
                  second--;
                }
              }, 1000);
            } else {
              this.loading = false;
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            this.btnStatus = false;
            this.loading = false;
            second = null;
          });
      } else {
        return false;
      }
    },