微信小程序----短信驗證碼倒計時插件

效果圖

JS

// 倒計時插件
class CountTime {
  constructor(page) {
    this.page = page;
    this.time = 60;
    this.timer = null;
    this.page.setData({ code: '獲取驗證碼', flag: false });
  }
  countTime() {
    this.page.setData({ flag: true });
    if (this.time > 0) {
      this.time--;
      this.page.setData({ code: this.time + 's後獲取' });
      this.timer = setTimeout(() => {
        this.countTime();
      }, 1000);
    } else {
      this.time = 60;
      clearTimeout(this.timer);
      this.page.setData({ code: '獲取驗證碼', flag: false });
    }
  }
}
module.exports = CountTime;

使用方法

1.引入插件countTime.js

const CountTime = require("../../utils/countTime.js");

2.在 onLoad 週期初始化

this.time = new CountTime(this);

3.在點擊獲取二維碼按鈕中使用

// 調用驗證碼獲取倒計時方法
getCode(){
    let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (phoneCodeVerification.test(this.data.phone)){
        if (!this.data.flag) {
        this.time.countTime();
        // 獲取驗證碼
        this.getCodeData();
        }else{
        this.wetoast.toast({ title: '請不要急躁，60s後再次獲取！' });
        }
    }else{
        this.wetoast.toast({ title: '手機號碼格式不正確，請重新輸入！'});
    }
}

4.完整使用方法

const CountTime = require("../../utils/countTime.js");
const urlList = require("../../utils/config.js");
const app = getApp();
Page({
  onLoad(){
    this.time = new CountTime(this);
    // 構建WeToast
    this.wetoast = new app.WeToast();
  },
  // 獲取手機號碼
  getPhone(e){
    this.setData({phone: e.detail.value})
  },
  // 獲取驗證碼
  getCodeData() {
    app.globalMethod.POST({
      url: urlList.getModifyPersonalInfoCodeUrl,
      data: { phone: this.data.phone, type: 1 },
      success: res => {
        // console.log(res)
        if (res.data.code == "200") {
          this.wetoast.toast({ title: '驗證碼發送成功，請注意查收！' });
        } else {
          this.wetoast.toast({ title: res.data.message });
        }
      }
    })
  },
  // 調用驗證碼獲取倒計時方法
  getCode(){
    let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (phoneCodeVerification.test(this.data.phone)){
      if (!this.data.flag) {
        this.time.countTime();
        // 獲取驗證碼
        this.getCodeData();
      }else{
        this.wetoast.toast({ title: '請不要急躁，60s後再次獲取！' });
      }
    }else{
      this.wetoast.toast({ title: '手機號碼格式不正確，請重新輸入！'});
    }
  }
})