v3.5.4版本提交

apps/mini-user/src/pages/product-detail/index.tsx

@@ -8,7 +8,7 @@ import Taro, {
   useShareAppMessage,
   useShareTimeline,
 } from '@tarojs/taro';
-import type { ProductDetailContentDto } from '@dukang/shared-types';
+import type { ProductDetailContentDto, ProductSkuDto, ProductSpecAttrDto } from '@dukang/shared-types';
 import PageShell from '../../components/PageShell';
 import PageNavBar from '../../components/PageNavBar';
 import ProductCarousel from '../../components/ProductCarousel';
@@ -47,8 +47,39 @@ type Product = ProductImageSource & {
   allowOnSitePickup?: boolean;
   allowOnlinePurchase?: boolean;
   allowCrossCityDelivery?: boolean;
+  specEnabled?: boolean;
+  specAttrs?: ProductSpecAttrDto[];
+  skus?: ProductSkuDto[];
+  defaultSkuId?: string;
+  saleUnit?: 'BOTTLE' | 'BOX';
 };
 
+function findSku(
+  skus: ProductSkuDto[],
+  selected: Record<string, string>,
+  attrs: ProductSpecAttrDto[],
+): ProductSkuDto | undefined {
+  const valueIds = attrs.map((a) => selected[a.id]).filter(Boolean);
+  if (valueIds.length !== attrs.length) return undefined;
+  const key = [...valueIds].sort().join('_');
+  return skus.find((s) => [...s.specValueIds].sort().join('_') === key);
+}
+
+function isValueAvailable(
+  skus: ProductSkuDto[],
+  attrs: ProductSpecAttrDto[],
+  selected: Record<string, string>,
+  attrId: string,
+  valueId: string,
+): boolean {
+  const trial = { ...selected, [attrId]: valueId };
+  const partialIds = attrs.map((a) => trial[a.id]).filter(Boolean);
+  return skus.some((s) => {
+    if (s.status !== 'ON_SALE') return false;
+    return partialIds.every((id) => s.specValueIds.includes(id));
+  });
+}
+
 export default function ProductDetailPage() {
   const router = useRouter();
   const productId = router.params.id ?? '';
@@ -58,6 +89,7 @@ export default function ProductDetailPage() {
   );
   const [product, setProduct] = useState<Product | null>(null);
   const [headerSolid, setHeaderSolid] = useState(false);
+  const [selected, setSelected] = useState<Record<string, string>>({});
 
   usePageScroll(({ scrollTop }) => {
     setHeaderSolid(scrollTop > 100);
@@ -72,7 +104,25 @@ export default function ProductDetailPage() {
           toast('商品不存在或暂未开放');
           return;
         }
-        setProduct(normalizeFulfillmentFlags(p));
+        const normalized = normalizeFulfillmentFlags(p);
+        setProduct(normalized);
+        const attrs = p.specAttrs ?? [];
+        const skus = p.skus ?? [];
+        const def =
+          skus.find((s) => s.id === p.defaultSkuId) ||
+          skus.find((s) => s.isDefault && s.status === 'ON_SALE') ||
+          skus.find((s) => s.status === 'ON_SALE') ||
+          skus[0];
+        if (def && attrs.length) {
+          const next: Record<string, string> = {};
+          for (const attr of attrs) {
+            const hit = attr.values.find((v) => def.specValueIds.includes(v.id));
+            if (hit) next[attr.id] = hit.id;
+          }
+          setSelected(next);
+        } else {
+          setSelected({});
+        }
       })
       .catch((e) => {
         setProduct(null);
@@ -84,11 +134,38 @@ export default function ProductDetailPage() {
     loadProduct();
   }, [loadProduct]);
 
-  // 登录后返回详情须带 token 重拉，否则白名单商品会一直空白
   useDidShow(() => {
     loadProduct();
   });
 
+  const attrs = product?.specAttrs ?? [];
+  const skus = product?.skus ?? [];
+  const specEnabled = !!(product?.specEnabled && attrs.length > 0);
+  const activeSku = useMemo(() => {
+    if (!product) return undefined;
+    if (!specEnabled) {
+      return (
+        skus.find((s) => s.id === product.defaultSkuId) ||
+        skus.find((s) => s.isDefault) ||
+        skus.find((s) => s.status === 'ON_SALE') ||
+        skus[0]
+      );
+    }
+    return findSku(skus, selected, attrs);
+  }, [product, specEnabled, skus, selected, attrs]);
+
+  const displayPrice = activeSku ? Number(activeSku.price) : Number(product?.price ?? 0);
+  const displayBenefit = activeSku
+    ? Number(activeSku.benefitAmount)
+    : Number(product?.benefitDisplay ?? product?.benefitAmount ?? product?.price ?? 0);
+  const fulfillment = activeSku
+    ? {
+        allowOnlinePurchase: activeSku.allowOnlinePurchase,
+        allowCrossCityDelivery: activeSku.allowCrossCityDelivery,
+        allowOnSitePickup: activeSku.allowOnSitePickup,
+      }
+    : product;
+
   const sharePayload = useMemo(
     () =>
       buildSceneSharePayload('productDetail', {
@@ -118,9 +195,23 @@ export default function ProductDetailPage() {
     Taro.switchTab({ url: '/pages/home/index' });
   }
 
+  function ensureSkuSelected(): string | null {
+    if (!specEnabled) return activeSku?.id ?? product?.defaultSkuId ?? null;
+    if (!activeSku || activeSku.status !== 'ON_SALE') {
+      toast('请选择完整规格');
+      return null;
+    }
+    return activeSku.id;
+  }
+
   async function goBuy() {
     if (!productId) return;
-    const returnPath = `/pages/order-confirm/index?productId=${productId}&qty=2`;
+    const skuId = ensureSkuSelected();
+    if (specEnabled && !skuId) return;
+    const qty = activeSku?.saleUnit === 'BOX' ? 1 : 2;
+    const qs = [`productId=${productId}`, `qty=${qty}`];
+    if (skuId) qs.push(`skuId=${skuId}`);
+    const returnPath = `/pages/order-confirm/index?${qs.join('&')}`;
     if (!isLoggedIn()) {
       goLogin(returnPath);
       return;
@@ -132,7 +223,12 @@ export default function ProductDetailPage() {
 
   async function goOnSitePickup() {
     if (!productId) return;
-    const returnPath = `/pages/order-confirm-pickup/index?productId=${productId}&qty=1`;
+    const skuId = ensureSkuSelected();
+    if (specEnabled && !skuId) return;
+    const qty = activeSku?.saleUnit === 'BOX' ? 1 : 1;
+    const qs = [`productId=${productId}`, `qty=${qty}`];
+    if (skuId) qs.push(`skuId=${skuId}`);
+    const returnPath = `/pages/order-confirm-pickup/index?${qs.join('&')}`;
     if (!isLoggedIn()) {
       goLogin(returnPath);
       return;
@@ -151,9 +247,8 @@ export default function ProductDetailPage() {
     );
   }
 
-  const allowOnline = canBuyOnline(product);
-  const allowOnSite = canPickupOnSite(product);
-  const benefit = Number(product.benefitDisplay ?? product.benefitAmount ?? product.price);
+  const allowOnline = canBuyOnline(fulfillment ?? {});
+  const allowOnSite = canPickupOnSite(fulfillment ?? {});
   const carouselImages = getProductCarouselImages(product);
   const detailImages = getProductDetailImages(product);
   const detail = product.detailContent ?? {};
@@ -177,12 +272,45 @@ export default function ProductDetailPage() {
         <View className="product-detail-info">
           <View className="product-detail-price">
             <Text className="product-detail-price-symbol">¥</Text>
-            <Text className="product-detail-price-value">{Number(product.price).toFixed(2)}</Text>
+            <Text className="product-detail-price-value">{displayPrice.toFixed(2)}</Text>
           </View>
           <Text className="product-detail-name">{product.name}</Text>
           {product.subtitle ? (
             <Text className="product-detail-subtitle">{product.subtitle}</Text>
           ) : null}
+          {activeSku?.specText ? (
+            <Text className="product-detail-subtitle">{activeSku.specText}</Text>
+          ) : null}
+
+          {specEnabled ? (
+            <View className="product-detail-specs">
+              {attrs.map((attr) => (
+                <View key={attr.id} className="product-detail-spec-row">
+                  <Text className="product-detail-spec-label">{attr.name}</Text>
+                  <View className="product-detail-spec-chips">
+                    {attr.values.map((val) => {
+                      const active = selected[attr.id] === val.id;
+                      const available = isValueAvailable(skus, attrs, selected, attr.id, val.id);
+                      return (
+                        <View
+                          key={val.id}
+                          className={`product-detail-spec-chip${active ? ' is-active' : ''}${
+                            available ? '' : ' is-disabled'
+                          }`}
+                          onClick={() => {
+                            if (!available) return;
+                            setSelected((prev) => ({ ...prev, [attr.id]: val.id }));
+                          }}
+                        >
+                          <Text className="product-detail-spec-chip-text">{val.name}</Text>
+                        </View>
+                      );
+                    })}
+                  </View>
+                </View>
+              ))}
+            </View>
+          ) : null}
 
           <View className="product-detail-promo">
             <View className="product-detail-promo-glow" />
@@ -192,7 +320,7 @@ export default function ProductDetailPage() {
               </View>
               <View className="product-detail-promo-title">
                 <Text>买杜康美酒 · 享全城好客礼遇</Text>
-                <BenefitFigure value={String(benefit)} size="sm" className="product-detail-promo-amount" />
+                <BenefitFigure value={String(displayBenefit)} size="sm" className="product-detail-promo-amount" />
               </View>
             </View>
             <Text className="product-detail-promo-desc">