页面效果
wxml页面代码
<view class='verificationCode'>
<view class='verificationText'>验证码</view>
<input class="userName" type="number" placeholder="请输入短信验证码" class='verificationInput'/>
<view class='getVerification' bindtap="getVerification" wx:if='{{!verificationCodeButton}}'>{{verificationText}}</view>
<view class='getVerifications' wx:if='{{verificationCodeButton}}'>已发送{{count}}s</view>
</view>
css页面代码
.verificationCode {
height: 126rpx;
width: 686rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: row;
margin-top: 32rpx;
align-items: center;
}
.verificationText {
padding: 0 40rpx;
}
.getVerification,
.getVerifications {
padding: 24rpx;
border-radius: 16rpx;
background: #0099FF;
margin-right: 24rpx;
font-size: 24rpx;
color: #FFFFFF;
}
.getVerifications {
background: #9ED4F9;
}
.verificationInput {
flex: 1;
}
js页面代码
Page({
data: {
verificationCode: null,
count: 30,
verificationText: '获取验证码',
},
/**
* 30s倒计时
*/
countDown() {
const that = this;
const { count } = that.data;
if (count == 0) {
that.setData({
count: 60,
verificationCodeButton: false,
verificationText: '重新发送'
});
clearTimeout(time);
return;
}
const time = setTimeout(function () {
that.setData({
count: count - 1,
});
that.countDown();
}, 1000);
},
})