feat: 商品详情的接口对接

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

@@ -5,13 +5,14 @@
         title="套餐包含内容"
     />
     <view class="flex flex-items-start flex-col"
-        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
-        .commodityPurchaseInstructionModuleEntityList"
-        :key="index"
+        v-for="(item, index) in goodsData.commodityPackageConfig" :key="index"
     >
-        <text class="ml-4 font-size-14 color-171717 line-height-20">
-        {{ moduleItem.moduleTitle }}
-        </text>
+        <view class="title-row ml-4 mb-4">
+          <text class="left font-size-14 color-171717">{{ item.name }}</text>
+          <view class="sep" aria-hidden="true"></view>
+          <text class="right font-size-14 color-171717">{{ item.count }}</text>
+        </view>
+        
     </view>
   </view>
 </template>
@@ -34,5 +35,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-
+@import "./styles/index.scss";
 </style>

src/pages/goods/components/GoodPackage/styles/index.scss

@@ -0,0 +1,20 @@
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.title-row .left,
+.title-row .right {
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.title-row .sep {
+  flex: 1 1 auto;
+  height: 1px;
+  margin: 0 8px;
+  background-image: repeating-linear-gradient(to right, #CACFD8 0 10px, transparent 10px 16px);
+  background-repeat: repeat-x;
+  background-position: center;
+}

src/pages/goods/index.vue

@@ -34,7 +34,7 @@
           :nights="selectedDate.totalDays"
         />
 
-        <GoodPackage :goodsData="goodsData" />
+        <GoodPackage v-if="goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0" :goodsData="goodsData" />
 
         <!-- 商品设施组件 -->
         <GoodFacility :goodsData="goodsData" />