f

2026-05-09 18:16:43 +08:00
parent f06b0b068a
commit 66ca9ad993
2 changed files with 180 additions and 88 deletions
--- a/src/components/Payment.vue
+++ b/src/components/Payment.vue
@@ -26,10 +26,10 @@
                活动价：2折优惠
            </div>
        </div>
-        <!-- 支付方式选择 -->
+        <!-- 支付方式选择：任意环境均展示微信+支付宝；推广场景 hideWechat 仅支付宝 -->
        <div class="">
            <van-cell-group inset>
-                <van-cell v-if="showWechatPay" title="微信支付" clickable @click="selectedPaymentMethod = 'wechat'">
+                <van-cell v-if="!hideWechat" title="微信支付" clickable @click="selectedPaymentMethod = 'wechat'">
                    <template #icon>
                        <van-icon size="24" name="wechat-pay" color="#1AAD19" class="mr-2" />
                    </template>
@@ -38,7 +38,16 @@
                    </template>
                </van-cell>

-                <!-- 开发环境：测试支付（仅开发环境显示） -->
+                <van-cell title="支付宝支付" clickable @click="selectedPaymentMethod = 'alipay'">
+                    <template #icon>
+                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
+                    </template>
+                    <template #right-icon>
+                        <van-radio v-model="selectedPaymentMethod" name="alipay" />
+                    </template>
+                </van-cell>
+
+                <!-- 开发环境：测试支付 -->
                <van-cell v-if="isDev" title="测试支付（开发）" clickable @click="selectedPaymentMethod = 'test'">
                    <template #icon>
                        <van-icon size="24" name="passed" color="#07c160" class="mr-2" />
@@ -47,16 +56,6 @@
                        <van-radio v-model="selectedPaymentMethod" name="test" />
                    </template>
                </van-cell>
-
-                <!-- 支付宝支付（非微信环境；或微信内但隐藏微信支付时，如代理推广页） -->
-                <van-cell v-if="showAlipayPay" title="支付宝支付" clickable @click="selectedPaymentMethod = 'alipay'">
-                    <template #icon>
-                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
-                    </template>
-                    <template #right-icon>
-                        <van-radio v-model="selectedPaymentMethod" name="alipay" />
-                    </template>
-                </van-cell>
            </van-cell-group>
        </div>
        <!-- 确认按钮 -->
@@ -67,9 +66,9 @@
 </template>

 <script setup>
