Mars3D-screen_web/src/views/login/index.vue

<template>
	<div class="login-container">
		<div class="login-title-content">
			<div class="login-title">佳信捷30综合展示系统</div>
			<div class="login-title-bg"></div>
		</div>
		<div class="login-pannel" v-if="!nonLogin">
			<div class="login-pannel_text">系统登录</div>
			<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large" :show-message="false">
				<el-form-item prop="account">
					<el-input v-model="loginForm.account" placeholder="请输入账号">
						<template #prefix>
							<img src="@/assets/images/login/accountIcon.png" alt="" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="showPassword">
					<el-input
						type="password"
						v-model="loginForm.showPassword"
						placeholder="请输入密码"
						show-password
						autocomplete="new-password"
					>
						<template #prefix>
							<img src="@/assets/images/login/lockIcon.png" alt="" />
						</template>
					</el-input>
				</el-form-item>
			</el-form>
			<div class="other-operate">
				<el-checkbox>记住密码</el-checkbox>
				<span>忘记密码?</span>
			</div>
			<div class="login-btn">
				<el-button @click="login(loginFormRef)" type="primary" size="large"> 登录 </el-button>
			</div>
		</div>
		<div class="type-select" v-else>
			<div class="type-select-item" @click="toBackLargeScreen">
				<img src="@/assets/images/login/type-icon-1.png" alt="" srcset="" />
				<span>展示后台</span>
			</div>
			<div class="type-select-item" @click="toFrontLargeScreen">
				<img src="@/assets/images/login/type-icon-2.png" alt="" srcset="" />
				<span>展示前台</span>
			</div>
			<!-- <div class="type-select-item">
				<img src="@/assets/images/login/type-icon-3.png" alt="" srcset="" />
				<span>企业后台</span>
			</div> -->
		</div>
	</div>
</template>

<script setup lang="ts" name="login">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { Login } from "@/api/interface";
import { loginApi } from "@/api/modules/login";
import { Global3DStore } from "@/stores";
import { TabsStore } from "@/stores/modules/tabs";
import { KeepAliveStore } from "@/stores/modules/keepAlive";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import type { ElForm } from "element-plus";
const nonLogin = ref(false);
const router = useRouter();
const tabsStore = TabsStore();
const keepAlive = KeepAliveStore();
const globalStore = Global3DStore();

// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
	account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	showPassword: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({ account: "", showPassword: "" });
const login = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async (valid, params) => {
		if (!valid) {
			ElMessage.error("请输入账号密码");
			return;
		}
		loading.value = true;
		try {
			const arr = ref(["/config", "/home", "/home", "/home"]);
			// 1.执行登录接口
			const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword });
			console.log(result);
			globalStore.setUserInfo(result);
			globalStore.setToken(result.token);
			globalStore.setAccount(result.account);
			globalStore.setAccountType(result.accountType);
			globalStore.setProjectDateAuth(result.projectDateAuth);
			globalStore.setIsManager(result.isManager); //我已知晓

			// 2.添加动态路由
			// await initDynamicRouter();
			// router.push(arr[result.accountType - 1]);
			// 3.清空 tabs、keepAlive 保留的数据
			tabsStore.closeMultipleTab();
			keepAlive.setKeepAliveName();
			nonLogin.value = true;
			// if (result.accountType === 1) {
			// 	await initDynamicRouter();
			// 	router.push(arr.value[result.accountType - 1]);
			// } else {
			// 	router.push(arr.value[result.accountType - 1]);
			// }
			// router.go(0);
			// router.push(arr.value[result.accountType - 1]);
			// 4.跳转到首页

			// ElNotification({
			// 	title: getTimeState(),
			// 	message: "欢迎登录",
			// 	type: "success",
			// 	duration: 3000
			// });
			// return router.go(0);
		} finally {
			loading.value = false;
		}
	});
};
// 跳转到后台系统
const toBackLargeScreen = async () => {
	// 添加路由
	await initDynamicRouter();
	router.push("/largeScreen");
};
// 跳转到前台系统
const toFrontLargeScreen = async () => {
	// 添加路由
	await initDynamicRouter();
	router.push("/frontLargeScreen");
};
onMounted(() => {
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
			if (loading.value) return;
			login(loginFormRef.value);
		}
	};
});
// login页面销毁时，需要去掉enter监听
onBeforeUnmount(() => {
	document.onkeydown = null;
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>