短信验证调试成功

apps/h5-user/src/pages/ProductDetailPage.tsx

@@ -1,8 +1,10 @@
-import { useEffect, useState } from 'react';
+import type { ProductDetailContentDto } from '@dukang/shared-types';
 import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import AppImage from '@dukang/shared-ui/AppImage';
 import ProductCarousel from '../components/ProductCarousel';
 import { request } from '../lib/api';
+import { track } from '../lib/analytics';
 import { getProductCarouselImages, getProductDetailImages } from '../lib/product-images';
 import type { ProductImageSource } from '../lib/product-images';
 
@@ -11,13 +13,9 @@ type Product = ProductImageSource & {
   subtitle?: string;
   price: number;
   benefitAmount?: number;
+  detailContent?: ProductDetailContentDto | null;
 };
 
-const FEATURES = [
-  { icon: 'water_drop', title: '泉水酿造', desc: '甘冽清甜 灵动自然' },
-  { icon: 'grain', title: '精选五谷', desc: '传统比例 匠心发酵' },
-] as const;
-
 export default function ProductDetailPage() {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -28,6 +26,12 @@ export default function ProductDetailPage() {
     if (id) request<Product>('USER_H5', `/catalog/products/${id}`).then(setProduct);
   }, [id]);
 
+  useEffect(() => {
+    if (id) {
+      track('product_detail_view', { refType: 'PRODUCT', refId: id, productId: id });
+    }
+  }, [id]);
+
   useEffect(() => {
     function onScroll() {
       setHeaderSolid(window.scrollY > 100);
@@ -41,6 +45,8 @@ export default function ProductDetailPage() {
   const benefit = Number(product.benefitAmount ?? product.price);
   const carouselImages = getProductCarouselImages(product);
   const detailImages = getProductDetailImages(product);
+  const detail = product.detailContent ?? {};
+  const features = detail.features ?? [];
 
   return (
     <div className="product-detail-page">
@@ -107,31 +113,31 @@ export default function ProductDetailPage() {
             <h3>商品详情</h3>
           </div>
 
-          {detailImages[0] && (
-            <AppImage src={detailImages[0]} alt="" wrapperClassName="product-detail-banner" />
-          )}
+          {detailImages.map((src, index) => (
+            <AppImage key={`${src}-${index}`} src={src} alt="" wrapperClassName="product-detail-banner" />
+          ))}
 
-          <div className="product-detail-copy">
-            <div className="product-detail-story">
-              <h4>千年杜康 · 唯有此处</h4>
-              <p>
-                选自白水杜康核心产区，取山泉之灵气，集五谷之精华。古法酿造工艺，历经九九八十一道工序，方得这一口醇厚绵甜。
-              </p>
-            </div>
-
-            <div className="product-detail-features">
-              {FEATURES.map((f) => (
-                <div key={f.title} className="product-detail-feature">
-                  <span className="material-symbols-outlined">{f.icon}</span>
-                  <div className="product-detail-feature-title">{f.title}</div>
-                  <div className="product-detail-feature-desc">{f.desc}</div>
+          {(detail.storyTitle || detail.storyText || features.length > 0) && (
+            <div className="product-detail-copy">
+              {(detail.storyTitle || detail.storyText) && (
+                <div className="product-detail-story">
+                  {detail.storyTitle && <h4>{detail.storyTitle}</h4>}
+                  {detail.storyText && <p>{detail.storyText}</p>}
                 </div>
-              ))}
-            </div>
-          </div>
+              )}
 
-          {detailImages.length > 1 && (
-            <AppImage src={detailImages[1]} alt="" wrapperClassName="product-detail-banner" />
+              {features.length > 0 && (
+                <div className="product-detail-features">
+                  {features.map((f) => (
+                    <div key={`${f.title}-${f.icon}`} className="product-detail-feature">
+                      <span className="material-symbols-outlined">{f.icon}</span>
+                      <div className="product-detail-feature-title">{f.title}</div>
+                      <div className="product-detail-feature-desc">{f.desc}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
           )}
         </section>
       </main>