From bf1ac3a37b40eaac971deedef9b9034f5ffdced3 Mon Sep 17 00:00:00 2001
From: gukai <1522776404@qq.com>
Date: Tue, 4 Mar 2025 09:35:34 +0800
Subject: [PATCH] 1

---
 api/modules/user.js   |   7 ++
 pages/login/index.vue | 267 ++++++++++++++++++++++++------------------
 2 files changed, 157 insertions(+), 117 deletions(-)

diff --git a/api/modules/user.js b/api/modules/user.js
index c7b78f6..082220d 100644
--- a/api/modules/user.js
+++ b/api/modules/user.js
@@ -11,4 +11,11 @@ export default {
 			data,
 		});
 	},
+	captch(data) {
+		return request({
+			url: "/admin/auth/captch",
+			method: "POST",
+			data,
+		});
+	},
 };
\ No newline at end of file
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 3cf6b09..8f7016f 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -23,26 +23,36 @@
 			<view class="rounded-md overflow-hidden">
 				<wd-cell-group border size="large">
 					<wd-transition :duration="400" :show="true" name="fade-left">
-						<wd-input size="large" label="用户名" label-width="100px" prop="username" clearable v-model="model.username"
-							placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
+						<wd-input size="large" label="用户名" label-width="100px" prop="username" clearable
+							v-model="model.username" placeholder="请输入用户名"
+							:rules="[{ required: true, message: '请填写用户名' }]" />
 					</wd-transition>
 
 					<wd-transition :duration="450" :show="true" name="fade-left">
-						<wd-input size="large" label="密码" label-width="100px" prop="password" show-password clearable v-model="model.password"
-							placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
+						<wd-input size="large" label="密码" label-width="100px" prop="password" show-password clearable
+							v-model="model.password" placeholder="请输入密码"
+							:rules="[{ required: true, message: '请填写密码' }]" />
 					</wd-transition>
 
+					<wd-transition :duration="450" :show="true" name="fade-left">
+						<wd-input size="large" label="验证码" label-width="100px" clearable v-model="model.captch"
+							placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
+						<view style="display: flex;justify-content: flex-end;padding: 10rpx 0;">
+							<image @click="getCaptch()" style="height: 60rpx;" :src="captch_img" mode="heightFix"></image>
+						</view>
+					</wd-transition>
 				</wd-cell-group>
 			</view>
 			<view class="footer mt-4 px-6"
-			style="text-align: right;font-size: 28rpx;color: #999;display: flex;align-items: center;justify-content: flex-end;">
+				style="text-align: right;font-size: 28rpx;color: #999;display: flex;align-items: center;justify-content: flex-end;">
 				记住密码？
 				<!-- <checkbox v-model="is_save_user_pwd" style="transform:scale(0.7)" /> -->
-				<wd-checkbox  v-model="is_save_user_pwd" shape="square"></wd-checkbox >
+				<wd-checkbox v-model="is_save_user_pwd" shape="square"></wd-checkbox>
 			</view>
 			<view class="footer mt-4 px-6">
 				<wd-transition :duration="500" :show="true" name="fade-left">
-					<wd-button style="font-size: 20px;padding: 10px;" :loading="loading" type="primary" size="large" @click="handleSubmit" block>登录</wd-button>
+					<wd-button style="font-size: 20px;padding: 10px;" :loading="loading" type="primary" size="large"
+						@click="handleSubmit" block>登录</wd-button>
 				</wd-transition>
 			</view>
 		</wd-form>
