jeecgBootUniapp/src/pages/login/login.vue

<route lang="json5" type="page">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '',
	},
	}
</route>

<template>
	<PageLayout :navbarShow="false">
		<view :class="['page-container', { 'gray': appStore.isGray == 1 }]">
			<view class="text-center">
				<image src="@/static/sinopec.png" mode="aspectFit" class="logo"></image>
				<!-- <view class="title text-shadow">{{ compTitle || 'JEECG BOOT' }}</view> -->
				<view class="enter-area">
					<view class="account-login-area">
						<view class="box account">
							<wd-icon name="user" size="15px"></wd-icon>
							<wd-text text="账号："></wd-text>
							<wd-input class="uni-input" placeholder="请输入统一身份认证" v-model.trim="userName"></wd-input>
						</view>
						<view class="box password">
							<wd-icon name="lock-on" size="15px"></wd-icon>
							<wd-text text="密码："></wd-text>
							<input class="uni-input" placeholder="请输入密码" :password="showPassword"
								v-model.trim="password" />
							<wd-icon v-if="showPassword" name="eye-close" size="18px"
								@click="handleChangePassword"></wd-icon>
							<wd-icon v-else name="view" size="18px" @click="handleChangePassword"></wd-icon>
						</view>
						<view class="remPW">
							<wd-icon v-if="remPW" name="check-circle" @click="handleChangeRemPW"></wd-icon>
							<wd-icon v-else name="circle1" @click="handleChangeRemPW"></wd-icon>
							<wd-text text="记住密码"></wd-text>
						</view>
					</view>
				</view>
				<view class="btn-area text-center">
					<wd-button :loading="loading" @click="handleLogin">
						{{ loading ? '登录...' : '登录' }}
					</wd-button>
				</view>
				<view class="version">
					<text style="display: block;">Copyright (c) 2024 天然气产销厂</text>
					<text>版本号:{{version}}</text>
				</view>
			</view>
		</view>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { useToast } from 'wot-design-uni'
	import { ref } from 'vue'
	import { useAppStore } from '@/store'
	import { useUserStore } from '@/store/user'
	import { http } from '@/utils/http'
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO,
		APP_ROUTE,
		APP_CONFIG,
		HOME_CONFIG_EXPIRED_TIME,
		HOME_PAGE,
	} from '@/common/constants'
	// import { cache, getFileAccessHttpUrl } from '@/common/uitls'
	import { useRouter } from '@/plugin/uni-mini-router'
	// import { useParamsStore } from '@/store/page-params'
	import Base64 from 'base-64';
	import { loginApi } from '@/api/system';

	defineOptions({
		name: 'login',
		options: {
			// apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
			// shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
			styleIsolation: 'shared',
		},
	})
	const router = useRouter()
	// const defLogo = 'https://static.jeecg.com/files/app_logo.png'
	const loading = ref(false)
	const userName = ref()
	const password = ref()
	const showPassword = ref(false) //是否显示明文
	const remPW = ref(false) //是否记住密码
	// const compLogo = ref(defLogo)
	// const compTitle = ref('Jeecg Uniapp')
	// const paramsStore = useParamsStore()
	// paramsStore.reset()
	// let isLocalConfig = true
	/**h5系统信息中没有appWgtVersion值*/
	const version = uni.getSystemInfoSync().appWgtVersion ? uni.getSystemInfoSync().appWgtVersion : uni.getSystemInfoSync().appVersion
	const toast = useToast()
	const appStore = useAppStore()
	const userStore = useUserStore()
	const handleChangePassword = () => {
		showPassword.value = !showPassword.value
	}
	const handleChangeRemPW = () => {
		remPW.value = !remPW.value
	}
	const savePwd = () => {
		let localObj = {
			un: userName.value,
			pw: remPW.value ? password.value : ''
		}
		uni.setStorageSync('accountpassword', JSON.stringify(localObj))
		uni.setStorageSync('savePwd', remPW.value)
	}
	const handleLogin = () => {
		if (userName.value.length === 0) {
			toast.warning('请输入统一身份认证')
			return
		}
		if (password.value.length === 0) {
			toast.warning('请输入密码')
			return
		}
		let un = Base64.encode(encodeURIComponent(userName.value))
		let pw = Base64.encode(encodeURIComponent(password.value))
		loading.value = true
		/*生产环境 begin */
		// loginApi({ username: un, password: pw })
		/*开发环境 begin */
		loginApi({ username: userName.value, password: password.value, captcha: 'app' })
			.then((res : any) => {
				if (res.success) {
					const { result } = res
					const userInfo = result.userInfo
					userStore.setUserInfo({
						...userInfo,
						token: result.token,
						userid: userInfo.id,
						username: userInfo.username,
						realname: userInfo.realname,
						avatar: userInfo.avatar,
						tenantId: userInfo.loginTenantId,
						localStorageTime: +new Date(),
					})
					savePwd()  //记住账号密码
					router.pushTab({ path: HOME_PAGE })
				} else {
					toast.warning(res.message)
				}
			})
			.finally(() => {
				loading.value = false
			})
	}

	onLoad(() => {
		if (uni.getStorageSync('accountpassword')) {
			let obj = JSON.parse(uni.getStorageSync('accountpassword'))
			userName.value = obj.un
			password.value = obj.pw
		}
		if (uni.getStorageSync('savePwd')) {
			remPW.value = uni.getStorageSync('savePwd')
		}
	})
	// const appConfig = () => {
	// 	if (isLocalConfig) {
	// 		toast.success('登录成功!')
	// 		router.pushTab({ path: HOME_PAGE })
	// 	} else {
	// 		http
	// 			.get('/eoa/sysAppConfig/queryAppConfigRoute')
	// 			.then((res : any) => {
	// 				if (res.success) {
	// 					cache(APP_ROUTE, res.result.route, HOME_CONFIG_EXPIRED_TIME)
	// 					cache(APP_CONFIG, res.result.config, HOME_CONFIG_EXPIRED_TIME)
	// 				}
	// 				toast.success('登录成功!')
	// 				router.pushTab({ path: HOME_PAGE })
	// 			})
	// 			.catch((err) => {
	// 				toast.success('登录成功!')
	// 				router.pushTab({ path: HOME_PAGE })
	// 			})
	// 	}
	// }

	// const loadConfig = () => {
	// 	http.get('/eoa/sysAppConfig/queryAppConfig').then((res : any) => {
	// 		if (res.success) {
	// 			let info = res.result
	// 			if (info) {
	// 				compLogo.value = getFileAccessHttpUrl(info.appLogo) || defLogo
	// 				compTitle.value = info.appTitle || 'JEECG-BOOT'
	// 			} else {
	// 				compLogo.value = defLogo
	// 			}
	// 		}
	// 	})
	// }
	// const checkToken = () => {
	// 	const { userInfo, clearUserInfo } = userStore
	// 	if (userInfo.token) {
	// 		if (+new Date() - userInfo.localStorageTime > 2 * 3600000) {
	// 			// 超过2小时过期
	// 			clearUserInfo()
	// 		} else {
	// 			router.pushTab({ path: HOME_PAGE })
	// 		}
	// 	} else {
	// 		clearUserInfo()
	// 	}
	// }
	// const checkAccount = () => { }
	// // #ifdef APP-PLUS || H5
	// checkToken()
	// checkAccount()
	// // #endif
	// // @ts-ignore
	// if (isLocalConfig === false) {
	// 	loadConfig()
	// }
