|
|
@ -4,21 +4,9 @@ |
|
|
|
<!-- <img src="~@/assets/logo.svg" class="logo" alt="logo" /> --> |
|
|
|
<!-- <img src="~@/assets/logo.svg" class="logo" alt="logo" /> --> |
|
|
|
<span class="title">管理后台登录</span> |
|
|
|
<span class="title">管理后台登录</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-form |
|
|
|
<a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit"> |
|
|
|
id="formLogin" |
|
|
|
|
|
|
|
class="user-layout-login" |
|
|
|
|
|
|
|
ref="formLogin" |
|
|
|
|
|
|
|
:form="form" |
|
|
|
|
|
|
|
@submit="handleSubmit" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<!-- 错误提示 --> |
|
|
|
<!-- 错误提示 --> |
|
|
|
<a-alert |
|
|
|
<a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px" :message="loginErrorMsg" /> |
|
|
|
v-if="isLoginError" |
|
|
|
|
|
|
|
type="error" |
|
|
|
|
|
|
|
showIcon |
|
|
|
|
|
|
|
style="margin-bottom: 24px;" |
|
|
|
|
|
|
|
:message="loginErrorMsg" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<a-form-item> |
|
|
|
<a-form-item> |
|
|
|
<a-input |
|
|
|
<a-input |
|
|
|
size="large" |
|
|
|
size="large" |
|
|
@ -26,7 +14,7 @@ |
|
|
|
placeholder="请输入用户名" |
|
|
|
placeholder="请输入用户名" |
|
|
|
v-decorator="[ |
|
|
|
v-decorator="[ |
|
|
|
'username', |
|
|
|
'username', |
|
|
|
{rules: [{ required: true, message: '您还没有输入用户名' }], validateTrigger: 'change'} |
|
|
|
{ rules: [{ required: true, message: '您还没有输入用户名' }], validateTrigger: 'change' }, |
|
|
|
]" |
|
|
|
]" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" /> |
|
|
|
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" /> |
|
|
@ -41,14 +29,14 @@ |
|
|
|
placeholder="请输入用户密码" |
|
|
|
placeholder="请输入用户密码" |
|
|
|
v-decorator="[ |
|
|
|
v-decorator="[ |
|
|
|
'password', |
|
|
|
'password', |
|
|
|
{rules: [{ required: true, message: '您还没有输入用户密码' }], validateTrigger: 'blur'} |
|
|
|
{ rules: [{ required: true, message: '您还没有输入用户密码' }], validateTrigger: 'blur' }, |
|
|
|
]" |
|
|
|
]" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" /> |
|
|
|
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" /> |
|
|
|
</a-input> |
|
|
|
</a-input> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<a-form-item style="margin-top:24px"> |
|
|
|
<a-form-item style="margin-top: 24px"> |
|
|
|
<a-button |
|
|
|
<a-button |
|
|
|
size="large" |
|
|
|
size="large" |
|
|
|
type="primary" |
|
|
|
type="primary" |
|
|
@ -56,7 +44,8 @@ |
|
|
|
class="login-button" |
|
|
|
class="login-button" |
|
|
|
:loading="state.loginBtn" |
|
|
|
:loading="state.loginBtn" |
|
|
|
:disabled="state.loginBtn" |
|
|
|
:disabled="state.loginBtn" |
|
|
|
>确定</a-button> |
|
|
|
>确定</a-button |
|
|
|
|
|
|
|
> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
</a-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -67,7 +56,7 @@ import { mapActions } from 'vuex' |
|
|
|
import { timeFix } from '@/utils/util' |
|
|
|
import { timeFix } from '@/utils/util' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
// 是否登录错误 |
|
|
|
// 是否登录错误 |
|
|
|
isLoginError: false, |
|
|
|
isLoginError: false, |
|
|
@ -76,21 +65,21 @@ export default { |
|
|
|
// 表单组件 |
|
|
|
// 表单组件 |
|
|
|
form: this.$form.createForm(this), |
|
|
|
form: this.$form.createForm(this), |
|
|
|
// 页面状态 |
|
|
|
// 页面状态 |
|
|
|
state: { loginBtn: false } |
|
|
|
state: { loginBtn: false }, |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
created () { }, |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
...mapActions(['Login', 'Logout']), |
|
|
|
...mapActions(['Login', 'Logout']), |
|
|
|
/** |
|
|
|
/** |
|
|
|
* 表单提交: 确定登录 |
|
|
|
* 表单提交: 确定登录 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
handleSubmit (e) { |
|
|
|
handleSubmit(e) { |
|
|
|
e.preventDefault() |
|
|
|
e.preventDefault() |
|
|
|
const { |
|
|
|
const { |
|
|
|
form: { validateFields }, |
|
|
|
form: { validateFields }, |
|
|
|
state, |
|
|
|
state, |
|
|
|
Login |
|
|
|
Login, |
|
|
|
} = this |
|
|
|
} = this |
|
|
|
|
|
|
|
|
|
|
|
state.loginBtn = true |
|
|
|
state.loginBtn = true |
|
|
@ -99,8 +88,8 @@ export default { |
|
|
|
validateFields(['username', 'password'], { force: true }, (err, values) => { |
|
|
|
validateFields(['username', 'password'], { force: true }, (err, values) => { |
|
|
|
if (!err) { |
|
|
|
if (!err) { |
|
|
|
Login(values) |
|
|
|
Login(values) |
|
|
|
.then(res => this.loginSuccess(res)) |
|
|
|
.then((res) => this.loginSuccess(res)) |
|
|
|
.catch(err => this.loginFailed(err)) |
|
|
|
.catch((err) => this.loginFailed(err)) |
|
|
|
.finally(() => { |
|
|
|
.finally(() => { |
|
|
|
state.loginBtn = false |
|
|
|
state.loginBtn = false |
|
|
|
}) |
|
|
|
}) |
|
|
@ -115,13 +104,13 @@ export default { |
|
|
|
/** |
|
|
|
/** |
|
|
|
* 登录成功 |
|
|
|
* 登录成功 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
loginSuccess (res) { |
|
|
|
loginSuccess(res) { |
|
|
|
this.$router.push({ path: '/' }) |
|
|
|
this.$router.push('/goods/index') |
|
|
|
// 显示欢迎信息 |
|
|
|
// 显示欢迎信息 |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
this.$notification.success({ |
|
|
|
this.$notification.success({ |
|
|
|
message: '欢迎', |
|
|
|
message: '欢迎', |
|
|
|
description: `${timeFix()},欢迎回来` |
|
|
|
description: `${timeFix()},欢迎回来`, |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, 1000) |
|
|
|
}, 1000) |
|
|
|
this.isLoginError = false |
|
|
|
this.isLoginError = false |
|
|
@ -130,11 +119,11 @@ export default { |
|
|
|
/** |
|
|
|
/** |
|
|
|
* 登录请求失败 |
|
|
|
* 登录请求失败 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
loginFailed (response) { |
|
|
|
loginFailed(response) { |
|
|
|
this.isLoginError = true |
|
|
|
this.isLoginError = true |
|
|
|
this.loginErrorMsg = response.message |
|
|
|
this.loginErrorMsg = response.message |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|