
// 倒计时插件
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: '手机号码格式不正确,请重新输入!'});
}
}
})