-import { ref, computed, watch, onMounted } from "vue";
-import { showConfirmDialog } from "vant";
-const { isWeChat } = useEnv();
+import { ref, watch, onMounted } from "vue";
+import { showConfirmDialog, showToast } from "vant";
+
 const isDev = import.meta.env.DEV;

 const props = defineProps({
@@ -93,13 +92,10 @@ const props = defineProps({
 });
 const show = defineModel();

-const showWechatPay = computed(() => isWeChat.value && !props.hideWechat);
-const showAlipayPay = computed(() => !isWeChat.value || props.hideWechat);
-
 function defaultPaymentMethod() {
    if (isDev) return "test";
-    if (showWechatPay.value) return "wechat";
-    return "alipay";
+    if (props.hideWechat) return "alipay";
+    return "wechat";
 }

 const selectedPaymentMethod = ref(defaultPaymentMethod());
@@ -111,7 +107,7 @@ function syncSelectedPaymentMethod() {
 onMounted(syncSelectedPaymentMethod);

 watch(
-    [showWechatPay, showAlipayPay, show],
+    [() => props.hideWechat, show],
    () => {
        if (show.value) {
            syncSelectedPaymentMethod();
@@ -123,68 +119,167 @@ const orderNo = ref("");
 const router = useRouter();
 const discountPrice = ref(false); // 是否应用折扣

+/** 规范化为 WeixinJSBridge 需要的字符串字段 */
+function normalizeWechatJsApiPayload(obj) {
+    if (!obj || typeof obj !== "object") return null;
+    const appId = obj.appId ?? obj.appid;
+    const timeStamp = obj.timeStamp ?? obj.timestamp;
+    const nonceStr = obj.nonceStr ?? obj.nonce_str;
+    const pkg = obj.package != null ? obj.package : undefined;
+    const signType = obj.signType ?? obj.sign_type;
+    const paySign = obj.paySign ?? obj.pay_sign;
+    const out = {
+        appId: appId != null && appId !== "" ? String(appId) : undefined,
+        timeStamp: timeStamp != null && timeStamp !== "" ? String(timeStamp) : undefined,
+        nonceStr: nonceStr != null && nonceStr !== "" ? String(nonceStr) : undefined,
+        package: pkg != null && pkg !== "" ? String(pkg) : undefined,
+        signType: signType != null && signType !== "" ? String(signType) : undefined,
+        paySign: paySign != null && paySign !== "" ? String(paySign) : undefined,
+    };
+    if (Object.values(out).some((v) => v == null)) return null;
+    return out;
+}
+
+/** 从接口 data 中取出 JSAPI 参数（兼容 snake_case、camelCase、扁平） */
+function extractWechatJsApiPayload(apiInner) {
+    if (!apiInner || typeof apiInner !== "object") return null;
+    const nested =
+        apiInner.prepay_data ??
+        apiInner.prepayData ??
+        apiInner.request_payment ??
+        apiInner.requestPayment;
+    if (nested && typeof nested === "object") {
+        const fromNested = normalizeWechatJsApiPayload(nested);
+        if (fromNested) return fromNested;
+    }
+    return normalizeWechatJsApiPayload(apiInner);
+}
+
+/** 微信内 JSAPI 调起支付（等待 WeixinJSBridge 就绪；非微信环境超时后提示） */
+function invokeWechatPay(payload, onResult) {
+    const run = () => {
+        try {
+            WeixinJSBridge.invoke("getBrandWCPayRequest", payload, onResult);
+        } catch (e) {
+            console.error(e);
+            showToast("无法调起微信支付，请稍后重试");
+            show.value = true;
+        }
+    };
+    if (typeof WeixinJSBridge !== "undefined") {
+        run();
+        return;
+    }
+    const timeoutId = setTimeout(() => {
+        showToast("请在微信内打开页面后使用微信支付");
+        show.value = true;
+    }, 4000);
+    document.addEventListener(
+        "WeixinJSBridgeReady",
+        function onReady() {
+            clearTimeout(timeoutId);
+            document.removeEventListener("WeixinJSBridgeReady", onReady);
+            run();
+        },
+        false
+    );
+}
+
 async function getPayment() {
-    showConfirmDialog({
-        title: '重要安全声明',
-        message:
-            '为保障您的个人信息与资金安全，请您务必知悉以下事项：\n\n关于平台业务：本平台官方服务仅限于大数据报告查询，不涉及也从未开展“央行征信修复”、“贷款办理”或“征信洗白”等相关业务。请注意，本平台出具的报告仅供决策参考，不可作为任何官方征信凭证或贷款依据。\n\n关于诈骗警示：任何自称与本平台合作，或以“内部渠道”、“百分百包下款”、“修复征信”等为由，诱导您进行支付的行为，均属欺诈。请您切勿相信，谨慎对待任何支付要求。\n\n关于安全提示：请您时刻保持警惕，妥善保管个人敏感信息。如遇任何索款要求或可疑承诺，请务必首先通过我平台官方公布的联系方式进行核实，切勿轻信他人。',
-    })
-        .then(async () => {
-            const { data, error } = await useApiFetch("/pay/payment")
-                .post({
-                    id: props.id,
-                    pay_method: selectedPaymentMethod.value,
-                    pay_type: props.type,
-                })
-                .json();
+    // 先关闭底部支付弹窗，避免遮罩层压住安全声明 Dialog（用户会像「点了没反应」）
+    show.value = false;

-            if (data.value && !error.value) {
-                const prepayId = data.value.data.prepay_id ?? data.value.data.prepayId;
-                const orderNoFromApi = data.value.data.order_no;
-                orderNo.value = orderNoFromApi;
-
-                // 开发环境测试支付：直接跳转结果页
-                if (selectedPaymentMethod.value === "test" && prepayId === "test_payment_success") {
-                    router.push({
-                        path: "/payment/result",
-                        query: { orderNo: orderNoFromApi },
-                    });
-                    show.value = false;
-                    return;
-                }
-
-                if (selectedPaymentMethod.value === "alipay") {
-                    // 存储订单ID以便支付宝返回时获取
-                    const prepayUrl = prepayId;
-                    const paymentForm = document.createElement("form");
-                    paymentForm.method = "POST";
-                    paymentForm.action = prepayUrl;
-                    paymentForm.style.display = "none";
-                    document.body.appendChild(paymentForm);
-                    paymentForm.submit();
-                } else {
-                    const payload = data.value.data.prepay_data;
-                    WeixinJSBridge.invoke(
-                        "getBrandWCPayRequest",
-                        payload,
-                        function (res) {
-                            if (res.err_msg == "get_brand_wcpay_request:ok") {
-                                // 支付成功，直接跳转到结果页面
-                                router.push({
-                                    path: "/payment/result",
-                                    query: { orderNo: data.value.data.order_no },
-                                });
-                            }
-                        }
-                    );
-                }
-            }
-            show.value = false;
-        })
-        .catch(() => {
-            return;
+    try {
+        await showConfirmDialog({
+            title: "重要安全声明",
+            message:
+                "为保障您的个人信息与资金安全，请您务必知悉以下事项：\n\n关于平台业务：本平台官方服务仅限于大数据报告查询，不涉及也从未开展“央行征信修复”、“贷款办理”或“征信洗白”等相关业务。请注意，本平台出具的报告仅供决策参考，不可作为任何官方征信凭证或贷款依据。\n\n关于诈骗警示：任何自称与本平台合作，或以“内部渠道”、“百分百包下款”、“修复征信”等为由，诱导您进行支付的行为，均属欺诈。请您切勿相信，谨慎对待任何支付要求。\n\n关于安全提示：请您时刻保持警惕，妥善保管个人敏感信息。如遇任何索款要求或可疑承诺，请务必首先通过我平台官方公布的联系方式进行核实，切勿轻信他人。",
+            zIndex: 9999,
+            teleport: "body",
        });
+    } catch {
+        show.value = true;
+        return;
+    }

+    const { data, error } = await useApiFetch("/pay/payment")
+        .post({
+            id: props.id,
+            pay_method: selectedPaymentMethod.value,
+            pay_type: props.type,
+        })
+        .json();
+
+    // 业务错误时 afterFetch 已 showToast；此处仅恢复支付弹窗便于重试
+    if (error.value || !data.value || data.value.code !== 200) {
+        show.value = true;
+        return;
+    }
+
+    const inner = data.value.data ?? {};
+    const prepayId = inner.prepay_id ?? inner.prepayId;
+    const orderNoFromApi = inner.order_no ?? inner.orderNo;
+    orderNo.value = orderNoFromApi;
+
+    // 开发环境测试支付：直接跳转结果页
+    if (selectedPaymentMethod.value === "test" && prepayId === "test_payment_success") {
+        router.push({
+            path: "/payment/result",
+            query: { orderNo: orderNoFromApi },
+        });
+        return;
+    }
+
+    if (selectedPaymentMethod.value === "alipay") {
+        const prepayUrl = prepayId;
+        if (!prepayUrl) {
+            showToast("未获取到支付宝支付链接");
+            show.value = true;
+            return;
+        }
+        const paymentForm = document.createElement("form");
+        paymentForm.method = "POST";
+        paymentForm.action = prepayUrl;
+        paymentForm.style.display = "none";
+        document.body.appendChild(paymentForm);
+        paymentForm.submit();
+        return;
+    }
+
+    const payload = extractWechatJsApiPayload(inner);
+    if (!payload) {
+        const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+        console.warn("[Payment] 微信支付 JSAPI 参数解析失败 — 原始响应 data 如下（展开 inner）");
+        console.warn("[Payment] inner:", inner);
+        console.warn("[Payment] 详情:", {
+            pay_method: selectedPaymentMethod.value,
+            pay_type: props.type,
+            order_id: props.id,
+            order_no: orderNoFromApi,
+            prepay_id: inner.prepay_id ?? inner.prepayId,
+            prepay_data: inner.prepay_data ?? inner.prepayData,
+            inner_keys: inner && typeof inner === "object" ? Object.keys(inner) : [],
+            response_code: data.value?.code,
+            response_msg: data.value?.msg,
+            user_agent_snippet: ua.slice(0, 120),
+        });
+        showToast(
+            "未获取到微信支付参数。请确认：1）后端已部署最新支付接口；2）请求头含 X-Platform: wxh5；3）用户已绑定微信网页授权 openid。"
+        );
+        show.value = true;
+        return;
+    }
+
+    invokeWechatPay(payload, function (res) {
+        if (res.err_msg === "get_brand_wcpay_request:ok") {
+            router.push({
+                path: "/payment/result",
+                query: { orderNo: orderNoFromApi },
+            });
+        } else if (res.err_msg) {
+            showToast(res.err_msg.replace(/^get_brand_wcpay_request:/, "") || "支付未完成");
+        }
+    });
 }
 </script>

--- a/src/composables/useApiFetch.js
+++ b/src/composables/useApiFetch.js
@@ -27,14 +27,11 @@ const useApiFetch = createFetch({
            if (isWechat) {
                platform = "wxh5";
            }
-            options.headers['X-Platform'] = platform
-
-            if (token) {
-                options.headers = {
-                    ...options.headers,
-                    Authorization: `${token}`,
-                };
-            }
+            options.headers = {
+                ...(options.headers || {}),
+                "X-Platform": platform,
+                ...(token ? { Authorization: `${token}` } : {}),
+            };
            return { url, options };
        },
        async afterFetch({ data, response }) {