|
|
@@ -1,30 +1,62 @@
|
|
|
<template>
|
|
|
<div class="wrapper">
|
|
|
- <img class="logo" src="./image/logo@2x.png" alt="">
|
|
|
+ <img
|
|
|
+ class="logo"
|
|
|
+ src="./image/logo@2x.png" alt="">
|
|
|
<ul class="form-wrap">
|
|
|
<li>
|
|
|
<label>
|
|
|
- <span v-for="(str, index) in '+86'" :key="index">{{ str }}</span>
|
|
|
+ <span
|
|
|
+ v-for="(str, index) in '+86'"
|
|
|
+ :key="index">{{ str }}</span>
|
|
|
</label>
|
|
|
<div class="value-wrap">
|
|
|
- <input type="tel" placeholder="请输入手机号码" v-myBlur v-model.trim="postData.partnerPhone" @input="funLimitLength">
|
|
|
+ <input
|
|
|
+ type="tel"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ v-myBlur
|
|
|
+ v-model.trim="postData.phone"
|
|
|
+ @input="funLimitLength">
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="value-wrap">
|
|
|
- <input type="tel" placeholder="请输入短信验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
|
|
|
+ <input
|
|
|
+ type="tel"
|
|
|
+ placeholder="请输入短信验证码"
|
|
|
+ v-myBlur
|
|
|
+ v-model.trim="postData.code"
|
|
|
+ @input="funLimitLength">
|
|
|
</div>
|
|
|
- <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取验证码' : numCount + '秒'}}</button>
|
|
|
+ <button
|
|
|
+ class="get-code"
|
|
|
+ @click="funGetCode">{{[0, 60].includes(numCount) ? '获取验证码' : numCount + '秒'}}
|
|
|
+ </button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <button class="submit" @click="funSubmit">登 录</button>
|
|
|
+ <button
|
|
|
+ class="submit"
|
|
|
+ @click="funSubmit">登 录
|
|
|
+ </button>
|
|
|
<div class="footer">
|
|
|
- <van-checkbox v-model="checked"></van-checkbox>
|
|
|
+ <van-checkbox
|
|
|
+ v-model="checked"
|
|
|
+ checked-color="#D32323"></van-checkbox>
|
|
|
<p class="tip-text">
|
|
|
- <span class="label" v-for="(str, index) in '登录听邦即代表您已同意'" :key="'a' + index">{{ str }}</span>
|
|
|
- <span class="value" v-for="(str, index) in '《用户协议》'" :key="'b' + index">{{ str }}</span>
|
|
|
- <span class="label">与</span>
|
|
|
- <span class="value" v-for="(str, index) in '《隐私协议》'" :key="'c' + index">{{ str }}</span>
|
|
|
+ <span
|
|
|
+ class="label"
|
|
|
+ v-for="(str, index) in '登录听邦即代表您已同意'"
|
|
|
+ :key="'a' + index">{{ str }}</span>
|
|
|
+ <span
|
|
|
+ class="value"
|
|
|
+ v-for="(str, index) in '《用户协议》'"
|
|
|
+ :key="'b' + index">{{ str }}</span>
|
|
|
+ <span
|
|
|
+ class="label">与</span>
|
|
|
+ <span
|
|
|
+ class="value"
|
|
|
+ v-for="(str, index) in '《隐私协议》'"
|
|
|
+ :key="'c' + index">{{ str }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -33,9 +65,10 @@
|
|
|
<script>
|
|
|
import { Toast, Checkbox } from 'vant'
|
|
|
import { sendSMS } from '../api/common'
|
|
|
-import { partnerLogin } from './api'
|
|
|
+import { login } from './api'
|
|
|
+import { isMobile, isSmscode } from '../utils/validate'
|
|
|
+import { clearLoginInfo } from '../utils'
|
|
|
|
|
|
-const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
|
|
|
export default {
|
|
|
name: 'login',
|
|
|
components: {
|
|
|
@@ -44,11 +77,9 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
postData: {
|
|
|
- partnerPhone: '',
|
|
|
- capture: '',
|
|
|
+ phone: '',
|
|
|
code: ''
|
|
|
},
|
|
|
- strCapture: STRCAPTURE,
|
|
|
numCount: 60,
|
|
|
timer: null,
|
|
|
arrErrorList: [],
|
|
|
@@ -57,13 +88,12 @@ export default {
|
|
|
},
|
|
|
async mounted () {
|
|
|
await this.$nextTick()
|
|
|
- this.$refreshTitle('登录')
|
|
|
},
|
|
|
methods: {
|
|
|
funLimitLength () {
|
|
|
- const { partnerPhone, code } = this.postData
|
|
|
- this.postData.partnerPhone = partnerPhone.length > 11 ? partnerPhone.slice(0, 11) : partnerPhone
|
|
|
- this.postData.code = code.length > 4 ? code.slice(0, 4) : code
|
|
|
+ const { phone, code } = this.postData
|
|
|
+ this.postData.phone = phone.length > 11 ? phone.slice(0, 11) : phone
|
|
|
+ this.postData.code = code.length > 6 ? code.slice(0, 6) : code
|
|
|
},
|
|
|
funCutDown () {
|
|
|
clearInterval(this.timer)
|
|
|
@@ -77,55 +107,49 @@ export default {
|
|
|
}, 1000)
|
|
|
},
|
|
|
// 获取验证码
|
|
|
- funGetCode () {
|
|
|
+ async funGetCode () {
|
|
|
const numCount = this.numCount
|
|
|
- const { partnerPhone, capture } = this.postData
|
|
|
+ const { phone } = this.postData
|
|
|
if (numCount < 60 && numCount > 0) {
|
|
|
return
|
|
|
}
|
|
|
this.numCount = 60
|
|
|
- if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(partnerPhone))) {
|
|
|
+ if (!isMobile(phone)) {
|
|
|
Toast('请输入手机号码')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- // if (!capture) {
|
|
|
- // Toast('请输入图片验证码')
|
|
|
- // return
|
|
|
- // }
|
|
|
this.funCutDown()
|
|
|
- sendSMS(partnerPhone, 1, capture).then(res => {
|
|
|
- if (res.status) {
|
|
|
+ try {
|
|
|
+ const { status, msg } = await sendSMS(phone)
|
|
|
+ if (status) {
|
|
|
Toast('发送成功')
|
|
|
} else {
|
|
|
- Toast(res.msg)
|
|
|
- this.funUpdateCapture()
|
|
|
+ Toast(msg)
|
|
|
clearInterval(this.timer)
|
|
|
this.numCount = 60
|
|
|
}
|
|
|
- }).catch(err => {
|
|
|
- Toast(err.msg)
|
|
|
- this.funUpdateCapture()
|
|
|
+ } catch (err) {
|
|
|
clearInterval(this.timer)
|
|
|
this.numCount = 60
|
|
|
- })
|
|
|
- },
|
|
|
- funUpdateCapture () {
|
|
|
- this.strCapture = STRCAPTURE + '?' + new Date().getTime()
|
|
|
+ }
|
|
|
},
|
|
|
verifyData () {
|
|
|
- const { partnerPhone, code } = this.postData
|
|
|
+ const { phone, code } = this.postData
|
|
|
this.arrErrorList = []
|
|
|
- if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(partnerPhone)) {
|
|
|
+ if (!isMobile(phone)) {
|
|
|
this.arrErrorList.push('请输入手机号码')
|
|
|
}
|
|
|
- if (!(/^\d{4}$/.test(code))) {
|
|
|
+ if (!isSmscode(code)) {
|
|
|
this.arrErrorList.push('请输入验证码')
|
|
|
}
|
|
|
+ if (!this.checked) {
|
|
|
+ this.arrErrorList.push('请勾选用户协议及隐私政策')
|
|
|
+ }
|
|
|
return this.arrErrorList.length <= 0
|
|
|
},
|
|
|
funSubmit () {
|
|
|
- const { partnerPhone, code } = this.postData
|
|
|
+ const { phone, code } = this.postData
|
|
|
if (!this.verifyData()) {
|
|
|
Toast({
|
|
|
message: this.arrErrorList[0],
|
|
|
@@ -137,15 +161,25 @@ export default {
|
|
|
duration: 1000 * 100,
|
|
|
forbidClick: true
|
|
|
})
|
|
|
- partnerLogin(partnerPhone, code).then(res => {
|
|
|
+ login(phone, code).then(res => {
|
|
|
myToast.clear()
|
|
|
if (res.status) {
|
|
|
+ const { token } = res.data
|
|
|
+ clearLoginInfo()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$store.commit('common/UPDATE_PHONE', phone)
|
|
|
+ this.$store.commit('common/UPDATE_TOKEN', token)
|
|
|
+
|
|
|
+ this.$cookie.set('phone', phone, '30d')
|
|
|
+ this.$cookie.set('token', token, '30d')
|
|
|
+ })
|
|
|
+
|
|
|
Toast({
|
|
|
type: 'success',
|
|
|
- message: '提交成功',
|
|
|
+ message: '登录成功',
|
|
|
forbidClick: true,
|
|
|
onClose: () => {
|
|
|
- this.$router.replace({ path: '/partner' })
|
|
|
+ this.$router.go(-1)
|
|
|
}
|
|
|
})
|
|
|
return
|
|
|
@@ -242,17 +276,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .capture-img {
|
|
|
- @include vertical-center;
|
|
|
- right: 14px;
|
|
|
- z-index: 1;
|
|
|
- display: block;
|
|
|
- width: 125px;
|
|
|
- height: 31px;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
.get-code {
|
|
|
@include vertical-center;
|
|
|
right: 0;
|
panyong