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

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

		onLoad() {
			//	 this.getCaptcha();
		},
		onUnload() {
			//触发水印显示
			uni.$emit("ly-show-watermark");
		},
		methods: {
			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,
				};
				//登录功能
				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",
							});
						});
					} 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("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: () => {},
				});
			},

			// 找回密码
			forget() {
				uni.navigateTo({
					url: "/pages/login/forget",
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				});
			},

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

<style lang="scss">
	.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>