add limit

2026-02-26 13:15:09 +08:00
parent fb8dea93a0
commit d6e460d7b6
8 changed files with 305 additions and 67 deletions
--- a/.env
+++ b/.env
@@ -19,4 +19,8 @@ VITE_CHAT_AES_IV=345GDFED433223DF
 VITE_SHARE_TITLE=真爱查官网_婚姻状态核验_婚前背景互信平台
 VITE_SHARE_DESC=提供个人信用评估、入职背调、信贷风控、企业风险监测等服务
 VITE_SHARE_IMG=https://www.zhenaicha.com/logo.png
-VITE_TOKEN_VERSION=1.0
+VITE_TOKEN_VERSION=1.0
+
+# 阿里云验证码配置（当前使用非加密模式）
+VITE_ALIYUN_CAPTCHA_ENCRYPTED=false
+VITE_ALIYUN_CAPTCHA_SCENE_ID=wynt39to
--- a/index.html
+++ b/index.html
@@ -109,6 +109,15 @@
            delete window.wx;
        </script>

+        <!-- 阿里云滑块验证码 -->
+        <script>
+            window.AliyunCaptchaConfig = { region: "cn", prefix: "12zxnj" };
+        </script>
+        <script
+            type="text/javascript"
+            src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"
+        ></script>
+
        <!-- 预加载关键资源 -->
        <link rel="preconnect" href="https://www.zhinengcha.cn" />
        <link rel="preconnect" href="https://res.wx.qq.com" />
@@ -207,6 +216,8 @@
            <div class="loading-text">加载中</div>
        </div>
        <div id="app"></div>
+        <!-- 阿里云验证码挂载容器 -->
+        <div id="captcha-element"></div>

        <script type="module" src="/src/main.js"></script>
    </body>
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,9 +87,7 @@ const handleWeixinAuthCallback = async (code) => {
            const tokenVersion = import.meta.env.VITE_TOKEN_VERSION || "1.1";
            localStorage.setItem("tokenVersion", tokenVersion);

-            console.log("✅ Token saved successfully, token:", token.substring(0, 20) + "...");
-            console.log("✅ Token saved to localStorage, userId:", data.value.data.userId || "unknown");
-            console.log(`✅ TokenVersion set to ${tokenVersion}`);
+         

            // 验证 token 是否真的保存成功
            const savedToken = localStorage.getItem("token");
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -117,6 +117,7 @@ declare global {
  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
  const useAgent: typeof import('./composables/useAgent.js')['useAgent']
  const useAgentStore: typeof import('./stores/agentStore.js')['useAgentStore']
+  const useAliyunCaptcha: typeof import('./composables/useAliyunCaptcha.js')['default']
  const useAnimate: typeof import('@vueuse/core')['useAnimate']
  const useApiFetch: typeof import('./composables/useApiFetch.js')['default']
  const useAppStore: typeof import('./stores/appStore.js')['useAppStore']
--- a/src/components/InquireForm.vue
+++ b/src/components/InquireForm.vue
@@ -35,7 +35,8 @@
                        <input v-model="formData.mobile" id="mobile" type="tel" placeholder="请输入手机号"
                            class="flex-1 border-none outline-none" @click="handleInputClick" />
                    </div>
-                    <div class="flex items-center py-3 border-b border-gray-100">
+                    <!-- 验证码输入框：仅需要短信验证码的产品显示 -->
+                    <div v-if="needSmsCode" class="flex items-center py-3 border-b border-gray-100">
                        <label for="verificationCode" class="w-20 font-medium text-gray-700">验证码</label>
                        <input v-model="formData.verificationCode" id="verificationCode" placeholder="请输入验证码"
                            maxlength="6" class="flex-1 border-none outline-none" @click="handleInputClick" />
@@ -133,6 +134,7 @@ import { useUserStore } from "@/stores/userStore";
 import { useDialogStore } from "@/stores/dialogStore";
 import { useEnv } from "@/composables/useEnv";
 import { showConfirmDialog } from "vant";
+import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";

 import Payment from "@/components/Payment.vue";
 import BindPhoneOnlyDialog from "@/components/BindPhoneOnlyDialog.vue";
@@ -200,6 +202,7 @@ const dialogStore = useDialogStore();
 const userStore = useUserStore();
 const { isWeChat } = useEnv();
 const appStore = useAppStore();
+const { runWithCaptcha } = useAliyunCaptcha();

 // 响应式数据
 const showPayment = ref(false);
@@ -210,6 +213,14 @@ const trapezoidBgImage = ref('');
 const isCountingDown = ref(false);
 const countdown = ref(60);

+// 不需要短信验证码的产品列表（使用拼图验证）
+const noSmsCodeRequiredProducts = ['marriage'];
+
+// 判断当前产品是否需要短信验证码
+const needSmsCode = computed(() => {
+    return !noSmsCodeRequiredProducts.includes(props.feature);
+});
+
 // 使用传入的featureData或创建响应式引用
 const featureData = computed(() => props.featureData || {});

@@ -349,34 +360,75 @@ function handleSubmit() {
            formData.idCard,
            (v) => isIdCardValid.value,
            "请输入有效的身份证号码"
-        ) ||
-        !validateField(
-            "verificationCode",
-            formData.verificationCode,
-            (v) => v,
-            "请输入验证码"
        )
    ) {
        return;
    }

+    // 需要短信验证码的产品，校验验证码
+    if (needSmsCode.value && !formData.verificationCode) {
+        showToast({ message: "请输入验证码" });
+        return;
+    }
+
    // 不需要登录也能查询，直接提交请求
    // 如果是已登录用户在微信环境且未绑定手机号，提示绑定（但不强制）
    if (isLoggedIn.value && !userStore.mobile && props.type !== 'promotion' && isWeChat.value) {
        pendingPayment.value = true;
        dialogStore.openBindPhone();
    } else {
-        submitRequest();
+        // 不需要短信验证码的产品，使用拼图验证
+        if (!needSmsCode.value) {
+            runWithCaptcha(
+                (captchaVerifyParam) => submitRequest(captchaVerifyParam),
+                (res) => {
+                    if (res.code === 200) {
+                        handleQuerySuccess(res);
+                    }
+                }
+            );
+        } else {
+            // 需要短信验证码的产品，直接提交
+            submitRequest().then(({ data, error }) => {
+                if (data?.code === 200) {
+                    handleQuerySuccess(data);
+                }
+            });
+        }
    }
 }

