306 lines
7.6 KiB
Vue
306 lines
7.6 KiB
Vue
<template>
|
|
<div class="main">
|
|
<a-form id="formLogin" ref="formLogin" :form="form" class="user-layout-login" @submit="handleSubmit">
|
|
<a-form-item class="inputT">
|
|
<a-input
|
|
:placeholder="$t('user.login.mobile.placeholder')"
|
|
size="large"
|
|
oninput="value=value.replace(/[, ]/g,'')"
|
|
onkeyup="value=value.replace(/[, ]/g,'')"
|
|
onblur="value=value.replace(/\s+/g,'')"
|
|
type="text"
|
|
v-model="postData.phone"
|
|
>
|
|
<template v-slot:prefix>
|
|
<a-icon :style="{ color: 'rgba(0,0,0,.25)' }" type="mobile" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item class="inputT">
|
|
<a-input
|
|
placeholder="请输入密码"
|
|
size="large"
|
|
type="password"
|
|
oninput="value=value.replace(/[, ]/g,'')"
|
|
onkeyup="value=value.replace(/[, ]/g,'')"
|
|
onblur="value=value.replace(/\s+/g,'')"
|
|
v-model="postData.password"
|
|
>
|
|
<template v-slot:prefix>
|
|
<a-icon :style="{ color: 'rgba(0,0,0,.25)' }" type="lock" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item class="inputT">
|
|
<a-button :disabled="btn" class="login-button" htmlType="submit" size="large" type="primary"> 登录 </a-button>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<!-- <a class="login-form-forgot" @click="goForget"> 忘记密码 </a> -->
|
|
</a-form-item>
|
|
</a-form>
|
|
<!-- 二维码展示区域 -->
|
|
|
|
<!-- title="消息实时提醒" -->
|
|
<a-modal
|
|
v-model="showScan"
|
|
ok-text="我已关注"
|
|
cancel-text="再想想"
|
|
:bodyStyle="{ padding: 0}"
|
|
:closable="false"
|
|
@ok="OnSubOk"
|
|
@cancel="OnSubCancel"
|
|
>
|
|
<div class="ewmcode">
|
|
<div class="ewmcodetop">
|
|
<div>关注微信公众平台</div>
|
|
<div style="font-size:70%;">关注后 即可实时获取最新的订单信息</div>
|
|
</div>
|
|
<img :src="subscribeUrl" alt="二维码" />
|
|
<p>使用【微信扫一扫】关注微信公众平台</p>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
import {
|
|
timeFix
|
|
} from '@/utils/util'
|
|
import storage from 'store'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
import {
|
|
// getScanCode,
|
|
getVerifyScanCode
|
|
} from '@/api/login'
|
|
|
|
export default {
|
|
name: 'Login',
|
|
data () {
|
|
return {
|
|
customActiveKey: 'phone',
|
|
form: this.$form.createForm(this),
|
|
postData: {
|
|
phone: '',
|
|
password: ''
|
|
},
|
|
btn: true,
|
|
showScan: false,
|
|
subscribeUrl: ''
|
|
}
|
|
},
|
|
watch: {
|
|
postData: {
|
|
handler (postData) {
|
|
if (postData.phone.length === 11 && postData.password.trim().length >= 6) {
|
|
// 监听用户输入的账号和密码
|
|
this.btn = false
|
|
} else {
|
|
this.btn = true
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['commonLogin']),
|
|
handleSubmit (e) {
|
|
e.preventDefault()
|
|
this.commonLogin({
|
|
username: this.postData.phone,
|
|
password: this.postData.password
|
|
})
|
|
.then((res) => {
|
|
this.loginSuccess(res)
|
|
})
|
|
.catch((err) => {
|
|
this.requestFailed(err)
|
|
})
|
|
},
|
|
loginSuccess (res) {
|
|
// if (res.is_company === false) {
|
|
// this.$notification['error']({
|
|
// message: '错误',
|
|
// description: '不是供应商，不能登录供应商平台',
|
|
// duration: 4
|
|
// })
|
|
// } else {
|
|
// // if (!res.real_name_status) {
|
|
// // this.$confirm({
|
|
// // content: '当前用户还没有完成实名认证，请先完成实名认证',
|
|
// // onOk: () => {
|
|
// // window.location.href = res.auth_url
|
|
// // },
|
|
// // cancelText: '再想想'
|
|
// // })
|
|
// // return
|
|
// // }
|
|
// // if (res.real_name_status && !res.is_subscribe) {
|
|
// // getScanCode()
|
|
// // .then((res) => {
|
|
// // this.subscribeUrl = res.code
|
|
// // this.showScan = true
|
|
// // })
|
|
// // .catch((err) => {
|
|
// // this.$notification.error(err)
|
|
// // })
|
|
// // return
|
|
// // }
|
|
// // storage.set('is_subscribe', true)
|
|
// // 延迟 1 秒显示欢迎信息
|
|
// setTimeout(() => {
|
|
// this.$notification.success({
|
|
// message: '欢迎',
|
|
// description: `${ timeFix() }，欢迎回来`
|
|
// })
|
|
// this.$router.replace({
|
|
// path: '/'
|
|
// })
|
|
// }, 500)
|
|
// }
|
|
this.$notification.success({
|
|
message: '欢迎',
|
|
description: `${ timeFix() }，欢迎回来`
|
|
})
|
|
setTimeout(() => {
|
|
this.$router.push('/home')
|
|
}, 1000)
|
|
},
|
|
OnSubCancel () {
|
|
storage.set(ACCESS_TOKEN, '')
|
|
},
|
|
OnSubOk () {
|
|
getVerifyScanCode()
|
|
.then((res1) => {
|
|
storage.set('is_subscribe', res1.is_subscribe)
|
|
if (res1.is_subscribe) {
|
|
this.commonLogin({
|
|
username: this.postData.phone,
|
|
password: this.postData.password
|
|
}).then((res) => {
|
|
this.loginSuccess(res)
|
|
}).catch((err) => {
|
|
this.requestFailed(err)
|
|
})
|
|
} else {
|
|
this.$notification.warn({
|
|
message: '温馨提醒',
|
|
description: '您还没有关注公众号'
|
|
})
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$notification.warn(err)
|
|
})
|
|
},
|
|
requestFailed (err) {
|
|
this.$notification['error']({
|
|
message: '错误',
|
|
// description: ((err || {}).data || {}).message || '请求出现错误，请稍后再试',
|
|
description: err.message || '请求出现错误，请稍后再试',
|
|
duration: 4
|
|
})
|
|
},
|
|
goForget () {
|
|
this.$router.push({ name: 'forgetPassword' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.user-layout-login {
|
|
label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.getCaptcha {
|
|
display: block;
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.forge-password {
|
|
font-size: 14px;
|
|
}
|
|
|
|
button.login-button {
|
|
padding: 0 15px;
|
|
font-size: 16px;
|
|
height: 40px;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-login-other {
|
|
text-align: left;
|
|
margin-top: 24px;
|
|
line-height: 22px;
|
|
|
|
.item-icon {
|
|
font-size: 24px;
|
|
color: rgba(0, 0, 0, 0.2);
|
|
margin-left: 16px;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
|
|
&:hover {
|
|
color: #1890ff;
|
|
}
|
|
}
|
|
|
|
.register {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
.login-form-forgot {
|
|
margin-left: 29px;
|
|
}
|
|
.inputT {
|
|
padding: 10px 24px !important;
|
|
}
|
|
.ant-modal-body{
|
|
padding: 0!important;
|
|
}
|
|
.ewmcode {
|
|
width: 520px;
|
|
height: 568px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
.ewmcodetop{
|
|
width: 100%;
|
|
height: 140px;
|
|
background: #fff url(~@/assets/scan_top_bg.png) no-repeat;
|
|
background-size: 100% auto;
|
|
background-position: center;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
color:rgba(255, 255, 255, 0.989998);
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.ewmcode_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
img {
|
|
padding-top: 10px;
|
|
width: 380px;
|
|
}
|
|
p{
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|