feat: 快速预定交互调整

src/components/DateRangeSection/index.vue

@@ -7,14 +7,14 @@
       </text>
       <text
         class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
-        >1晚</text
+        >{{ selectedDate.totalDays }}晚</text
       >
       <text class="font-size-12 color-99A0AE ml-16">离店</text>
       <text class="font-size-12 color-171717 ml-4">
         {{ selectedDate.endDate }}
       </text>
     </view>
-    <view class="flex flex-items-center" @click="emit('click')">
+    <view class="flex flex-items-center" v-if="showBtn" @click="emit('click')">
       <text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
       <uni-icons type="right" size="15" color="#99A0AE" />
     </view>
@@ -35,6 +35,10 @@ const props = defineProps({
       };
     },
   },
+  showBtn: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["click"]);
 </script>

src/constant/type.js

@@ -0,0 +1,6 @@
+// 商品类型
+export const GOODS_TYPE = {
+  0: "客房",
+  1: "门票",
+  2: "餐饮",
+};

src/pages-booking/components/ConactSection/index.vue

@@ -12,7 +12,7 @@
       </view>
     </view>
     <view class="right">
-      <Stepper v-model="quantity" />
+      <Stepper v-model="count" />
     </view>
   </view>
 
@@ -27,6 +27,7 @@
       <view class="right">
         <input
           class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+          v-model="userFormList[0].contactPhone"
           placeholder="请输入联系手机"
           maxlength="11"
         />
@@ -36,10 +37,27 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, defineProps } from "vue";
 import Stepper from "@/components/Stepper/index.vue";
 
-const quantity = ref(1);
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Array,
+    default: () => [{ contactPhone: "" }],
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
 </script>
 
 <style></style>

src/pages-booking/components/FooterSection/index.vue

@@ -2,11 +2,11 @@
   <view
     class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
   >
-    <text class="font-size-14 font-500 color-525866 mr-4"> 在线付 </text>
     <text
       class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >88</text
     >
+      {{ 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" />
@@ -19,15 +19,47 @@
         class="icon"
         src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
       />
-      <text class="font-size-16 font-500 color-white">立即预定</text>
+      <text
+        class="font-size-16 font-500 color-white"
+        @click="emit('payClick', orderData)"
+        >立即支付</text
+      >
     </view>
   </view>
 </template>
 
 <script setup>
-import { defineEmits } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 
-const emit = defineEmits(["detailClick"]);
+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);
+  },
+});
+
+const totalAmt = computed(() => {
+  const { totalDays } = props.selectedDate;
+  const { specificationPrice } = props.orderData;
+
+  return count.value * Number(specificationPrice) * totalDays;
+});
 </script>
 
 <style scoped lang="scss">

src/pages-booking/components/UserSection/index.vue

@@ -5,20 +5,21 @@
         >入住信息</view
       >
       <view class="right">
-        <Stepper v-model="quantity" unit="间" />
+        <Stepper v-model="count" unit="间" />
       </view>
     </view>
 
     <view class="border-box pl-12 pr-12">
       <view
         class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
-        v-for="item in quantity"
+        v-for="item in count"
         :key="item"
       >
         <view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
         <view class="right">
           <input
             class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model="userFormList.visitorName"
             placeholder="请输入姓名"
             maxlength="11"
           />
@@ -30,6 +31,7 @@
         <view class="right">
           <input
             class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model="userFormList[0].contactPhone"
             placeholder="请输入联系手机"
             maxlength="11"
           />
@@ -40,10 +42,30 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 import Stepper from "@/components/Stepper/index.vue";
 
