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>
|