vue做出手机发送短信验证码注册功能

<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>
 <p>
 <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> 
 </p>
 <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>