微信小程序获取验证码60秒倒计时功能

       6位数字验证码 {{MoCodeMsg}}  验证码输入错误

           data: { code: "", //后端验证码 Jurisdiction: true, //是否有权限 error: false, //错误提示 Length: 6, //输入框个数 isFocus: true, //聚焦 Showboxval: "", //输入的内容 MoDisabled: false, //验证码是否可点击 MoCodeMsg: '获取验证码', //文案 MoMsgWait: 60, //时间秒 MoColor: 'rgba(40, 200, 122, 1)', //默认验证码字体颜色 },

             /** * 生命周期函数--监听页面加载 正常第一次进来先调用一次 */ onLoad(options) { this.MosendSms() // 60秒后重新获取验证码 },

 // 60秒后验证码 sendSbinms() { wx.showToast({ title: '短信验证码发送成功，请注意查收', icon: 'none' }) this.setData({ MoCodeMsg: this.data.MoMsgWait + "  s", MoColor: 'rgba(40, 200, 122, 1)', MoMsgWait: this.data.MoMsgWait - 1, MoDisabled: true }); let inter = setInterval(function () { this.setData({ MoCodeMsg: this.data.MoMsgWait + "  s", MoColor: 'rgba(40, 200, 122, 1)', MoMsgWait: this.data.MoMsgWait - 1, MoDisabled: true }); if (this.data.MoMsgWait <0) { clearInterval(inter) this.setData({ MoCodeMsg: "重新获取", MoMsgWait: 60, MoDisabled: false, MoColor: 'rgba(40, 200, 122, 1)' }); } //注意后面的bind绑定，最关键。不然又是未定义，无法使用外围的变量; }.bind(this), 1000); },

            // 点击获取验证码 MosendSms() { if (this.data.Jurisdiction) { this.sendSbinms() // 60秒后重新获取验证码 this.obtain();  //后端接口 获取验证码 } else { wx.showToast({ title: this.data.massage ? this.data.massage : '手机号未注册', icon: 'error', duration: 3000 }) } },

             obtain() { let params = { phone: this.data.rstProduct, type: 1 } appletValidateCode(params).then((res) => { this.setData({ code: res.data.data, }); }).catch((res) => {}) },

     //验证码输入框 FocuInput(e) { let that = this; let inputValue = e.detail.value; that.setData({ Showboxval: inputValue, }) if (inputValue.length === 6) { if (inputValue == this.data.code) { this.setData({ error: false, }); } else { this.setData({ error: true, }); } } },

   //验证码输入框点击 InputTap() { let that = this; that.setData({ isFocus: true, }) },

.Info { padding: 138rpx 32rpx 0 32rpx; } .verification { display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx; font-size: 32rpx; } .Num { display: flex; align-items: center; justify-content: space-between; color: rgba(0, 0, 0, 0.65); font-size: 30rpx; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400; } .frame { width: 80rpx; height: 80rpx; border-radius: 2px; border: 2rpx solid #DEDEDE; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 32rpx; font-family: PingFang SC-Medium, PingFang SC; font-weight: 500; color: rgba(0, 0, 0, 0.65); } .ipt { width: 0; height: 0; } .Box_hid { font-size: 30rpx; background: #fff !important; text-align: left; color: rgba(40, 200, 122, 1) !important; padding-right: 0 !important; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400 !important; } .Box_hid::after { border: none; } .error { color: #F24236; margin-top: 8rpx; font-size: 28rpx; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400; }