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="Userprotocols">
				<view class="Userprotocolchecked">
					<checkbox :checked="rememberPsw"  @click="checkboxChange" />
				</view>
				<view class="Userprotocoltext">记住账号密码</view>
			</view>
			
			<view class="Userprotocol">
				<view class="Userprotocolchecked">
					<checkbox :checked="isChecked" @click="isChecked=!isChecked" />
				</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,
				rememberPsw:true,
				isShowPassword: false,
				account: "",
				password: "",
				captcha: "",
				uuid: "",
				captchaPath: "",
			};
		},

		onLoad() {
			//	 this.getCaptcha();
			//this.getDeviceInfo();
			//this.getOAID();
			
		},
		onUnload() {
			//触发水印显示
			uni.$emit("ly-show-watermark");
		},
		mounted() {//记住密码
				//缓存的账号
				const HBusername = uni.getStorageSync('HBusername');
				//缓存的密码
				const HBpassword = uni.getStorageSync('HBpassword');
						//console.log("缓存的账号:"+HBusername)
						//console.log("缓存的密码:"+HBpassword)
						//有缓存就赋值给文本没有就清空
					if (HBusername && HBpassword) {
						this.account = HBusername;
						this.password = HBpassword;
					} else {
						this.account = '';
						this.password = '';
					}
					//自动登录
				},
		
		methods: {
			getDeviceInfo(){
				plus.device.getInfo({
					success:function(e){
						console.log('getDeviceInfo success: '+JSON.stringify(e));
						
					},
					fail:function(e){
						console.log('getDeviceInfo failed: '+JSON.stringify(e));
					}
				});
			},
			 getOAID(){
				plus.device.getOAID({
					success:function(e){
						console.log('getOAID success: '+JSON.stringify(e));
					},
					fail:function(e){
						console.log('getOAID failed: '+JSON.stringify(e));
					}
				});
			},
			
			
			
			//复选框
						checkboxChange: function(e) {
							this.rememberPsw=!this.rememberPsw;
							  console.log('111111111111111111',this.rememberPsw)							
							if (this.rememberPsw == true) {
								//获取缓存的账号 赋值
								uni.getStorageSync('HBusername',this.account);
								uni.getStorageSync('HBpassword',this.password);
							} else {//销毁
								uni.removeStorageSync('HBusername');
								uni.removeStorageSync('HBpassword');              
							}
						},
		
			
			
			loginbtn() {
				
				if(this.isChecked==false){
					this.$refs.uToast.show({
						type: "error",
						message: "请同意用户协议和隐私政策",
					});
				}else{
					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); //用户信息
							
							 //勾选就缓存账号和密码
														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() {
				console.log("权限功能");
				//获取用户权限功能
				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">
	.Userprotocol{
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.Userprotocols{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.Userprotocoltext{
		color: #5C8FFF;
	}
	.form-box {
		width: 91%;
		background: #fff;
		margin: -130rpx 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;
			}
		}

		.login-btn {
			margin-top: 20px;
			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: 40rpx;
		width: 100%;
		height: 400rpx;
		background: #5c8fff;
		border-radius: 0px 0px 32rpx 32rpx;
		position: relative;

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