mpvue发送验证码倒计时不给点击

1. 页面上

<div class="teleBox">
  <input type="text" class="teleCode" maxlength="4" v-model="teleCode">
  <span class="codeClick" @tap="isClick && gainCode()">{{time}}</span>
</div>

2. data数据

 isClick:  true, // 是否控制获取验证码的点击事件
 time: '获取验证码',

3.methods点击事件

// 获取验证码
    gainCode: function () {
      if(!this.isClick){
        return;
      }
      let flag = this.checkPhoneNum(this.phoneNum); //接受手机号码校验的返回值
      let mobile = this.phoneNum;
      if(flag){
        get('/os-wx-bee/sso/captcha.html?mobile='+mobile+'&type=1',{}).then(res => {
          if (res.code === 0) {
            this.isClick = false;
            let times = 60; // 用于倒计时
            this.time = times+'s';
            this.interval = setInterval(() =>{
              times--;
              this.time = times+'s';
              if(times < 0){
                this.time = '重新获取';
                this.isClick = true;
                clearInterval(this.interval);
              }
            },1000)
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },

4 前后台切换重置倒计时onShow里面写

this.isClick = true;
let interval = this.interval;    // 保存定时器的id
 clearInterval(interval);
 this.time = '获取验证码';