From 7a827e1d92a07228fed800521ab0a1f72d6155cf Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 21 Oct 2025 20:58:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BF=AB=E9=80=9F=E9=A2=84=E5=AE=9A?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages-quick/components/Tabs/index.vue     | 35 ++++---
 .../components/Tabs/styles/index.scss         |  5 +
 src/pages-quick/list.vue                      | 95 +++++++++++--------
 3 files changed, 85 insertions(+), 50 deletions(-)

diff --git a/src/pages-quick/components/Tabs/index.vue b/src/pages-quick/components/Tabs/index.vue
index 65f1c51..ffc4d5d 100644
--- a/src/pages-quick/components/Tabs/index.vue
+++ b/src/pages-quick/components/Tabs/index.vue
@@ -10,14 +10,24 @@
         ]"
         @click="handleTabClick(index)"
       >
-        <text
-          :class="[
-            'font-size-16 font-500 color-525866 absolute',
-            activeIndex === index && 'tab-text-active',
-          ]"
-        >
-          {{ item.label }}
-        </text>
+        <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 ',
+              activeIndex === index && 'tab-text-active',
+            ]"
+          >
+            {{ item.label }}
+          </text>
+        </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: {
diff --git a/src/pages-quick/components/Tabs/styles/index.scss b/src/pages-quick/components/Tabs/styles/index.scss
index b84aea7..304979d 100644
--- a/src/pages-quick/components/Tabs/styles/index.scss
+++ b/src/pages-quick/components/Tabs/styles/index.scss
@@ -7,6 +7,11 @@
   height: 100%;
 }
 
+.icon {
+  height: 20px;
+  width: 20px;
+}
+
 .tab-item-active {
   &::before {
     content: "";
diff --git a/src/pages-quick/list.vue b/src/pages-quick/list.vue
index 66bac5b..598165e 100644
--- a/src/pages-quick/list.vue
+++ b/src/pages-quick/list.vue
@@ -10,42 +10,44 @@
   >
     <template #top>
       <TopNavBar title="快速预定" />
-      <header>
-        <Tabs @change="handleTabChange" />
 
-        <!-- 选择入住、离店日期 -->
-        <view class="bg-white border-box flex flex-items-center p-12">
-          <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() }}
-            </text>
-          </view>
+      <Tabs @change="handleTabChange" />
 
-          <!-- 几晚 -->
-          <text
-            class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
-          >
-            {{ 1 }}晚
+      <!-- 选择入住、离店日期 -->
+      <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">
+            {{ selectedDate.startDate }}
           </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() }}
-            </text>
-          </view>
-
-          <!-- 日期图标 -->
-          <uni-icons
-            class="ml-auto"
-            type="calendar"
-            size="24"
-            color="#2D91FF"
-            @click="calendarVisible = true"
-          />
         </view>
-      </header>
+
+        <!-- 几晚 -->
+        <text
+          class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
+        >
+          {{ 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">
+            {{ selectedDate.endDate }}
+          </text>
+        </view>
+
+        <!-- 日期图标 -->
+        <uni-icons
+          class="ml-auto"
+          type="calendar"
+          size="24"
+          color="#2D91FF"
+          @click="calendarVisible = true"
+        />
+      </view>
     </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>