vue 手机号登陆 60S获取验证码

直接上代码：

<template>
    <div>
        <label for="">手机号码</label>
        <input type="text" v-model="tel" @blur="blur($event)" placeholder="请输入手机号"><br/>
        <label for="">手机验证码</label>
        <input type="text" placeholder="请输入短信验证码" v-model="phone">
        <button v-show="show"  class="btn1" @click="getCode">获取短信验证码</button>
        <button v-show="!show" class="btn2" disabled="disabled">{{authtime}} 秒后重新发送</button>
        
    </div>
</template>
<script>

export default {
    data(){
        return{
            tel:'',  //手机号码
            hone:'',//短信验证码
            authtime: 60,//倒计时默认60s
            show:true,//默认显示获取验证码按钮
        }
    },
    methods:{
        // 输入手机号失去焦点
        blur(e){
            console.log(e.target.value);
            if(e.target.value.length>0){
                if (/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(e.target.value)) {
                    alert('手机号正确')
                    console.log(this.tel);
                }else{
                  alert('手机号格式错误')  
                }
            }else{
                alert('请输入手机号')
            }
        },
        //获取验证码
        getCode () {
            this.axios.post('验证码接口', {
                phone:this.tel,
            }).then((res) => {
                let data = res.data;
                if( data.status == 0 ){
                    this.$toast(data.msg);
                }
                else if( data.status == 1 ){
                    this.$toast(data.msg);//获取成功
                    this.show = false;//显示倒计时按钮
                    
                    //每隔一秒执行一次authtime--，当authtime的值<=0，显示获取验证码按钮，清除定时器，authtime重新赋值为60s
                    var timer =  setInterval(()=>{
                        this.authtime--;
                        if(this.authtime<=0){
                            this.show = true;
                            clearInterval(timer);
                            this.authtime = 60;
                        }
                    }, 1000);
                }
            });
        },

    }
}
</script>