<template>
|
<div class="login-bg">
|
<div class="login-container">
|
<a-card class="login-card">
|
<h2 class="title">登录</h2>
|
|
<a-form-model :model="model" ref="form" :rules="validateRules" @keyup.enter.native="handleLogin">
|
<!-- 刷卡登录输入框 -->
|
<a-form-model-item prop="workNo" :has-feedback="feedbackConfig.workNoFeedback">
|
<a-input v-model="model.workNo" placeholder="请刷卡或输入卡号" size="large" autocomplete="off"
|
@change="clearAnotherLoginInfo('workNo')">
|
<a-icon slot="prefix" type="credit-card"/>
|
</a-input>
|
</a-form-model-item>
|
|
<div class="divider">
|
<span class="line"></span>
|
<span class="text">或</span>
|
<span class="line"></span>
|
</div>
|
|
<!-- 常规登录表单 -->
|
<a-form-model-item prop="username" :has-feedback="feedbackConfig.usernameFeedback">
|
<a-input
|
v-model="model.username"
|
placeholder="用户名"
|
size="large"
|
@change="clearAnotherLoginInfo('username')"
|
autocomplete="off"
|
>
|
<a-icon slot="prefix" type="user"/>
|
</a-input>
|
</a-form-model-item>
|
|
<a-form-model-item prop="password" :has-feedback="feedbackConfig.passwordFeedback">
|
<a-input-password
|
v-model="model.password"
|
placeholder="密码"
|
size="large"
|
@change="clearAnotherLoginInfo('password')"
|
autocomplete="off"
|
>
|
<a-icon slot="prefix" type="lock"/>
|
</a-input-password>
|
</a-form-model-item>
|
|
<a-button type="primary" size="large" block :loading="loading" @click="handleLogin">登录</a-button>
|
</a-form-model>
|
<!--<div class="footer">-->
|
<!--<a @click="handleRegister">注册账号</a>-->
|
<!--<a @click="handleForget">忘记密码</a>-->
|
<!--</div>-->
|
</a-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapActions } from 'vuex'
|
import { timeFix } from '@/utils/util'
|
|
export default {
|
name: 'OperatorLogin',
|
data() {
|
return {
|
model: {
|
isOperator: true // 判断是哪个登录页登录
|
},
|
feedbackConfig: {
|
workNoFeedback: true,
|
usernameFeedback: true,
|
passwordFeedback: true
|
},
|
loading: false,
|
validateRules: {
|
workNo: [
|
{ validator: this.checkWorkNo, trigger: 'blur' }
|
],
|
username: [
|
{ validator: this.checkUsername, trigger: 'blur' }
|
],
|
password: [
|
{ validator: this.checkPassword, trigger: 'blur' }
|
]
|
}
|
}
|
},
|
methods: {
|
...mapActions(['Login']),
|
|
handleLogin() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.loading = true
|
|
if (this.model.workNo) this.$refs.form.clearValidate(['username', 'password'])
|
else this.$refs.form.clearValidate('workNo')
|
|
console.log('登录信息:', this.model)
|
this.model.loginType = 'terminal'
|
|
this.Login(this.model)
|
.then((res) => {
|
this.loginSuccess(res.result)
|
})
|
.catch((err) => {
|
this.loginFailed(err, this.model.username)
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
|
loginSuccess() {
|
this.$router.push({ path: '/terminal/index' }).catch(() => {
|
})
|
|
this.$notification.success({
|
message: '欢迎',
|
description: `${timeFix()}，欢迎回来`
|
})
|
this.loading = false
|
},
|
|
//登录后台失败
|
loginFailed(err, username) {
|
let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
|
|
this.$notification.error({
|
message: '登录失败',
|
description: description
|
})
|
this.loading = false
|
},
|
|
/**
|
* 输入框值改变时触发
|
* @param inputProp 输入框对应属性
|
*/
|
clearAnotherLoginInfo(inputProp) {
|
this.feedbackConfig[inputProp + 'Feedback'] = true
|
|
if (inputProp === 'workNo') {
|
delete this.model.username
|
delete this.model.password
|
this.$refs.form.clearValidate(['username', 'password'])
|
} else {
|
delete this.model.workNo
|
this.$refs.form.clearValidate('workNo')
|
}
|
},
|
|
checkWorkNo(rule, value, callback) {
|
if (!this.model.username && !this.model.password) {
|
if (!value) {
|
callback(new Error('请刷卡或输入卡号！'))
|
this.feedbackConfig.usernameFeedback = this.feedbackConfig.passwordFeedback = true
|
} else {
|
callback()
|
}
|
} else {
|
this.feedbackConfig.workNoFeedback = false
|
callback()
|
}
|
},
|
|
checkUsername(rule, value, callback) {
|
if (!this.model.workNo) {
|
if (!value) {
|
callback(new Error('请输入用户名！'))
|
if (!this.model.password) this.feedbackConfig.workNoFeedback = true
|
} else {
|
callback()
|
}
|
} else {
|
this.feedbackConfig.usernameFeedback = false
|
callback()
|
}
|
},
|
|
checkPassword(rule, value, callback) {
|
if (!this.model.workNo) {
|
if (!value) {
|
callback(new Error('请输入密码！'))
|
if (!this.model.username) this.feedbackConfig.workNoFeedback = true
|
} else {
|
callback()
|
}
|
} else {
|
this.feedbackConfig.passwordFeedback = false
|
callback()
|
}
|
}
|
|
// handleRegister() {
|
// this.$router.push('/register')
|
// },
|
// handleForget() {
|
// this.$message.info('请联系管理员重置密码')
|
// }
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.login-bg {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 100vh;
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
|
url('../../../assets/operator-login-bg.png') no-repeat center;
|
background-size: cover;
|
|
.login-container {
|
width: 100%;
|
max-width: 420px;
|
padding: 0 20px;
|
|
.login-card {
|
border-radius: 8px;
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
background: rgba(255, 255, 255, 0.95);
|
|
.title {
|
margin-bottom: 24px;
|
text-align: center;
|
color: #1890ff;
|
font-size: 24px;
|
font-weight: 500;
|
}
|
|
.divider {
|
display: flex;
|
align-items: center;
|
margin: 20px 0;
|
|
.line {
|
flex: 1;
|
height: 1px;
|
background: rgba(0, 0, 0, 0.15);
|
}
|
|
.text {
|
padding: 0 16px;
|
color: rgba(0, 0, 0, 0.45);
|
}
|
}
|
|
.footer {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 16px;
|
|
a {
|
color: #1890ff;
|
cursor: pointer;
|
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
</style>
|