@@ -50,125 +60,148 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import user from '@/api/modules/user.js'
-import systemApi from '@/api/modules/system.js'
-import utils from '@/utils/utils.js'
-import md5 from 'js-md5';
-// uni.clearStorage(); // 预防本地数据错误
-
-const webInfo = ref({})
-
-const getWebInfo = () => {
-	systemApi.getSetting().then(res => {
-		webInfo.value = res.data
+	import {
+		ref
+	} from 'vue'
+	import user from '@/api/modules/user.js'
+	import systemApi from '@/api/modules/system.js'
+	import utils from '@/utils/utils.js'
+	import md5 from 'js-md5';
+	// uni.clearStorage(); // 预防本地数据错误
+
+	const webInfo = ref({})
+
+	const getWebInfo = () => {
+		systemApi.getSetting().then(res => {
+			webInfo.value = res.data
+		})
+	}
+
+	getWebInfo()
+	console.log(uni.getStorageSync('user_pwd'), 'user_pwd')
+	const model = ref({
+		username: "",
+		password: "",
+		...(uni.getStorageSync('user_pwd') || {}),
+		captch: ''
 	})
-}
-
-getWebInfo()
-console.log(uni.getStorageSync('user_pwd'), 'user_pwd')
-const model = ref({
-	username: "",
-	password: "",
-	...(uni.getStorageSync('user_pwd') || {})
-})
-
-const loading = ref(false)
-const is_save_user_pwd = ref(true)
-const form = ref(null)
-
-// if (token) {
-// 	const user_info = uni.getStorageSync("user_info");
-// 	if (user_info.type == 1) {
-// 		utils.toUrl("/store/index/index")
-// 	}
-// } else {
-// 	utils.toUrl("/pages/login/index")
-// }
-
-function handleSubmit() {
-	loading.value = true
-	form.value
-		.validate()
-		.then(({ valid, errors }) => {
-			if (valid) {
-				if (is_save_user_pwd.value) {
-					uni.setStorageSync("user_pwd", model.value);
-				}
-				user.login({
-					...model.value,
-					password: md5(model.value.password)
-				}).then(res => {
-
-					if (res.code == 0) {
-						uni.setStorageSync("token", res.data.access_token);
-						uni.setStorageSync("user_info", res.data.user_info);
-
-						uni.showToast({
-							icon: "none",
-							title: "登录成功",
-						});
-
-						if (res.data.user_info.type == 1) {
-							utils.toUrl("/store/index/index", "redirectTo")
-							uni.setStorageSync("store_info", res.data.user_info);
-						} else if (res.data.user_info.type == 3) {
-							uni.setStorageSync("mall_token", res.data.access_token);
-							uni.setStorageSync("mall_info", res.data.user_info);
-							utils.toUrl("/mall/index/index", "redirectTo")
+
+	const loading = ref(false)
+	const is_save_user_pwd = ref(true)
+	const form = ref(null)
+	const captch_img = ref(null)
+
+	// if (token) {
+	// 	const user_info = uni.getStorageSync("user_info");
+	// 	if (user_info.type == 1) {
+	// 		utils.toUrl("/store/index/index")
+	// 	}
+	// } else {
+	// 	utils.toUrl("/pages/login/index")
+	// }
+	
+	getCaptch()
+	function getCaptch() {
+		user.captch({
+			
+		}).then(res => {
+			console.log(res, 'res')
+			if (res.code == 0) {
+				captch_img.value = res.data
+			} else {
+				
+			}
+		})
+	}
+
+	function handleSubmit() {
+		loading.value = true
+		form.value
+			.validate()
+			.then(({
+				valid,
+				errors
+			}) => {
+				if (valid) {
+					if (is_save_user_pwd.value) {
+						uni.setStorageSync("user_pwd", model.value);
+					}
+					user.login({
+						...model.value,
+						password: md5(model.value.password),
+						captch: model.value.captch
+					}).then(res => {
+
+						if (res.code == 0) {
+							uni.setStorageSync("token", res.data.access_token);
+							uni.setStorageSync("user_info", res.data.user_info);
+
+							uni.showToast({
+								icon: "none",
+								title: "登录成功",
+							});
+
+							if (res.data.user_info.type == 1) {
+								utils.toUrl("/store/index/index", "redirectTo")
+								uni.setStorageSync("store_info", res.data.user_info);
+							} else if (res.data.user_info.type == 3) {
+								uni.setStorageSync("mall_token", res.data.access_token);
+								uni.setStorageSync("mall_info", res.data.user_info);
+								utils.toUrl("/mall/index/index", "redirectTo")
+							} else {
+								uni.showToast({
+									title: '登录平台开发中 ···',
+									icon: 'none'
+								})
+							}
+							loading.value = false
 						} else {
 							uni.showToast({
-								title: '登录平台开发中 ···',
+								title: res.message,
 								icon: 'none'
 							})
+							getCaptch()
+							loading.value = false
 						}
-						loading.value = false
-					} else {
-						uni.showToast({
-							title: res.message,
-							icon: 'none'
-						})
-						loading.value = false
-					}
 
+						loading.value = false
+					})
+				} else {
 					loading.value = false
-				})
-			} else {
+				}
+			})
+			.catch((error) => {
+				console.log(error, 'error')
 				loading.value = false
-			}
-		})
-		.catch((error) => {
-			console.log(error, 'error')
-			loading.value = false
-		})
-}
+			})
+	}
 </script>
 
 <style>
-.content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-}
-
-.logo {
-	height: 200rpx;
-	width: 200rpx;
-	margin-top: 200rpx;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 50rpx;
-}
-
-.text-area {
-	display: flex;
-	justify-content: center;
-}
-
-.title {
-	font-size: 36rpx;
-	color: #8f8f94;
-}
-</style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 100vh;
+	}
+
+	.logo {
+		height: 200rpx;
+		width: 200rpx;
+		margin-top: 200rpx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50rpx;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36rpx;
+		color: #8f8f94;
+	}
+</style>
\ No newline at end of file