wxml
<view class='shouji_info'>
<view class='info_list'>
<input placeholder='請輸入手機號' bindinput="phoneInput"></input>
</view>
<view class='info_list'>
<input class='left' placeholder='驗證碼'></input>
<button class='right yanzheng_btn' bindtap="bindButtonTap" disabled='{{disabled}}' style="{{text}}</button>
</view>
</view>
wxss
page{
font-size: 30rpx;
}
.left{ float: left}
.right{float: right}
.info_list {
height: 103rpx;
line-height: 103rpx;
width: 100%;
border-bottom: 1px solid #bcbcbd;
padding-left: 24rpx;
display: inline-block;
font-size: 33rpx;
}
.shouji_info input {
margin-top: 25rpx;
/* background: rebeccapurple; */
}
.yanzheng_btn {
width: 207rpx;
background: #929fff;
margin-right: 20rpx;
height: 82rpx;
margin-top: 12rpx;
text-align: center;
line-height: 82rpx;
border-radius: 15rpx;
color: #fff;
font-size: 33rpx;
padding: 0 10rpx;
}
js
// pages/biji/biji.js
Page({
data: {
text: '獲取驗證碼', //按鈕文字
currentTime: 61, //倒計時
disabled: false, //按鈕是否禁用
phone: '' //獲取到的手機欄中的值
},
//獲取手機欄input中的值
phoneInput: function(e) {
this.setData({
phone: e.detail.value
})
},
//獲取驗證碼按鈕事件
bindButtonTap: function() {
var that = this;
that.setData({
disabled: true, //只要點擊了按鈕就讓按鈕禁用 （避免正常情況下多次觸發定時器事件）
color: '#ccc',
})
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手機號跟倒計時值變例成js值
var warn = null; //warn為當手機號為空或格式不正確時提示用戶的文字，默認為空
if (phone == '') {
warn = "號碼不能為空";
} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
warn = "手機號格式不正確";
} else {
//當手機號正確的時候提示用戶短信驗證碼已經發送
wx.showToast({
title: '短信驗證碼已發送',
icon: 'none',
duration: 2000
});
//設置一分鍾的倒計時
var interval = setInterval(function() {
currentTime--; //每執行一次讓倒計時秒數減一
that.setData({
text: currentTime + 's', //按鈕文字變成倒計時對應秒數
})
//如果當秒數小於等於0時 停止計時器 且按鈕文字變成重新發送 且按鈕變成可用狀態 倒計時的秒數也要恢復成默認秒數 即讓獲取驗證碼的按鈕恢復到初始化狀態只改變按鈕文字
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
text: '重新發送',
currentTime: 61,
disabled: false,
color: '#929fff'
})
}
}, 1000);
};
//判斷 當提示錯誤信息文字不為空 即手機號輸入有問題時提示用戶錯誤信息 並且提示完之后一定要讓按鈕為可用狀態 因為點擊按鈕時設置了只要點擊了按鈕就讓按鈕禁用的情況
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#929fff'
})
return;
};
},
})