123

src/app/pages/auth/login.vue

@@ -60,14 +60,16 @@
 					<view
 						class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
 						<u-form-item label="" prop="mobile_code" :border-bottom="false">
-							<u-input v-model="formData.code" type="number" maxlength="4" border="none"
+							<u-input v-model="formData.code" type="number" maxlength="6" border="none"
 								class="!bg-transparent" fontSize="26rpx" :disabled="real_name_input"
 								placeholder="请输入手机验证码" placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
 								<template #suffix>
-									<sms-code v-if="configStore.login.agreement_show" :mobile="formData.username"
-										type="login" v-model="formData.mobile_key" :isAgree="isAgree"></sms-code>
-									<sms-code v-else :mobile="formData.username" type="login"
-										v-model="formData.mobile_key"></sms-code>
+									<view 
+										class="text-[26rpx] whitespace-nowrap ml-[10rpx]"
+										:class="canGetCode ? 'text-primary' : 'text-gray-300'"
+										@click="handleGetCode">
+										{{ codeButtonText }}
+									</view>
 								</template>
 							</u-input>
 						</u-form-item>
@@ -116,8 +118,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
 import { usernameLogin, mobileLogin, clientLogin, wxLogin, loginByPhone } from "@/app/api/auth";
+import { smsCode } from '@/app/api/system'
 import useMemberStore from "@/stores/member";
 import useConfigStore from "@/stores/config";
 import { useLogin } from "@/hooks/useLogin";
@@ -155,6 +158,11 @@ const isPassword = ref(true);
 const showPhoneAuthPopup = ref(false);
 const openId = ref<any>("");
 
+// 主题色函数
+const themeColor = () => {
+	return configStore.getThemeColor();
+};
+
 const changePassword = () => {
 	isPassword.value = !isPassword.value;
 };
@@ -192,10 +200,69 @@ const formData = reactive({
 	username: "",
 	password: "",
 	code: "",
-	mobile_key: "",
 });
 
-// 第一步
+// 验证码倒计时相关
+const countdown = ref(0);
+let timer: any = null;
+
+const canGetCode = computed(() => {
+	return countdown.value === 0;
+});
+
+const codeButtonText = computed(() => {
+	if (countdown.value > 0) {
+		return `${countdown.value}s后重新获取`;
+	}
+	return "获取验证码";
+});
+
+const handleGetCode = () => {
+	if (!canGetCode.value) return;
+
+	// 验证手机号
+	if (!formData.username) {
+		uni.showToast({ title: "请输入手机号", icon: "none" });
+		return;
+	}
+
+	if (!/^1[3-9]\d{9}$/.test(formData.username)) {
+		uni.showToast({ title: "请输入正确的手机号", icon: "none" });
+		return;
+	}
+
+	// 发送验证码请求
+	sendSmsCode();
+};
+
+const sendSmsCode = async () => {
+	try {
+		const res: any = await smsCode({
+			phonenumber: formData.username,
+		});
+
+		if (res.code == 200) {
+			uni.showToast({ title: "验证码已发送", icon: "success" });
+			startCountdown();
+		} else {
+			uni.showToast({ title: res.msg || "发送失败", icon: "none" });
+		}
+	} catch (error) {
+		uni.showToast({ title: "发送失败，请重试", icon: "none" });
+	}
+};
+
+const startCountdown = () => {
+	countdown.value = 60;
+	timer = setInterval(() => {
+		countdown.value--;
+		if (countdown.value <= 0) {
+			clearInterval(timer);
+			timer = null;
+		}
+	}, 1000);
+};
+
 const getOpenid = () => {
 	uni.login({
 		provider: 'weixin',
@@ -252,6 +319,13 @@ onMounted(() => {
 	}, 800);
 });
 
+onUnmounted(() => {
+	if (timer) {
+		clearInterval(timer);
+		timer = null;
+	}
+});
+
 const agreeChange = () => {
 	isAgree.value = !isAgree.value;
 };
@@ -287,7 +361,7 @@ const rules = computed(() => {
 			},
 			{
 				validator(rule: any, value: any) {
-					return uni.$u.test.mobile(value);
+					return /^1[3-9]\d{9}$/.test(value);
 				},
 				message: "请输入正确的手机号",
 				trigger: ["change", "blur"],
@@ -311,6 +385,14 @@ const handleLogin = () => {
 		if (type.value == "username") {
 			datas.username = formData.username
 			datas.password = formData.password
+			datas.grantType = 'password'
+			datas.clientId = '428a8310cd442757ae699df5d894f051'
+		}
+		if (type.value == "mobile") {
+			datas.phonenumber = formData.username
+			datas.smsCode = formData.code
+			datas.grantType = 'sms'
+			datas.clientId = '428a8310cd442757ae699df5d894f051'
 		}
 		loading.value = true;
 		clientLogin(datas)