Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS

src/components/GoodDetail/index.vue

@@ -1,18 +1,17 @@
 <template>
-  <view>
+  <view class="mt-16">
-    <view v-if="goodsData.commodityPurchaseInstruction" class="use-notice">
+    <view v-if="goodsData.commodityPurchaseInstruction">
       <ModuleTitle
         v-if="showTitle"
         :title="goodsData.commodityPurchaseInstruction.templateTitle"
       />
       <view
-        class="use-notice-content"
         v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
           .commodityPurchaseInstructionModuleEntityList"
         :key="index"
       >
         <view
-          class="module-item"
+          class="flex flex-items-start flex-col pt-12 pb-12"
           :class="{
             'border-bottom':
               index <
@@ -21,13 +20,18 @@
                 1,
           }"
         >
-          <view class="module-icon">
+          <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
             <uni-icons fontFamily="znicons" size="20" color="#333">{{
               zniconsMap[moduleItem.moduleIcon]
             }}</uni-icons>
-            <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+            <text class="font-size-14 color-171717 line-height-20">{{
+              moduleItem.moduleTitle
+            }}</text>
           </view>
-          <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+          <text
+            class="flex-full font-size-12 color-525866 line-height-20 mt-4"
+            >{{ moduleItem.moduleContent }}</text
+          >
         </view>
       </view>
     </view>
@@ -57,6 +61,4 @@ const props = defineProps({
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-@import "./styles/index.scss";
-</style>

src/components/GoodDetail/styles/index.scss

@@ -1,40 +0,0 @@
-// 使用须知样式
-.use-notice {
-  margin: 16px 0;
-}
-
-.use-notice-content {
-  .module-item {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 12px 0;
-
-    .module-icon {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-right: 8px;
-      flex-shrink: 0;
-
-      .module-title {
-        font-size: $uni-font-size-base;
-        color: $uni-text-color;
-        text-align: center;
-        word-wrap: break-word;
-        margin-left: 4px;
-      }
-    }
-
-    .module-desc {
-      flex: 1;
-      font-size: $uni-font-size-sm;
-      color: #666;
-      line-height: 1.5;
-      margin-top: 4px;
-    }
-  }
-  .border-bottom {
-    border-bottom: 1px solid #f0f0f0;
-  }
-}

src/components/ModuleTitle/styles/index.scss

@@ -6,7 +6,7 @@
 
 .module-title {
   font-size: 18px;
-  color: #000;
+  color: #171717;
   position: relative;
   z-index: 1;
 }

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

@@ -10,14 +10,24 @@
         ]"
         @click="handleTabClick(index)"
       >
-        <text
+        <view class="absolute flex flex-items-center">
-          :class="[
+          <uni-icons
-            'font-size-16 font-500 color-525866 absolute',
+            class="icon mr-4"
-            activeIndex === index && 'tab-text-active',
+            fontFamily="znicons"
-          ]"
+            size="20"
-        >
+            :color="activeIndex === index ? '#2D91FF' : '#525866'"
-          {{ item.label }}
+          >
-        </text>
+            {{ 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: "0", icon: "zn-nav-room" },
-      { label: "门票", value: "1" },
+      { label: "门票", value: "1", icon: "zn-nav-ticket" },
-      { label: "餐食", value: "2" },
+      { label: "餐食", value: "2", icon: "zn-nav-meal" },
-      { label: "套餐", value: "3" },
+      // { 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,42 +10,44 @@
   >
     <template #top>
       <TopNavBar title="快速预定" />
-      <header>
-        <Tabs @change="handleTabChange" />
 
-        <!-- 选择入住、离店日期 -->
+      <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
+      <view
-            class="nights bg-E5E8EE border-box font-size-11 font-500 color-525866 rounded-50 ml-8 mr-8"
+        class="bg-white border-box flex flex-items-center p-12"
-          >
+        v-if="currentType === '0'"
-            {{ 1 }}晚
+      >
+        <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>
 

src/pages/goods/components/GoodFacility/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="mt-16">
+    <view
+      v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+        .commodityPurchaseInstructionModuleEntityList"
+      :key="index"
+    >
+      <view
+        class="flex flex-items-start flex-col pt-12 pb-12"
+        :class="{
+          'border-bottom':
+            index <
+            goodsData.commodityPurchaseInstruction
+              .commodityPurchaseInstructionModuleEntityList.length -
+              1,
+        }"
+      >
+        <view class="flex flex-items-center flex-row flex-shrink-0 mr-8">
+          <uni-icons fontFamily="znicons" size="20" color="#171717">{{
+            zniconsMap[moduleItem.moduleIcon]
+          }}</uni-icons>
+          <text class="font-size-12 color-171717 line-height-20">{{
+            moduleItem.moduleTitle
+          }}</text>
+        </view>
+        <text class="flex-full font-size-12 color-525866 line-height-20 mt-4">{{
+          moduleItem.moduleContent
+        }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { zniconsMap } from "@/static/fonts/znicons.js";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>

src/pages/goods/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="goods-container">
+  <view class="goods-container bg-gray">
     <TopNavBar title="商品详情" />
 
     <!-- 滚动区域 -->
@@ -29,6 +29,9 @@
           :nights="selectedDate.totalDays"
         />
 
+        <!-- 商品设施组件 -->
+        <GoodFacility :goodsData="goodsData" />
+
         <!-- 商品详情组件 -->
         <GoodDetail :goodsData="goodsData" />
       </view>
@@ -79,6 +82,7 @@ import Calender from "@/components/Calender/index.vue";
 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";
 
 const calendarVisible = ref(false);
 const goodsData = ref({});

src/static/scss/margin.scss

@@ -7,10 +7,18 @@
   margin: 4px;
 }
 
+.ml-4 {
+  margin-left: 4px;
+}
+
 .mr-4 {
   margin-right: 4px;
 }
 
+.mt-4 {
+  margin-top: 4px;
+}
+
 .mb-4 {
   margin-bottom: 4px;
 }
@@ -71,10 +79,22 @@
   margin-right: 12px;
 }
 
+.mt-16 {
+  margin-top: 16px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
 .ml-16 {
   margin-left: 16px;
 }
 
+.mr-16 {
+  margin-right: 16px;
+}
+
 .ml-20 {
   margin-left: 20px;
 }