2025-09-15

pages/login/login.vue

@@ -12,21 +12,24 @@
 		<view class="login-form">
 			<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
 				label-width="0">
-				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/user.png" prop="username">
+				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/user.png" prop="username">
 					<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号"
 						placeholder-style="color: #737373;" />
 				</u-form-item>
-				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Lock.png" prop="password">
+				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Lock.png" prop="password">
 					<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码"
 						placeholder-style="color: #737373;" />
 				</u-form-item>
-				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Globe.png" prop="code">
-					<u-input v-model="userLogin.userForm.code" placeholder="请输入验证码"
+				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Globe.png" prop="captcha">
+					<u-input v-model="userLogin.userForm.captcha" placeholder="请输入验证码"
 						placeholder-style="color: #737373;" />
+					<template v-slot:right>
+						<image class="captcha-img" :src="captcha" mode=""></image>
+					</template>
 				</u-form-item>
 				<view class="reflash" @click="reflash">
-					<image class="reflash-icon" src="/static/login/Repeat.png" mode=""></image>
-					刷新
+					<image class="reflash-icon" src="/static/icon/Repeat.png" mode=""></image>
+					刷新验证码
 				</view>
 				<view class="rember">
 					<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
@@ -35,8 +38,8 @@
 				<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
 				<view class="register">
 					<view class="register-text">没有账号？</view>
-					<view class="register-link">点击注册？
-						<image class="register-link-icon" src="/static/Chevron right.png" mode=""></image>
+					<view class="register-link" @click="handleRegister">点击注册？
+						<image class="register-link-icon" src="/static/icon/Chevron right.png" mode=""></image>
 					</view>
 				</view>
 			</u-form>
@@ -45,15 +48,24 @@
 </template>
 
 <script lang="ts" setup>
-	import { reactive, ref } from 'vue';
+	import { onMounted, reactive, ref } from 'vue';
 	import { onLoad, onReady } from '@dcloudio/uni-app';
+	import { captchaAPI } from '@/api/captcha.js';
 
+	// 表单图标样式
+	const inputIcon = {
+		width: '32rpx',
+		verticalAlign: 'middle'
+	}
+
+	// 登录表单
+	const captcha = ref()
 	const userLoginRef = ref()
 	const userLogin = reactive({
 		userForm: {
 			username: '',
 			password: '',
-			code: '',
+			captcha: '',
 			is_rember: false
 		},
 		ruls: {
@@ -81,14 +93,29 @@
 		}
 	})
 
+	// 初始化绑定
 	onReady(() => {
 		userLoginRef.value.setRules(userLogin.ruls);
 	});
 
+	onMounted(() => {
+		loadCaptcha()
+	})
+
+	// 刷新
 	const reflash = () => {
-		userLoginRef.value.resetFields()
+		// userLoginRef.value.resetFields()
+		loadCaptcha()
 	}
 
+	// 请求验证码
+	const loadCaptcha = () => {
+		captchaAPI.generate().then(res => {
+			captcha.value = res.data.image
+		})
+	}
+
+	// 登录处理
 	const submit = () => {
 		userLoginRef.value.validate((valid : any) => {
 			if (valid) {
@@ -97,9 +124,11 @@
 		});
 	}
 
-	const inputIcon = {
-		width: '32rpx',
-		verticalAlign: 'middle'
+	// 注册
+	const handleRegister = () => {
+		uni.redirectTo({
+			url: '/pages/register/register'
+		})
 	}
 </script>
 
@@ -145,6 +174,11 @@
 		.login-form {
 			padding: 10rpx 32rpx;
 
+			.captcha-img {
+				width: 200rpx;
+				height: 80rpx;
+			}
+
 			.reflash {
 				width: 100%;
 				display: flex;
@@ -192,7 +226,7 @@
 				font-style: Expanded Semibold;
 				font-size: 40rpx;
 				leading-trim: NONE;
-				line-height: 28px;
+				line-height: 46rpx;
 				letter-spacing: 0%;
 				text-align: center;
 			}
@@ -207,7 +241,7 @@
 				// 文字
 				font-family: Work Sans;
 				font-weight: 400;
-				font-size: 13px;
+				font-size: 26rpx;
 				leading-trim: NONE;
 				line-height: 100%;
 				letter-spacing: -2%;