伸手拿...............................
index.wxml
<view class='register-box'>
<view class='register-title'>欢迎注册员工福利平台</view>
<view class='register-list'>
<view class='register-text'>手机号</view>
<input placeholder="请输入手机号码" type="number" maxlength="11" class='register-inp' bindinput="inputPhoneNum"></input>
<text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">获取验证码</text>
<text wx:if="{{alreadySend}}" class="sendMsg" >{{second+"s后重新获取"}}</text>
</view>
<view class='register-list'>
<view class='register-text'>短信验证码</view>
<input type='number' placeholder='请输入短信验证码' class='register-inp'></input>
</view>
<view class='next-btn'>下一步</view>
</view>
index.wxss
.register-title{
color:#fc5b13;
text-align:center;
font-size:26px;
margin:150rpx auto;
}
.register-list{
width: 92%;
border-bottom: 1px solid #efefef;
margin: 40rpx auto 0;
font-size:16px;
position: relative;
}
.register-text{
color: #666;
}
.register-inp{
height:85rpx;
width:70%;
}
.next-btn{
width: 92%;
height: 90rpx;
font-size:18px;
margin: 60rpx auto 0;
background: #fc5b13;
color: #fff;
border-radius: 5px;
text-align: center;
line-height: 85rpx;
}
.sendMsg {
font-size: 14px;
position:absolute;
right:0;
top:32px;
z-index: 22;
color: #fc5b13;
}
index.js
var coord = 0;
Page({
/**
* 页面的初始数据
*/
data: {
send: true,
alreadySend: false,
second: 60,
disabled: true,
phoneNum: '',
},
/**
* 获取短信验证码
*/
// 手机号部分
inputPhoneNum: function (e) {
let phoneNum = e.detail.value
this.setData({
phoneNum: phoneNum
})
},
sendMsg: function () {
var phoneNum = this.data.phoneNum;
if (phoneNum == '') {
wx.showToast({
title: '请输入手机号码',
icon: 'none',
duration: 2000
})
return;
}
//此处省略发送短信验证码功能
this.setData({
alreadySend: true,
send: false
})
this.timer()
},
showSendMsg: function () {
if (!this.data.alreadySend) {
this.setData({
send: true
})
}
},
hideSendMsg: function () {
this.setData({
send: false,
disabled: true,
buttonType: 'default'
})
},
timer: function () {
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
this.setData({
second: this.data.second - 1
})
if (this.data.second <= 0) {
this.setData({
second: 60,
alreadySend: false,
send: true
})
resolve(setTimer)
}
}
, 1000)
})
promise.then((setTimer) => {
clearInterval(setTimer)
})
},
})