pbl-student-table/src/components/login.vue

<template>
	<div class="login_content" style="background: #e6eaf0">
		<!-- <el-button type="primary" @click="login()">登录</el-button> -->
		<div class="login_box" v-show="islogin">
			<div style="padding: 0px 20px">
				<div class="login_title">
					<span>PBL学生平台</span>
				</div>
				<!-- <div class="userLogin">
          <img src="../assets/username.png" />
          <el-input v-model="phoneNum" placeholder="手机号码"></el-input>
        </div>
        <div class="userLogin">
          <img src="../assets/password.png" />
          <el-input
            v-model="password"
            placeholder="密码"
            type="password"
          ></el-input>
        </div> -->
				<el-form
					label-position="right"
					label-width="80px"
					style="margin-top: 30px"
				>
					<el-form-item label="手机号码">
						<el-input
							v-model="phoneNum"
							auto-complete="off"
							placeholder="请输入手机号码"
							style="width: 100%"
							@keyup.enter.native="findPhone"
						></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input
							v-model="password"
							auto-complete="off"
							placeholder="请输入密码"
							type="password"
							style="width: 100%"
							@keyup.enter.native="findPhone"
						></el-input>
					</el-form-item>
				</el-form>
				<div style="display: flex; justify-content: flex-end">
					<el-button type="text" @click="islogin = false">立即注册</el-button>
				</div>
				<div class="login_button">
					<button @click="findPhone()">登录</button>
				</div>
			</div>
		</div>
		<div class="login_box" v-show="!islogin">
			<div style="padding: 0px 20px">
				<div class="login_title">
					<span>PBL学生平台注册</span>
				</div>
				<!-- <div class="userLogin">
          <img src="../assets/username.png" />
          <el-input v-model="phoneNum" placeholder="手机号码"></el-input>
        </div>
        <div class="userLogin">
          <img src="../assets/password.png" />
          <el-input v-model="password" placeholder="密码" type="password"></el-input>
        </div> -->
				<el-form
					label-position="right"
					label-width="80px"
					style="margin-top: 30px"
					:rules="rules2"
					ref="ruleForm2"
					:model="registerForm"
				>
					<el-form-item label="手机号码" prop="phone">
						<el-input
							v-model="registerForm.rphoneNum"
							auto-complete="off"
							placeholder="请输入手机号码"
							style="width: 100%"
						></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pass">
						<el-input
							v-model="registerForm.rpassword"
							auto-complete="off"
							placeholder="请输入密码"
							type="password"
							style="width: 100%"
						></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPass">
						<el-input
							v-model="registerForm.repassword"
							auto-complete="off"
							placeholder="请再输入一遍密码"
							type="password"
							style="width: 100%"
						></el-input>
					</el-form-item>
					<el-form-item label="学校" prop="school">
						<el-select
							v-model="registerForm.school"
							placeholder="请选择学校"
							@change="getClass"
						>
							<el-option
								v-for="(item, index) in schoolArray"
								:key="index"
								:label="item.name"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="班级" prop="class">
						<el-select v-model="registerForm.class" placeholder="请先选择学校">
							<el-option
								v-for="(item, index) in classArray"
								:key="index"
								:label="item.name"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div style="display: flex; justify-content: flex-end">
					<el-button type="text" @click="islogin = true">返回登录</el-button>
				</div>
				<div class="login_button">
					<button @click="register()">注册</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				var _this = this;
				if (_this.registerForm.rpassword === "") {
					callback(new Error("请输入密码"));
				} else {
					if (_this.registerForm.rpassword.length < 6) {
						callback(new Error("输入的密码需不少于6位"));
					} else if (_this.registerForm.repassword !== "") {
						_this.$refs.ruleForm2.validateField("checkPass");
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				var _this = this;
				if (_this.registerForm.repassword === "") {
					callback(new Error("请再次输入密码"));
				} else if (
					_this.registerForm.repassword !== _this.registerForm.rpassword
				) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			// 验证手机
			var checkPhone = (rule, value, callback) => {
				var _this = this;
				let reg = /^1\d{10}$/;
				if (_this.registerForm.rphoneNum === "") {
					callback(new Error("请输入手机号码"));
				} else {
					if (!reg.test(_this.registerForm.rphoneNum)) {
						callback(new Error("请输入11位手机号"));
					} else {
						let params = { un: _this.registerForm.rphoneNum };
						this.ajax
							.get(this.$store.state.api + "findPhone", params)
							.then((res) => {
								if (res.data[0].length > 0) {
									callback(new Error("此手机号已注册"));
								} else {
									callback();
								}
								console.log(res.data[0]);
							})
							.catch((err) => {
								callback();
								console.error(err);
							});
					}
				}
			};
			return {
				islogin: true,
				phoneNum: "",
				password: "",
				sqlPassword: "",
				registerForm: {
					rphoneNum: "",
					rpassword: "",
					repassword: "",
					school: "",
					class: "",
				},
				schoolArray: [],
				classArray: [],
				now: "",
				rules2: {
					phone: [
						{
							required: true,
							type: "number",
							validator: checkPhone,
							trigger: ["blur", "change"],
						},
					],
					pass: [{ required: true, validator: validatePass, trigger: "blur" }],
					checkPass: [
						{ required: true, validator: validatePass2, trigger: "blur" },
					],
					school: [
						{ required: true, message: "请选择活动区域", trigger: "blur" },
					],
				},
				studentInfo: [],
			};
		},
		created() {
			// this.getOrg();
			this.getSchool();
		},
		methods: {
			time() {
				if (!this.now) {
					this.now = new Date().getTime();
					return true;
				} else {
					let time = new Date().getTime();
					if (time - this.now > 3000) {
						this.now = time;
						return true;
					} else {
						return false;
					}
				}
			},
			register() {
				this.$refs.ruleForm2.validate((valid) => {
					if (valid) {
						if (this.time()) {
							let params = [
								{
									username: this.registerForm.rphoneNum,
									userpassword: this.registerForm.repassword,
									oid: this.registerForm.school,
									cid: this.registerForm.class,
								},
							];
							this.ajax
								.post(this.$store.state.api + "register_student", params)
								.then((res) => {
									this.$message({
										message: "注册成功",
										type: "success",
									});
									this.registerForm = {
										rphoneNum: "",
										rpassword: "",
										repassword: "",
										school: "",
										class: "",
									};
									this.islogin = true;
								})
								.catch((err) => {
									this.$message.error("注册失败");
									console.error(err);
								});
						}
					} else {
						return false;
					}
				});
			},
			findPhone() {
				let params = { un: this.phoneNum };
				this.ajax
					.get(this.$store.state.api + "findPhone", params)
					.then((res) => {
						if (res.data[0].length > 0) {
							if (res.data[0][0].state == 0) {
								this.$message.error("此账号已被屏蔽登录,请咨询管理员");
								return;
							}
							if (res.data[0][0].type == 2) {
								// this.sqlPassword = res.data[0][0].userpassword;
								// this.userInfo = res.data[0][0]
								this.isU = 1;
							} else {
								this.isU = 2;
							}
						} else {
							this.isU = false;
						}
						this.login();
						console.log(res.data[0][0]);
					})
					.catch((err) => {
						console.error(err);
					});
			},
			login() {
				if (this.time()) {
					var _this = this;
					var isU = _this.isU;
					if (isU == 1) {
						let params = [
							{
								uname: this.phoneNum,
								upassword: this.password,
							},
						];
						_this.ajax
							.post(_this.$store.state.api + "login", params)
							.then((res) => {
								if (res.data.status == "1") {
									_this.$message({
										message: "登录成功",
										type: "success",
									});

									_this.studentInfo = res.data[0][0];
									_this.$cookies.set("slogin", "1", -1);

									_this.$cookies.set("suserid", _this.studentInfo.userid, -1);
									_this.$cookies.set("studentInfo", _this.studentInfo, -1);
									// window.sessionStorage.setItem("login", true);
									// window.sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
									_this.$store.commit("update", ["isLogin", true]);
									_this.$store.commit("update", [
										"studentInfo",
										_this.studentInfo,
									]);
									// console.log(_this.$store.state);
									_this.$router.push("/index");
								} else {
									this.$message.error("密码错误");
								}
								console.log(res.data);
							})
							.catch((err) => {
								this.$message.error("登录失败");
								console.error(err);
							});
					} else if (isU == 2) {
						this.$message.error("此账号角色不是学生");
					} else {
						this.$message.error("此账号还未注册请去注册");
					}
				}

				//   sessionStorage.removeItem("key");
			},
			getSchool() {
				this.ajax
					.get(this.$store.state.api + "selectOrg", "")
					.then((res) => {
						this.schoolArray = res.data[0];
					})
					.catch((err) => {
						console.error(err);
					});
			},
			getClass() {
				let params = {
					oid: this.registerForm.school,
				};
				this.ajax
					.get(this.$store.state.api + "selectClassBySchool", params)
					.then((res) => {
						this.classArray = res.data[0];
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
	};
</script>

<style scoped>
    html,body{
        height: 100%;
    }
	.login_content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100% - (67.5px * 2));
		/* position: absolute; */
		width: 100%;
	}
	.login_box {
		width: 23%;
		min-width: 400px;
		margin: 0 auto;
		background: #fff;
		padding: 20px;
		box-shadow: 0 0 20px #eee;
	}

	/* .userLogin img {
				  width: 50%;
				  display: inline-block;
				  width: 18px;
				  padding-right: 5px;
				  border-right: 1px solid #2a97ff;
				  position: absolute;
				  top: 8px;
				  left: 10px;
				  z-index: 999;
				} */

	/* .el-input >>> input {
				  width: 100%;
				  padding: 15px 0 15px 40px;
				  outline: none;
				  border: 1px solid #ccc;
				  font-size: 14px;
				} */
	/* .userLogin {
				  margin-top: 25px;
				  position: relative;
				} */
	.login_button {
		margin-top: 10px;
	}
	.login_button button {
		width: 100%;
		color: #fff;
		background: #2a97ff;
		padding: 10px;
		border-radius: 10px;
		border: none;
		font-size: 18px;
		text-align: center;
		outline: none;
		cursor: pointer;
	}
	.login_title {
		text-align: center;
		font-size: 26px;
		font-weight: 600;
	}
</style>