124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<style lang="less" scoped>
|
||
@import './login.less';
|
||
</style>
|
||
|
||
<template>
|
||
<div class="login">
|
||
<div class="title-box">
|
||
<h1>{{title}}</h1>
|
||
</div>
|
||
|
||
<div class="login-con">
|
||
<Card icon="log-in" title="欢迎登录" style="width:350px;height:260px;" :bordered="false">
|
||
<div class="form-con">
|
||
<login-form @on-success-valid="handleSubmit"></login-form>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
<div class="bottom-box">
|
||
<span>Copyright ©2019 </span>|
|
||
|
||
<span>推荐浏览器（360极速浏览器、谷歌浏览器、Edge for win10） </span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import LoginForm from '@component/login-form'
|
||
import Main from '@component/main'
|
||
import ParentView from '@component/parent-view'
|
||
import Page404 from '@/views/error-page/404.vue'
|
||
import { mapActions } from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: config.title,
|
||
}
|
||
},
|
||
components: {
|
||
LoginForm,
|
||
},
|
||
methods: {
|
||
...mapActions('user', ['handleLogin']),
|
||
async handleSubmit({ userName, password }) {
|
||
try {
|
||
let userFrom = {
|
||
name: userName,
|
||
password: password
|
||
}
|
||
await this.handleLogin({
|
||
userFrom,
|
||
Main,
|
||
ParentView,
|
||
Page404
|
||
})
|
||
|
||
this.$Message.success('登录成功！')
|
||
|
||
// 跳转到首页
|
||
// 使用 replace 避免返回时回到登录页
|
||
setTimeout(() => {
|
||
// 跳转到根路径，会自动 redirect 到第一个菜单
|
||
this.$router.replace({ path: '/' }).catch(() => {
|
||
// 如果路由跳转失败，刷新页面
|
||
window.location.href = window.location.origin + window.location.pathname + '#/'
|
||
})
|
||
}, 500)
|
||
} catch (error) {
|
||
console.error('登录失败:', error)
|
||
// 处理不同类型的错误
|
||
let errorMsg = '登录失败，请检查用户名和密码'
|
||
|
||
if (error) {
|
||
if (typeof error === 'string') {
|
||
errorMsg = error
|
||
} else if (error.message) {
|
||
errorMsg = error.message
|
||
} else if (error.data && error.data.message) {
|
||
errorMsg = error.data.message
|
||
}
|
||
}
|
||
|
||
this.$Message.error(errorMsg)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.title-box {
|
||
position: absolute;
|
||
|
||
top: 0px;
|
||
left: 15px;
|
||
width: 440px;
|
||
text-align: center;
|
||
height: 55px;
|
||
line-height: 55px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.title-box h1 {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
font-family: '黑体';
|
||
}
|
||
|
||
.bottom-box {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
color: #fff;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.bottom-box span {
|
||
margin: 0 10px;
|
||
}
|
||
</style>
|