zy-pda/pages/login/login.vue

<template>
	<view class="login">
		<view class="login_title"> 医疗服务中心转运系统 </view>
		<form @submit="login" class="form">
			<view class="form_item">
				<view class="form_title">用户名：</view>
				<input class="form_input" name="username" :value="username" placeholder="请输入用户名" />
			</view>
			<view class="form_item">
				<view class="form_title">密<text class="placeholder"></text>码：</view>
				<input class="form_input" name="password" :value="password" password placeholder="请输入密码" />
			</view>
			<view class="form_item">
				<checkbox-group name="savePassword">
					<label>
						<checkbox value="true" :checked="savePassword" /><text>记住密码</text>
					</label>
				</checkbox-group>
			</view>
			<view class="form_submit">
				<button form-type="submit">登录</button>
			</view>
		</form>
		<view class="tips red">
			(此系统为护士人员使用，其他科室人员请勿进行操作)
		</view>
    <seiminModel ref="seiminModel"></seiminModel>
	</view>
</template>

<script>
	import {
		encryptByEnAES,
		encryptByDeAES
	} from "../../utils/index.js";
	import {
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				username: "", //用户名
				password: "", //密码
				savePassword: false, //是否记住密码
			};
		},
		methods: {
			...mapActions("login", ["vxLogin"]),
			...mapMutations("other", ["changeSeiminModel", "resetVxOther"]),
			...mapMutations("dictionary", ["resetVxDictionary"]),
			...mapMutations("login", ["resetVxLogin"]),
			...mapMutations("system", ["resetVxSystem"]),
			// 重置vuex数据
			resetVuex() {
				this.resetVxOther();
				this.resetVxDictionary();
				this.resetVxLogin();
				this.resetVxSystem();
			},
			// 登录
			login(e) {
				let {
					username, //账号
					password, //密码
					savePassword, //是否记住密码
				} = e.detail.value;

				savePassword = savePassword.length > 0;
				username = username.trim();
				password = password.trim();

				// 用户名，密码,域名(ip)不能为空
				if (username === "" || password === "") {
					uni.showToast({
						icon: "none",
						title: "账号或密码错误",
					});
					return;
				}

				uni.showLoading({
					title: "登录中",
					mask: true,
				});

				let postData = {
					username,
					password,
					type: "APP",
				};

				this.vxLogin(postData).then((res) => {
					uni.hideLoading();

					if (res.status == 200) {
						//获取角色信息
						res.user = res.user || {};
						res.user.user = res.user.user || {};
						let role = res.user.user.role || [];
						// 护士角色才能登录
						let nurseRole = role.some((item) => item.rolecode === "nurse");
						if (!nurseRole) {
							uni.showToast({
								icon: "none",
								title: "暂无护士角色权限！",
							});
							return;
						}

						// 如果记住密码,则缓存到本地
						if (savePassword) {
							//记住密码
							uni.setStorageSync("savePasswordObj", {
								username: encryptByEnAES(username), //用户名
								password: encryptByEnAES(password), //密码
								effectiveDuration: Date.now(), //当前时间戳
							});
						} else {
							uni.removeStorageSync("savePasswordObj");
						}
						// 跳转到首页(isShowSeiminModel,是否显示切换科室弹窗)
            this.changeSeiminModel(true);
						uni.reLaunch({
							url: "/pages/index/index",
						});
					} else {
						this.$refs.seiminModel.show({
							skin: "toast",
							icon: "error",
							content: res.remarks || "登录失败",
						});
						throw new Error(res.remarks || "登录失败");
					}
				});
			},
		},
		onLoad() {
			// 清除vuex
			this.resetVuex();
			// 是否记住密码
			let savePasswordObj = uni.getStorageSync("savePasswordObj");
			if (savePasswordObj) {
				let {
					username,
					password,
					effectiveDuration
				} = savePasswordObj;
				if (Date.now() - effectiveDuration < 10 * 24 * 60 * 60 * 1000) {
					//记住密码,10天内有效
					this.username = encryptByDeAES(username);
					this.password = encryptByDeAES(password);
					this.savePassword = true;
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.login {
		padding: 180rpx 32rpx 32rpx;
		height: 100vh;
		background: url("../../static/imgs/background.png") no-repeat center bottom;
		background-size: contain;

		.login_title {
			text-align: center;
			color: $defaultColor;
			font-weight: bold;
		}

		.form {
			.form_item {
				margin-top: 32rpx;
				@include flex;

				.form_title {
					@include flex(flex-start, center);
					width: 4em;

					.placeholder {
						display: inline-block;
						width: 1em;
					}
				}

				.form_input {
					box-sizing: content-box;
					flex: 1;
					padding: 16rpx;
					background-color: #fff;
				}
			}

			.form_submit {
				margin-top: 60rpx;
				border-radius: 16rpx;

				uni-button {
					@include btn_background;
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.tips {
			font-size: 28rpx;
			margin-top: 16rpx;
		}
	}
</style>