微信小程序发送验证码带倒计时


1、wxml代码

<view class='main'>

    <!--手机号-->

    <view class='mobile-view'>

        <text class='label'>手机号</text>

        <!--<view class='qh'><Select prop-array='{{selectArray}}' new-class="new-selectBox" bind:myget='getDate'></Select></view>-->

        <input type='mobile' value='{{phone}}' bindinput="handleInputPhone" class='mobile' placeholder='请输入手机号' maxlength='11'></input>

    </view>

    <view class='code-view'>

      <text class='label'>验证码</text>

      <input type='number' maxlength="6" class="code"  value='{{Code}}' bindinput="handleVerificationCode" placeholder='请输入验证码'></input>|

      <button class='sendcode'  bindtap='doGetCode' disabled='{{disabled}}'>{{text}}</button>

    </view>

    <button class='red-button' bindtap='bindmobile'>确认绑定</button>

</view>

2、wxss代码

page{background:#f7f7f7;}

.main{padding:0 30rpx;width:100%; box-sizing:border-box;}

.mobile-view{width:100%;height:118rpx;border-bottom:1px solid #e6e6e6;line-height:118rpx;box-sizing:border-box;

display:flex;flex-direction:row;justify-content:flex-start;}

.mobile-view .label{margin-right:20rpx;font-size:32rpx;}

.qh .new-selectBox{border:0;background:none;margin-top:30rpx;}

.mobile{font-size:32rpx;padding:43rpx 10rpx;height:32rpx; line-height:32rpx;margin-left:10rpx;color:#000;}

.code-view{width:100%;height:118rpx;border-bottom:1px solid #e6e6e6;line-height:118rpx;box-sizing:border-box;

display:flex;flex-direction:row;justify-content:flex-start;color:#dedede;}

.code-view .label{color:#000;font-size:32rpx;margin-right:20rpx;}

.code-view .code{width:35%;font-size:32rpx;padding:43rpx 10rpx;height:32rpx; line-height:32rpx;margin-left:10rpx;color:#000;}

.code-view .sendcode{font-size:28rpx; line-height: 118rpx;color:#f8aca9}

.code-view button.button-hover{background:none;}

.red-button{width:90%;height:98rpx; line-height:98rpx;background:#f84438;color:#fff;font-size:32rpx;margin-top:100rpx;border-radius:49rpx;}

3、js代码

//首先是data里面

data: {

    text: "获取验证码",

    currentTime: 61,//倒计时时长

    disabled: false,//按钮是否可点

    phone: '',//手机号

    Code: '',//验证码

  },

//获取手机号

  handleInputPhone: function (e) {

    //console.log("手机号:" + e.detail.value);

    this.setData({

      phone: e.detail.value

    })

  },

  //获取验证码

  handleVerificationCode: function (e) {

    //console.log("验证码:" + e.detail.value);

    this.setData({

      Code: e.detail.value

    })

  },

  doGetCode: function () {

    var that = this;

    that.setData({

      disabled: true, //只要点击了按钮就让按钮禁用 (避免正常情况下多次触发定时器事件)

      color: '#fff',

    })

    var phone = that.data.phone;

    var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值

    var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字,默认为空

    //console.log(qh+phone);

    if (phone == '') {

      warn = "手机号码不能为空";

    } else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {

      warn = "手机号格式不正确";

    }

    if (warn != null) {

      wx.showModal({

        title: '提示',

        content: warn

      })

      that.setData({

        disabled: false,

        color: '#f1f1f1'

      })

      return;

    }

    wx.request({

      header: { 'Authorization': 'Bearer' + wx.getStorageSync("token") },

      url: app.globalData.host + '/user/message', //填写发送验证码接口

      method: "POST",

      data: {

        mobile: phone,

        type:'1'

      },

      success: function (res) {

        //当手机号正确的时候提示用户短信验证码已经发送

        wx.showToast({

          title: '短信验证码已发送',

          icon: 'none',

          duration: 2000

        });

        //设置一分钟的倒计时

        var interval = setInterval(function () {

          currentTime--; //每执行一次让倒计时秒数减一

          that.setData({

            text: currentTime + 's后可再次发送', //按钮文字变成倒计时对应秒数

          })

          //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字

          if (currentTime <= 0) {

            clearInterval(interval)

            that.setData({

              text: '重新发送',

              currentTime: 61,

              disabled: false,

              color: '#66ccff'

            })

          }

        }, 1000);

      }

    })

    //判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况

    if (warn != null) {

      wx.showModal({

        title: '提示',

        content: warn

      })

      that.setData({

        disabled: false,

        color: '#33FF99'

      })

      return;

    }

  },

  bindmobile: function (e) {

    var that = this;

    if (this.data.Code == '') {

      wx.showToast({

        title: '请输入验证码',

        icon: 'none',

        duration: 2000

      })

      return

    } else {

      var phone = that.data.phone;

      var phone_code = that.data.Code;

      wx.request({

        header: { 'Authorization': 'Bearer' + wx.getStorageSync("token")},

        url: app.globalData.host + '/user/bindPhone',//绑定手机号接口

        method: "POST",

        data: {

          mobile: phone,

          code: phone_code

        },

        success: function (res) {

          console.log(res);

          if (res.data.status_code == 200) {

            wx.showToast({

              title: res.data.message,

              duration: 2000

            })

            setTimeout(function () {

              wx.reLaunch({

                url: '/pages/index/index?isbindmb=true',

              })

            }, 2000)

          } else {

            wx.showToast({

              title: res.data.message,

              icon: 'none',

              duration: 2000

            })

          }

        }

      })

    }

  },

推荐阅读更多精彩内容

  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 3,000评论 0 6
  • 小程序 通讯录效果图 三个主要部分 : 1)右侧定位导航 2)左侧内容部分 3)顶部固定导航 wxml 部分 <v...
    pengkiw阅读 5,842评论 0 6
  • 己经淡味的年,不见亲友走动,不见邻里串门。路人相遇互不道贺,是为真正的路人。很多人有了几个钱,过年不是去国外就是到...
    慕愚堂阅读 84评论 0 4
  • 六月未满,七月将至,即将来临的七月,你想干点啥? 前几天,我就在思量这个问题。 好报第五期写作一个月挑战已接近尾声...
    Rabbit622阅读 119评论 8 0
  • 在Amazon1688亚马逊论坛http://www.amazon1688.com/看到的一篇干货,更多咨询请关注...
    梦不来的梦阅读 230评论 0 0