2020-03-26 倒计时处理

一：

              

                plain

                :loading="isLoadingYzm"

                :class="{'border-0':codeSrc}"

                color="#80CA63"

                style="background:#FFFFFF;margin-top:5%"

                @click="getYzm5"

              >

                获取验证码

                {{showtime}}

              

            

二：data()定义

  // 计时器,注意需要进行销毁

      timeCounter: null,

      // null 则显示按钮 秒数则显示读秒

      showtime: null,

三：methods里设置倒计时

 // 1，倒计时显示处理

 countDownText(s) {

  this.showtime = `${s}s后重新获取`

 },

//2， 倒计时 60秒 不需要很精准

 countDown(times) {

  const self = this;

  // 时间间隔 1秒

  const interval = 1000;

  let count = 0;

  self.timeCounter = setTimeout(countDownStart, interval);

  function countDownStart() {

  if (self.timeCounter == null) {

   return false;

  }

  count++

  self.countDownText(times - count + 1);

  if (count > times) {

   clearTimeout(self.timeCounter)

   self.showtime = null;

  } else {

   self.timeCounter = setTimeout(countDownStart, interval)

  }

  }

 },

//3，注册根据手机号获取验证码

    getYzm() {

      // 根据短信注册账号

      if (this.phone == "") {

        window.vant.Toast("请输入手机号码");

        return;

      } else {

        if (!/^1[3456789]\d{9}$/.test(this.phone)) {

          window.vant.Toast("手机号码有误，请重填");

          return false; 

        }

      }

      this.API.sendMsg({

        phone: this.phone

      })

        .then(res => {

          if (res.code == 200) {

            this.countDown(60);

            window.vant.Toast(res.msg);

          } else {

            // this.isLoadingYzm = false;

            window.vant.Toast(res.msg);

          }

        })

        .catch(err => {

          console.log(err);

        });

    },