f

src/components/AgentApplicationForm.vue

@@ -122,6 +122,9 @@ const router = useRouter();
 const show = defineModel("show");
 import { useCascaderAreaData } from "@vant/area-data";
 import { showToast } from "vant"; // 引入 showToast 方法
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
+
+const { runWithCaptcha } = useAliyunCaptcha();
 const emit = defineEmits(); // 确保 emit 可以正确使用
 const props = defineProps({
     ancestor: {
@@ -146,7 +149,6 @@ const form = ref({
 const showCascader = ref(false);
 const cascaderValue = ref("");
 const options = useCascaderAreaData();
-const loadingSms = ref(false); // 控制验证码按钮的loading状态
 const isCountingDown = ref(false);
 const isAgreed = ref(false);
 const countdown = ref(60);
@@ -158,7 +160,7 @@ const isPhoneNumberValid = computed(() => {
     return /^1[3-9]\d{9}$/.test(form.value.mobile);
 });
 
-const getSmsCode = async () => {
+const getSmsCode = () => {
     if (!form.value.mobile) {
         showToast({ message: "请输入手机号" });
         return;
@@ -169,22 +171,24 @@ const getSmsCode = async () => {
         return;
     }
 
-    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(),
+        (res) => {
+            if (res?.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+            } else {
+                showToast(res?.msg || "获取失败");
+            }
         }
-    }
+    );
 };
 let timer = null;
 

src/components/BindPhoneDialog.vue

@@ -1,10 +1,12 @@
 <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 { runWithCaptcha } = useAliyunCaptcha();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
 const phoneNumber = ref("");
@@ -30,31 +32,30 @@ const canBind = computed(() => {
     );
 });
 
-async function sendVerificationCode() {
+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: "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() {

src/components/RealNameAuthDialog.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useDialogStore } from "@/stores/dialogStore";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
+
 const router = useRouter();
 const dialogStore = useDialogStore();
+const { runWithCaptcha } = useAliyunCaptcha();
 const agentStore = useAgentStore();
 const userStore = useUserStore();
 import { showToast } from "vant";
@@ -48,24 +51,26 @@ const canSubmit = computed(() => {
 });
 
 // 发送验证码
-async function sendVerificationCode() {
+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(),
+        (res) => {
+            if (res?.code === 200) {
+                showToast({ message: "获取成功" });
+                startCountdown();
+            } else {
+                showToast(res?.msg || "获取失败");
+            }
         }
-    }
+    );
 }
 
 function startCountdown() {