101 lines
3.5 KiB
Vue
101 lines
3.5 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 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 props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
id: {
|
||
type: String,
|
||
required: true,
|
||
}
|
||
})
|
||
const show = defineModel()
|
||
const orderId = ref("")
|
||
const selectedPaymentMethod = ref('alipay')
|
||
const discountPrice = ref(false) // 是否应用折扣
|
||
onMounted(() => {
|
||
// let m = localStorage.getItem("m")
|
||
// let hour = "12"
|
||
// if (m === "shifenliangzai") {
|
||
// hour = "00"
|
||
// }
|
||
// const currentDate = new Date()
|
||
// const startDate = new Date(`2025-01-01T${hour}:00:00+08:00`) // 2025年1月1日中午12点
|
||
// const endDate = new Date('2025-01-02T12:00:00+08:00') // 2025年1月2日中午12点
|
||
// console.log(startDate, endDate)
|
||
// if (currentDate >= startDate && currentDate <= endDate) {
|
||
// discountPrice.value = true // 在折扣时间范围内，启用折扣
|
||
// } else {
|
||
// discountPrice.value = false // 否则不启用折扣
|
||
// }
|
||
})
|
||
|
||
async function getPayment() {
|
||
const { data, error } = await useApiFetch('/pay/payment')
|
||
.post({
|
||
id: props.id,
|
||
pay_method: selectedPaymentMethod.value
|
||
})
|
||
.json()
|
||
|
||
if (data.value && !error.value) {
|
||
orderId.value = data.value.data.order_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();
|
||
}
|
||
show.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped></style>
|