tyc-webview-v2/src/components/Payment.vue

<template>
    <van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6"
        :style="{ height: '50%' }">
        <div class="text-center">
            <h3 class="text-lg font-bold">支付</h3>
        </div>
        <div class="text-center">
            <div class="font-bold text-xl">{{ data.product_name }}</div>
            <div class="text-3xl text-red-500 font-bold">
                <!-- 显示原价和折扣价格 -->
                <div v-if="discountPrice" class="line-through text-gray-500 mt-4"
                    :class="{ 'text-2xl': discountPrice }">
                    ¥ {{ data.sell_price }}
                </div>
                <div>
                    ¥
                    {{
                        discountPrice
                            ? (data.sell_price * 0.2).toFixed(2)
                            : data.sell_price
                    }}
                </div>
            </div>
            <!-- 仅在折扣时显示活动说明 -->
            <div v-if="discountPrice" class="text-sm text-red-500 mt-1">
                活动价：2折优惠
            </div>
        </div>
        <!-- 支付方式选择：任意环境均展示微信+支付宝；推广场景 hideWechat 仅支付宝 -->
        <div class="">
            <van-cell-group inset>
                <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>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="wechat" />
                    </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" />
                    </template>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="test" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 确认按钮 -->
        <div class="">
            <van-button class="w-full" round type="primary" @click="getPayment">确认支付</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { showConfirmDialog, showToast } from "vant";

const isDev = import.meta.env.DEV;

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    id: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
    /** 为 true 时不展示微信支付（例如 /agent/promotionInquire/ 代理推广查询） */
    hideWechat: {
        type: Boolean,
        default: false,
    },
});
const show = defineModel();

function defaultPaymentMethod() {
    if (isDev) return "test";
    if (props.hideWechat) return "alipay";
    return "wechat";
}

const selectedPaymentMethod = ref(defaultPaymentMethod());

function syncSelectedPaymentMethod() {
    selectedPaymentMethod.value = defaultPaymentMethod();
}

onMounted(syncSelectedPaymentMethod);

watch(
    [() => props.hideWechat, show],
    () => {
        if (show.value) {
            syncSelectedPaymentMethod();
        }
    },
    { flush: "post" }
);
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() {
    // 先关闭底部支付弹窗，避免遮罩层压住安全声明 Dialog（用户会像「点了没反应」）
    show.value = false;

    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>

<style scoped></style>