feat: 新增快速预定页面

2025-10-18 15:44:48 +08:00
parent d71e63b666
commit 4b066626cf
13 changed files with 624 additions and 9 deletions
--- a/src/pages-quick/list.vue
+++ b/src/pages-quick/list.vue
@@ -0,0 +1,118 @@
+<template>
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    use-virtual-list
+    :force-close-inner-list="true"
+    cell-height-mode="dynamic"
+    safe-area-inset-bottom
+    @query="queryList"
+  >
+    <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>
+
+          <!-- 几晚 -->
+          <text
+            class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
+          >
+            {{ 1 }}晚
+          </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>
+    </template>
+
+    <Card v-for="(item, index) in dataList" :key="index" :item="item" />
+  </z-paging>
+
+  <!-- 日历组件 -->
+  <Calender
+    :visible="calendarVisible"
+    mode="single"
+    :default-value="selectedDate"
+    @close="handleCalendarClose"
+    @select="handleDateSelect"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import Calender from "@/components/Calender/index.vue";
+import Tabs from "./components/Tabs/index.vue";
+import Card from "./components/Card/index.vue";
+import { quickBookingComponent } from "@/request/api/MainPageDataApi";
+import { DateUtils } from "@/utils";
+
+const calendarVisible = ref(false);
+const selectedDate = ref("");
+const dataList = ref([]);
+const paging = ref(null);
+
+const queryList = async (pageNum = 1, pageSize = 10) => {
+  try {
+    const res = await quickBookingComponent(DateUtils.formatDate());
+    console.log("API响应:", res.data.commodityGroupDTOList);
+
+    if (res && res.data && res.data.commodityGroupDTOList) {
+      const records = res.data.commodityGroupDTOList[0].commodityList;
+
+      // 完成数据加载，第二个参数表示是否还有更多数据
+      paging.value.complete(records);
+    } else {
+      // 没有数据
+      paging.value.complete([]);
+    }
+  } catch (error) {
+    console.error("查询列表失败:", error);
+    // 加载失败
+    paging.value.complete(false);
+  }
+};
+
+const handleTabChange = ({ index, item }) => {};
+
+// 处理日历关闭
+const handleCalendarClose = () => {
+  calendarVisible.value = false;
+};
+
+// 处理日期选择
+const handleDateSelect = (data) => {
+  selectedDate.value = data.date;
+  calendarVisible.value = false;
+  console.log("选择的日期:", data.date);
+};
+</script>
+
+<style scoped lang="scss">
+.nights {
+  padding: 3px 6px;
+}
+</style>