1.页面代码:
<van-cell-group>
<van-field class="phone_div" type="number" value="" name="phone" label="账号" placeholder="请输入你的账号" bindchange="onPhoneChange" />
<van-button class='="send_code_div"' type="info" disabled="{{disabled}}" bind:click="onSendCode">
<text class='code_text'>{{codeText}}{{counttime}}{{codeTextLast}}</text>
</van-button>
<van-field type="number" value="" name="code" label="验证码" placeholder="请输入验证码" error-message="" border="{{ newPassword }}" bindchange="onCodeChange" />
</van-cell-group>
2.js代码:
/*定时器*/
function countDown(that, count) {
if (count == 0) {
that.setData({
counttime: '',
codeText: '获取验证码',
codeTextLast: '',
disabled: false
})
return;
}
that.setData({
counttime: count
})
setTimeout(function () {
count--;
countDown(that, count);
}, 1000);
0
}
/*验证码按钮事件**/
onSendCode: function() {
var phone = this.data.phone;
var that = this;
if (phone.length <= 0) {
Dialog.alert({
message: '请输入电话号码'
});
return;
}
//调用后端发送验证码短信接口
http.get("/sendPoneCode", {
mobile: phone
}, function(err, res) {
if (res.errCode == -999) {
Dialog.alert({
message: '获取验证码失败'
});
return;
}
if (res.errCode == 0) {
const toast = Toast.success('获取成功');
that.setData({
disabled: true,
codeText:'',
codeTextLast:'秒重新获取'
})
countDown(that, 60);
}
})
}
/*data参数*/
data: {
phone: '',
code: '',
counttime: '',
codeText:'获取验证码',
codeTextLast:'',
disabled: false
}
效果展示:
备注:前端用到了