174 lines
5.4 KiB
Vue
174 lines
5.4 KiB
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="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>
|