<el-main>  <el-form    :model="ReginForm"   ref="ReginForm"   :rules="rule"   class="regform"   label-width="0">   <h3 class="login-text">手機注冊</h3>    <el-form-item prop="tel">    <el-input      type="text"     v-model.number="ReginForm.tel"     placeholder="手機號碼">    </el-input>   </el-form-item>    <el-form-item prop="password">    <el-input      type="password"     v-model="ReginForm.password"     placeholder="密碼">    </el-input>   </el-form-item>        <div>       <input class="auth_input" type="text" v-model="verification"  placeholder="輸入驗證碼" />  <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">獲取驗證碼</span>  <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新發送驗證碼</span>   </div>   <el-form-item >    <el-button      type="success"      class="submitBtn"     round     @click.native.prevent="submit"     :loading="logining">     注冊    </el-button>    <hr>    <p>已經有賬號，馬上去<span class="to" @click="tologin">登錄</span></p>   </el-form-item>  </el-form> </el-main></template>

export default { data () {  let confirmpasswordCheck = (rule, value, callback) => {   if (value === '') {    return callback(new Error('密碼是必須的'))   } else {    return callback()   }  }  let telCheck = (rule, value, callback) => {   if (value === '') {    return callback(new Error('電話號碼是必須的'))   } else if (!Number.isInteger(value)) {    return callback(new Error('電話號碼必須是數字'))   } else if (value.toString().length !== 11) {    return callback(new Error('電話號碼必須是11位數字'))   } else {    callback()   }  }  return {   ReginForm: {    password: '',    tel: '',   },   logining: false,    sendAuthCode:true,/*布爾值，通過v-show控制顯示‘獲取按鈕'還是‘倒計時' */      auth_time: 0, /*倒計時 計數器*/      verification:"",//綁定輸入驗證碼框框   rule: {    password: [     {      required: true,      message: '密碼是必須的！',      trigger: 'blur'     }    ],    tel: [     {      required: true,      validator: telCheck,      trigger: 'blur'     }    ],   }  } }, methods: {   //  驗證     getAuthCode:function () {      const verification =this.ReginForm.tel;       const url = " "       console.log("url",url);        this.$http.get(url).then(function (response) {         console.log("請求成功",response)         }, function (error) {         console.log("請求失敗",error);        })      this.sendAuthCode = false;     //設置倒計時秒      this.auth_time = 10;      var auth_timetimer = setInterval(()=>{        this.auth_time--;        if(this.auth_time<=0){          this.sendAuthCode = true;          clearInterval(auth_timetimer);        }      }, 1000);    },  // 封裝注冊發送請求方法   thisAjax(){   const passwordData=this.ReginForm.password;   const phoneData =this.ReginForm.tel;   const mCodeData=this.verification;  //  手機注冊//emulateJSON:true設置后post可跨域  const url = " 填接口"      this.$http.post(url,{填傳入的參數},{emulateJSON:true}).then(function (response)  {     //登錄后跳轉的頁面        this.$router.push('/');      }, function (error) {        alert("請求失敗",error);      })  },  // ...  submit () {   this.$refs.ReginForm.validate(valid => {    if (valid) {     this.logining = true      this. thisAjax();     console.log('開始寫入后臺數據！')    } else {     console.log('submit err')    }   })  },  reset () {   this.$refs.ReginForm.resetFields()  },  tologin () {//已經注冊過跳轉到登入界面   this.$router.push('/phoneLogin')  } }}</script>

.regform { margin: 20px auto; width: 310px; background: #fff; box-shadow: 0 0 10px #B4BCCC; padding: 30px 30px 0 30px; border-radius: 25px; }.submitBtn { width: 65%;}.to { color: #FA5555; cursor: pointer;}.auth_input{  width:140px;  height:38px;  margin-bottom:20px;  border:1px solid #DCDFE6;  /* color:red; */  padding-left:10px;  border-radius: 8%;}.regform[data-v-92def6b0]{  width:370px;  min-height: 440px;}.login-text{ text-align: center; margin-bottom:20px;}</style>