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"
            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,
				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.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",
							});
						});
						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("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: -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>