feat: 商品详情支持富文本展示

src/pages-service/tickets/components/ProductDetail.vue

@@ -35,7 +35,15 @@
         :class="section === detailSections[detailSections.length - 1] ? 'mb-[20px]' : ''"
       >
         <text class="block text-[16px] font-semibold text-slate-800">{{ section.title }}</text>
-        <text class="mt-[10px] block whitespace-pre-wrap text-[14px] leading-[22px] text-slate-600">{{ section.content }}</text>
+        <view class="mt-[10px] text-[14px] leading-[22px] text-slate-600">
+          <MpHtml
+            :content="section.content || ''"
+            :preview-img="false"
+            :show-img-menu="false"
+            :set-title="false"
+            :tag-style="detailContentTagStyle"
+          />
+        </view>
       </view>
     </scroll-view>
 
@@ -55,6 +63,7 @@
 
 <script setup>
 import { computed } from "vue";
+import MpHtml from "@/uni_modules/zero-markdown-view/components/mp-html/mp-html.vue";
 import TicketMediaSwiper from "./TicketMediaSwiper.vue";
 
 const props = defineProps({
@@ -62,6 +71,16 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["buy"]);
+const detailContentTagStyle = {
+  p: "margin: 8px 0; line-height: 1.7; color: #475569; word-break: break-word;",
+  img: "max-width: 100%; height: auto; display: block; margin: 10px auto;",
+  ul: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  ol: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  li: "margin: 4px 0; line-height: 1.7; color: #475569;",
+  blockquote:
+    "margin: 10px 0; padding: 8px 12px; border-left: 3px solid #cbd5e1; background-color: #f8fafc; color: #64748b;",
+  strong: "font-weight: 700; color: #334155;",
+};
 const productImages = computed(() => [
   ...new Set(
     [

src/pages-service/tickets/view-contract.test.mjs

@@ -239,6 +239,24 @@ test("product detail is an independent prototype-aligned page", async () => {
   assert.match(component, /section\.sectionCode/);
   assert.match(component, /section\.title/);
   assert.match(component, /section\.content/);
+  assert.match(
+    component,
+    /import MpHtml from "@\/uni_modules\/zero-markdown-view\/components\/mp-html\/mp-html\.vue"/
+  );
+  assert.match(component, /<MpHtml/);
+  assert.match(component, /:content="section\.content \|\| ''"/);
+  assert.match(component, /:preview-img="false"/);
+  assert.match(component, /:show-img-menu="false"/);
+  assert.match(component, /:set-title="false"/);
+  assert.match(component, /:tag-style="detailContentTagStyle"/);
+  assert.match(
+    component,
+    /img:\s*"[^"]*max-width:\s*100%[^"]*height:\s*auto/
+  );
+  assert.doesNotMatch(
+    component,
+    /<text[^>]*>\{\{\s*section\.content\s*\}\}<\/text>/
+  );
   assert.match(
     component,
     /sort\(\s*\(left, right\) => Number\(left\.sortOrder/