2025-09-16

pages/login/login.vue

@@ -13,18 +13,18 @@
 			<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/icon/user.png" prop="username">
-					<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号"
+					<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号" type="number" maxlength="11"
 						placeholder-style="color: #737373;" />
 				</u-form-item>
 				<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="请输入密码"
+					<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码" maxlength="20"
 						placeholder-style="color: #737373;" />
 				</u-form-item>
 				<u-form-item :left-icon-style="inputIcon" left-icon="../../static/icon/Globe.png" prop="captcha">
-					<u-input v-model="userLogin.userForm.captcha" placeholder="请输入验证码"
+					<u-input v-model="userLogin.userForm.captcha" placeholder="请输入验证码" maxlength="4"
 						placeholder-style="color: #737373;" />
 					<template v-slot:right>
-						<image class="captcha-img" :src="captcha" mode=""></image>
+						<image @click="loadCaptcha" class="captcha-img" :src="captcha" mode=""></image>
 					</template>
 				</u-form-item>
 				<view class="reflash" @click="reflash">
@@ -51,6 +51,7 @@
 	import { onMounted, reactive, ref } from 'vue';
 	import { onLoad, onReady } from '@dcloudio/uni-app';
 	import { captchaAPI } from '@/api/captcha.js';
+	import { authAPI } from '../../api/auth';
 
 	// 表单图标样式
 	const inputIcon = {
@@ -60,6 +61,7 @@
 
 	// 登录表单
 	const captcha = ref()
+	const captchaId = ref()
 	const userLoginRef = ref()
 	const userLogin = reactive({
 		userForm: {
@@ -74,6 +76,11 @@
 					required: true,
 					message: '请输入用户名或手机号',
 					trigger: ['change']
+				},
+				{
+					pattern: /^1[3-9]\d{9}$/,
+					message: '请输入正确的手机号格式',
+					trigger: ['blur']
 				}
 			],
 			password: [
@@ -83,13 +90,17 @@
 					trigger: ['change']
 				}
 			],
-			code: [
-				{
-					required: true,
-					message: '请输入验证码',
-					trigger: ['change']
-				}
-			]
+			captcha: [{
+				required: true,
+				message: '请输入验证码',
+				trigger: ['blur']
+			},
+			{
+				min: 4,
+				max: 4,
+				message: '验证码长度为4位',
+				trigger: 'blur'
+			}],
 		}
 	})
 
@@ -100,6 +111,7 @@
 
 	onMounted(() => {
 		loadCaptcha()
+		loadCache()
 	})
 
 	// 刷新
@@ -112,14 +124,80 @@
 	const loadCaptcha = () => {
 		captchaAPI.generate().then(res => {
 			captcha.value = res.data.image
+			captchaId.value = res.data.captchaId
 		})
 	}
+	
+	const loadCache = () =>{
+		let is_rember = uni.getStorageSync("rember")
+		if(is_rember){
+			userLogin.userForm.is_rember = true
+			let data = JSON.parse(is_rember)
+			userLogin.userForm.username = data.username
+			userLogin.userForm.password = data.password
+		}
+	}
 
 	// 登录处理
 	const submit = () => {
 		userLoginRef.value.validate((valid : any) => {
 			if (valid) {
-				console.log('验证通过');
+				// 登录逻辑
+				const loginData = {
+					username: userLogin.userForm.username,
+					password: userLogin.userForm.password,
+					captchaId: captchaId.value,
+					captchaText: userLogin.userForm.captcha
+				}
+				authAPI.login(loginData).then(response => {
+					console.log('登录结果', response);
+					if (response.success) {
+						// 激活用户
+						uni.setStorageSync("token", response.token)
+						if (userLogin.userForm.is_rember) {
+							uni.setStorageSync("rember", {
+								username: userLogin.userForm.username,
+								password: userLogin.userForm.password,
+							})
+						}
+						uni.showToast({
+							title: '登录成功',
+							icon: 'success',
+							success() {
+								setTimeout(() => {
+									uni.switchTab({
+										url: '/pages/home/index'
+									})
+								}, 1000)
+							}
+						})
+					} else if (response.token) {
+						// 未激活用户
+						uni.setStorageSync("token", response.token)
+						if (userLogin.userForm.is_rember) {
+							uni.setStorageSync("rember", JSON.stringify({
+								username: userLogin.userForm.username,
+								password: userLogin.userForm.password,
+							}))
+						}
+						uni.showToast({
+							title: '登录成功',
+							icon: 'success',
+							success() {
+								setTimeout(() => {
+									uni.switchTab({
+										url: '/pages/home/index'
+									})
+								}, 1000)
+							}
+						})
+					}
+				}).catch((err) => {
+					setTimeout(() => {
+						userLogin.userForm.captcha = ''
+						loadCaptcha()
+					}, 1000)
+				})
 			}
 		});
 	}