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>
        <!-- 支付方式选择 -->
        <div class="">
            <van-cell-group inset>
                <van-cell v-if="showWechatPay" 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 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 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>
        <!-- 确认按钮 -->
        <div class="">
            <van-button class="w-full" round type="primary" @click="getPayment">确认支付</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { showConfirmDialog } from "vant";
const { isWeChat } = useEnv();
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();

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";
}

const selectedPaymentMethod = ref(defaultPaymentMethod());

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

onMounted(syncSelectedPaymentMethod);

watch(
    [showWechatPay, showAlipayPay, show],
    () => {
        if (show.value) {
            syncSelectedPaymentMethod();
        }
    },
    { flush: "post" }
);
const orderNo = ref("");
const router = useRouter();
const discountPrice = ref(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();

            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;
        });

}
</script>

<style scoped></style>