<template>
|
<div class="login_container">
|
<div class="system_title" >{{ $t('northglassMESsystem') }}</div>
|
<div class="login_box">
|
<!--头像区域-->
|
<!-- <div class="avatar_box">
|
<img src="../../assets/emi.png">
|
</div> -->
|
|
<!--登录表单区域-->
|
<el-form ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules">
|
<!--用户名区域-->
|
<el-form-item prop="username">
|
<el-input prefix-icon="el-icon-user" :placeholder="$t('usernamePlaceholder')" v-model="loginForm.username" type="text"></el-input>
|
</el-form-item>
|
<!--密码区域-->
|
<el-form-item prop="password">
|
<el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" @keyup.enter.native="login" :placeholder="$t('passwordPlaceholder')"></el-input>
|
</el-form-item>
|
<!--按钮区域-->
|
<el-form-item class="btns">
|
<el-button type="primary" @click="login">{{ $t('loginButton') }}</el-button>
|
<el-button type="primary" @click="register">{{ $t('registerButton') }}</el-button>
|
<el-button type="info" @click="resetLoginForm">{{ $t('resetButton') }}</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!--语言切换按钮-->
|
<div class="language_switch">
|
<el-button-group>
|
<el-button type="primary" @click="switchLanguage('zh-CN')">中文</el-button>
|
<el-button type="primary" @click="switchLanguage('en-US')">English</el-button>
|
</el-button-group>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
|
|
<script>
|
import {login} from '../../api/user'
|
import {setToken} from "../../utils/auth";
|
import LanguageMixin from '../../lang/LanguageMixin'
|
|
|
|
export default {
|
name: 'Login',
|
mixins: [LanguageMixin],
|
data() {
|
return {
|
// 登录表单的数据绑定对象
|
loginForm: {},
|
// 表单的验证规则对象
|
loginFormRules: {
|
// 验证用户名是否合法
|
username: [
|
{required: true, message: this.$t('usernameRequired'), trigger: 'blur'},
|
{min: 5, max: 15, message: this.$t('usernameLength'), trigger: 'blur'}
|
],
|
// 验证密码是否合法
|
password: [
|
{required: true, message: this.$t('passwordRequired'), trigger: 'blur'},
|
{min: 5, max: 15, message: this.$t('passwordLength'), trigger: 'blur'}
|
]
|
}
|
}
|
},
|
|
methods: {
|
// 点击重设按钮，重设登录表单
|
resetLoginForm() {
|
this.$refs['loginFormRef'].resetFields()
|
},
|
login() {
|
this.$refs.loginFormRef.validate(async valid => {
|
if (!valid) return;
|
login(this.loginForm).then(res => {
|
// 设置token
|
setToken(res.data.Authorization);
|
this.$router.push('/layout')
|
this.$message.success('登录成功');
|
});
|
})
|
},
|
register() {
|
this.$router.push('/register')
|
},
|
|
|
|
|
},
|
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.login_container {
|
background-color: #2b4b6b;
|
height: 100%;
|
}
|
|
.login_box {
|
width: 450px;
|
height: 300px;
|
background-color: #fff;
|
border-radius: 3px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
.avatar_box {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
|
img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: #eee;
|
}
|
}
|
}
|
.system_title {
|
font-size: 24px;
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 20px;
|
position: relative; top: 100px;
|
|
}
|
.btns {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.login_form {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
</style>
|
