话不多说，直接上代码：
<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
}
},
//截取地址栏code
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>
