128 lines
3.6 KiB
Vue
128 lines
3.6 KiB
Vue
<template>
|
||
<div class="login-container">
|
||
<div class="img"></div>
|
||
<div class="content">
|
||
<div class="content-title">欢迎来到，智能手铐管理系统</div>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" label-width="auto" style="max-width: 600px">
|
||
<el-form-item label="账号" prop="username">
|
||
<el-input v-model="ruleForm.username" class="input" placeholder="请输入账号" size="large" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="密码" prop="password">
|
||
<el-input v-model="ruleForm.password" type="password" class="input" placeholder="请输入密码" size="large" clearable />
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" :disabled="disabled" @click="submitForm(ruleFormRef)" class="btn" size="large">登 录</el-button>
|
||
</el-form-item>
|
||
<div class="hint">
|
||
如遇到账号问题，请联系管理员<br />
|
||
管理员联系方式：13812345678 邮箱：123456@qq.com
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { fetchLogin } from "@/api/index";
|
||
import { useCommonStore } from "@/store/common";
|
||
import type { FormInstance, FormRules } from "element-plus";
|
||
import { ElMessage } from "element-plus";
|
||
const router = useRouter();
|
||
const comm = useCommonStore();
|
||
const ruleFormRef = ref<FormInstance>();
|
||
|
||
const validatePass = (rule: any, value: any, callback: any) => {
|
||
if (rule.field == "username" && !ruleForm.username) return callback(new Error("请输入账号"));
|
||
if (rule.field == "password" && !ruleForm.password) return callback(new Error("请输入密码"));
|
||
callback();
|
||
};
|
||
const disabled = ref(false);
|
||
const ruleForm = reactive({
|
||
username: "",
|
||
password: "",
|
||
});
|
||
|
||
const rules = reactive<FormRules<typeof ruleForm>>({
|
||
username: [{ validator: validatePass, trigger: "blur" }],
|
||
password: [{ validator: validatePass, trigger: "blur" }],
|
||
});
|
||
|
||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
await formEl.validate((valid, fields) => {
|
||
if (valid) {
|
||
disabled.value = true;
|
||
localStorage.setItem("isReload", "true");
|
||
fetchLogin(ruleForm)
|
||
.then((res) => {
|
||
comm.setUser(res);
|
||
comm.getRoleList();
|
||
ElMessage({
|
||
message: "登录成功",
|
||
type: "success",
|
||
});
|
||
setTimeout(() => {
|
||
router.push("/");
|
||
}, 1000);
|
||
})
|
||
.finally(() => {
|
||
disabled.value = false;
|
||
});
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// @media screen and (max-width: 950px) {
|
||
// .img {
|
||
// display: none;
|
||
// }
|
||
// }
|
||
|
||
.login-container {
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 844px;
|
||
height: 100%;
|
||
background: url("../assets/img/loginimg.png") no-repeat center center;
|
||
background-size: cover;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
min-width: 570px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.content-title {
|
||
color: #061451;
|
||
font-size: 40px;
|
||
margin-bottom: 80px;
|
||
}
|
||
.input {
|
||
width: 476px;
|
||
}
|
||
.btn {
|
||
width: 476px;
|
||
}
|
||
}
|
||
.hint {
|
||
color: #787878;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
}
|
||
.el-input__suffix-inner {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style>
|