需求:点击获取验证码按钮后开始计时,秒数为0结束
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
<view class="action">
<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
</view>
</view>
data() {
return {
smsCountDown: 0,
smsCountInterval: null,
}
}
computed: {
getSendBtnText() {
if (this.smsCountDown > 0) {
return this.smsCountDown + '秒后发送';
} else {
return '发送验证码';
}
},
},
methods: {
onSMSSend() {
let smsParams = {};
smsParams.mobile=this.phoneNo;
smsParams.smsmode="0";
let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
if(!smsParams.mobile || smsParams.mobile.length==0){
this.$tip.toast('请输入手机号');
return false
}
if(!checkPhone.test(smsParams.mobile)){
this.$tip.toast('请输入正确的手机号');
return false
}
this.$http.post("/sys/sms",smsParams).then(res=>{
if(res.data.success){
this.smsCountDown = 60;
this.startSMSTimer();
}else{
this.smsCountDown = 0;
this.$tip.toast(res.data.message);
}
});
},
startSMSTimer() {
this.smsCountInterval = setInterval(() => {
this.smsCountDown--;
if (this.smsCountDown <= 0) {
clearInterval(this.smsCountInterval);
}
}, 1000);
},
}
效果图: