公众号基本的绑定手机号页面（截取code，手机号正则，验证码倒计时）

<template>

    <div id="home">

        <div class="bind_box">

            <div class="bindphone">

                <div class="bind_title">

                    <p>绑定手机号</p>

                </div>

            <div class="phone">

            <div class="phone_left">

            <span>手机号</span>

            <input name="phone" type="number" placeholder="请输入手机号" v-model="phone" @change="change">

            </div>

        <div class="phone_right" v-if='show'>请填写正确手机号!</div>

    </div>

    <div class="phone">

        <div class="phone_left">

            <span>验证码</span>

            <input type="text" placeholder="请输入验证码" @change="codeed">

        </div>

        <div class="phone_right" v-show="sendAuthCode" @click="getma">

        <span class="getcode">获取验证码</span>

    </div>

    <div class="phone_right getcoded" v-show="!sendAuthCode">

        <span class="getcode"><span>{{auth_time}} </span> 秒后重新发送</span>

    </div>

</div>

            <div class="codetishi" v-if="showcode">

                验证码错误!

            </div>

        <div class="sub_box" v-if="showsub">

        <div class="sub" @click="sub">

                <p>确定</p>

           </div>

         </div>

            <div class="sub_box" v-if="hidesub">

                <div class="sub">

                    <p>确定</p>

                </div>

            </div>

        </div>

    </div>

</div>

</template>



<script>

import http from 'axios'

import api from '@/assets/js/index'

export default {

    name: 'home',

    data () {

        return {

            phone:'',

            code:'',

            tiancode:'',

            msgphone:'',

            show:false,

            showcode:false,

            sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */

            auth_time: 0, /*倒计时 计数器*/

            showsub:true,

            hidesub:false

        }

    },

    created(){

    },

    methods:{

        change:function(e){

            this.phone = e.target.value

        },

        getma:function(){

            this.checkMobile(this.phone)

            if(this.show == false){

            //获取验证码

            http.post(`${api.api}/user/checkCode`,{tel:this.phone})

            .then((res) => {

                console.log(res)

                this.code = res.data.data
             })

            .catch((error) => {

                console.log(error);

            });

        }

    },

    codeed:function(e){

        this.tiancode = e.target.value

        document.body.addEventListener('focusout', function () {

            window.scrollTo(0,0);

        })

    },

    qiehuan(){

        this.showsub = false,

        this.hidesub = true

    },

    sub:function (){

        if(localStorage.getItem('token')){//如果从主页进来，有用户信息，不调getUser

        //判断手机号是否被注册

        // console.log(this.phone)

        http.post(`${api.api}/user/checkTel`,{tel:this.phone,})

        .then((res) => {

            if(res.data.msg == 'success' && this.phone.length != 0){

                this.$messagebox('提示', '该手机号已被注册').then(action=>{

                this.$router.push({path:'/assistant',query:{}})

            })

            }else if(res.data.msg == 'fail' && this.code == this.tiancode &&                         this.phone.length != 0 && this.tiancode.length != 0){

            var id = JSON.parse(localStorage.getItem('token')).id

            console.log(id+'111')

            //绑定手机号手机号

            http.post(`${api.api}/user/updateTel`,{id:id,tel:this.phone,})

            .then((res) => {

                console.log(res)

                if(res.data.code == 0){

                    this.qiehuan()

                    this.$messagebox('提示', '绑定成功').then(action => {

                        localStorage.setItem('phone',this.phone)

                        this.$router.push({path:'/assistant',query:{}})

                    })

                  }

                })

                .catch((error) => {

                    console.log(error);

                });

                }else if(res.data.msg == 'fail' && this.code != this.tiancode){

                    this.showcode = true

                    this.$router.push({path:'/',query:{}})

                }

             })
        
            .catch((error) => {

                console.log(error);

             });

          }else{//如果从其他方式进入页面，没有用户信息,截取code，调取getUser

            //获取code

            var code = this.GetQueryString('code')

            var pid = window.location.hash.split('=')[1]

            console.log(code)

            console.log(pid)

            http.post(`${api.api}/getUser`,{code:code,pid:pid})

           .then((res) => {

                var id = res.data.data.id

                if(res.data.code == 0){

                    localStorage.setItem('token',JSON.stringify(res.data.data))

                    //判断手机号是否被注册

                    // console.log(this.phone)

                    http.post(`${api.api}/user/checkTel`,{tel:this.phone})

                    .then((res) => {

                        console.log(this.phone.length)

                        if(res.data.msg == 'success' && this.phone.length != 0){

                            this.$messagebox('提示', '该手机号已被注册').then(action => {

                            this.$router.push({path:'/assistant',query:{}})

                        })

                    }else if(res.data.msg == 'fail' && this.code == this.tiancode && this.phone.length != 0 && this.tiancode.length != 0){

                        //绑定手机号手机号

                        http.post(`${api.api}/user/updateTel`,{

                            id:id,

                            tel:this.phone,

                            pid:pid

                        })

                        .then((res) => {

                            if(res.data.code == 0){

                                this.$messagebox('提示', '绑定成功').then(action => {

                                    localStorage.setItem('phone',this.phone)

                                    this.$router.push({path:'/assistant',query:{}})

                                })

                            }

                        })

                        .catch((error) => {

                            console.log(error);

                        });

                    }else if(res.data.msg == 'fail' && this.code != this.tiancode){

                        this.showcode = true

                        this.$router.push({path:'/',query:{}})

                    }

                })

                .catch((error) => {

                    console.log(error);

                });

            }

        })

        .catch((error) => {

            console.log(error);

        })

    }

},

//验证手机号,错误提示请填写正确手机号，并做60秒倒计时

checkMobile(phone) {

    var reg_phone = /^[1][0-9][0-9]{9}$/;

    var regPhone = new RegExp(reg_phone);

    if (regPhone.test(phone)) {

        this.show = false

        if(this.phone.length != 0){

            this.sendAuthCode = false;

            this.auth_time = 60;

            var auth_timetimer = setInterval(()=>{

                this.auth_time--;

                if(this.auth_time<=0){

                    this.sendAuthCode = true;

                    clearInterval(auth_timetimer);

                }

            }, 1000)

        }

    } else {

        this.show = true

    }

},

//截取地址栏参数

GetQueryString(name) {

        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

        var r = window.location.search.substr(1).match(reg);

        if (r != null) return unescape(r[2]);

        return null;

      }

}

}

</script>



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

<style scoped>

.bind_box{

    width:100%;

    height:100%;

    position: absolute;

    left:0;

    top:0;

    background: rgb(244,244,244);

    display: flex;

    align-items: center;

}

.bindphone{

    width:90%;

    margin:auto;

    background:#fff;

    border-radius:10px;

}

.bind_title{

    width:100%;

    text-align: center;

    padding:50px 0 30px 0;

    box-sizing: border-box;
    
    font-size:30px;

}

.phone{

    width:90%;

    height:110px;

    line-height: 110px;

    margin:auto;

    border-bottom:1px solid #ccc;

    box-sizing: border-box;

    display: flex;

    flex-direction: row;

}

.phone_left{

    width:62%;

    height:100%;

}

.phone_left input{

    width:50%;

    height:90%

}

.phone_right{

    width:38%;

    height:100%;

    color:red;

}

.phone span{

    font-size:28px;

}

.phone input{

    outline:none;

    font-size: 25px;

    border:0;

}

.getcode{

    display: inline-block;

    width:100%;

    height:70px;

    line-height: 70px;

    text-align: center;

    border-radius:10px;

    background: rgb(0,135,236);

    color:#fff;

}

.getcoded{

    width:45%;

}

.sub_box{

    width:90%;

    margin:auto;

    padding:100px 0;

    box-sizing: border-box;
    
}

.sub{

    width:100%;

    height:80px;

    border-radius:50px;

    background: rgb(0,135,236);

    text-align: center;

    line-height: 80px;

    color:#fff;

    box-sizing: border-box;

    font-size:30px;

}

.codetishi{

    width:90%;

    height:110px;

    line-height: 110px;

    margin:auto;

    font-size:30px;

    color:red;

}

</style>