f

2026-02-28 15:43:14 +08:00
parent b73de98a71
commit b8defa47ab
29 changed files with 3216 additions and 73 deletions
--- a/src/components/BindPhoneDialog.vue
+++ b/src/components/BindPhoneDialog.vue
@@ -1,12 +1,15 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
 import { useDialogStore } from "@/stores/dialogStore";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";

 const emit = defineEmits(['bind-success'])
 const router = useRouter();
 const dialogStore = useDialogStore();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
+
+const { runWithCaptcha } = useAliyunCaptcha()
 const phoneNumber = ref("");
 const verificationCode = ref("");
 const isCountingDown = ref(false);
@@ -36,25 +39,28 @@ async function sendVerificationCode() {
        showToast({ message: "请输入有效的手机号" });
        return;
    }
-    const { data, error } = await useApiFetch("auth/sendSms")
-        .post({ mobile: phoneNumber.value, actionType: "bindMobile" })
-        .json();
-
-    if (data.value && !error.value) {
-        if (data.value.code === 200) {
-            showToast({ message: "获取成功" });
-            startCountdown();
-            // 聚焦到验证码输入框
-            nextTick(() => {
-                const verificationCodeInput = document.getElementById('verificationCode');
-                if (verificationCodeInput) {
-                    verificationCodeInput.focus();
-                }
-            });
-        } else {
-            showToast(data.value.msg);
+    
+    runWithCaptcha(
+        (captchaVerifyParam) =>
+            useApiFetch("auth/sendSms")
+                .post({ mobile: phoneNumber.value, actionType: "bindMobile", captchaVerifyParam })
+                .json(),
+        (res) => {
+            if (res.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+                // 聚焦到验证码输入框
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('verificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else {
+                showToast(res.msg || "获取失败,请重试");
+            }
        }
-    }
+    );
 }

 function startCountdown() {
--- a/src/components/LoginDialog.vue
+++ b/src/components/LoginDialog.vue
@@ -2,7 +2,7 @@
 <script setup>
 import { ref, computed, nextTick } from 'vue'
 import { showToast } from 'vant'
-import ClickCaptcha from '@/components/ClickCaptcha.vue'
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha"
 import { useDialogStore } from '@/stores/dialogStore'
 import { useUserStore } from '@/stores/userStore'

@@ -10,6 +10,8 @@ const emit = defineEmits(['login-success'])
 const dialogStore = useDialogStore()
 const userStore = useUserStore()

+const { runWithCaptcha } = useAliyunCaptcha()
+
 const phoneNumber = ref('')
 const verificationCode = ref('')
 const password = ref('')
@@ -19,10 +21,6 @@ const isCountingDown = ref(false)
 const countdown = ref(60)
 let timer = null

-// 验证组件状态
-const showCaptcha = ref(false)
-const captchaVerified = ref(false)
-
 // 聚焦状态变量
 const phoneFocused = ref(false)
 const codeFocused = ref(false)
@@ -47,25 +45,28 @@ async function sendVerificationCode() {
        showToast({ message: "请输入有效的手机号" });
        return
    }
-    const { data, error } = await useApiFetch('auth/sendSms')
-        .post({ mobile: phoneNumber.value, actionType: 'login' })
-        .json()
-
-    if (data.value && !error.value) {
-        if (data.value.code === 200) {
-            showToast({ message: "获取成功" });
-            startCountdown()
-            // 聚焦到验证码输入框
-            nextTick(() => {
-                const verificationCodeInput = document.getElementById('verificationCode');
-                if (verificationCodeInput) {
-                    verificationCodeInput.focus();
-                }
-            });
-        } else {
-            showToast(data.value.msg)
+    
+    runWithCaptcha(
+        (captchaVerifyParam) =>
+            useApiFetch('auth/sendSms')
+                .post({ mobile: phoneNumber.value, actionType: 'login', captchaVerifyParam })
+                .json(),
+        (res) => {
+            if (res.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown()
+                // 聚焦到验证码输入框
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('verificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else {
+                showToast(res.msg || "获取失败,请重试")
+            }
        }
-    }
+    );
 }

 function startCountdown() {
@@ -101,23 +102,10 @@ async function handleLogin() {
        showToast({ message: "请先同意用户协议" });
        return
    }
-    // 显示验证组件
-    showCaptcha.value = true
-}
-
-// 验证成功回调
-function handleCaptchaSuccess() {
-    captchaVerified.value = true
-    showCaptcha.value = false
-    // 执行实际的登录逻辑
+    // 直接执行登录逻辑,登录时不做图形校验
    performLogin()
 }

-// 验证关闭回调
-function handleCaptchaClose() {
-    showCaptcha.value = false
-}
-
 // 执行实际的登录逻辑
 async function performLogin() {
    const { data, error } = await useApiFetch('/user/mobileCodeLogin')
@@ -260,9 +248,6 @@ function toPrivacyPolicy() {
            </div>
        </div>
    </van-popup>
-
-    <!-- 点击验证组件 -->
-    <ClickCaptcha :visible="showCaptcha" @success="handleCaptchaSuccess" @close="handleCaptchaClose" />
 </template>

 <style scoped>
--- a/src/components/RealNameAuthDialog.vue
+++ b/src/components/RealNameAuthDialog.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useDialogStore } from "@/stores/dialogStore";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
 const router = useRouter();
 const dialogStore = useDialogStore();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
+
+const { runWithCaptcha } = useAliyunCaptcha();
 import { showToast } from "vant";
 // 表单数据
 const realName = ref("");
@@ -54,18 +57,21 @@ async function sendVerificationCode() {
        showToast({ message: "请输入有效的手机号" });
        return;
    }
-    const { data, error } = await useApiFetch("auth/sendSms")
-        .post({ mobile: phoneNumber.value, actionType: "realName" })
-        .json();

-    if (data.value && !error.value) {
-        if (data.value.code === 200) {
-            showToast({ message: "获取成功" });
-            startCountdown();
-        } else {
-            showToast(data.value.msg);
+    runWithCaptcha(
+        (captchaVerifyParam) =>
+            useApiFetch("auth/sendSms")
+                .post({ mobile: phoneNumber.value, actionType: "realName", captchaVerifyParam })
+                .json(),
+        (res) => {
+            if (res.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+            } else {
+                showToast(res.msg || "获取失败,请重试");
+            }
        }
-    }
+    );
 }

 function startCountdown() {