wit-uniapp/pages/login/login.vue

<template>
	<view class="content">
		<view class="info_bg">
			<image src="../../static/management/login-bg.png" class="bgImg"></image>
			<div class="title">
				<image src="../../static/management/logo.svg"></image>
				<!-- <text>双碳感知资产运营管理平台</text> -->
				<text>传能</text>
			</div>
		</view>
		<view class="form-box">
			<view class="loginTxt">登录</view>
			<view class="row-input">
				<u-icon name="account" color="#2979ff" size="50" style="padding: 0 20rpx"></u-icon>
				<input v-model="account" placeholder="请输入用户账号" maxlength="18" clearable />
			</view>
			<view class="row-input">
				<u-icon name="lock" color="#2979ff" size="50" style="padding: 0 20rpx"></u-icon>
				<input v-model="password" placeholder="登陆密码" clearable :password="!isShowPassword" />
				<u-icon name="eye-fill" color="#2979ff" size="50" style="padding-right: 20rpx" v-if="isShowPassword"
					@click="showOrHide"></u-icon>
				<u-icon name="eye-off" color="#2979ff" size="50" style="padding-right: 0rpx" v-else @click="showOrHide">
				</u-icon>
			</view>

			<view class="Userprotocols">
				<view class="Userprotocolchecked">
					<checkbox style="transform: scale(0.85)" :checked="rememberPsw" @click="rememberPsw=!rememberPsw" />
				</view>
				<view class="Userprotocoltext">记住账号密码</view>
			</view>

			<view class="Userprotocol">
				<view class="Userprotocolchecked">
					<checkbox :checked="isChecked" @click="isChecked = !isChecked" style="transform: scale(0.7)">
					</checkbox>
				</view>
				<view class="Userprotocoltext">我已阅读并同意 <span @click="useragement">用户协议</span> 和 <span
						@click="Userprotocol">隐私政策</span> </view>
			</view>
			<view class="login-btn" @click="loginbtn">登录</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isChecked: true,
				rememberPsw: true,
				isShowPassword: false,
				account: "",
				password: "",
				captcha: "",
				uuid: "",
				captchaPath: "",
			};
		},

		onLoad() {
		},
		onUnload() {
			//触发水印显示
			uni.$emit("ly-show-watermark");
		},
		mounted() { //记住密码
			//缓存的账号
			const HBusername = uni.getStorageSync('HBusername');
			//缓存的密码
			const HBpassword = uni.getStorageSync('HBpassword');
			console.log(HBusername)
			//有缓存就赋值给文本没有就清空
			if (HBusername && HBpassword) {
				this.account = HBusername;
				this.password = HBpassword;
			} else {
				this.account = '';
				this.password = '';
			}
		},

		methods: {
			//复选框
			checkboxChange: function(e) {
				console.log(this.rememberPsw)
				console.log(this.rememberPsw==true)
			
			},
			loginbtn() {
				if (this.account == "") {
					this.$refs.uToast.show({
						type: "error",
						message: "请输入账号",
					});
					return false
				} else if (this.password == "") {
					this.$refs.uToast.show({
						type: "error",
						message: "请同意用户协议和隐私政策",
					});
					return false
				}
				let formData = {
					username: this.account,
					password: this.password,
				};
				//是否记住密码
				if (this.rememberPsw==true) {
					//获取缓存的账号 赋值
					uni.setStorageSync('HBusername',this.account);
					uni.setStorageSync('HBpassword',this.password);
				} else { //销毁
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');
				}
				//登录功能
				this.$api.post("/login", formData).then((res) => {
					if (res.data.code == 0) {
						uni.setStorageSync("tokendata", res.data.data.token); //token
						uni.setStorageSync("Userinformation", formData); //用户信息
						//获取用户的信息，如组织架构，个人信息，权限等
						Promise.all([
							this.getpermissions(),
							this.getDictList(),
							this.getuserInfo(),
						]).then(() => {
							uni.navigateTo({
								url: "/pages/index/index",
							});
						});
						return false
					} else if (this.password == "") {
						this.$refs.uToast.show({
							type: "error",
							message: "请输入密码",
						});
						return false
					}

					let formData = {
						username: this.account,
						password: this.password,
					};
					//登录功能
					this.$api.post("/login", formData).then((res) => {
						if (res.data.code == 0) {
							uni.setStorageSync("tokendata", res.data.data.token); //token
							uni.setStorageSync("Userinformation", formData); //用户信息

							//勾选就缓存账号和密码
							if (this.rememberPsw) {
								uni.setStorageSync('HBusername', this.account);
								uni.setStorageSync('HBpassword', this.password);
							} else { //销毁缓存
								uni.removeStorageSync('HBusername');
								uni.removeStorageSync('HBpassword');
							}
							//获取用户的信息，如组织架构，个人信息，权限等
							Promise.all([
								this.getpermissions(),
								this.getDictList(),
								this.getuserInfo(),
							]).then(() => {
								uni.navigateTo({
									url: "/pages/index/index",
								});
							});
						} else {
							this.$refs.uToast.show({
								type: "error",
								message: "账号或者密码错误，请重新输入",
							});
						}
					});
				})
			},
			getpermissions() {
				//获取用户权限功能
				return new Promise((resolve, reject) => {
					this.$api
						.get("/menu/permissions", {})
						.then((res) => {
							uni.setStorageSync("ButtonPermissions", res.data.data);
							resolve(res);
						})
						.catch((e) => {
							reject(e);
						});
				});
			},
			getDictList() {
				//获取字典列表, 添加并全局变量保存
				return new Promise((resolve, reject) => {
					this.$api
						.get("/all", {})
						.then((res) => {
							uni.setStorageSync("getDictDataList", res.data.data);
							resolve(res);
							//	console.log('222222', res)
						})
						.catch((e) => {
							reject(e);
						});
				});
			},
			getuserInfo() {
				//获取用户信息
				return new Promise((resolve, reject) => {
					this.$api
						.get("/user/userInfo", {})
						.then((res) => {
							uni.setStorageSync('role',res.data.data.roleCodes[0]);
							uni.setStorageSync("getuserInfo", res.data.data);
							resolve(res);
						})
						.catch((e) => {
							reject(e);
						});
				});
			},

			// 密码显示/密码隐藏
			showOrHide() {
				this.isShowPassword = !this.isShowPassword;
			},
			Userprotocol() {
				uni.navigateTo({
					url: "/pages/login/Privacyagreement",
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
			useragement() {
				uni.navigateTo({
					url: "/pages/login/useragree",
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},

			// 注册
			register() {
				uni.navigateTo({
					url: "/pages/login/register",
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},
		},
	};
</script>

<style lang="scss">
	.uni-input-placeholder{text-align: left;}
	.Userprotocol {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 12px;
	}

	.Userprotocols {
		margin-top: -30rpx;
		margin-left: -30rpx;
		display: flex;
		align-items: center;
		transform: scale(.75);
	}

	.Userprotocoltext {
		color: #999;
		span {
			color: #5C8FFF;
		}
	}

	.form-box {
		width: 91%;
		background: #fff;
		margin: -148rpx auto 0;
		position: relative;
		z-index: 3;
		padding: 60rpx 40rpx 100rpx;
		box-sizing: border-box;
		border-radius: 32rpx;

		.loginTxt {
			color: #0c1935;
			font-size: 40rpx;
			margin-bottom: 80rpx;
			text-align: center;
		}

		.row-input {
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: #f4f7ff;
			border-radius: 36rpx;
			margin-bottom: 40rpx;
			padding: 0 20rpx;

			input {
				width: 460rpx;
				font-size: 30rpx;
				color: #a1a2a3;
				flex: 1;
			}
		}

		.Userprotocol {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
		}

		.login-btn {
			margin-top: 20rpx;
			font-size: 16px;
			letter-spacing: 7px;
			color: #ffffff;
			height: 40px;
			border-radius: 18px;
			background: #5c8fff;
			text-align: center;
			line-height: 40px;
		}
	}

	.content {
		.bgImg {
			width: 78%;
			position: absolute;
			left: -5px;
			top: 9px;
			z-index: 0;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 4rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
			}
		}
	}

	.info_bg {
		padding-top: 60rpx;
		width: 100%;
		height: 400rpx;
		background: #5c8fff;
		border-radius: 0px 0px 32rpx 32rpx;
		position: relative;

		image {
			width: 272px;
			height: 157px;
		}
	}
</style>