uniProject/pages/login.vue

<template>
	<view class="mobile-login-page">
		<view class="login-top">
			<img class="login-logo" :src="systemLogo">
			<text class="login-text">
				{{systemName}}
			</text>
		</view>
		<view class="login-body">
			<view class="input-container">
				<icon class="login-body-icon user-icon"></icon>
				<input type="text" v-model="userName" placeholder="请输入用户名" class="login-body-input" />
			</view>
			<view class="input-container">
				<icon class="login-body-icon mm-icon"></icon>
				<input type="password" v-model="password" placeholder="请输入密码" class="login-body-input" />
			</view>
			<view class="login-change">
				<checkbox-group @change="rememberBtn" class="remember-checkbox-group">
					<checkbox value="remember" color="#0550e5" checked="true" style="transform:scale(0.9)" />记住此账号
				</checkbox-group>
				<text class="checkbox-zhanghao" @click="forgetPassword"> 忘记密码？</text>
			</view>
			<button class="login-btn" @click="handleLogin">登录</button>
		</view>
	</view>
</template>

<script setup>
	import CryptoJS from 'crypto-js';
	import {
		toast
	} from "@/utils/common";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getAppConfig,
		login
	} from '@/api/login.js'
	import cacheManager from '@/utils/cacheManager.js'
	import JSEncrypt from 'jsencrypt';
	import {
		ref
	} from 'vue';
	import {
		getAllImgList
	} from '@/api/index.js';
	const passLLiRef = ref(null)
	let systemName = ref('')
	let systemLogo = ref('')
	let userName = ref('')
	let password = ref('')
	let configData = ref(null)
	let encryptedPassword = ref(''); // 用于存储加密后的密码
	let rememberFlag = ref('remember');

	// 密钥和偏移量（IV），需要转换为CryptoJS的WordArray格式
	const key = CryptoJS.enc.Utf8.parse('ax58bc32hp54kt68');
	const iv = CryptoJS.enc.Utf8.parse('cf46xy53kb64wt25');
	// 加密算法：AES/CBC 偏移：PKCS5Padding
	function encryptPassword(plainText) {
		const ciphertext = CryptoJS.AES.encrypt(plainText, key, {
			iv: iv,
			mode: CryptoJS.mode.CBC,
			padding: CryptoJS.pad.Pkcs7
		});
		return ciphertext.toString();
	}

	onLoad(() => {
		uni.showLoading({
			title: '加载中'
		});
		//  获得全部图片
		getAllImg()
	})

	function getAllImg() {
		getAllImgList({}).then(res => {
			cacheManager.set('projectImg', res.data)
			getLoginInit()
		});
	}
	// 记住密码
	function geiRemember() {
		if (rememberFlag.value === 'remember') {
			if (cacheManager.get('auth').userInfo) {
				userName.value = cacheManager.get('auth').userInfo.userName;
				password.value = cacheManager.get('auth').userInfo.password;
			}
		}
	}

	function rememberBtn(data) {
		rememberFlag.value = data.detail.value.toString();
	}

	function getLoginInit() {
		getLoginConfig();
		geiRemember();
	}

	function getLoginConfig() {
		getAppConfig().then(res => {
			console.log(res.data, 'res');
			systemName.value = res.data.name;
			// if (res.data.logo) {
			// 	systemLogo.value = res.data.logo;
			// } else {
			// 	// login-logo-sj
			// 	systemLogo.value = cacheManager.get('projectImg').login_logo_sj;
			// }
			systemLogo.value = cacheManager.get('projectImg').login_logo_sj;
			configData.value = res.data;
			uni.hideLoading();
		})
	}

	function handleLogin() {
		if (userName.value.length === 0) {
			toast('请输入手机号！')
			return
		}

		if (password.value.length === 0) {
			toast('请输入密码！')
			return
		}

		encryptedPassword.value = encryptPassword(password.value.trim());
		// 去除 userName 两端的空格
		const trimmedUserName = userName.value.trim();

		let req = {
			userName: trimmedUserName,
			password: encryptedPassword.value,
		}

		login(req).then(res => {
			// 接口数据记缓存
			if (rememberFlag.value === 'remember') {
				let userInfo = {
					userName: trimmedUserName,
					password: password.value.trim(),
				}
				let mergedData = {
					...res.data,
					...configData.value,
					userInfo
				};
				cacheManager.set('auth', mergedData)
			} else {
				let mergedData = {
					...res.data,
					...configData.value
				};
				cacheManager.set('auth', mergedData)
			}


			// 待补充----判断checked信息，记缓存用户信息

			// 待补充根据后台返回值跳转不同页面
			if (res.data.modules === '1') {
				// 考试
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				// 培训
				uni.switchTab({
					url: '/pages/index/index'
				});
			}

		})
	}

	function forgetPassword() {
		toast('请联系管理员修改密码！');
	}
</script>