-const quantity = ref(1);
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Object,
+    default: () => ({
+      visitorName: "",
+      contactPhone: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
 </script>
 
 <style></style>

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"
+          <text class="font-size-12 color-525866 line-height-18"
-            >使用时间:周一至周日9:00-22:00</text
+            >取消政策及说明</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 { ref, watch, nextTick } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+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;
+  const { commodityId } = options;
-  selectedDate.value.startDate = startDate;
-  selectedDate.value.endDate = endDate;
-  selectedDate.value.totalDays = totalDays;
 
   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">

src/pages-quick/components/Card/index.vue

@@ -43,6 +43,7 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { useSelectedDateStore } from "@/store";
 
 // Props
 const props = defineProps({
@@ -71,10 +72,14 @@ const handleClick = ({ commodityId }) => {
   uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
 };
 
+const selectedDateStore = useSelectedDateStore();
 const handleBooking = ({ commodityId }) => {
   const { startDate, endDate, totalDays } = props.selectedDate;
+
+  selectedDateStore.setData({ startDate, endDate, totalDays });
+
   uni.navigateTo({
-    url: `/pages-booking/index?commodityId=${commodityId}&startDate=${startDate}&endDate=${endDate}&totalDays=${totalDays}`,
+    url: `/pages-booking/index?commodityId=${commodityId}`,
   });
 };
 </script>

src/pages/goods/index.vue

@@ -78,12 +78,9 @@ import {
   commodityDailyPriceList,
   orderPay,
 } from "@/request/api/GoodsApi";
-import { ThrottleUtils } from "@/utils";
+import { ThrottleUtils, DateUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
-
-// 导航栏透明度 - 默认透明，随滚动变为不透明
-const navOpacity = ref(0);
 import GoodInfo from "./components/GoodInfo/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
@@ -91,7 +88,10 @@ import LocationCard from "@/components/LocationCard/index.vue";
 import DateSelector from "./components/DateSelector/index.vue";
 import GoodDetail from "@/components/GoodDetail/index.vue";
 import GoodFacility from "./components/GoodFacility/index.vue";
+import { useSelectedDateStore } from "@/store";
 
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
 const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
@@ -105,22 +105,9 @@ const handleScroll = (e) => {
   navOpacity.value = Math.min(scrollTop / threshold, 1);
 };
 
-// 格式化日期为 yyyy-mm-dd 格式
-const formatDate = (date) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-
-// 获取今天和明天的日期
-const today = new Date();
-const tomorrow = new Date(today);
-tomorrow.setDate(today.getDate() + 1);
-
 const selectedDate = ref({
-  startDate: formatDate(today),
+  startDate: DateUtils.formatDate(), // 当天日期
-  endDate: formatDate(tomorrow),
+  endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
   totalDays: 1,
 });
 const priceData = ref([]);
@@ -302,7 +289,11 @@ const handleCloseConfirm = () => {
   console.log("关闭确认弹窗");
 };
 
+const selectedDateStore = useSelectedDateStore();
 onLoad(({ commodityId = "1950766939442774018" }) => {
+  // 从store中获取选中的日期
+  selectedDate.value = selectedDateStore.selectedDate;
+
   goodsInfo({ commodityId });
 });
 
@@ -321,6 +312,8 @@ const handleDateSelect = (data) => {
     totalDays: data.totalDays,
   };
 
+  selectedDateStore.setData(selectedDate.value);
+
   // 根据商品类型计算价格
   if (goodsData.value.commodityTypeCode === "0") {
     // 酒店类型：计算dateRange总价格，排除最后一天（同一天除外）

src/store/modules/index.js

@@ -1,3 +1,4 @@
 import { useAppStore } from "./app";
+import { useSelectedDateStore } from "./selectedDate";
 
-export { useAppStore };
+export { useAppStore, useSelectedDateStore };

src/store/modules/selectedDate.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const useSelectedDateStore = defineStore("selectedDate", {
+  state() {
+    return {
+      selectedDate: {},
+    };
+  },
+
+  actions: {
+    setData(data) {
+      this.selectedDate = data;
+    },
+  },
+
+  unistorage: true,
+});

src/utils/index.js

@@ -319,6 +319,18 @@ export class DateUtils {
   }
 }
 
+/**
+ * 验证手机号工具类
+ * @param {string} phone - 手机号字符串
+ * @returns {boolean} 是否为有效手机号
+ */
+export class PhoneUtils {
+  static validatePhone(phone) {
+    const phoneRegex = /^1[3-9]\d{9}$/;
+    return phoneRegex.test(phone);
+  }
+}
+
 // 默认导出所有工具类
 export default {
   IdUtils,
@@ -328,4 +340,5 @@ export default {
   DateUtils,
   DebounceUtils,
   ThrottleUtils,
+  PhoneUtils,
 };