微信小程序输入六位验证码倒计时重发

<view class="Sho_box">
  <view class="Sho_box2">
    <view class="Sho_box4">
      <view class="Sho_box5">签署协议</view>
    </view>
    <view>
      <form bindsubmit="formSubmit">
        <view class="Box_hid">请确认是本人操作</view>
        <view class="Box_hid2">收取验证码的手机号为：17688888888</view>
        <view class='Sho_box6'>
          <block wx:for="{{Length}}" wx:key="item">
            <input class='Sho_box7' value="{{Showboxval.length>=index+1?Showboxval[index]:''}}" disabled catchtap='InputTap'></input>
          </block>
        </view>
        <view class="Box_hid3">
          <button bindtap='MosendSms' disabled='{{MoDisabled}}' class="Box_hid4" style='color:{{MoColor}};font-size: 28rpx;background: #fff;text-align: left;' type="button">{{MoCodeMsg}}</button>
        </view>
        <input name="password" password="{{true}}" class='Sho_box8' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="FocuInput"></input>
        <view style="display: flex;align-items: center;justify-content: center;">
          <view style="width: 32%;"><view class="Sho_box9S">取消</view></view>
          <view style="width: 32%;"><button class="Sho_box9" formType="submit">确认</button></view>
        </view>
      </form>
    </view>
  </view>
</view>

data:{
	Length:6,        //输入框个数
    isFocus:true,    //聚焦
    Showboxval:"",        //输入的内容
    MoDisabled: false,//验证码是否可点击
    MoCodeMsg: '获取验证码',//验证码是否可点击
    MoMsgWait: 60,//时间秒
    MoColor:'#455AF7',//默认验证码字体颜色
}

// 点击获取验证码
  MosendSms:function () {
    var that = this
    that.sendSbinms()// 60秒后重新获取验证码
  },
  // 60秒后验证码
  sendSbinms: function () {
    wx.showToast({
      title: '短信验证码发送成功，请注意查收',
      icon: 'none'
    })
    var inter = setInterval(function () {
      this.setData({
        MoCodeMsg: "重新发送(" + this.data.MoMsgWait + ")",
        MoColor: '#999999',
        MoMsgWait: this.data.MoMsgWait - 1,
        MoDisabled: true
      });
      if (this.data.MoMsgWait < 0) {
        clearInterval(inter)
        this.setData({
          MoCodeMsg: "获取验证码",
          MoMsgWait: 60,
          MoDisabled: false,
          MoColor: '#455AF7'
        });
      }
    }.bind(this), 1000);
    //注意后面的bind绑定，最关键。不然又是未定义，无法使用外围的变量
  },
  //验证码输入框点击
  InputTap(){
    var that = this;
    that.setData({
      isFocus:true,
    })
  },
  //验证码输入框
  FocuInput(e){
    var that = this;
    console.log('验证码输入框',e.detail.value);
    var inputValue = e.detail.value;
    that.setData({
      Showboxval:inputValue,
    })
  },
  // 点击确认提交
  formSubmit(e){
    console.log(e.detail.value.password);
  },

.Sho_box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Sho_box2{
  width:600rpx;
  height: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  border: 4rpx solid #bdb7b780;
  display: flex;
  flex-direction: column;
}
.Sho_box4{
  display: flex;
  align-items: center;
  height: 90rpx;
  border-bottom: 1rpx solid #eeeeee;
}
.Sho_box5{
  width: 100%;
  font-size: 30rpx;
  text-align: center;
  color: #333;
  font-weight: bold;
}

.Sho_box6{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
}
.Sho_box7{
  width: 60rpx;
  height: 60rpx;
  border:4rpx solid #DDDFE7;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 6rpx;
  margin-left: 6rpx;
}
.Sho_box8{
  width: 0;
  height: 0;
}
.Sho_box9{
  width: 150rpx;
  background: #FC0000;
  color:white;
  font-size: 28rpx;
}

.Sho_box9S{
  width: 150rpx;
  background: #FFFFFF;
  border: 4rpx solid #DDDFE7;
  color: #606268;
  font-size: 28rpx;
  margin: 0 auto;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 15rpx;
  text-align: center;
}
.Box_hid{
  height: 60rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #222222;
  line-height: 60rpx;
  padding-left: 60rpx;
  margin-top: 40rpx;
}
.Box_hid2{
  height: 60rpx;
  line-height: 60rpx; 
  padding-left: 60rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #999999;
}
.Box_hid3{
  padding-left: 40rpx;
  margin-top: 20rpx;
  width: 50%;
}
.Box_hid4::after{
  border: none;
}