lirenGO_uniapp/PDA/pages/login.vue

<template>
	<view class="loginPage">
		<view class="header-top" :style="{'top':tops+'px'}">
			<view class="header-title" :style="{'height': height+'px'}">
				<view class="box-bg" :style="{ width: `calc(100vw - ${widths}px - 14px)` }">
					<text></text>
				</view>
			</view>
		</view>
		<image class="loginBG" src="@/PDA/static/loginBG.png" mode="widthFix"></image>
		<image class="loginHead" src="@/PDA/static/loginHead.png" mode="widthFix"></image>
		<view class="card">
			
			<view class="cardBody">
				<view class="inputBox">
					<uni-easyinput :inputBorder="false" prefixIcon="person" v-model="account"
						placeholder="请输入您的账号"></uni-easyinput>
				</view>
				<view class="inputBox">
					<uni-easyinput :inputBorder="false" prefixIcon="locked" type="password" v-model="password"
						placeholder="请输入您的密码"></uni-easyinput>
				</view>
				<view class="box">
					<view class="rememberBox">
						<checkbox-group @change="changeRemember">
							<label>
								<checkbox :value="isSelect.toString()" :checked="isSelect" color="#000000"
									style="transform:scale(0.7)" />
								<text>记住密码</text>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
			<button class="loginBtn" @click="goLogin">立即登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, useGlobal } from '../../common/js/uniHelper.js';
const { $http, $util } = useGlobal()

const tops = ref('');
const height = ref('');
const widths = ref('');
const account = ref('');
const password = ref('');
const isSelect = ref(false);

// 页面生命周期onLoad（Vue3 setup中通过导入的onLoad注册）
onLoad(() => {
  // 读取本地存储的密码
  const pwd = uni.getStorageSync('pdaPWD');
  if (pwd) {
    account.value = pwd.account; // ref变量需通过.value修改
    password.value = pwd.password;
    isSelect.value = true;
  }

  // 获取系统信息
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight;
      const custom = uni.getMenuButtonBoundingClientRect();
      widths.value = custom.width;
      height.value = custom.height + (custom.top - e.statusBarHeight) * 2;
    }
  });
});

// 登录方法（直接在setup中定义，无需放在methods里）
const goLogin = async () => {
	uni.reLaunch({
	  url: "/PDA/pages/index"
	});
	return;
  const result = await $http.sendPda({ 
    url: 'user/login',
    data: {
      account: account.value, 
      password: password.value,
    }
  });

  if (result.code === 1) {
    if (isSelect.value) {
      uni.setStorageSync('pdaPWD', {
        account: account.value,
        password: password.value
      });
    }
    uni.setStorageSync('pdatoken', result.data.token);
    uni.reLaunch({
      url: "/PDA/pages/index"
    });
  } else if (result.code === 0) {
    $util.showToast({ // 直接使用获取到的$util
      title: result.msg
    });
  }
};

// 切换记住密码状态
const changeRemember = () => {
  isSelect.value = !isSelect.value;
  if (!isSelect.value) {
    uni.removeStorageSync('pdaPWD');
  }
};





</script>

<style lang="scss" scoped>
	.loginPage {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		background: #FFFFFF;
	}

	.loginBG {
		width: 100%;
		height: auto;
	}
	.loginHead {
		position: absolute;
		top: 18%;
		left: 50%;
		transform: translate(-50%,0);
		width: 580rpx;
		height: auto;
		margin-bottom: 40rpx;
	}
	.header-top {
		position: absolute;
		width: 100%;

		.header-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.box-bg {
				text-align: right;
				box-sizing: border-box;
				padding-right: 26rpx;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 32rpx;

			}
		}
	}

	::v-deep .uni-easyinput__content-input {
		width: 100%;
		height: 90rpx; // 确保输入框填满父容器的高度
		line-height: 90rpx; // 使得文本垂直居中
		border-radius: 80rpx;
	}

	::v-deep .uni-easyinput__content {
		background-color: #f3f8ff !important;
		border-radius: 80rpx !important;
	}


	.card {
		margin: -140rpx 100rpx 0;

		.cardBody {
			.inputBox {
				margin: 40rpx 0;
			}
		}

	}

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.rememberBox {
			text {
				font-weight: 400 !important;
				font-size: 26rpx !important;
				color: #000000 !important;
				line-height: 36rpx;
			}

			label {
				display: inline-flex;
				align-items: center;
				justify-content: flex-start;
			}
		}

		.forgetPWD {
			text-align: right;

			text {
				font-weight: 400;
				font-size: 25rpx;
				color: #999999;
				line-height: 60rpx;
			}

		}
	}

	.loginBtn {
		margin-top: 100rpx;
		width: 543rpx;
		height: 91rpx;
		background: $pda-btn-bg;
		border-radius: 82rpx 82rpx 82rpx 82rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 34rpx;
		color: $pda-btn-color;
	}
</style>