发送验证码加倒计时功能

最新推荐文章于 2024-05-28 18:03:20 发布

mySteam`

最新推荐文章于 2024-05-28 18:03:20 发布

阅读量593

点赞数 1

分类专栏：验证码文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq4717529/article/details/121828976

版权

验证码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

      <div class="card-group">
        <p class="left">手机号码</p>
        <p class="right">{{desPhone(mobile)}}</p>
      </div>
      <div class="card-group">
        <input
          type="number"
          class="auth-code fl"
          @input="changeInput"
          placeholder="请输入验证码"
          v-model="authCode"
        />
        <input
          type="button"
          class="send-btn fr"
          v-model="getCode"
          @click="sendCode"
          :disabled="isAble"
        />
      </div>
      <div
        class="query-btn"
        :class="{'active':card_name==''||card_no==''||authCode==''}"
        @click="finish"
      >
        立即查询
      </div>

以下是js逻辑

data() {
          return {
            InterValObj: false, //控制倒计时
            count: 60, //
            authCode: "", //验证码
            num: 0, //倒计时
            getCode: "获取验证码",
            isAble: false, //发送控制,
        },
        mounted() {},
        methods: {
          // 验证码截取
          changeInput() {
            this.authCode = this.authCode.slice(0, 6);
          },
          sendCode() {
            //发送验证码
            let _this = this;
            ajax(
              "/interf/frontEnd/SMS/SMS1",
              {
                user_id: "",
                ses_id: "",
                mobile: "",
                sms_type: "10",
                channel: "01",
              },
              true,
              "POST",
              function (data) {
                vant.Toast(data.msg);
                if (data.result == "0") {
                  _this.countDown();
                }
              }
            );
          },
          
          countDown: function () {
            this.num = this.count;
            this.isAble = true;
            this.getCode = this.num + "s";
            this.InterValObj = window.setInterval(() => {
              this.SetRemainTime();
            }, 1000);
          },

          SetRemainTime() {
            if (this.num == 0) {
              this.isAble = false;
              window.clearInterval(this.InterValObj);
              this.getCode = "重新发送";
            } else {
              this.num--;
              this.getCode = this.num + "s";
            }
          },

          finish() {
            if (this.authCode.length < 6) {
              vant.Toast("请输入验证码");
              return false;
            }
            let _this = this;
            ajax(
              "/interf/frontEnd/SMS/SMS2",
              {
                user_id: "",
                ses_id: "",
                mobile: "",
                sms_type: "05",
                auth_code: "",
              },
              true,
              "POST",
              function (data) {
                if (data.result == "0") {
                  this.query();
                }
              }
            );
          },
          onInput() {
            this.card_no = this.card_no.replace(/[^A-Za-z0-9]/g, "");
          },
          onCancel() {
            this.showPicker = false;
          },
          onConfirm(value) {
            this.certType.text = value.text;
            this.certType.value = value.value;
            this.showPicker = false;
          },

          query() {
            let _this = this;
            if (this.card_no == "" || this.card_name == "") {
              return false;
            }
            ajax(
              "/interf/frontEnd/AC/AC08",
              {
                name: "",
                cert_no: "",
                cert_type:"",
              },
              true,
              "POST",
              function (data) {
                if (data.result == "0") {
                  console.log('这里就成功了,qq4717529')
                }
              }
            );
          },