获取手机验证码倒计时

最新推荐文章于 2021-09-17 14:42:41 发布

袁丢丢

最新推荐文章于 2021-09-17 14:42:41 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_39566536/article/details/107568646

小程序专栏收录该内容

5 篇文章

订阅专栏

wxml

<view class="phoneContainer">
  <input type="number" maxlength="11" disabled="{{disabled}}" placeholder="手机号" value="{{phoneNumber}}" class="phoneNumber" bindinput="getPhone"/>
</view>
<view class="codeContainer">
  <input type="number" placeholder="验证码" bindinput="getPhoneCode" class="code" />
  <button class="getCode" bindtap="getCode"  disabled='{{isDis}}' style="background:{{bg==true?'#ccc':'linear-gradient(to right,#7D93FF, #6667FF)'}}">
  	{{tip=='new'?'获取验证码':tip=='send'?'已发送'+seconds:'重新发送'}}
  </button>
</view>

data: {
    btnDisabled:false,
    seconds:60,
    tip:'new',
    phoneNumber:'',
    phoneCode:'',
    binding:true,//已绑定手机号
    disabled:false,//能否编辑手机号
    uid:'',
    isDis:false//倒计时
  },


/* 获取手机号 */
  getPhone(e){
    this.setData({
      phoneNumber: e.detail.value
    })
  },
 /* 获取验证码 */
  getPhoneCode(e){
    this.setData({
      phoneCode: e.detail.value
    })
  },
  /* 点击获取验证码 */
  getCode: function(e){
    var userinfo = wx.getStorageSync('wxinfo');
    var uid = userinfo.uid;
    let reg= /^1[0-9]{10}/g;
    let that = this;
    var phoneNumber = that.data.phoneNumber;
    if (reg.test(phoneNumber) ){
      wx.request({
        url:  '/api/getCode/getCode', //仅为示例，并非真实的接口地址
        data: {
          phone: phoneNumber,
          uid: uid,
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {
          if (res.data.code == 100) {
              var timer = null;
              var seconds = that.data.seconds;
              that.setData({
                btnDisabled: true,
                bg: true,
                tip: 'send',
                isDis:true
              })
            timer = setInterval(function () {
              seconds--;
              if (seconds < 0) {
                clearInterval(timer)
                seconds = 60;
                that.setData({
                  seconds: seconds,
                  tip: 'agin',
                  bg: false,
                  btnDisabled: false,
                  isDis:false
                })
              }
              that.setData({
                seconds: seconds
              })
            }, 1000)
          }else{
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    }else{
      wx.showToast({
        title: '请输入正确的手机号',
        icon:'none',
        duration: 2000
      })
    }
    
  },