jnc-webview/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="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2">
                <img src="/logo.png" alt="Logo" class="w-8 h-8 rounded-full" />
                <span class="text-base font-semibold text-gray-800">云客查</span>
            </div>
            <div class="text-sm text-gray-500">
                {{ paymentTime }}
            </div>
        </div>
        <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="isDevMode" title="测试支付（开发环境）" clickable @click="selectedPaymentMethod = 'test'">
                    <template #icon>
                        <van-icon size="24" name="setting" color="#FF9800" class="mr-2" />
                    </template>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="test" />
                    </template>
                </van-cell>

                <!-- <van-cell v-if="isWeChat" 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="!isWeChat" title="支付宝" clickable @click="selectedPaymentMethod = 'easypay_alipay'">
                    <template #icon>
                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
                    </template>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="easypay_alipay" />
                    </template>
                </van-cell> -->

                <!-- 云印签支付-微信 -->
                <van-cell v-if="isWeChat" title="微信支付" clickable
                    @click="selectedPaymentMethod = 'yunyinSignPay_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="yunyinSignPay_wechat" />
                    </template>
                </van-cell>

                <!-- 云印签支付-支付宝 -->
                <van-cell v-if="!isWeChat" title="支付宝支付" clickable
                    @click="selectedPaymentMethod = 'yunyinSignPay_alipay'">
                    <template #icon>
                        <van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
                    </template>
                    <template #right-icon>
                        <van-radio v-model="selectedPaymentMethod" name="yunyinSignPay_alipay" />
                    </template>
                </van-cell>

                <!-- 支付宝支付（官方SDK） -->
                <!-- <van-cell v-if="!isWeChat" 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, onMounted } from "vue";
import { useRouter } from "vue-router";
const { isWeChat } = useEnv();

const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
    id: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        required: true,
    },
});
const show = defineModel();

// 判断是否为开发环境
const isDevMode = computed(() => {
    return import.meta.env.MODE === 'development' || import.meta.env.DEV;
});

// 默认支付方式：开发环境优先使用测试支付，否则根据平台选择
// 非微信环境默认使用易支付-支付宝
const selectedPaymentMethod = ref(
    isDevMode.value ? "test" : (isWeChat.value ? "wechat" : "easypay_alipay")
);

onMounted(() => {
    if (!isDevMode.value) {
        // 非开发环境，根据平台选择支付方式
        if (isWeChat.value) {
            selectedPaymentMethod.value = "wechat";
        } else {
            // 默认使用易支付-支付宝
            selectedPaymentMethod.value = "easypay_alipay";
        }
    }
});

const orderNo = ref("");
const router = useRouter();
const discountPrice = ref(false); // 是否应用折扣

// 格式化支付时间
const formatPaymentTime = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 支付时间
const paymentTime = ref(formatPaymentTime(new Date()));

async function getPayment() {
    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) {
        // 测试支付模式：直接跳转到结果页面
        if (selectedPaymentMethod.value === "test" || selectedPaymentMethod.value === "test_empty") {
            orderNo.value = data.value.data.order_no;
            router.push({
                path: "/payment/result",
                query: { orderNo: data.value.data.order_no },
            });
        } else if (selectedPaymentMethod.value === "easypay_alipay") {
            // 易支付-支付宝：直接跳转到支付URL
            orderNo.value = data.value.data.order_no;
            const prepayUrl = data.value.data.prepay_id || data.value.data.prepay_data;
            if (prepayUrl) {
                // 直接跳转到易支付页面
                window.location.href = prepayUrl;
            } else {
                console.error("支付URL获取失败");
                showToast({
                    type: 'fail',
                    message: '获取支付链接失败，请重试'
                });
            }
        } else if (selectedPaymentMethod.value === "yunyinSignPay_wechat" || selectedPaymentMethod.value === "yunyinSignPay_alipay") {
            // 云印签支付：直接跳转到支付URL
            orderNo.value = data.value.data.order_no;
            const prepayUrl = data.value.data.prepay_id || data.value.data.prepay_data;
            if (prepayUrl) {
                // 直接跳转到云印签支付页面
                window.location.href = prepayUrl;
            } else {
                console.error("支付URL获取失败");
                showToast({
                    type: 'fail',
                    message: '获取支付链接失败，请重试'
                });
            }
        } else if (selectedPaymentMethod.value === "alipay") {
            orderNo.value = data.value.data.order_no;
            // 存储订单ID以便支付宝返回时获取
            const prepayUrl = data.value.data.prepay_id;
            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;
}
</script>

<style scoped></style>