先看显示效果
界面很简单,就是两个输入框,一个发送验证码按钮,一个确认按钮,发送短信后发送验证码的框内显示倒计时,同时限制点击。
看看代码
- HTML
<view class="input-container">
<view class="input-button-container row-center">
<view class="input-hint">手机号</view>
<input class="input flex1" model:value="{{ phoneNumber }}" type="number" maxlength="11" placeholder="请输入手机号" bindinput="inputChange" />
</view>
<view class="divider"></view>
<view class="input-button-container row-center">
<view class="input-hint">短信验证码</view>
<input class="input flex1" model:value="{{ messageCode }}" type="number" maxlength="6" placeholder="请输入验证码"
bindinput="inputChange" />
<view class="code-button" bindtap="sendMessage">{{waitingCode?waiteTime:'发送验证码'}}{{waitingCode?'s':''}}
</view>
</view>
<view class="divider"></view>
</view>
<button class="login-button" disabled="{{!confirmable}}"
style="background:{{confirmable?'#0B7BFBFF':'#D8D8D8'}};color:white"
bindtap="onConfirm">确认</button>
- CSS
/* 横向布局,垂直居中 */
.row-center{
display:flex;
flex-direction:row;
align-items: center;
}
.flex1{
flex: 1;
}
.input-container {
width: 100%;
box-sizing: border-box;
}
.input {
height: 104rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 44rpx;
border: 0rpx;
}
.input-hint{
width: 160rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #2E2E2E;
line-height: 44rpx;
margin: 0 32rpx;
}
.input-button-container {
height: 106rpx;
overflow: hidden;
padding-right: 32rpx;
}
.divider {
height: 2rpx;
background: #E5E5E5;
margin-left: 32rpx;
}
.code-button {
height: 56rpx;
width: 168rpx;
border-radius: 28rpx;
background: white;
border: 2rpx solid #0B7BFBFF;
text-align: center;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0B7BFBFF;
line-height: 56rpx;
}
.login-button {
height: 96rpx;
color: white;
border-radius: 48rpx;
margin-top: 48rpx;
margin: 64rpx 32rpx;
}
/* 去除按钮毛刺 */
.login-button::after {
border-radius: 48rpx;
border: 0;
}
- Page.js
Page({
data: {
//按钮是否可用
confirmable: false,
//发送短信等待中
waitingCode: false,
waiteTime: 0,
interval: -1, //计时器
phoneNumber: "",
messageCode: "",
},
// inputChange还有一个作用就是解决双向绑定的恶心警告
inputChange() {
this.setData({
confirmable: !this.isEmpty(this.data.phoneNumber) && !this.isEmpty(this.data.messageCode)
})
},
isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
},
sendMessage() {
//正在等待
if(this.data.waitingCode) {
return
}
if (this.data.phoneNumber == '') {
wx.showToast({
title: '请先填写手机号',
})
return
}
wx.showLoading({
title: '正在发送短信',
})
let that = this
app.request({
url: 'you/url/to/get/code',
data: {
mobile: this.data.phoneNumber,
},
success: function(res) {
wx.hideLoading()
wx.showToast({
title: '发送短信成功',
})
that.setData({
waitingCode: true,
waiteTime: 60,
//设置倒计时60秒,每秒触发一次,拿到interval用于关闭
interval: setInterval(function (res) {
if (that.data.waiteTime > 0) {
that.setData({
waiteTime: --that.data.waiteTime
})
} else {
//注意关闭定时器
that.clearMessage()
that.setData({
waitingCode: false,
waiteTime: 0
})
}
}, 1000)
})
}
})
},
//关闭定时器
clearMessage() {
clearInterval(this.data.interval)
this.setData({
waitingCode: false,
waiteTime: 0,
interval: -1
})
},
onConfirm(e) {
let that = this
app.request({
url: 'you/url/to/do/something',
data: {
mobile: this.data.phoneNumber,
code: this.data.messageCode
},
success: function(res) {
wx.showToast({
title: '绑定成功',
})
wx.navigateBack({
delta: 1,
})
}
})
},
})
判定按钮可点击
这里通过 disabled 限制点击,使用 style 设置背景颜色
<button class="login-button" disabled="{{!confirmable}}"
style="background:{{confirmable?'#0B7BFBFF':'#D8D8D8'}};color:white"
bindtap="onConfirm">确认</button>
在 CSS 中需要去除一下毛刺
.login-button {
height: 96rpx;
color: white;
border-radius: 48rpx;
margin-top: 48rpx;
margin: 64rpx 32rpx;
}
/* 去除按钮毛刺 */
.login-button::after {
border-radius: 48rpx;
border: 0;
}
使用 bindtap 在每次输入的时候判断是否可用点击
inputChange() {
this.setData({
confirmable: !strUtil.isEmpty(this.data.phoneNumber) && !strUtil.isEmpty(this.data.messageCode)
})
},
isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
},
发送短信倒计时
在发送短信成功后回调,设置等待短信的标志位,重置等待倒计时,启动定时器,定时器详细使用看官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/base/timer/setInterval.html
that.setData({
waitingCode: true,
waiteTime: 60,
interval: setInterval(function (res) {
if (that.data.waiteTime > 0) {
that.setData({
waiteTime: --that.data.waiteTime
})
} else {
that.setData({
waitingCode: false,
waiteTime: 0
})
}
}, 1000)
})
关闭定时器
关闭定时器是一个习惯问题,释放资源,还是挺有必要的,可以在倒计时结束的时候关闭
clearMessage() {
clearInterval(this.data.interval)
this.setData({
waitingCode: false,
waiteTime: 0,
interval: -1
})
}
结语
说的不多,代码挺详细
end
完美撒花