feat: 快速预定功能调整

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

@@ -10,9 +10,18 @@
         ]"
         @click="handleTabClick(index)"
       >
+        <view class="absolute flex flex-items-center">
+          <uni-icons
+            class="icon mr-4"
+            fontFamily="znicons"
+            size="20"
+            :color="activeIndex === index ? '#2D91FF' : '#525866'"
+          >
+            {{ zniconsMap[item.icon] }}
+          </uni-icons>
           <text
             :class="[
-            'font-size-16 font-500 color-525866 absolute',
+              'font-size-16 font-500 color-525866 ',
               activeIndex === index && 'tab-text-active',
             ]"
           >
@@ -20,6 +29,7 @@
           </text>
         </view>
       </view>
+    </view>
 
     <!-- 下划线指示器 -->
     <view
@@ -45,6 +55,7 @@ import {
   watch,
   getCurrentInstance,
 } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons";
 
 // 获取组件实例
 const instance = getCurrentInstance();
@@ -54,10 +65,10 @@ const props = defineProps({
   tabs: {
     type: Array,
     default: () => [
-      { label: "客房", value: "0" },
-      { label: "门票", value: "1" },
-      { label: "餐食", value: "2" },
-      { label: "套餐", value: "3" },
+      { label: "客房", value: "0", icon: "zn-nav-room" },
+      { label: "门票", value: "1", icon: "zn-nav-ticket" },
+      { label: "餐食", value: "2", icon: "zn-nav-meal" },
+      // { label: "套餐", value: "3", icon: "zn-package" },
     ],
   },
   defaultActive: {

src/pages-quick/components/Tabs/styles/index.scss

@@ -7,6 +7,11 @@
   height: 100%;
 }
 
+.icon {
+  height: 20px;
+  width: 20px;
+}
+
 .tab-item-active {
   &::before {
     content: "";

src/pages-quick/list.vue

@@ -10,15 +10,18 @@
   >
     <template #top>
       <TopNavBar title="快速预定" />
-      <header>
+
       <Tabs @change="handleTabChange" />
 
       <!-- 选择入住、离店日期 -->
-        <view class="bg-white border-box flex flex-items-center p-12">
+      <view
+        class="bg-white border-box flex flex-items-center p-12"
+        v-if="currentType === '0'"
+      >
         <view class="in flex flex-items-center">
           <text class="font-size-11 font-500 color-99A0AE mr-4">入住</text>
           <text class="font-size-14 font-500 color-171717">
-              {{ DateUtils.formatDate() }}
+            {{ selectedDate.startDate }}
           </text>
         </view>
 
@@ -26,13 +29,13 @@
         <text
           class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
         >
-            {{ 1 }}晚
+          {{ selectedDate.totalDays }}晚
         </text>
 
         <view class="out flex flex-items-center">
           <text class="font-size-11 font-500 color-99A0AE mr-4">离店</text>
           <text class="font-size-14 font-500 color-171717">
-              {{ DateUtils.formatDate() }}
+            {{ selectedDate.endDate }}
           </text>
         </view>
 
@@ -45,7 +48,6 @@
           @click="calendarVisible = true"
         />
       </view>
-      </header>
     </template>
 
     <Card v-for="(item, index) in dataList" :key="index" :item="item" />
@@ -54,10 +56,10 @@
   <!-- 日历组件 -->
   <Calender
     :visible="calendarVisible"
-    mode="single"
+    mode="range"
     :default-value="selectedDate"
     @close="handleCalendarClose"
-    @select="handleDateSelect"
+    @range-select="handleDateSelect"
   />
 </template>
 
@@ -71,9 +73,15 @@ import { quickBookingComponent } from "@/request/api/MainPageDataApi";
 import { DateUtils } from "@/utils";
 
 const calendarVisible = ref(false);
-const selectedDate = ref("");
+const selectedDate = ref({
+  startDate: DateUtils.formatDate(), // 当天日期
+  endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
+  totalDays: 1,
+});
 const dataList = ref([]);
+const commodityGroupDTOList = ref([]);
 const paging = ref(null);
+const currentType = ref("0"); // 当前选中类型
 
 const queryList = async (pageNum = 1, pageSize = 10) => {
   try {
@@ -81,6 +89,7 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
     console.log("API响应:", res.data.commodityGroupDTOList);
 
     if (res && res.data && res.data.commodityGroupDTOList) {
+      commodityGroupDTOList.value = res.data.commodityGroupDTOList;
       const records = res.data.commodityGroupDTOList[0].commodityList;
 
       // 完成数据加载，第二个参数表示是否还有更多数据
@@ -96,7 +105,17 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
   }
 };
 
-const handleTabChange = ({ index, item }) => {};
+const handleTabChange = ({ item }) => {
+  console.log("item", item.value);
+  currentType.value = item.value;
+  // 从列表中找到对应的商品列表
+  const { commodityList } =
+    commodityGroupDTOList.value.find(
+      (i) => i.commodityTypeCode === item.value
+    ) || {};
+  dataList.value = commodityList || [];
+  paging.value.complete(commodityList);
+};
 
 // 处理日历关闭
 const handleCalendarClose = () => {
@@ -105,9 +124,9 @@ const handleCalendarClose = () => {
 
 // 处理日期选择
 const handleDateSelect = (data) => {
-  selectedDate.value = data.date;
+  selectedDate.value = data;
   calendarVisible.value = false;
-  console.log("选择的日期:", data.date);
+  console.log("选择的日期:", data);
 };
 </script>