From 34bb6c094c6d0ee0cc1f6ad7b82ef5cc1f542975 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Sat, 6 Sep 2025 12:47:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=9A=84=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GoodInfo/styles/index.scss     |  4 +-
 pages/goods/index.vue                         | 26 ++++++++++-
 pages/goods/styles/index.scss                 | 44 +++++++++++++++++++
 3 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/pages/goods/components/GoodInfo/styles/index.scss b/pages/goods/components/GoodInfo/styles/index.scss
index 271933e..978e97b 100644
--- a/pages/goods/components/GoodInfo/styles/index.scss
+++ b/pages/goods/components/GoodInfo/styles/index.scss
@@ -61,8 +61,8 @@
     margin-top: 12px;
 
     .facilities-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      display: flex;
+      flex-wrap: wrap;
       gap: 8px;
 
       .facility-item {
diff --git a/pages/goods/index.vue b/pages/goods/index.vue
index 0149e9e..295f3c5 100644
--- a/pages/goods/index.vue
+++ b/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>
 
diff --git a/pages/goods/styles/index.scss b/pages/goods/styles/index.scss
index d73d2cd..128ea5f 100644
--- a/pages/goods/styles/index.scss
+++ b/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子项能够正确计算高度