pbl_admin_table/src/views/login/loginPage.vue

<template>
	<!-- 全屏包裹容器 -->
	<div class="loginBg">
		<div class="loginBox">
			<div class="login_top">
				<img src="../../assets/school.png" alt="" />
				<div class="top_title">深圳市荔园教育集团</div>
				<div>AI智慧校园平台</div>
			</div>
			<div class="login_content">
				组织号
				<div class="input-container">
					<input
						type="text"
						placeholder="请输入组织号"
						class="input"
						v-model="org"
					/>
				</div>
				账户
				<div class="input-container">
					<input
						type="text"
						placeholder="请输入账户"
						class="input"
						v-model="account"
					/>
				</div>
				密码
				<div class="input-container">
					<input
						type="text"
						placeholder="请输入密码"
						class="input"
						v-model="password"
					/>
				</div>
				<button class="confirm" @click="loginFn()">提交</button>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
	name: "loginPage",
	data() {
		return {
			org: "",
			account: "",
			password: "",
			loading: false,
			redirect:this.$route.query['redirect']
		};
	},
	methods: {
		...mapActions({
			login: "user/login",
		}),
		loginFn() {
			if (this.loading) return;

			if (this.account.length <= 0) {
				this.$message.error("请输入账号");
				return;
			}

			if (this.password.length < 6 || /[\u4e00-\u9fa5]/.test(this.password)) {
				this.$message.error("密码长度不少于6位或者密码包含特殊字符、中文");
				return;
			}

			let params = {
				geetest_challenge: "",
				geetest_validate: "",
				geetest_seccode: "",
				loginUsername: this.account.trim(),
				loginPassword: window.btoa(this.password.trim()),
			};
			this.loading = true;
			this.$ajax
				.post("https://beta.api.cocorobo.cn/api/user", params)
				.then(async (res) => {
					console.log("res", res);
					let _data = res.data[0][0];
					if (_data.active === 1) {
						window.localStorage["identity"] = JSON.stringify(_data.identity);
						this.$message.success("登录成功");
						await this.login();
						this.$router.push({ path: this.redirect || "/" });
					} else {
						this.$message.error("登录失败");
					}
					this.loading = false;
				})
				.catch((e) => {
					if (e.response && e.response.data == "Wrong email or password") {
						this.$message.error("账号或密码错误");
					} else {
						this.$message.error("登录失败");
					}
					this.loading = false;
				});
		},
		async getLoading() {
			// 检查用户是否已登录
			const hasToken = this.$store.getters.token;
			if (hasToken) {
				// 如果已登录，直接重定向
				this.$router.push({ path: this.redirect || "/" });
				return;
			}
			const userid = await this.login();
			if (userid) {
				this.$router.push({ path: this.redirect || "/" });
			}
		},
	},
	mounted() {
		this.getLoading();
	},
};
</script>
<style scoped>
.loginBg {
	width: 100vw;
	height: 100vh;
	background-image: url("../../assets/login.png");
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.loginBox {
	height: 533px;
	background-color: #fff;
	border-radius: 10px;
	/* 添加投影提升层次感 */
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.loginBox img {
	width: 45px;
	height: 37px;
}

.login_top {
	margin-top: 36px;
	text-align: center;
}

.top_title {
	font-size: 25px;
	font-weight: 700;
}

.login_top div {
	margin-top: 12px;
	color: #69727d;
}
.login_content {
	margin: 33px;
	font-size: 14px;
	color: #59616f;
}
.input {
	outline: none;
	width: 344px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid #d1d5db;
	padding-left: 40px;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 14px;
	color: #a3a9b4;
	line-height: 42px;
}
/* 设置占位符文字颜色 */
.input::placeholder {
	color: #a3a9b4; /* 替换为您想要的占位符颜色 */
	opacity: 1; /* 确保占位符不透明 */
}

.input-container {
	position: relative;
}
.input-container:nth-child(1)::before {
	content: "";
	background-image: url("../../assets/organzation.png"); /* 组织号图片 */
	background-size: 20px 20px; /* 设置图片大小 */
	background-repeat: no-repeat;
	position: absolute;
	left: 10px; /* 图片距离输入框左边的距离 */
	top: 39%; /* 垂直居中 */
	transform: translateY(-50%); /* 垂直居中 */
	width: 20px; /* 图片宽度 */
	height: 20px; /* 图片高度 */
}

.input-container:nth-child(2)::before {
	content: "";
	background-image: url("../../assets/personal.png"); /* 账户图片 */
	background-size: 20px 20px; /* 设置图片大小 */
	background-repeat: no-repeat;
	position: absolute;
	left: 10px; /* 图片距离输入框左边的距离 */
	top: 41%; /* 垂直居中 */
	transform: translateY(-50%); /* 垂直居中 */
	width: 20px; /* 图片宽度 */
	height: 20px; /* 图片高度 */
}

.input-container:nth-child(3)::before {
	content: "";
	background-image: url("../../assets/password.png"); /* 密码图片 */
	background-size: 20px 20px; /* 设置图片大小 */
	background-repeat: no-repeat;
	position: absolute;
	left: 10px; /* 图片距离输入框左边的距离 */
	top: 41%; /* 垂直居中 */
	transform: translateY(-50%); /* 垂直居中 */
	width: 20px; /* 图片宽度 */
	height: 20px; /* 图片高度 */
}
.confirm {
	width: 384px;
	height: 40px;
	background: #0354d7;
	border: none;
	border-radius: 9px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
</style>