E企盈营销工具技术服务商 热线:4006-838-530

微信小程序倒计时60秒(获取验证码)

E企盈直播平台营销卖货系统

Make a little progress every day ~目录实现效果功能版项目完整版实现效果 (为了观看效果先行设置为10s,正常一般都是60s)功能版wxml描述:这里我没有采用view、text等标签,而是采用了button,主要原因是用到了disabled的属性,作用于发送验证码后事件失效,倒计时完毕之后事件继续生效;我遇到的问题:因为前期使用view、text标签没有找到类型disabled的属性,所以在发送验证码后依旧可以进行点击,从而导致开启多个计时器,计时速度加快、计时器覆盖//点击属性:sendCode  点击状态:smsFlag  字体颜色:sendColor  显示文字:sendTimebutton bindtap=”sendCode” disabled=”{{smsFlag}}” style=’margin-top:50px;margin-right:10rpx;color:{{sendColor}};font-size:28rpx'{{sendTime}}/buttonjs注意: wxml中声明的smsFlag 代表 disabled的状态 ;disabled: true代表不可点击;false代表可点击(这点对于我而言有点别扭 – – !)Page({  data: {   //设置初始的状态、包含字体、颜色、还有等待事件    sendTime: ‘获取验证码’,    sendColor: ‘#363636’,    snsMsgWait: 60  }, // 获取验证码  sendCode: function() {   // 60秒后重新获取验证码    var inter = setInterval(function() {      this.setData({        smsFlag: true,        sendColor: ‘#cccccc’,        sendTime: this.data.snsMsgWait + ‘s后重发’,        snsMsgWait: this.data.snsMsgWait – 1      });      if (this.data.snsMsgWait 0) {        clearInterval(inter)        this.setData({          sendColor: ‘#363636’,          sendTime: ‘获取验证码’,          snsMsgWait: 60,          smsFlag: false        });      }    }.bind(this), 1000);  },  })项目完整版forget.jsvar md5Utils = require(‘../../utils/utilMd5.js’);var ptserviceUrl = getApp().globalData.ptserviceUrl;Page({  /**   * 页面的初始数据   */  data: {    tel: “”,    code: “”,    newPassword: “”,    sendTime: ‘发送验证码’,    sendColor: ‘#363636’,    snsMsgWait: 60  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function(options) {  },  inputTel: function(e) {    this.setData({      tel: e.detail.value    })  },  inputCode: function(e) {    this.setData({      code: e.detail.value    })  },  inputNewpassword: function(e) {    this.setData({      newPassword: e.detail.value    })  },  /**   * 生命周期函数–监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数–监听页面显示   */  onShow: function() {  },  // 获取验证码  sendCode: function() {    var that = this;    if (this.data.tel == “”) {      this.toast(‘请输入手机号’);      return;    }    if (!(/^1[3|4|5|8][0-9]d{8}$/.test(this.data.tel))) {      this.toast(‘手机号输入错误’);      return;    }    // 60秒后重新获取验证码    var inter = setInterval(function() {      this.setData({        smsFlag: true,        sendColor: ‘#cccccc’,        sendTime: this.data.snsMsgWait + ‘s后重发’,        snsMsgWait: this.data.snsMsgWait – 1      });      if (this.data.snsMsgWait 0) {        clearInterval(inter)        this.setData({          sendColor: ‘#363636’,          sendTime: ‘发送验证码’,          snsMsgWait: 60,          smsFlag: false        });      }    }.bind(this), 1000);    // 写自己的服务器和接口- –    wx.request({      url: ptserviceUrl + ‘sendCode’,      data: {        mobiles: this.data.tel,      },      method: “POST”,      header: {        ‘content-type’: “application/x-www-form-urlencoded”      },      success(res) {        console.log(res);        if (res.data.success) {          that.toast(‘短信验证码发送成功,请注意查收’);        }      }    })  },  // 提交信息  saveClick: function() {    var that = this;    if (that.data.tel == “”) {      that.toast(“手机号不可为空”);      return;    }    if (that.data.code == “”) {      that.toast(“验证码不可为空”);      return;    }    if (that.data.newPassword == “”) {      that.toast(“新密码不可为空”);      return;    }    var md5psd = md5Utils.hexMD5(that.data.newPassword);        // 写自己的服务器和接口- –    wx.request({      url: ptserviceUrl + ‘forget’,      data: {        mobile: this.data.tel,        phcode: this.data.code,        npwd: md5psd,      },      method: “POST”,      header: {        ‘content-type’: “application/x-www-form-urlencoded”      },      success(res) {        console.log(res);        if (res.data.success) {          wx.navigateBack({            delta: 1,          })        } else {          that.toast(res.data.msg);        }      }    })  },  // toast方法抽取  toast: function(msg) {    wx.showToast({      title: msg,      icon: ‘none’,      duration: 2000,      mask: true    })  },  /**   * 生命周期函数–监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数–监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数–监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function() {  }})forget.wxml (为了方便查看,并没有抽取class,可直接copy使用   , )view class=’container’  view style=’width:100%;height:100%;flex-direction:column’    view style=’margin-left:38rpx;margin-top:15px;margin-right:38rpx’      view style=’;display:flex;align-items:center; justify-content:space-between;’        input bindinput=”inputTel” AD:【E企盈直播系统开发公司】E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序倒计时60秒(获取验证码)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