小程序填写手机号获取验证码

小程序填写手机号获取验证码

wxml文件

  <view class="df con">
    <view class="right">手机号 </view>
    <input placeholder="请输入手机号" value="{{phone}}" disabled="true" placeholder-class="p-input" bindinput="getPhone" />
  </view>

  <view class="df con">
    <view class="right">验证码 </view>
    <input placeholder="请输入验证码" placeholder-class="p-input" bindinput="getCode" />
    <view class="send df-c {{sendContent < 60 ?'send-adopt':''}}" bindtap="sendCode">{{sendContent < 60 ? sendContent + "秒后重新发送" :'获取验证码'}}</view>
  </view>

js文件

  data: {
    sendContent: 60,
    phone: '',
    code: '',
    intervalTime:{},
  },
  
//获取手机号
  getPhone(e) {
    this.setData({
      phone: e.detail.value
    })
  },
  
//发送验证码-改变按钮状态
  sendCode() {
    let this_ = this;
    
    //验证手机号输入是否正确
    if (!verificationPhone.checkPhone(this_.data.phone)) {  
      return wx.showToast({
        title: '手机号为空或输入有误',
        icon: 'none',
        duration: 2000
      })
    }
    
    //倒计时未完成点击无效
    if (this_.data.sendContent < 60 && this_.data.sendContent !== 0) {
      return;
    }

    this.data.intervalTime = setInterval(() => {
      if (this_.data.sendContent <= 60) {
        this_.data.sendContent = this_.data.sendContent - 1;
        this_.setData({
          sendContent: this_.data.sendContent
        })
        console.log('倒计时开始', this_.data.sendContent)
      }
      if (this_.data.sendContent <= 0) {
        console.log('倒计时完成')
        this_.setData({
          sendContent: 60
        })
        clearInterval(this.data.intervalTime)
      }
    }, 1000)
    this.getSendCode();   //调用发送验证码接口事件
  },

  onUnload: function () {
  //页面销毁时清除定时器
    clearInterval(this.data.intervalTime);
  },