base

src/components/Payment.vue

@@ -0,0 +1,173 @@
+<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="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-else
+                    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, defineProps } from "vue";
+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 selectedPaymentMethod = ref(isWeChat.value ? "wechat" : "alipay");
+onMounted(() => {
+    if (isWeChat.value) {
+        selectedPaymentMethod.value = "wechat";
+    } else {
+        selectedPaymentMethod.value = "alipay";
+    }
+});
+const orderNo = ref("");
+const router = useRouter();
+const discountPrice = ref(false); // 是否应用折扣
+onMounted(() => {
+    if (isWeChat.value) {
+        selectedPaymentMethod.value = "wechat";
+    } else {
+        selectedPaymentMethod.value = "alipay";
+    }
+});
+
+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 === "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>