feat: 商品详情的改造

pages/goods/components/GoodInfo/styles/index.scss

@@ -61,8 +61,8 @@
     margin-top: 12px;
 
     .facilities-grid {
-      display: grid;
+      display: flex;
-      grid-template-columns: repeat(3, 1fr);
+      flex-wrap: wrap;
       gap: 8px;
 
       .facility-item {

pages/goods/index.vue

@@ -15,9 +15,31 @@
         <!-- 商品信息组件 -->
         <GoodInfo :goodsData="goodsData" @showCalendar="showCalendar" />
 
-        <ModuleTitle title="购买须知" />
+        <view v-if="goodsData.commodityPurchaseInstruction">
+          <ModuleTitle
+            :title="goodsData.commodityPurchaseInstruction.templateTitle"
+          />
+          <view
+            class="use-notice"
+            v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+              .commodityPurchaseInstructionModuleEntityList"
+            :key="index"
+          >
+            <view class="module-item">
+              <view class="module-icon">
+                <image :src="moduleItem.moduleIcon" mode="aspectFit" />
+                <text class="module-title">{{ moduleItem.moduleTitle }}</text>
+              </view>
+              <text class="module-desc">{{ moduleItem.moduleContent }}</text>
+            </view>
+          </view>
+        </view>
 
-        <zero-markdown-view :markdown="goodsData.commodityTip" :aiMode='true' />
+        <zero-markdown-view
+          v-else
+          :markdown="goodsData.commodityTip"
+          :aiMode="true"
+        />
       </view>
     </scroll-view>
 

pages/goods/styles/index.scss

@@ -15,6 +15,50 @@ $button-hover-color: darken($button-color, 8%);
     flex-shrink: 0;
   }
 
+  // 使用须知样式
+  .use-notice {
+    margin-bottom: 16px;
+
+    .module-item {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      border-bottom: 1px solid #666;
+      padding: 12px 0;
+
+      .module-icon {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 8px;
+        flex-shrink: 0;
+
+        image {
+          width: 20px;
+          height: 20px;
+          object-fit: cover;
+          background-color: #f55726;
+          margin-right: 8px;
+        }
+
+        .module-title {
+          font-size: 14px;
+          color: #333;
+          text-align: center;
+          word-wrap: break-word;
+        }
+      }
+
+      .module-desc {
+        flex: 1;
+        font-size: 12px;
+        color: #666;
+        line-height: 1.5;
+        margin-top: 4px;
+      }
+    }
+  }
+
   .content-wrapper {
     flex: 1;
     height: 0; // 关键：让flex子项能够正确计算高度