f

2026-02-28 12:18:33 +08:00
parent 576ab0c362
commit 030ed260c1
6 changed files with 98 additions and 83 deletions
--- a/src/components/AgentApplicationForm.vue
+++ b/src/components/AgentApplicationForm.vue
@@ -126,7 +126,9 @@
 const router = useRouter();
 const show = defineModel("show");
 import { useCascaderAreaData } from "@vant/area-data";
-import { showToast } from "vant"; // 引入 showToast 方法
+import { showToast } from "vant";
+import useApiFetch from "@/composables/useApiFetch";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
 const emit = defineEmits(); // 确保 emit 可以正确使用
 const props = defineProps({
    isSelf: {
@@ -148,6 +150,7 @@ const form = ref({
 const showCascader = ref(false);
 const cascaderValue = ref("");
 const options = useCascaderAreaData();
+const { runWithCaptcha } = useAliyunCaptcha();
 const loadingSms = ref(false); // 控制验证码按钮的loading状态
 const isCountingDown = ref(false);
 const isAgreed = ref(false);
@@ -172,21 +175,20 @@ const getSmsCode = async () => {
    }

    loadingSms.value = true;
-
-    const { data, error } = await useApiFetch("auth/sendSms")
-        .post({ mobile: form.value.mobile, actionType: "agentApply" })
-        .json();
-
-    loadingSms.value = false;
-
-    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: form.value.mobile, actionType: "agentApply", captchaVerifyParam })
+            .json(),
+        (result) => {
+            loadingSms.value = false;
+            if (result && result.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+            } else if (result) {
+                showToast(result.msg || "发送失败");
+            }
        }
-    }
+    );
 };
 let timer = null;

--- a/src/components/BindPhoneDialog.vue
+++ b/src/components/BindPhoneDialog.vue
@@ -6,6 +6,7 @@ import { useAgentStore } from "@/stores/agentStore";
 import { useUserStore } from "@/stores/userStore";
 import { showToast } from "vant";
 import useApiFetch from "@/composables/useApiFetch";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
 import { registerByInviteCode } from "@/api/agent";

 const emit = defineEmits(['register-success'])
@@ -14,6 +15,7 @@ const route = useRoute();
 const dialogStore = useDialogStore();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
+const { runWithCaptcha } = useAliyunCaptcha();
 const phoneNumber = ref("");
 const verificationCode = ref("");
 const inviteCode = ref("");
@@ -80,25 +82,25 @@ async function sendVerificationCode() {
        return;
    }
    const actionType = hasAccount.value ? "bindMobile" : "agentApply";
-    const { data, error } = await useApiFetch("auth/sendSms")
-        .post({ mobile: phoneNumber.value, actionType })
-        .json();
-
-    if (data.value && !error.value) {
-        if (data.value.code === 200) {
-            showToast({ message: "获取成功" });
-            startCountdown();
-            // 聚焦到验证码输入框
-            nextTick(() => {
-                const verificationCodeInput = document.getElementById('registerVerificationCode');
-                if (verificationCodeInput) {
-                    verificationCodeInput.focus();
-                }
-            });
-        } else {
-            showToast(data.value.msg);
+    runWithCaptcha(
+        (captchaVerifyParam) => useApiFetch("auth/sendSms")
+            .post({ mobile: phoneNumber.value, actionType, captchaVerifyParam })
+            .json(),
+        (result) => {
+            if (result && result.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('registerVerificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else if (result) {
+                showToast(result.msg || "发送失败");
+            }
        }
-    }
+    );
 }

 function startCountdown() {
--- a/src/components/BindPhoneOnlyDialog.vue
+++ b/src/components/BindPhoneOnlyDialog.vue
@@ -1,12 +1,16 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
 import { useDialogStore } from "@/stores/dialogStore";
+import { showToast } from "vant";
+import useApiFetch from "@/composables/useApiFetch";
+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 +40,25 @@ 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('bindPhoneVerificationCode');
-                if (verificationCodeInput) {
-                    verificationCodeInput.focus();
-                }
-            });
-        } else {
-            showToast(data.value.msg);
+    runWithCaptcha(
+        (captchaVerifyParam) => useApiFetch("auth/sendSms")
+            .post({ mobile: phoneNumber.value, actionType: "bindMobile", captchaVerifyParam })
+            .json(),
+        (result) => {
+            if (result && result.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('bindPhoneVerificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else if (result) {
+                showToast(result.msg || "发送失败");
+            }
        }
-    }
+    );
 }

 function startCountdown() {
--- a/src/components/RealNameAuthDialog.vue
+++ b/src/components/RealNameAuthDialog.vue
@@ -6,11 +6,14 @@ import { useAgentStore } from "@/stores/agentStore";
 import { useUserStore } from "@/stores/userStore";
 import { showToast } from "vant";
 import { realNameAuth } from "@/api/agent";
+import useApiFetch from "@/composables/useApiFetch";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";

 const router = useRouter();
 const dialogStore = useDialogStore();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
+const { runWithCaptcha } = useAliyunCaptcha();
 // 表单数据
 const realName = ref("");
 const idCard = ref("");
@@ -52,25 +55,26 @@ const canSubmit = computed(() => {
    );
 });

-// 发送验证码
+// 发送验证码（使用阿里云滑块验证码防刷）
 async function sendVerificationCode() {
    if (isCountingDown.value || !isPhoneNumberValid.value) return;
    if (!isPhoneNumberValid.value) {
        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(),
+        (result) => {
+            if (result && result.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+            } else if (result) {
+                showToast(result.msg || "发送失败");
+            }
        }
-    }
+    );
 }

 function startCountdown() {
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -6,11 +6,13 @@ import { useAgentStore } from '@/stores/agentStore'
 import { useUserStore } from '@/stores/userStore'
 import { useRoute, useRouter } from 'vue-router'
 import useApiFetch from '@/composables/useApiFetch'
+import { useAliyunCaptcha } from '@/composables/useAliyunCaptcha'

 const router = useRouter()
 const route = useRoute()
 const agentStore = useAgentStore()
 const userStore = useUserStore()
+const { runWithCaptcha } = useAliyunCaptcha()

 const phoneNumber = ref('')
 const verificationCode = ref('')
@@ -69,25 +71,26 @@ async function sendVerificationCode() {
        return
    }

-    const { data, error } = await useApiFetch('auth/sendSms')
-        .post({ mobile: phoneNumber.value, actionType: 'agentApply' })
-        .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: 'agentApply', captchaVerifyParam })
+            .json(),
+        (result) => {
+            if (result && result.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('verificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else if (result) {
+                showToast(result.msg || "发送失败");
+            }
        }
-    }
+    );
 }

 function startCountdown() {
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,8 +15,8 @@ export default defineConfig({
        strictPort: true, // 如果端口被占用则抛出错误而不是使用下一个可用端口
        proxy: {
            "/api/v1": {
-                target: "http://127.0.0.1:8888", // 本地接口地址
-                // target: "https://www.onecha.cn", // 修改为带 www 的域名，避免 301 重定向
+                // target: "http://127.0.0.1:8888", // 本地接口地址
+                target: "https://www.onecha.cn", // 修改为带 www 的域名，避免 301 重定向
                changeOrigin: true,
                rewrite: (path) => path, // 可选：确保路径不被修改
            },