92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<body id="login-page">
|
||
|
|
<el-form class="login-container" :model="loginForm" label-position="left" label-width="0px" @keyup.enter="login">
|
||
|
|
<h3 class="login_title">系统登录</h3>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input type="text" ref="loginAccountInput" v-model="loginForm.loginAccount" auto-complete="off" placeholder="账号"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input type="password" v-model="loginForm.loginPassword" auto-complete="off"
|
||
|
|
placeholder="密码"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item style="width: 100%">
|
||
|
|
<el-button ref="loginBtn" type="primary" style="width: 100%; border: none"
|
||
|
|
@click="login">登录</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</body>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { loginWithAuth } from '@/api/login.js'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import { reactive, onMounted, nextTick, ref } from 'vue';
|
||
|
|
import { loading } from '@/utils/loading'
|
||
|
|
import store from '@/store'
|
||
|
|
import router from '@/router'
|
||
|
|
const loginBtn = ref()
|
||
|
|
let loginForm = reactive({
|
||
|
|
loginAccount: "",
|
||
|
|
loginPassword: "",
|
||
|
|
})
|
||
|
|
const loginAccountInput = ref()
|
||
|
|
// 页面创建生命周期
|
||
|
|
onMounted(() => {
|
||
|
|
nextTick(() => {
|
||
|
|
loginAccountInput.value.focus()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
// 登录
|
||
|
|
const login = () => {
|
||
|
|
loading.open('登录中...')
|
||
|
|
loginWithAuth(loginForm).then(res => {
|
||
|
|
const response = res.data
|
||
|
|
if (response.code == 0) {
|
||
|
|
store.commit('mutationUser', response.data.user)// 用户信息
|
||
|
|
store.commit('mutationMenu', response.data.menuList)// 菜单信息
|
||
|
|
store.commit('mutationStand', response.data.stand)
|
||
|
|
// router.replace({ path: '/' })// 直接跳转到主页
|
||
|
|
router.replace({ path: '/systemCenter' })// 跳转到系统选择的界面
|
||
|
|
} else {
|
||
|
|
ElMessage.error(response.message)
|
||
|
|
}
|
||
|
|
}).catch(err => {
|
||
|
|
console.log(err)
|
||
|
|
ElMessage.error('登录失败！')
|
||
|
|
}).finally(() => {
|
||
|
|
loading.close()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
#login-page {
|
||
|
|
/* background: url("../assets/img/bg.jpg") no-repeat; */
|
||
|
|
background-position: center;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
background-size: cover;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-container {
|
||
|
|
border-radius: 15px;
|
||
|
|
background-clip: padding-box;
|
||
|
|
margin: 90px auto;
|
||
|
|
width: 350px;
|
||
|
|
padding: 35px 35px 15px 35px;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #eaeaea;
|
||
|
|
box-shadow: 0 0 25px #cac6c6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login_title {
|
||
|
|
margin: 0px auto 40px auto;
|
||
|
|
text-align: center;
|
||
|
|
color: #505458;
|
||
|
|
}
|
||
|
|
</style>
|