uniProject/pages/login.vue

<template>
	<view class="mobile-login-page">
		<view class="login-top">
			<img class="login-logo" src="../static/images/login/login-logo-sj.png">
			<text class="login-text">
				{{systemName}}
			</text>
		</view>
		<view class="login-body">
			<view class="input-container">
				<uni-icons type="auth" size="30" class="input-icon"></uni-icons>
				<input type="text" v-model="userName" placeholder="请输入用户名" class="input-item-1" />
			</view>
			<view class="input-container">
				<uni-icons type="locked" size="30" class="input-icon"></uni-icons>
				<input type="password" v-model="password" placeholder="请输入密码" class="input-item-1" />
			</view>
			<view class="login-change">
				<checkbox-group>
					<label class="checkbox-zhanghao">
						<checkbox value="cb" color="#0550e5" checked="true"/>记住此账号
					</label>
				</checkbox-group>
				<text class="checkbox-zhanghao" @click="forgetPassword"> 忘记密码？</text>
			</view>
			<button class="login-btn" @click="handleLogin">登录</button>
		</view>
		<passwordLli ref="passLLiRef" :password="password" @lli-password="onLliPassword" />
	</view>
</template>

<script setup>
	import {toast} from "@/utils/common";
	import {getAppConfig,login,kaoshiList} from '@/api/login.js'
	import passwordLli from "@/components/password-lli/password-lli.vue";
	import JSEncrypt from 'jsencrypt';
	import {ref} from 'vue';
	const passLLiRef = ref(null)
	let systemName = ref('麦塔考试系统')
	let userName = ref('')
	let password = ref('')
	const lliPassword = ref('') // 加密后的密码
	// 加密
	function onLliPassword(password) {
		console.log('onLliPassword',password)
		lliPassword.value = password;
	}
	
	function handleLogin(){
		if(userName.value.length ===0){
			toast('请输入手机号！')
			return
		}
		
		if(password.value.length ===0){
			toast('请输入密码！')
			return
		}
		
		// 去除 userName 两端的空格
		const trimmedUserName = userName.value.trim();
		const trimmedPassword = lliPassword.value.trim();
		
		let req = {
			userName: trimmedUserName,
			password: trimmedPassword,
		}

		login(req).then(res => {
			let obj = JSON.stringify(res.data)
			console.log(obj)
			uni.setStorage({
				key: 'Mta-Auth',
				data: obj // 假设 this.userInputValue 是用户输入的数据
			});
			uni.switchTab({
				url: '/pages/index/index'
			});
		})
	}
	
	function forgetPassword(){
		toast('请联系管理员修改密码！');
	}
</script>

<style lang="scss" scoped>
	.mobile-login-page {
		width: 100%;
		height: 100%;
		background: #FFF;
		text-align: center;
		position: absolute;
		overflow: auto;

		.login-top {
			height: 540rpx;
			background-size: cover;
			background-image: url("../static/images/login/login-bj-sj.png");
			// logo

		}

		.login-logo {
			width: 266rpx;
			max-height: 100rpx;
			margin-top: 156rpx;
		}

		.login-text {
			display: block;
			font-size: 64rpx;
			color: #FFF;
			margin: 24rpx 0 0;
			font-weight: 700
		}

		// 登录区域
		.login-body {
			width: 100%;
			padding: 0 60px;
			box-sizing: border-box;
			margin: 140rpx auto 0;

			.input-container {
				display: flex;
				align-items: center;
				/* 垂直对齐 */
				position: relative;
				height: 100rpx;
				border-radius: 50rpx;
				background-color: #F7F7F7;
				padding: 0;
				margin-bottom: 40rpx;

			}

			.input-icon {
				margin-left: 20rpx;
				/* 图标和输入框之间的间距 */
				color: #999;
			}


		}

		// 输入框
		.login-btn {
			width: 100%;
			height: 100rpx;
			margin-top: 60rpx;
			font-size: 36rpx;
			letter-spacing: 7.2rpx;
			background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
			border-radius: 50rpx;
			border: 0;
			color: #F7F7F7;
			line-height: 100rpx;
		}

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

			.checkbox-zhanghao {
				font-size: 24rpx;
				color: #565656;

			}
		}
	}
</style>