zhxg_xsbdV1.0/pages/login/index.vue

<template>
	<view>
		<view class="background">
			<view class="front">
				<view class="front-form">
					<view class="logo">
						<image src="../../static/logo.png" mode="aspectFit"></image>
						<text class="title">新生报到系统</text>
					</view>
					<view class="front-form-text">
						<!-- 账号登录 -->
					</view>
					<view class="front-form-input">
						<input type="text" v-model="username" placeholder="请输入考生号">
					</view>
					<view class="front-form-input">
						<input type="password" v-model="password" placeholder="请输入密码">
					</view>
					<view class="front-form-button">
						<button @click="doLogin">登录</button>
					</view>
					<view class="front-form-text">
						<text @click="topwd">
							忘记密码
						</text>
					</view>
					<view class="front-help">
						<text @click="toHelpPage"
							style="font-size: 40rpx;font-family: ui-rounded;font-weight: 800;">登录前请查看操作手册</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<uni-popup class="popup-check" ref="inputDialog" type="dialog">
			<view style="background-color: white;width: 570rpx;padding:10rpx 54rpx;border-radius: 20rpx;">
				<view class="row">
					请输入以下信息进行账号激活
				</view>
				<view class="row">
					<input v-model="actForm.SFZH" class="uni-input" focus placeholder="身份证号" />
				</view>
				<view class="row">
					<input v-model="actForm.KSH" class="uni-input" focus placeholder="考生号" />
				</view>
				<view class="row phone">
					<input v-model="actForm.SJH" :disabled="true" class="uni-input" focus placeholder="高考预留手机号" />
					<button @click="editPhone" class="mini-btn" type="primary" size="mini">更换手机号</button>
				</view>
				<view class="row code">
					<input v-model="actForm.code" class="uni-input" focus placeholder="手机验证码" />
					<button @click="doSend" class="mini-btn" type="primary" :disabled="can_send"
						size="mini">{{code_text}}</button>
				</view>
				<view class="row btns" style="padding: 20rpx 10rpx 20rpx 10rpx ;">
					<button class="activate" @tap="doAct">激活</button>
					<button class="activate" @tap="exit">退出</button>
				</view>
			</view>
		</uni-popup> -->
		<u-toast ref="uToast" @show="submit"></u-toast>
	</view>
