124 lines
3.5 KiB
Vue
124 lines
3.5 KiB
Vue
<template>
|
||
<div class="main">
|
||
<a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
|
||
<a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误（18729260811/a123456789 )" />
|
||
<a-form-item>
|
||
<a-input size="large" type="text" placeholder="账户: 18729260811" v-decorator="[
|
||
'mobile',
|
||
{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }], validateTrigger: 'change'}
|
||
]">
|
||
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-input-password size="large" placeholder="密码: a123456789" v-decorator="[
|
||
'password',
|
||
{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
|
||
]">
|
||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
||
</a-input-password>
|
||
</a-form-item>
|
||
<a-form-item>
|
||
<a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
|
||
<router-link :to="{ name: 'recover', params: { user: 'aaa'} }" class="forge-password" style="float: right;">忘记密码</router-link>
|
||
</a-form-item>
|
||
|
||
<a-form-item style="margin-top:24px">
|
||
<a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn" :disabled="state.loginBtn">确定</a-button>
|
||
</a-form-item>
|
||
</a-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions } from 'vuex'
|
||
import { timeFix } from '@/utils/util'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loginBtn: false,
|
||
loginType: 0,
|
||
isLoginError: false,
|
||
form: this.$form.createForm(this),
|
||
state: {
|
||
time: 60,
|
||
loginBtn: false,
|
||
loginType: 0
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions(['Login', 'Logout']),
|
||
handleSubmit(e) {
|
||
e.preventDefault()
|
||
const {
|
||
form: { validateFields },
|
||
state,
|
||
Login
|
||
} = this
|
||
|
||
state.loginBtn = true
|
||
|
||
const validateFieldsKey = ['mobile', 'password']
|
||
|
||
validateFields(validateFieldsKey, { force: true }, (err, values) => {
|
||
if (!err) {
|
||
const loginParams = { ...values }
|
||
delete loginParams.username
|
||
loginParams[!state.loginType ? 'email' : 'username'] = values.username
|
||
loginParams.password = values.password
|
||
Login(loginParams)
|
||
.then((res) => this.loginSuccess(res))
|
||
.catch(err => this.requestFailed(err))
|
||
.finally(() => {
|
||
state.loginBtn = false
|
||
})
|
||
} else {
|
||
setTimeout(() => {
|
||
state.loginBtn = false
|
||
}, 600)
|
||
}
|
||
})
|
||
},
|
||
loginSuccess(res) {
|
||
this.$router.push({ path: '/' })
|
||
// 延迟 1 秒显示欢迎信息
|
||
setTimeout(() => {
|
||
this.$notification.success({
|
||
message: '欢迎',
|
||
description: `${timeFix()}，欢迎回来`
|
||
})
|
||
}, 1000)
|
||
this.isLoginError = false
|
||
},
|
||
requestFailed() {
|
||
this.isLoginError = true
|
||
}
|
||
}
|
||
}
|
||
</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%;
|
||
}
|
||
}
|
||
</style>
|