feat: 套餐包含内容组件

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

@@ -15,7 +15,7 @@
           <uni-icons fontFamily="znicons" size="20" color="#171717">
             {{ zniconsMap[moduleItem.icon] }}
           </uni-icons>
-          <text class="font-size-12 color-171717 line-height-20">
+          <text class="ml-4 font-size-12 color-171717 line-height-20">
             {{ moduleItem.title }}
           </text>
         </view>

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

@@ -0,0 +1,38 @@
+<template>
+  <view class="border-box border-top-8 pl-12 pr-12">
+    <ModuleTitle
+        v-if="showTitle"
+        title="套餐包含内容"
+    />
+    <view class="flex flex-items-start flex-col"
+        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+        .commodityPurchaseInstructionModuleEntityList"
+        :key="index"
+    >
+        <text class="ml-4 font-size-14 color-171717 line-height-20">
+        {{ moduleItem.moduleTitle }}
+        </text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import { defineProps } from "vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/pages/goods/index.vue

@@ -34,6 +34,8 @@
           :nights="selectedDate.totalDays"
         />
 
+        <GoodPackage :goodsData="goodsData" />
+
         <!-- 商品设施组件 -->
         <GoodFacility :goodsData="goodsData" />
 
@@ -87,6 +89,7 @@ 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 GoodPackage from "./components/GoodPackage/index.vue";
 import { useSelectedDateStore } from "@/store";
 
 // 导航栏透明度 - 默认透明，随滚动变为不透明