验证码倒计时模块,(可能有误,后续待测试)

Page({
  data: {
    // 手机验证码
    phone_number: '', // 手机号
    phone_code_text: '获取验证码',  // 按钮提示信息
    phone_code: '', // 验证码
    status: true,
  },
  // 手机输入 
  bindnumbervalue(event){
    this.setData({
      phone_number: event.detail.value
    })
  },
  // 验证码功能
  bindcodevalue(event){
    this.setData({
      phone_code: event.detail.value
    })
  },
  // 点击获取验证码  并添加 debounce 节流防抖
  verification: debounce(function(e){
    if((this.data.phone_number).length !== 11){
      wx.showToast({
         : '请输入正确的手机号',
        icon: 'none'
      })
      return 
    }
    
    // 此处需要调用api接口, 假设返回 code 0 ,成功.  返回其他 return
    
    console.log(this.data.status)
    if (this.data.status === false) {
      return
    }

    var _this = this
    var code_number = 60 // 定义 60 秒的倒计时
    var code_value = setInterval(function () {
      _this.setData({
        phone_code_text: '重新获取' + (--code_number) + 's',
        status: false
      })
      if (code_number == 0) {
        clearInterval(code_value)
        _this.setData({
          phone_code_text: '获取验证码',
          status: true,
        })
      }
    }, 1000)
  }),
})
收藏 打印