-async function submitRequest() {
+// 处理查询成功
+function handleQuerySuccess(res) {
+    queryId.value = res.data.id;
+    if (props.type === 'promotion') {
+        localStorage.setItem("token", res.data.accessToken);
+        localStorage.setItem("refreshAfter", res.data.refreshAfter);
+        localStorage.setItem("accessExpire", res.data.accessExpire);
+        const tokenVersion = import.meta.env.VITE_TOKEN_VERSION || "1.1";
+        localStorage.setItem("tokenVersion", tokenVersion);
+    }
+    showPayment.value = true;
+    emit('submit-success', res.data);
+}
+
+async function submitRequest(captchaVerifyParam = null) {
    const req = {
        name: formData.name,
        id_card: formData.idCard,
-        mobile: formData.mobile,
-        code: formData.verificationCode
+        mobile: formData.mobile
    };
+
+    // 需要短信验证码的产品，添加 code 字段
+    if (needSmsCode.value) {
+        req.code = formData.verificationCode;
+    }
+
+    // 不需要短信验证码的产品，添加拼图验证参数
+    if (captchaVerifyParam) {
+        req.captchaVerifyParam = captchaVerifyParam;
+    }
+
    const reqStr = JSON.stringify(req);
    const encodeData = aesEncrypt(
        reqStr,
@@ -397,22 +449,7 @@ async function submitRequest() {
        .post(requestData)
        .json();

-    if (data.value.code === 200) {
-        queryId.value = data.value.data.id;
-
-        // 推广查询需要保存token
-        if (props.type === 'promotion') {
-            localStorage.setItem("token", data.value.data.accessToken);
-            localStorage.setItem("refreshAfter", data.value.data.refreshAfter);
-            localStorage.setItem("accessExpire", data.value.data.accessExpire);
-            // ⚠️ 重要：保存 token 后立即设置 tokenVersion，防止被 checkTokenVersion 清除
-            const tokenVersion = import.meta.env.VITE_TOKEN_VERSION || "1.1";
-            localStorage.setItem("tokenVersion", tokenVersion);
-        }
-
-        showPayment.value = true;
-        emit('submit-success', data.value.data);
-    }
+    return { data: data.value, error };
 }

 async function sendVerificationCode() {
@@ -422,22 +459,27 @@ async function sendVerificationCode() {
        return;
    }

-    const { data, error } = await useApiFetch("/auth/sendSms")
-        .post({ mobile: formData.mobile, actionType: "query" })
-        .json();
-
-    if (!error.value && data.value.code === 200) {
-        showToast({ message: "验证码发送成功", type: "success" });
-        startCountdown();
-        nextTick(() => {
-            const verificationCodeInput = document.getElementById('verificationCode');
-            if (verificationCodeInput) {
-                verificationCodeInput.focus();
+    // 使用阿里云滑块验证码
+    runWithCaptcha(
+        (captchaVerifyParam) =>
+            useApiFetch("/auth/sendSms")
+                .post({ mobile: formData.mobile, actionType: "query", captchaVerifyParam })
+                .json(),
+        (res) => {
+            if (res.code === 200) {
+                showToast({ message: "验证码发送成功", type: "success" });
+                startCountdown();
+                nextTick(() => {
+                    const verificationCodeInput = document.getElementById('verificationCode');
+                    if (verificationCodeInput) {
+                        verificationCodeInput.focus();
+                    }
+                });
+            } else {
+                showToast({ message: res.msg || "验证码发送失败，请重试" });
            }
-        });
-    } else {
-        showToast({ message: "验证码发送失败，请重试" });
-    }
+        }
+    );
 }

 let timer = null;
--- a/src/composables/useAliyunCaptcha.js
+++ b/src/composables/useAliyunCaptcha.js
@@ -0,0 +1,173 @@
+import { showToast, showLoadingToast, closeToast } from "vant";
+import useApiFetch from "@/composables/useApiFetch";
+
+// 阿里云验证码场景 ID
+const ALIYUN_CAPTCHA_SCENE_ID = "wynt39to";
+// 是否启用加密模式（通过环境变量控制，非加密模式时前端不调用后端获取 EncryptedSceneId）
+const ENABLE_ENCRYPTED =import.meta.env.VITE_ALIYUN_CAPTCHA_ENCRYPTED === "false";
+
+let captchaInitialised = false;
+/** 首次初始化后，SDK 会异步调用 getInstance，用此 Promise 在实例就绪后再 show */
+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;
+    });
+
+    // 非加密模式：仅传 SceneId，不调用后端接口
+    if (ENABLE_ENCRYPTED) {
+        console.log("非加密", ALIYUN_CAPTCHA_SCENE_ID);
+        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;
+    }
+
+    // 加密模式：先从后端获取 EncryptedSceneId，再初始化
+    const { data, error } = await useApiFetch("/captcha/encryptedSceneId")
+        .post()
+        .json();
+    const resp = data?.value;
+    console.log("加密", resp);
+    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",
+    });
+}
+
+/**
+ * 阿里云滑块验证码通用封装。
+ * 依赖 index.html 中已加载的 AliyunCaptcha.js；初始化在首次调起时执行。
+ *
+ * @param { (captchaVerifyParam: string) => Promise<{ data: Ref, error: Ref }> } bizVerify - 业务请求函数，接收滑块参数，返回 useApiFetch 的 { data, error }
+ * @param { (res: any) => void } [onSuccess] - 业务成功回调（code===200 时调用，传入接口返回的 data.value）
+ */
+export function useAliyunCaptcha() {
+    /**
+     * 先弹出滑块，通过后执行 bizVerify(captchaVerifyParam)，再根据结果调用 onSuccess。
+     */
+    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();
+
+            // 首次初始化时 SDK 会异步调用 getInstance，需等待实例就绪后再 show
+            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;
--- a/src/views/Inquire.vue
+++ b/src/views/Inquire.vue
@@ -40,9 +40,9 @@ onMounted(async () => {
    }

    // 添加婚姻查询的特殊处理
-    if (feature.value === 'marriage') {
-        showMarriageUpgradeNotice();
-    }
+    // if (feature.value === 'marriage') {
+    //     showMarriageUpgradeNotice();
+    // }

    // 直接加载产品信息，不需要登录
    await getProduct();
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -6,11 +6,13 @@ import { useUserStore } from '@/stores/userStore'
 import { useRouter, useRoute } from 'vue-router'
 import { mobileCodeLogin } from '@/api/user'
 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('')
@@ -35,25 +37,32 @@ async function sendVerificationCode() {
        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() {