微信小程序 短信验证码倒计时

伸手拿...............................

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)
    })
  },
})