微信小程序之验证码短信倒计时

最近做的一个项目里有一个收验证码的倒计时需求，mark出来~希望对小伙伴们有帮助

<view class="checkPhone-box">
  <view class="checkPhone">
    <view class="checkPhoneTip">验证码已发送至您的手机,请注意查收！</view>
    <view class="checkPhone-item">
      <text class="item-label">请输入验证码</text>
      <input type="number" maxlength='6' class="item-input"/>
      <button class="item-btn" disabled="{{isDisabled}}" bindtap="sendCode">{{sendBtn}}</button>
    </view>
  </view>
  <view class="next-step">
    <view class="next-btn" bindtap="next">
      下一步
    </view>
  </view>
</view>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkOk:false,
    setInter:'', // 计时器
    sendBtn:'(已发送)60s', // 按钮文字
    isDisabled:true // 按钮是否禁用

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "绑定银行卡"
    });
    this.startTimer();
  },
  // 计时器
  startTimer:function(){
    var self = this;
    var count = 60;
    this.data.setInter = setInterval(function () {
      count--;
      var sendBtnstr = "(已发送)" + count+"s";
      self.setData({
        sendBtn: sendBtnstr,
        isDisabled: true
      })
      if (count == 0) {
        sendBtnstr = "重新发送";
        self.setData({
          sendBtn: sendBtnstr,
          isDisabled: false
        });
        self.endSetInter();
      }
    }, 1000);
  },
  endSetInter: function () {
    var self = this;
    // 清除计时器  即清除setInter
    clearInterval(self.data.setInter)
  },
  sendCode:function(){
    if (!this.data.isDisabled){
      this.startTimer();
    }
    else{
      console.log(this.data.isDisabled);
    }
  }
  
})