vue-項目-實現註冊-（驗證碼+倒計時+短信發送）

<template>
  <div class="maincont">
    <header>
      <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a>
      <div class="head-mid">
        <h1>會員註冊</h1>
      </div>
    </header>
    <div class="head-top">
      <img src="@/assets/images/head.jpg" />
    </div><!--head-top/-->
    <form action="login.html" method="get" class="reg-login">
      <h3>已經有賬號了？點此<router-link class="orange" to="/Login">登陸</router-link></h3>
      <div class="lrBox">
        <div class="lrList">
          <input type="text"  v-model="phone" placeholder="輸入手機號碼或者郵箱號" />
        </div>
        <div class="lrList2">
          <input type="text" v-model="user_img_code" maxlength="4" placeholder="請先輸入圖片驗證碼" />
          <img  :src="img_code" @click="flushImgCode()" />
        </div>
        <div class="lrList2">
          <input type="text" placeholder="輸入短信驗證碼" v-model="phone_code"  />
          <button  v-if="is_send==0" type="button" @click="getPhoneCode()">獲取驗證碼</button>
          <button  v-else type="button">{{time}}</button>
        </div>
        <div class="lrList"><input v-model="password" type="text" placeholder="設置新密碼（6-18位數字或字母）" /></div>
        <div class="lrList"><input type="text" placeholder="再次輸入密碼" /></div>
      </div><!--lrBox/-->
      <div class="lrSub">
        <input type="button" @click="Reg()" value="立即註冊" />
      </div>
    </form><!--reg-login/-->
    <tab-bar></tab-bar>
  </div><!--maincont-->

</template>
<script>
import  "@/assets/css/bootstrap.min.css"
import  "@/assets/css/style.css"
import  "@/assets/css/response.css"
import  "@/assets/js/jquery.min.js"
import  "@/assets/js/jquery.excoloSlider.js"
import  "@/assets/js/style.js"
import TabBar from "./Public/TabBar";
import Common from "../Mixins/Common";
import Index from "./Index";
export default {
  name: 'Reg',
  components: {Index, TabBar:TabBar},
  mixins:[ Common ],
  data () {
    return {
      img_code:'',
      phone:'13288889999',
      user_img_code:'',
      sid:'',
      is_send:0,
      time:3,
      phone_code:'',
      password:''
    }
  },
  methods:{
    flushTime:function(){
      // console.log( 'flushTime' );
      let that = this;
      let intval = setInterval( function(){
        that.time--;
        if( that.time < 1 ){
          that.is_send = 0
          that.time = 3
          clearInterval(intval)
        }
      } , 1000);
    },
    Reg: function(){
      if( this.phone == '')
      {
        alert('請輸入你的手機號');
        return false;
      }

      if( this.phone_code == '')
      {
        alert('請輸入你收到的短信驗證碼');
        return false;
      }
      if( this.password == '')
      {
        alert('請輸入你的密碼');
        return false;
      }

      let api_req = {
        phone:this.phone,
        mcode: this.phone_code,
        password:this.password
      };

      this.ajaxPost( '/api/register' , api_req ).then( api_response =>  {
        console.log( api_response );
        if( api_response.status != 200 ){
          alert( api_response.msg );
          return false;
        }else{
          alert('註冊成功～');
          this.gotoPage('Index');
        }
      });
      console.log( api_req );
      return false;
    },
    flushImgCode: function () {
      this.ajaxPost('/api/getImageCodeUrl',{}).then( api_data =>{
        console.log(api_data.data);
        this.img_code = api_data.data.image_url + '&' + Math.random();
        this.sid = api_data.data.sid;
      })
    },
    getPhoneCode: function () {
      if( this.phone == '' ){
        alert('請先輸入手機號');
        return false;
      }
      if( this.phone.length != 11 ){
        alert('手機號格式不正確');
        return false;
      }
      if( this.user_img_code == '' ){
        alert('請先輸入圖片驗證碼');
        return false;
      }

      let api_req = {
        phone:this.phone,
        sid:this.sid,
        image_code:this.user_img_code
      };
      this.ajaxPost( '/api/sendSms' , api_req ).then( (api_data) =>{
        if( api_data.status == 200 ){
          this.is_send = 1;
          this.flushTime();
          this.flushImgCode();
          alert('驗證碼發送成功請注意查收');
        }else{
          alert( api_data.msg );
        }
      })

    }
  },
  mounted(){
    this.flushImgCode();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>