<template>
|
<div class="wrapper">
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="form">
|
<h3 class="title">后台管理系统</h3>
|
<el-form-item prop="username">
|
<el-input
|
class="input"
|
v-model="loginForm.username"
|
type="text"
|
size="large"
|
auto-complete="off"
|
placeholder="账号"
|
>
|
<template #prefix>
|
<app-svg-icon icon-class="user" class="el-input__icon icon"/>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
class="input"
|
v-model="loginForm.password"
|
type="password"
|
size="large"
|
auto-complete="off"
|
placeholder="密码"
|
@keyup.enter="handleLogin"
|
>
|
<template #prefix>
|
<app-svg-icon icon-class="password" class="el-input__icon icon"/>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item style="width:100%;">
|
<el-button
|
class="button"
|
v-loading="loading"
|
type="primary"
|
style="width:100%;"
|
size="large"
|
@click.prevent="handleLogin"
|
>
|
<span v-if="!loading">登 录</span>
|
<span v-else>登 录 中...</span>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<!-- 底部 -->
|
<div class="footer">
|
<span>Copyright © 2024 insistence.tech All Rights Reserved.</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import {useUserStore} from '@/store/modules';
|
|
const userStore = useUserStore();
|
const route = useRoute();
|
const router = useRouter();
|
|
const loginForm = ref({
|
username: "",
|
password: "",
|
});
|
|
const loginRules = {
|
username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
|
password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
|
};
|
|
const loading = ref(false);
|
|
const redirect = ref();
|
|
const loginRef = ref();
|
|
watch(route, (newRoute) => {
|
redirect.value = newRoute.query && newRoute.query.redirect;
|
}, {immediate: true});
|
|
const handleLogin = async () => {
|
const valid = await loginRef.value.validate();
|
if (valid) {
|
loading.value = true;
|
// 调用action的登录方法
|
try {
|
await userStore.login(loginForm.value);
|
const query = route.query;
|
router.push({path: redirect.value || "/", query});
|
} catch (e) {
|
loading.value = false;
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.wrapper {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
background-size: cover;
|
|
.title {
|
margin: 0px auto 30px auto;
|
text-align: center;
|
color: #707070;
|
font-size: 20px;
|
}
|
|
.form {
|
border-radius: 6px;
|
background: #ffffff;
|
width: 400px;
|
padding: 25px 25px 5px 25px;
|
margin-top: -80px;
|
|
.input {
|
height: 40px;
|
margin-top: 10px;
|
}
|
|
.icon {
|
height: 39px;
|
width: 14px;
|
margin-left: 0px;
|
}
|
|
.button {
|
padding: 11px 12px;
|
font-size: 15px;
|
margin-top: 30px;
|
}
|
}
|
|
.footer {
|
height: 40px;
|
line-height: 40px;
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
text-align: center;
|
font-family: Arial;
|
font-size: 13px;
|
letter-spacing: 1px;
|
}
|
|
}
|
</style>
|
