feat: 快速预定交互调整

src/pages-booking/index.vue

@@ -7,7 +7,7 @@
       :shadow="false"
     >
       <template #title>
-        {{ title }}
+        {{ GOODS_TYPE[orderData.commodityTypeCode] }}
       </template>
     </TopNavBar>
 
@@ -18,6 +18,7 @@
         <DateRangeSection
           v-if="orderData.commodityTypeCode === '0'"
           :selectedDate="selectedDate"
+          :showBtn="true"
           @click="navigateToDetail(orderData)"
         />
 
@@ -45,8 +46,8 @@
         <view
           class="border-box flex flex-items-center flex-justify-between pt-12"
         >
-          <text class="font-size-12 color-43669A line-height-18"
-            >使用时间:周一至周日9:00-22:00</text
+          <text class="font-size-12 color-525866 line-height-18"
+            >取消政策及说明</text
           >
           <view class="flex flex-items-center">
             <text
@@ -60,14 +61,28 @@
       </view>
 
       <!-- 非酒店类型 -->
-      <ContactSection v-if="orderData.commodityTypeCode !== '0'" />
+      <ContactSection
+        v-if="orderData.commodityTypeCode !== '0'"
+        v-model="quantity"
+        :userFormList="userFormList"
+      />
 
       <!-- 酒店类型 -->
-      <UserSection v-if="orderData.commodityTypeCode === '0'" />
+      <UserSection
+        v-if="orderData.commodityTypeCode === '0'"
+        v-model="quantity"
+        :userFormList="userFormList"
+      />
     </view>
 
     <!-- 底部 -->
-    <FooterSection @detailClick="detailVisible = true" />
+    <FooterSection
+      v-model="quantity"
+      :selectedDate="selectedDate"
+      :orderData="orderData"
+      @detailClick="detailVisible = true"
+      @payClick="handlePayClick"
+    />
 
     <!-- 取消政策弹窗 -->
     <RefundPopup v-model="refundVisible" :orderData="orderData" />
@@ -78,18 +93,20 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { ref, watch, nextTick } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
 import TopNavBar from "@/components/TopNavBar/index.vue";
-import DateRangeSection from "./components/DateRangeSection/index.vue";
+import DateRangeSection from "@/components/DateRangeSection/index.vue";
 import ContactSection from "./components/ConactSection/index.vue";
 import UserSection from "./components/UserSection/index.vue";
 import RefundPopup from "@/components/RefundPopup/index.vue";
 import DetailPopup from "@/components/DetailPopup/index.vue";
 import FooterSection from "./components/FooterSection/index.vue";
 import { goodsDetail } from "@/request/api/GoodsApi";
+import { useSelectedDateStore } from "@/store";
+import { GOODS_TYPE } from "@/constant/type";
+import { PhoneUtils } from "@/utils";
 
-const title = ref("预约");
 const refundVisible = ref(false);
 const detailVisible = ref(false);
 const orderData = ref({});
@@ -98,16 +115,61 @@ const selectedDate = ref({
   endDate: "",
   totalDays: 1,
 });
+const quantity = ref(1);
+
+// 工具函数
+const createEmptyUserForm = () => ({ visitorName: "", contactPhone: "" });
+const userFormList = ref([createEmptyUserForm()]);
+const isDeleting = ref(false); // 标志位，防止删除时watch冲突
+
+// 监听 quantity 变化，动态调整 userFormList
+watch(
+  quantity,
+  async (newQuantity) => {
+    // 非酒店类型，不处理
+    if (orderData.value.commodityTypeCode !== "0") {
+      return;
+    }
+
+    // 如果正在执行删除操作，跳过watch逻辑
+    if (isDeleting.value) {
+      isDeleting.value = false;
+      return;
+    }
+
+    const currentLength = userFormList.value.length;
+
+    if (newQuantity > currentLength) {
+      // 数量增加，添加新的表单项
+      const newForms = Array.from({ length: newQuantity - currentLength }, () =>
+        createEmptyUserForm()
+      );
+      userFormList.value.push(...newForms);
+    } else if (newQuantity < currentLength) {
+      // 数量减少，删除多余的表单项
+      userFormList.value.splice(newQuantity);
+    }
+
+    // 等待DOM更新完成
+    await nextTick();
+  },
+  { immediate: false }
+);
 
 onLoad((options) => {
-  const { commodityId, startDate, endDate, totalDays } = options;
-  selectedDate.value.startDate = startDate;
-  selectedDate.value.endDate = endDate;
-  selectedDate.value.totalDays = totalDays;
+  const { commodityId } = options;
 
   getGoodsDetail(commodityId);
 });
 
+onShow(() => {
+  const selectedDateStore = useSelectedDateStore();
+
+  selectedDate.value.startDate = selectedDateStore.selectedDate.startDate;
+  selectedDate.value.endDate = selectedDateStore.selectedDate.endDate;
+  selectedDate.value.totalDays = selectedDateStore.selectedDate.totalDays;
+});
+
 const getGoodsDetail = async (commodityId) => {
   const res = await goodsDetail({ commodityId });
 
@@ -127,6 +189,19 @@ const navigateToDetail = ({ commodityId }) => {
     url: `/pages/goods/index?commodityId=${commodityId}`,
   });
 };
+
+// 处理支付点击事件
+const handlePayClick = (orderData) => {
+  console.log("处理支付点击事件", userFormList.value);
+  // 校验手机号
+  if (!PhoneUtils.validatePhone(userFormList.value[0].contactPhone)) {
+    uni.showToast({
+      title: "请输入正确的手机号",
+      icon: "none",
+    });
+    return;
+  }
+};
 </script>
 
 <style scoped lang="scss">