验证码(倒计时)

<!--验证码  -->
  <form bindsubmit='regist'>
    <view class='input-container'>
      <input type='text' placeholder='验证码' name="vertifyCode" value='{{verifyCode}}'></input>

      <button class='captcha' bindtap='captcha' disabled='{{captchaDisable}}' plain='true'>{{captchaLabel}}</button>

    </view>
  </form>

/*文本框容器*/
.input-container{
  margin: 20px 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
	padding-bottom: 3px;
}

/*提交按钮*/
form button{
margin: 30px;
background: #09f;
color: white;
}

/*文本框本身*/
.input-container input {
	color: #999;
	flex: 1;
  height: 40px;
}
/*占位符样式*/
.input-placeholder {
	color: #999;
}
/*清空按钮*/
.input-container image {
	width: 22px;
	height: 22px;
}

/*获取验证码*/
.captcha {
	margin: 0 4px;
	color: #fff;
	font-size: 14px;
}

button[plain] {
	color: peru;
	border: 0;
}

button[plain][disabled] {
	color: gray;
	background: transparent;
}

//js文件

data: {
    captchaLabel:"获取验证码",
    seconds:10,
    captchaDisable:false,
    vertifyCode:''
  },

  //短信验证码点击
  captcha:function(){
   
   console.log('click')
   this.setData({
     captchaDisable:true
   })
   // 立刻显示重发提示，不必等待倒计时启动
   this.setData({
     captchaLabel: timer.length + '秒后重新发送'
   });
   // 启动以1s为步长的倒计时
   var interval = setInterval(() => {
     timer.countdown(this);
   }, 1000);

   // 停止倒计时
   setTimeout(function () {
     clearInterval(interval);
   }, timer.length * 1000);
  //提示
   if (timer.length == this.data.seconds){
    wx.showToast({
      title: '发送成功'
    })
  }

timer.js

var length = 10;

function countdown(that) {
  console.log('count down');
  var seconds = that.data.seconds;
  console.log(seconds);
  var captchaLabel = that.data.captchaLabel;
  if (seconds <= 1) {
    captchaLabel = '获取验证码';
    seconds = length;
    that.setData({
      captchaDisable: false
    });
  } else {
    captchaLabel = --seconds + '秒后重新发送'
  }
  that.setData({
    seconds: seconds,
    captchaLabel: captchaLabel
  });
}

module.exports = {
    countdown: countdown,
    length: length
}