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(
     [