vue 移動端手寫手機驗證碼登錄

<template>
    <div class="contentLogin">
        <!-- <div class="login">登錄</div> -->
        <div class="contrain">
            <form class="form" action="">
                <div class="formItem">
                    <div class="label">姓名</div>
                    <div class="import">
                        <input class="name" ref="name" type="text" placeholder="請輸入...">
                    </div>
                </div>
                <div class="formItem">
                    <div class="label">手機</div>
                    <div class="import">
                        <input class="phone" ref="phone" type="text" placeholder="請輸入...">
                    </div>
                </div>
                <div class="formItem">
                    <div class="label">驗證碼</div>
                    <div class="import">
                        <input class="code" ref="code" type="text" placeholder="請輸入...">
                        <button type="button" v-if="btnTitle" class="send" @click='getCode' :disabled='disabled'>{{btnTitle}}</button>
                    </div>
                </div>
                <input class="simulation" @click='present'  type="button" value="開始模擬" >
                <img class="logo" src="./../assets/img/logo.png" alt="">
            </form>
        </div>
    </div>
</template>

　　

export default {
        data(){
            return{
                name:'',
                phone:'',
                code:'',
                btnTitle:'獲取驗證碼',
                disabled:false,
            }
        },
        methods:{
            // 開始模擬
            present(){
                if(this.$refs.name.value ==''){
                    this.$toast('請輸入用戶名');
                    return false
                }
                if(!/^1[345678]\d{9}$/.test(this.$refs.phone.value)){
                    this.$toast('請輸入正確的手機號')
                    return false
                }
                if(this.$refs.code.value == ''){
                    this.$toast('請輸入驗證碼')
                    return false
                }
                this.$http.post('https://hfmtool.staff.xdf.cn/hl/free/recruit/saveUserInfo',{
                    studentName:this.$refs.name.value,
                    phone:this.$refs.phone.value,
                    smsCode:this.$refs.code.value
                }).then(res =>{
                    if(res.data.code == '1'){
                        // this.$store.state.studentName = res.data.data.studentName
                        this.$router.push({ name:'StepOne'})
                    }else{
                       this.$toast(res.data.message);
                    }
                })
            },
            // 獲取驗證碼
            getCode(){
                if(!/^1[345678]\d{9}$/.test(this.$refs.phone.value)){
                    this.$toast('手機號碼錯誤');
                }else{
                    this.validateBtn()
                    this.$http.post('https://hfmtool.staff.xdf.cn/hl/free/recruit/sendPhoneVerifyCode',{
                        phone:this.$refs.phone.value
                    }).then(res =>{
                        // console.log(res)
                        if(res.data.code == '1'){
                            this.$toast("驗證碼已發送，請注意查收。");
                        }else{
                            this.$toast(res.data.message);
                        }
                    })
                }  
            },
            validateBtn(){
                //倒計時
                let time = 60;
                let timer = setInterval(() => {
                if(time == 0) {
                    clearInterval(timer);
                    this.disabled = false;
                    this.btnTitle = "獲取驗證碼";
                } else {
                    this.btnTitle =time + '秒后重試';
                    this.disabled = true;
                    time--
                }
                },1000)
            },

        },
        created(){
        }
    }

　　

.contentLogin{
    width:100%;
    height:100%;
    background: url('./../img/loginBg.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 30px;
}
.login{
    width: 100%;
    line-height: 70px;
    text-align: center;
    color: #fff;
    font-size: 36px;
    /* font-weight: 600; */
    position: absolute;
    left: 0;
    top: 2%;
}
.contrain{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50%;
    width: 100%;
    background: #fff;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.form{
    width:690px;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
    /* padding-top: 75px; */
    /* background: #c00; */
}
.formItem{
    width: 100%;
    height: 85px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    padding:0 15px;
    margin-bottom: 32px;
    display: flex;
    overflow: hidden;
}
.form .formItem:nth-child(1){
    margin-top: 75px;
}
.form .formItem:nth-child(3){
    margin-bottom: 100px;
}
.label{
    width: 110px;
    height: 85px;
    line-height: 85px;
    font-size: 26px;
    color: #313952;
    font-weight: 600;
}
input:focus{outline:none;}
.import{
    display: flex;
    width:calc(100% - 110px);
    box-sizing: border-box;
    align-items: center;
    /* padding-top: 4px 0; */
    /* height: 85px; */
    /* align-items: center; */
}
.import input{
    display: block;
    width: 100%;
    /* margin-top: 4px; */
    height: 76px;
    line-height: 76px;
    background-color: #fff;
    /* border: none; */
    font-size: 26px;
}
/* .name,
.phone{
    
} */
.import .code{
    display: block;
    width: 350px !important;
    margin-top: 2px;
    height: 74px;
    line-height: 74px;
    /* border: none; */
    font-size: 26px;
    background-color: #fff;
}
.send{
    width: 200px !important;
    height: 76px;
    line-height: 76px;
    text-align: center;
    font-size: 26px;
    color: #e54b5b;
    background: none;
}
.simulation{
    display: block;
    width: 610px;
    font-size: 34px;
    height: 85px;
    color: #fff;
    border-radius:15px;
    background: #ee4657;
    margin: 0 auto;
    /* margin-top: 100px; */
}
.logo{
    display: block;
    border: none !important;
    margin: 50px auto 30px;
    width: 142px;
    height: 56px;
}