diff --git a/src/pages-booking/components/FooterSection/index.vue b/src/pages-booking/components/FooterSection/index.vue
index 687c68b..92aa249 100644
--- a/src/pages-booking/components/FooterSection/index.vue
+++ b/src/pages-booking/components/FooterSection/index.vue
@@ -28,8 +28,9 @@
 </template>
 
 <script setup>
-import { computed, defineProps, defineEmits } from "vue";
+import { computed, defineProps, defineEmits, ref, onMounted, watch } from "vue";
 import { DebounceUtils } from "@/utils";
+import { preOrder } from "@/request/api/OrderApi";
 
 const props = defineProps({
   modelValue: {
@@ -54,12 +55,35 @@ const count = computed({
   },
 });
 
-const totalAmt = computed(() => {
-  const { totalDays } = props.selectedDate;
-  const { specificationPrice } = props.orderData;
-  return count.value * Number(specificationPrice) * totalDays;
+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); 
diff --git a/src/pages-booking/index.vue b/src/pages-booking/index.vue
index ff6ca0b..13282a9 100644
--- a/src/pages-booking/index.vue
+++ b/src/pages-booking/index.vue
@@ -79,6 +79,7 @@
 
     <!-- 底部 -->
     <FooterSection
+      v-if="Object.keys(orderData).length"
       v-model="quantity"
       :selectedDate="selectedDate"
       :orderData="orderData"