创建简单登录页面，然后调试成功

2026-06-07 11:33:38 +08:00
parent 78192a2f61
commit aebd264d91
3 changed files with 181 additions and 3 deletions
@@ -0,0 +1,161 @@
+<template>
+	<view class="container">
+		<view class="login-card">
+
+			<view class="title">
+				系统登录
+			</view>
+			<!-- 用户名 -->
+			<input class="input" type="text" v-model="loginForm.username" placeholder="请输入用户名" />
+			<!-- 密码 -->
+			<input class="input" type="password" v-model="loginForm.password" placeholder="请输入密码" />
+			<!-- 验证码 -->
+			<view class="code-box">
+				<input class="code-input" type="text" v-model="loginForm.code" placeholder="请输入验证码" />
+				<image class="code-image" :src="imgCode" mode="aspectFit" @click="loadCode" />
+			</view>
+			<!-- 登录按钮 -->
+			<button class="login-btn" type="primary" @click="login"> 登录 </button>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { CodeApi } from '@/api/codeApi.uts'
+	import { LoginData } from '@/api/types'
+	import { LoginApi } from '@/api/loginApi'
+	import { Crypto } from '@/utils/crypto'
+
+	const loginForm = ref(new LoginData())
+	loginForm.value.username = "admin"
+	loginForm.value.password = "admin123"
+	
+	const imgCode = ref('')
+
+	/**
+	 * 加载验证码
+	 */
+	function loadCode() {
+		CodeApi.getImgCode().then(res => {
+			loginForm.value.uuid = res.uuid
+			imgCode.value = "data:image/png;base64," + res.img
+		})
+	}
+
+	/**
+	 * 登录
+	 */
+	async function login() {
+		if (loginForm.value.username == null || loginForm.value.username == "") {
+			uni.showToast({
+				title: '请输入用户名',
+				icon: 'none'
+			})
+			return
+		}
+		if (loginForm.value.password == null || loginForm.value.password == "") {
+			uni.showToast({
+				title: '请输入密码',
+				icon: 'none'
+			})
+			return
+		}
+		if (loginForm.value.code == null || loginForm.value.code == "") {
+			uni.showToast({
+				title: '请输入验证码',
+				icon: 'none'
+			})
+			return
+		}
+		try {
+			const res = await LoginApi.login(loginForm.value)
+			if (res != null) {
+				uni.showToast({
+					title: '登录成功',
+					icon: 'success'
+				})
+				uni.navigateTo({
+					url: '/pages/index'
+				})
+			}
+		} catch (e) {
+			console.error('登录失败:', e)
+			loadCode()
+		}
+	}
+
+	/**
+	 * 页面初始化
+	 */
+	onMounted(() => {
+		loadCode()
+	})
+</script>
+
+<style scoped>
+	.container {
+		height: 100vh;
+		background-color: #f5f6fa;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 30rpx;
+	}
+
+	.login-card {
+		width: 100%;
+		max-width: 700rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+	}
+
+	.title {
+		font-size: 40rpx;
+		font-weight: bold;
+		text-align: center;
+		margin-bottom: 50rpx;
+		color: #333;
+	}
+
+	.input {
+		height: 90rpx;
+		border: 1rpx solid #e5e5e5;
+		border-radius: 12rpx;
+		padding: 0 20rpx;
+		margin-bottom: 25rpx;
+		background-color: #fafafa;
+	}
+
+	.code-box {
+		display: flex;
+		align-items: center;
+		margin-bottom: 40rpx;
+	}
+
+	.code-input {
+		flex: 1;
+		height: 90rpx;
+		border: 1rpx solid #e5e5e5;
+		border-radius: 12rpx;
+		padding: 0 20rpx;
+		background-color: #fafafa;
+	}
+
+	.code-image {
+		width: 220rpx;
+		height: 90rpx;
+		margin-left: 20rpx;
+		border-radius: 12rpx;
+		border: 1rpx solid #e5e5e5;
+	}
+
+	.login-btn {
+		height: 90rpx;
+		line-height: 90rpx;
+		border-radius: 12rpx;
+		font-size: 32rpx;
+	}
+</style>