uniProject/pages/login.vue

<template>
	<view class="content">
		<view class="login-top">
			<img src="../static/images/login/login-bj-sj.png">
			<text>
				{{systemName}}
			</text>
		</view>
		<view class="text-area">
			<input type="text" v-model="username" placeholder="Username" class="input-item" />
			<input type="password" v-model="password" placeholder="Password" class="input-item" />
			<button @click="handleLogin">Login</button>
		</view>
	</view>
</template>

<script setup>
	import {
		getAppConfig,
		login,
		kaoshiList
	} from '@/api/login.js'
	import {
		ref
	} from 'vue';
	let systemName = ref('麦塔考试')
	let username = ref('')
	let password = ref('')
	//let loginLogoImg = ref('../static/images/login/login-bj-sj.png')

	const  changePassword = ()=>{

	}
	const handleLogin = () => {
		console.log('Username:', username.value);
		console.log('Password:', password.value);
		let req = {
			//lli.encode()
			password: 'sVXqow3/+jG5kIDVGqoezXoK/Pceal1cf/kiojvUdvSU0qTjm5ikUz9CHcsu05I9whRxeep/TDVAcNl2dEqAgSUr5Ufq1FDdHr5Pn/HA5LfoZV+n5j82RE93cwcrCJw6/MwW3ZWgISzvG5qN8t9IzkRX2qMB/7SJxnh3NzoaxX4=',
			userName: 'root'
		}
		login(req).then(res => {
			let obj = JSON.stringify(res.data)
			console.log(obj)
			uni.setStorage({
				key: 'Mta-Auth',
				data: obj // 假设 this.userInputValue 是用户输入的数据
			});

			setTimeout(() => {
				let req = {
					'page': 1,
					'size': 4,
					'status': 1,
				}
				kaoshiList(req).then(res => {
					console.log(res)
				})
			}, 5000)
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;

		.login-top {
			height: 270px;
			background-size: cover;
			background-image: url("../static/images/login/login-bj-sj.png");
			// logo
			img {
				width: 133px;
				max-height: 50px;
				margin-top: 78px;
			}
		}

	}
	.text-area {
		display: flex;
		justify-content: center;
		.input-item {
			margin-bottom: 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			padding: 0 10rpx;
			border: 1px solid #ccc;
			border-radius: 4rpx;
		}
		button {
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
			background-color: #409EFF;
			color: #fff;
			border-radius: 4rpx;
		}
	}
</style>