</template>
<script>
	import {
		isEmpty
	} from "@/api/helpFunc.js";

	import {
		doLogin,
		getOwnInfo,
		getUserInfo,
		doAct,
		doSendMsg
	} from "@/api/validApi.js";
	import {
		setInfo,
		logOut
	} from "@/middleware/storage.js";
	export default {
		data() {
			return {
				// imgSrc: 'https://wap.wzzyhp.com//profile/uniapp/static/bg.png',
				username: "",
				password: "",
				msgType: null,
				messageText: "",
				submit: false,
				code_text: "获取验证码",
				is_send: 60,
				can_send: false,
				stu_no: "",
				actForm: {
					KSH: "",
					SFZH: "",
					SJH: "",
					code: ""
				},
				sfzh: ""
			}
		},
		onShow() {
			//this.$refs.inputDialog.close();
		},
		methods: {
			editPhone() {
				uni.setStorageSync("ksh", this.username)
				uni.setStorageSync("loginInfo", {
					username: this.username,
					password: this.password
				});
				uni.navigateTo({
					url: "/pages/login/editphone"
				})
			},
			exit() {
				this.$refs.inputDialog.close();
			},
			async doAct() {
				const requiredFields = {
					SFZH: '身份证号不能为空',
					KSH: "考生号不能为空",
					SJH: "手机号不能为空",
					code: '验证码不能为空'
				};
				//检验非空
				const emptyField = Object.keys(requiredFields).find(field => this.actForm[field] === "");
				if (emptyField) {
					uni.showToast({
						title: requiredFields[emptyField], // 显示对应字段的提示信息  
						icon: "none"
					});
					return;
				}
				this.actForm.KSH = this.username;
				let sdata = {
					...this.actForm
				};
				let res = await doAct(sdata);
				if (res.msg == "200") {
					this.$refs.inputDialog.close();
					this.$refs.uToast.show({
						type: "success",
						message: "激活成功,请点击登录",
						duration: 1500,
					});
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: res.msg,
						duration: 1500,
					})
				}
			},

			toHelpPage() {
				uni.navigateTo({
					url: "/pages/help/helpword"
				})
			},

			async doSend() {
				let sdata = {
					KSH: this.username,
					SFZH: this.actForm.SFZH,
					SJH: this.actForm.SJH
				};
				let res = await doSendMsg(sdata);
				if (res.code == 200) {
					this.$refs.uToast.show({
						type: "success",
						message: res.msg,
						duration: 1500,
					});
					let tick = setInterval(() => {
						this.is_send -= 1;
						this.can_send = true;
						this.code_text = this.is_send + "s";
						if (this.is_send == 0) {
							this.code_text = "获取验证码";
							this.is_send = 60;
							this.can_send = false;
							clearInterval(tick);
						}
					}, 1000);
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: res.msg,
						duration: 1500,
					})
				}
			},
			async topwd() {
				uni.navigateTo({
					url: "/pages/update_pwd/update_pwd"
				})
			},
			async doLogin() {
				if (isEmpty(this.username) || isEmpty(this.password)) {
					this.msgType = "error"
					this.messageText = `不能为空`;
					uni.showToast({
						title: "考生号或密码不能为空",
						icon: "none"
					});
					// this.$refs.message.open();
					return;
				}
				let sdata = {
					username: this.username,
					password: this.password
				}
				let res = await doLogin(sdata);

				if (res.code != 200) {
					this.$refs.uToast.show({
						type: "error",
						message: res.msg,
						duration: 1500,
					})
					return;
				} else {
					// if (res.regStatus == "0") {
					// 	this.$refs.inputDialog.open();
					// 	getOwnInfo(this.username).then(res => {
					// 		console.log(res);
					// 		this.actForm.SJH = res.data.sjh;
					// 		this.actForm.KSH = res.data.ksh;
					// 		this.sfzh = res.data.sfzh;
					// 	})
					// } else {
					uni.setStorageSync("token", res.token);
					uni.redirectTo({
						url: "/pages/newindex/newindex"
					});
					// }
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-check {
		.row {
			padding: 40rpx 5rpx 40rpx 5rpx;
			border-bottom: 1rpx solid lightgray;
			font-size: 40rpx;

			&.btns {
				display: flex;

				button {
					flex: 1;

					&:last-child {
						background-color: white;
						color: #007AFF;
						border: 1px solid #007AFF;
					}

					&:first-child {
						margin-right: 10px;
						flex: 3;
					}
				}
			}

			&:first-child {
				text-align: center;
			}

			&:last-child {
				border-bottom: none;
			}

			&.phone,
			&.code {
				display: flex;
				justify-content: space-between;

				input {
					flex: 1;
				}
			}

			.activate {
				background-color: #007AFF;
				color: white;
				margin: 20px 0;
			}

		}
	}

	.background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAANcCAIAAAAxcyXWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNTNGNTEzOEYzMDExRUVCNUE2OTc3Qzk3MjdDMjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzNTNGNTE0OEYzMDExRUVCNUE2OTc3Qzk3MjdDMjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM1M0Y1MTE4RjMwMTFFRUI1QTY5NzdDOTcyN0MyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM1M0Y1MTI4RjMwMTFFRUI1QTY5NzdDOTcyN0MyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6mEiC+AAVa60lEQVR42uy9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
	}

	.imgSrc {
		height: 100%;
		width: 100%;
	}

	.front {
		width: 100%;
		height: 100vh;
		z-index: 1;
		position: absolute;

		.logo {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 100rpx;

			.title {
				font-weight: bold;
				font-size: 48rpx;
				margin-top: 10px;
				font-family: douyin;
			}

			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;

			}

			text {
				color: #404040;
			}
		}

		.front-top {
			margin: 20rpx 80rpx 20rpx 80rpx;
			padding-top: 180rpx;
		}

		.front-form {
			margin: 200rpx 80rpx 20rpx 80rpx;

			.front-form-text {
				// font-size: 0.8rem;
				// margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					color: red;
					font-size: 30rpx;
				}
			}

			.front-form-input {
				margin: 40rpx 0;

				input {
					border: 1px solid #DCDFE6;
					background-color: white;
					height: 1.5rem;
					padding: 10px;
					border-radius: 40rpx;
				}
			}

			.front-form-button {
				margin: 80rpx 0 40rpx;

				button {
					background-color: #0081FF;
					color: white;
					border-radius: 40rpx;
				}
			}

			.front-help {
				margin-top: 40rpx;
				font-size: 0.8rem;
				text-align: center;
			}
		}
	}
</style>