微信小程序获取验证码60秒倒计时模板

效果图

index.wxml

<view class="Info">
      <view class="Num">
          <view>6位数字验证码</view>
          <view class="verification_time">
              <button bindtap='MosendSms' disabled='{{MoDisabled}}' class="Box_hid" style='color:{{MoColor}}' type="button">{{MoCodeMsg}}</button>
          </view>
      </view>
      <view class='verification'>
          <block wx:for="{{Length}}" wx:key="item">
              <input class='frame' value="{{Showboxval.length>=index+1?Showboxval[index]:''}}" disabled catchtap='InputTap' />
          </block>
      </view>
      <view class="error" wx:if="{{error}}">验证码输入错误</view>
      <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="FocuInput" />
</view>

index.js

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,
    })
},

index.wxss

.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;
}