pbl_admin_table/src/views/login/loginPage old.vue

<template>
	<!-- 全屏包裹容器 -->
	<div class="loginBg">
		<div class="loginBox" v-loading="loading">
			<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"
						@change="getOrgData"
						@keyup.enter="loginFn"
						v-model="account"
					/>
				</div>
				组织
				<div class="input-container">
					<!-- <input
						type="text"
						placeholder="请输入组织"
						class="input"
						@keyup.enter="loginFn"
						v-model="org"
					/> -->
					<el-select class="input" :popper-append-to-body="false"  v-model="org" placeholder="请选择">
						<el-option
							v-for="item in OrgOptions"
							:key="item.Uorg"
							:label="item.name"
							:value="item.Uorg">
						</el-option>	
					</el-select>
				</div>
				密码
				<div class="input-container">
					<input
						type="password"
						placeholder="请输入密码"
						class="input"
						@keyup.enter="loginFn"
						v-model="password"
					/>
				</div>
				<button class="confirm" @click="loginFn()">登录</button>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions } from "vuex";
import axios from "axios";
import qs from 'qs'
import { API_CONFIG } from "@/common/apiConfig";

export default {
	name: "loginPage",
	data() {
		return {
			org: "",
			account: "",
			password: "",
			loading: false,
			redirect: this.$route.query["redirect"],
			// 组织列表
			OrgOptions:[]
		};
	},
	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 orgValue = this.org ? "@" + this.org : "@cocorobo.cc";
			let email = "";
			const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
			let str = this.account.replace(/(^\s*)|(\s*$)/g, "");

			// 判断用户输入账户带不带后缀
			if (!regEmail.test(str)) {
				email = str + orgValue;
			} else {
				email = str;
			}
			let params = {
				geetest_challenge: "",
				geetest_validate: "",
				geetest_seccode: "",
				loginUsername: email.trim(),
				loginPassword: window.btoa(this.password.trim()),
			};
			this.loading = true;
			axios.defaults.withCredentials = true;
			console.log("👇")
			axios
				.post("https://beta.api.cocorobo.cn/api/user", qs.stringify(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 || "/" });
			}
		},
		// 输入账号获取组织
		getOrgData(){
			// console.log('111');
			
			let params = [
                    {
                        functionName: API_CONFIG.ajax_liYuanOrg.functionName,
                        uname: this.account, 
                    },
                ];
                
                this.$ajax
                    .post(API_CONFIG.baseUrl, params)
                    .then((res) => {
						console.log('res',res);
						this.org = ''
						this.OrgOptions = ''

						this.OrgOptions = res.data[0]
						if (this.OrgOptions.length == 1) {
							this.org = this.OrgOptions[0].Uorg
						}

                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message.error("获取组织失败");
                    });
		}
	},
	mounted() {
		this.getLoading();
	},
};
</script>
<style scoped>
 .el-select-dropdown.customDropdown {
	width: 200px;
	position: relative;
	margin-left: -65px;
	margin-top: -55px;
	background-color: #fff;
}
.el-select-dropdown.customDropdown .el-select-dropdown__item {
	display: inline-block;
	width: 100%;
	padding: 0;
	overflow: initial;/* 允许内容溢出 */
}
.input >>> .el-select-dropdown{
	min-width: 330px !important;
}
.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 >>> .el-input__inner{
	border: none;
	padding: 0;
	border-radius: 15px;
}
/* 设置占位符文字颜色 */
.input::placeholder {
	color: #a3a9b4; /* 替换为您想要的占位符颜色 */
	opacity: 1; /* 确保占位符不透明 */
}

.input-container {
	position: relative;
}
.input-container:nth-child(2)::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(1)::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>