add

src/composables/useAliyunCaptcha.js

@@ -0,0 +1,155 @@
+import { showToast, showLoadingToast, closeToast } from "vant";
+import useApiFetch from "@/composables/useApiFetch";
+
+const ALIYUN_CAPTCHA_SCENE_ID = "wynt39to";
+const ENABLE_ENCRYPTED = false;
+
+let captchaInitialised = false;
+let captchaReadyPromise = null;
+let captchaReadyResolve = null;
+
+async function ensureCaptchaInit() {
+    if (captchaInitialised || typeof window === "undefined") return;
+    if (typeof window.initAliyunCaptcha !== "function") return;
+
+    captchaInitialised = true;
+    window.captcha = null;
+    window.__lastBizResponse = null;
+    window.__onCaptchaBizSuccess = null;
+    captchaReadyPromise = new Promise((resolve) => {
+        captchaReadyResolve = resolve;
+    });
+
+    if (!ENABLE_ENCRYPTED) {
+        window.initAliyunCaptcha({
+            SceneId: ALIYUN_CAPTCHA_SCENE_ID,
+            mode: "popup",
+            element: "#captcha-element",
+            getInstance(instance) {
+                window.captcha = instance;
+                if (typeof captchaReadyResolve === "function") {
+                    captchaReadyResolve();
+                    captchaReadyResolve = null;
+                }
+            },
+            captchaVerifyCallback(param) {
+                return typeof window.__captchaVerifyCallback === "function"
+                    ? window.__captchaVerifyCallback(param)
+                    : Promise.resolve({
+                          captchaResult: false,
+                          bizResult: false,
+                      });
+            },
+            onBizResultCallback(bizResult) {
+                if (typeof window.__onBizResultCallback === "function") {
+                    window.__onBizResultCallback(bizResult);
+                }
+                window.__lastBizResponse = null;
+                window.__onCaptchaBizSuccess = null;
+            },
+            slideStyle: { width: 360, height: 40 },
+            language: "cn",
+        });
+        return;
+    }
+
+    const { data, error } = await useApiFetch("/captcha/encryptedSceneId")
+        .post()
+        .json();
+    const resp = data?.value;
+    const encryptedSceneId = resp?.data?.encryptedSceneId;
+    if (error?.value || !encryptedSceneId) {
+        showToast({ message: "获取验证码参数失败，请稍后重试" });
+        captchaInitialised = false;
+        captchaReadyPromise = null;
+        captchaReadyResolve = null;
+        return;
+    }
+    window.initAliyunCaptcha({
+        SceneId: ALIYUN_CAPTCHA_SCENE_ID,
+        EncryptedSceneId: encryptedSceneId,
+        mode: "popup",
+        element: "#captcha-element",
+        getInstance(instance) {
+            window.captcha = instance;
+            if (typeof captchaReadyResolve === "function") {
+                captchaReadyResolve();
+                captchaReadyResolve = null;
+            }
+        },
+        captchaVerifyCallback(param) {
+            return typeof window.__captchaVerifyCallback === "function"
+                ? window.__captchaVerifyCallback(param)
+                : Promise.resolve({ captchaResult: false, bizResult: false });
+        },
+        onBizResultCallback(bizResult) {
+            if (typeof window.__onBizResultCallback === "function") {
+                window.__onBizResultCallback(bizResult);
+            }
+            window.__lastBizResponse = null;
+            window.__onCaptchaBizSuccess = null;
+        },
+        slideStyle: { width: 360, height: 40 },
+        language: "cn",
+    });
+}
+
+export function useAliyunCaptcha() {
+    async function runWithCaptcha(bizVerify, onSuccess) {
+        if (typeof window === "undefined") {
+            showToast({ message: "验证码仅支持浏览器环境" });
+            return;
+        }
+
+        const loading = showLoadingToast({
+            message: "安全验证加载中...",
+            forbidClick: true,
+            duration: 0,
+            loadingType: "spinner",
+        });
+
+        try {
+            window.__captchaVerifyCallback = async (captchaVerifyParam) => {
+                window.__lastBizResponse = null;
+                const { data, error } = await bizVerify(captchaVerifyParam);
+                const result = data?.value ?? data;
+                if (error?.value || !result) {
+                    return { captchaResult: false, bizResult: false };
+                }
+                window.__lastBizResponse = result;
+                const captchaOk = result.captchaVerifyResult !== false;
+                const bizOk = result.code === 200;
+                return { captchaResult: captchaOk, bizResult: bizOk };
+            };
+
+            window.__onBizResultCallback = (bizResult) => {
+                if (
+                    bizResult === true &&
+                    window.__lastBizResponse &&
+                    typeof window.__onCaptchaBizSuccess === "function"
+                ) {
+                    window.__onCaptchaBizSuccess(window.__lastBizResponse);
+                }
+            };
+
+            await ensureCaptchaInit();
+
+            if (captchaReadyPromise) {
+                await captchaReadyPromise;
+                captchaReadyPromise = null;
+            }
+            if (!window.captcha) {
+                showToast({ message: "验证码未加载，请刷新页面重试" });
+                return;
+            }
+            window.__onCaptchaBizSuccess = onSuccess;
+            window.captcha.show();
+        } finally {
+            closeToast();
+        }
+    }
+
+    return { runWithCaptcha };
+}
+
+export default useAliyunCaptcha;