</script>

<style lang="scss" scoped>
	.page-container {
		padding: 0 20upx;
		padding-top: 100upx;
		position: relative;
		font-size: 15px;
		color: var(--UI-FG-0);
		min-height: 100vh; // 确保容器撑满整个屏幕高度
		background-color: #fff;

		.logo {
			width: 400upx;
			height: 200px;
		}

		.title {
			font-size: 58upx;
		}

		.enter-area {
			padding-top: 30px;
			width: 87%;
			margin: 0 auto 60upx;

			.box {
				display: flex;
				align-items: center;
				min-height: 100upx;
				color: #000;
				border: 1px solid #eee;
				background-color: #F8F8F8;
				padding: 0 20upx;
				margin-bottom: 30upx;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
				line-height: 34px;

				:deep(.wd-text) {
					margin: 0 10upx;
				}

				:deep(.wd-input),
				:deep(.uni-input) {
					flex: 1;
					background-color: #F8F8F8;

					&::after {
						height: 0;
					}
				}

				.uni-input {
					text-align: left;
					font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
					height: var(--wot-input-inner-height, 34px);
					color: var(--wot-input-color, #262626);

					.uni-input-placeholder {
						color: var(--wot-input-placeholder-color, #bfbfbf);
					}
				}
			}

			:deep(.sendSMSBtn) {
				margin-left: 20upx;
			}

			:deep(.wd-icon-view),
			:deep(.wd-icon-eye-close) {
				color: #555;
			}

			.remPW {
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.btn-area {
			:deep(.wd-button) {
				--wot-button-medium-height: 41px;
				--wot-button-medium-fs: 16px;
				--wot-button-plain-bg-color: transparent;
				min-width: 100px;
				box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
			}
		}

		.version {
			margin-top: 63rpx;
			font-size: 12px;
		}
	}
</style>