前端登录页点击获取验证码的实现

dom部分：

<div v-if="way=='密码登录'" class="code"><div class="up" @tap="codeup">{{coded}}</div><input v-model="code" type="text" placeholder="请输入验证码"></div>

js部分：

var login = new Vue({
      el: '#login',
      data: {
          way:'快捷登录',
          goto_txt:'登录',
          coded:'获取验证码',
          totalTime: 60,
          phone:'',
          password:'',
          code:''
      },

codeup: function () {
            if(this.coded=='获取验证码'){
                this.coded = '发送中';
                mui.getJSON(url+'/code',{
                        type:'login',
                        phone:this.phone
                    },function(data){
                        //data = JSON.stringify(data);
                        if(data.code==200){
                            if(login.totalTime==60){
                                var bo_clock = window.setInterval(function () {
                                  login.totalTime--;
                                  login.coded = login.totalTime + 's';
                                  if (login.totalTime < 0) {
                                   window.clearInterval(bo_clock);
                                   login.coded = '获取验证码';
                                   login.totalTime = 60;
                                  }
                                 },1000)
                            }
                        }else{
                            login.coded = '获取验证码';
                            mui.toast(data.msg);
                        }
                    });
            }
          }

 

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/10855742.html