<template>
<section class="login">
<div class="login-content">
<div class="login-inner">
<div class="login-inner-left">
<img src="../../assets/images/login/icons.png" />
</div>
<div class="login-inner-right">
<div class="logo">
<img src="../../assets/images/login/logo.png" />
<div>外包管理平台</div>
</div>
<div class="login-title">Hi～</div>
<div class="login-title">欢迎使用软件工厂外包系统</div>
<el-form
ref="loginForm"
:rules="rules"
:model="loginForm"
label-width="0px"
>
<el-form-item prop="username">
<el-input
class="input-class"
v-model.trim="loginForm.username"
placeholder="请输入用户名"
>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
class="input-class"
:type="'password'"
@keyup.enter.native="login"
v-model="loginForm.password"
placeholder="请输入密码"
>
</el-input>
</el-form-item>
</el-form>
<el-row class="operation">
<el-col align="left" :span="12">
<el-checkbox v-model="remenber"> </el-checkbox
><span style="padding-left: 5px">记住密码</span>
</el-col>
<el-col align="right" :span="12"> 忘记密码 </el-col>
</el-row>
<el-button
:loading="loading"
class="login-btn"
type="primary"
@click="login"
>登 录</el-button
>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapMutations } from 'vuex'
const Base64 = require('js-base64').Base64
import { loginInter, getUserInfoInter, getMenuNavInter } from '@/server/common'
export default {
name: 'login',
components: {},
data() {
return {
loading: false,
remenber: true,
loginForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
created() {
// 在页面加载时从cookie获取登录信息
let username = this.$db.ls.get('username')
let password = this.$db.ls.get('password')
if (password) {
password = Base64.decode(password)
}
// 如果存在赋值给表单，并且将记住密码勾选
if (username) {
this.loginForm.username = username
this.loginForm.password = password
this.remenber = true
}
},
methods: {
...mapMutations([
'changeUserInfo',
'changeMenuList',
'changePermissionList'
]),
// 储存表单信息
setUserInfo: function () {
if (this.remenber) {
// base64加密密码
let password = Base64.encode(this.loginForm.password)
this.$db.ls.set('password', password)
this.$db.ls.set('username', this.loginForm.username)
} else {
this.$db.ls.clear()
}
},
login() {
this.$refs.loginForm.validate(async (valid) => {
if (valid) {
this.loading = true
let params = {
username: this.loginForm.username,
password: this.loginForm.password
}
const { code, token, msg } = await loginInter(params)
if (code === 0) {
this.$db.ss.set('token', token)
this.getUserInfo()
} else {
this.$message({
message: msg,
type: 'error'
})
this.loading = false
}
}
})
},
async getUserInfo() {
const { code, user } = await getUserInfoInter()
const { code: code1, menuList, permissions } = await getMenuNavInter()
if (code === 0) {
this.changeUserInfo(user)
this.setUserInfo()
}
if (code1 === 0) {
this.$db.ss.set('menuList', menuList)
this.$db.ss.set('permissionList', permissions)
this.changePermissionList(permissions)
this.changeMenuList(menuList)
}
if (this.$route.query.redirect) {
this.$router.push({
path: decodeURIComponent(this.$route.query.redirect)
})
} else {
this.$router.push('/index') //正常登录流程进入的页面
}
}
}
}
</script>
<style lang="scss" scoped>
.login {
height: calc(100vh);
background-image: url(../../assets/images/login/bg1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
.login-content {
padding: 50px;
65%;
height: 500px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image: url(../../assets/images/login/bg2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
.login-inner {
display: flex;
padding: 50px 80px;
padding-top: 0px;
align-items: flex-end;
.login-inner-left {
padding: 30px 10px;
65%;
img {
100%;
}
}
.login-inner-right {
padding-right: 40px;
30%;
.logo {
display: flex;
justify-content: start;
align-items: center;
font-size: 18px;
font-weight: 500;
color: #1a185b;
margin-bottom: 20px;
img {
35px;
height: 35px;
margin-right: 10px;
}
}
.login-title {
text-align: left;
font-size: 20px;
color: #1a185b;
// padding: 10px 0 50px 0;
padding: 10px 0 4px 0;
font-weight: 500;
}
.el-form {
margin-top: 30px;
}
.input-class {
::v-deep .el-input__inner {
border: 1px solid transparent;
background: rgba(114, 125, 255, 0.2);
color: #888;
}
}
.operation {
padding: 20px 10px;
font-size: 12px;
color: #1a185b;
}
}
}
}
.login-btn {
margin-top: 20px;
100% !important;
}
}
</style>