vue发送验证码状态变化

html:

<group class="login_input">
  <span class="number_label">验证码</span>
  <x-input class="weui-vcode" @on-change="codeNumber" :show-clear="false">
    <x-button slot="right" type="primary" mini class="sendNumber" :disabled="this.registration_data.disable001" :style="{ background: this.registration_data.sendCodeStyle.background }" @click.native="sendCode">{{this.registration_data.sendCodeText}}</x-button>
  </x-input>
</group>

js:

data () {
  return {
    registration_data:{
      code:"",
      sendCodeStyle: {background: ''},
      sendCodeText: '发送验证码',
      sendCodeTime: 0,
      sendCodeTimeLength: 60,
      disable001:false
    }
  }
},

codeNumber(value){
  this.registration_data.code=value;
},

sendCodeCountDown(){//倒计时后发送验证码状态的改变
  if(this.registration_data.sendCodeTimeLength > 0){
    this.registration_data.sendCodeText = '    '+this.registration_data.sendCodeTimeLength+'秒    ';
    this.registration_data.disable001 = true;//点击后button禁用
    this.registration_data.sendCodeStyle.background = 'grey';
    this.registration_data.sendCodeTimeLength--;
    setTimeout(this.sendCodeCountDown,1000);
  }else{
    this.registration_data.disable001 = false;
    this.registration_data.sendCodeText = '发送验证码';
    this.registration_data.sendCodeStyle.background = '';
    this.registration_data.sendCodeTimeLength = 60;
    return;
  }
},

 sendCode(){//发送验证码
      let that=this;
      if(!this.registration_data.phone){
        this.showAlert("提示","请填写手机号");
      }
      let time = Date.parse(new Date());// 1970/01/01 到现在时间的毫秒数
      if(time >(this.registration_data.sendCodeTime+this.registration_data.sendCodeTimeLength*1000)){
        this.registration_data.sendCodeTime  = time;
      }
      let data = {
       //发送的数据
      };
      that.$http.post(url, that.params(data),{
        emulateJSON: true,
        headers: {
          'Content-Type' : 'application/x-www-form-urlencoded'
        }
      }).then(
        function (res){
          if(res.data.respcode=="00"){
            that.sendCodeCountDown();
          }
          else{
            that.showAlert("提示",res.data.msg);
          }
        },
        function (error){

        }

      )
    },

转载于:https://www.cnblogs.com/HONGYE1994/p/8078899.html