118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<template>
|
|
<view
|
|
class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
|
|
>
|
|
<text
|
|
class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
|
|
>
|
|
{{ totalAmt }}
|
|
</text>
|
|
<!-- <view class="flex flex-items-center" @click="emit('detailClick')">
|
|
<text class="font-size-12 color-A3A3A3 mr-4">明细</text>
|
|
<uni-icons type="up" size="16" color="#A3A3A3" />
|
|
</view> -->
|
|
<view
|
|
class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
|
|
@click="handleBooking"
|
|
>
|
|
<image
|
|
class="icon"
|
|
src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
|
|
/>
|
|
<text
|
|
class="font-size-16 font-500 color-white"
|
|
>立即支付</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
|
|
import { DebounceUtils } from "@/utils";
|
|
import { preOrder } from "@/request/api/OrderApi";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
orderData: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
selectedDate: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["detailClick", "payClick"]);
|
|
const count = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => {
|
|
emit("update:modelValue", val);
|
|
},
|
|
});
|
|
|
|
watch(
|
|
() => count.value,
|
|
(newVal, oldVal) => {
|
|
if (newVal !== oldVal) {
|
|
preOrderPay();
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
preOrderPay();
|
|
});
|
|
|
|
const totalAmt = ref(props.orderData.specificationPrice);
|
|
|
|
const preOrderPay = async () => {
|
|
preOrder({
|
|
"commodityId": props.orderData.commodityId,
|
|
"purchaseAmount": count.value,
|
|
"checkInData": props.selectedDate.startDate,
|
|
"checkOutData": props.selectedDate.endDate,
|
|
}).then((res) => {
|
|
console.log("预支付金额计算结果:", res);
|
|
totalAmt.value = res.data.payAmt;
|
|
}).catch((err) => {
|
|
console.error("预支付金额计算失败:", err);
|
|
});
|
|
}
|
|
|
|
const handleBooking = DebounceUtils.createDebounce(() => {
|
|
emit("payClick", props.orderData);
|
|
}, 1000);
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.booking-footer {
|
|
border-radius: 15px 15px 0 0;
|
|
padding: 12px 12px 42px;
|
|
}
|
|
|
|
.amt {
|
|
&::before {
|
|
content: "¥";
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 120px;
|
|
height: 48px;
|
|
background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
|
|
}
|
|
|
|
.icon {
|
|
height: 48px;
|
|
width: 34px;
|
|
}
|
|
</style>
|