phone.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<div>
<nav-bar>
<div slot="left" class="back">
<img src="../../assets/img/back.png" alt="" @click="goBack" />
</div>
</nav-bar>
<div class="token_content">
<img src="../../assets/img/logo2.png" alt="" class="content_logo"/>
<div class="content_input display-flex-between">
<input type="number" placeholder="手机号码" v-model="phone" />
</div>
<div class="content_input display-flex-between">
<input type="text" placeholder="短信验证码" v-model="code"/>
<div class="code" @click="getCode">{{codeValue}}</div>
</div>
<div class="button_token" :class="isclick?'':'opacity'" @click="token">登录</div>
<router-link class="tip display-flex-center" to="/cardToken">
<div style="color: #257CFF;">账号密码登录</div>
</router-link>
</div>
</div>
</template>
<script>
import '@/assets/style/token.css'
export default {
name: 'phone',
data () {
return {
phone: '',
code: '',
codeValue: '获取验证码',
number: 300,
timer: ''
}
},
computed: {
isclick: {
set: function () {},
get: function () {
return this.phone !== '' && this.code !== ''
}
}
},
methods: {
goBack () {
this.$router.go(-1)
},
getTime () {
if (this.codeValue === '重新获取' || this.codeValue === '获取验证码') {
this.timer = setInterval(() => {
this.number--
this.codeValue = this.number + 's后重新获取'
if (this.number === 0) {
clearInterval(this.timer)
this.codeValue = '重新获取'
}
}, 1000)
}
},
getCode () {
var reg = /^1[3|4|5|7|6|8][0-9]{9}$/
if (this.phone === '') {
this.$toast('请输入手机号')
} else if (!reg.test(this.phone)) {
this.$toast('请输入正确的手机号')
} else {
this.getTime()
this.getphonecode()
}
},
async getphonecode () {
const that = this
const params = {
event: 'mobilelogin',
mobile: that.phone
}
const reslist = await that.api.phonetoken(params)
if (reslist.code === 1) {
this.$toast('发送成功')
} else {
that.$toast(reslist.msg)
}
},
async token () {
const that = this
if (that.number >= 0) {
const params = {
mobile: that.phone,
captcha: that.code
}
const reslist = await that.api.phonecodetoken(params)
console.log(reslist)
if (reslist.code === 1) {
localStorage.setItem('token', reslist.data.userinfo.token)
localStorage.setItem('userinfo', JSON.stringify(reslist.data.userinfo))
localStorage.setItem('indexCurrent', 0)
localStorage.setItem('postname', reslist.data.userinfo.pos_name)
localStorage.setItem('pId', reslist.data.userinfo.pos_id)
that.$router.push('/home')
} else {
that.$toast(reslist.msg)
}
} else {
this.$toast('请输入有效的验证码')
}
}
}
}
</script>
<style lang="scss" scoped>
</style>