feat(catalog): add product fulfillment flags and auto SKU

Enable online/cross-city/on-site purchase switches with trade gates, HQ and proxy UI, and server-generated DK SKUs.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/mini-user/src/pages/home/index.tsx

@@ -35,8 +35,26 @@ type Product = {
   carouselUrls?: string[] | null;
   aromaType: string;
   allowOnSitePickup?: boolean;
+  allowOnlinePurchase?: boolean;
+  allowCrossCityDelivery?: boolean;
 };
 
+type FulfillmentFilter = 'ALL' | 'ONLINE' | 'CROSS_CITY' | 'ON_SITE';
+
+const FULFILLMENT_FILTERS: Array<{ key: FulfillmentFilter; label: string }> = [
+  { key: 'ALL', label: '全部' },
+  { key: 'ONLINE', label: '线上' },
+  { key: 'CROSS_CITY', label: '跨城' },
+  { key: 'ON_SITE', label: '现场' },
+];
+
+function matchFulfillmentFilter(p: Product, filter: FulfillmentFilter): boolean {
+  if (filter === 'ALL') return true;
+  if (filter === 'ONLINE') return p.allowOnlinePurchase !== false;
+  if (filter === 'CROSS_CITY') return p.allowCrossCityDelivery !== false;
+  return !!p.allowOnSitePickup;
+}
+
 type MiniHomeConfig = {
   banners: string[];
   footerUrl: string | null;
@@ -59,6 +77,7 @@ function aromaSectionId(key: AromaKey) {
 
 export default function HomePage() {
   const [activeAroma, setActiveAroma] = useState<AromaKey>('QINGXIANG');
+  const [fulfillmentFilter, setFulfillmentFilter] = useState<FulfillmentFilter>('ALL');
   const [products, setProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
   const [displayCity, setDisplayCity] = useState('郑州市');
@@ -144,18 +163,23 @@ export default function HomePage() {
     Taro.navigateTo({ url: returnPath });
   }
 
+  const filteredProducts = useMemo(
+    () => products.filter((p) => matchFulfillmentFilter(p, fulfillmentFilter)),
+    [products, fulfillmentFilter],
+  );
+
   const productsByAroma = useMemo(() => {
     const map: Record<AromaKey, Product[]> = {
       QINGXIANG: [],
       JIANGXIANG: [],
       NONGXIANG: [],
     };
-    for (const p of products) {
+    for (const p of filteredProducts) {
       const key = p.aromaType as AromaKey;
       if (key in map) map[key].push(p);
     }
     return map;
-  }, [products]);
+  }, [filteredProducts]);
 
   const banners = miniHome.banners;
   const footerUrl = miniHome.footerUrl;
@@ -255,15 +279,17 @@ export default function HomePage() {
                   现场取货
                 </Text>
               ) : null}
-              <Text
-                className="home-buy-btn"
-                onClick={(e) => {
-                  e.stopPropagation?.();
-                  openProductDetail(p.id);
-                }}
-              >
-                立即购买
-              </Text>
+              {p.allowOnlinePurchase !== false ? (
+                <Text
+                  className="home-buy-btn"
+                  onClick={(e) => {
+                    e.stopPropagation?.();
+                    openProductDetail(p.id);
+                  }}
+                >
+                  立即购买
+                </Text>
+              ) : null}
             </View>
           </View>
         </View>
@@ -309,13 +335,28 @@ export default function HomePage() {
         <Text className="home-aroma-city">{displayCity}</Text>
       </View>
 
+      <View className="home-fulfillment-filters">
+        {FULFILLMENT_FILTERS.map((f) => (
+          <Text
+            key={f.key}
+            className={`home-fulfillment-chip${fulfillmentFilter === f.key ? ' home-fulfillment-chip--active' : ''}`}
+            onClick={() => setFulfillmentFilter(f.key)}
+          >
+            {f.label}
+          </Text>
+        ))}
+      </View>
+
       <View className="home-product-list">
         {loading ? <View className="home-empty">加载中…</View> : null}
         {!loading && products.length === 0 ? (
           <View className="home-empty">当前城市暂无在售商品</View>
         ) : null}
+        {!loading && products.length > 0 && filteredProducts.length === 0 ? (
+          <View className="home-empty">暂无符合履约方式的商品</View>
+        ) : null}
         {!loading &&
-          products.length > 0 &&
+          filteredProducts.length > 0 &&
           AROMA_TABS.map((t) => {
             const list = productsByAroma[t.key];
             return (

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

@@ -31,6 +31,9 @@ type Product = ProductImageSource & {
   benefitAmount?: number;
   benefitDisplay?: number;
   detailContent?: ProductDetailContentDto | null;
+  allowOnSitePickup?: boolean;
+  allowOnlinePurchase?: boolean;
+  allowCrossCityDelivery?: boolean;
 };
 
 export default function ProductDetailPage() {
@@ -92,6 +95,21 @@ export default function ProductDetailPage() {
     Taro.navigateTo({ url: returnPath });
   }
 
+  async function goOnSitePickup() {
+    if (!productId) return;
+    const returnPath = `/pages/order-confirm-pickup/index?productId=${productId}&qty=1`;
+    if (!isLoggedIn()) {
+      goLogin(returnPath);
+      return;
+    }
+    const ready = await ensurePayReady(returnPath);
+    if (!ready) return;
+    Taro.navigateTo({ url: returnPath });
+  }
+
+  const allowOnline = product?.allowOnlinePurchase !== false;
+  const allowOnSite = !!product?.allowOnSitePickup;
+
   if (!product) {
     return (
       <PageShell variant="scroll" className="product-detail-page">
@@ -199,9 +217,21 @@ export default function ProductDetailPage() {
           <Image className="product-detail-bar-home-icon" src={iconHome} mode="aspectFit" />
           <Text className="product-detail-bar-home-label">首页</Text>
         </View>
-        <View className="product-detail-buy-btn" onClick={() => void goBuy()}>
-          <Text className="product-detail-buy-btn-text">立即购买</Text>
-        </View>
+        {allowOnSite ? (
+          <View className="product-detail-pickup-btn" onClick={() => void goOnSitePickup()}>
+            <Text className="product-detail-pickup-btn-text">现场取货</Text>
+          </View>
+        ) : null}
+        {allowOnline ? (
+          <View className="product-detail-buy-btn" onClick={() => void goBuy()}>
+            <Text className="product-detail-buy-btn-text">立即购买</Text>
+          </View>
+        ) : null}
+        {!allowOnline && !allowOnSite ? (
+          <View className="product-detail-buy-btn product-detail-buy-btn--disabled">
+            <Text className="product-detail-buy-btn-text">暂不可购</Text>
+          </View>
+        ) : null}
       </View>
     </PageShell>
   );

apps/mini-user/src/styles/home.css

@@ -103,6 +103,30 @@
   border-bottom-color: var(--color-heritage-red);
 }
 
+.home-fulfillment-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px var(--space-page) 2px;
+  overflow-x: auto;
+}
+
+.home-fulfillment-chip {
+  flex-shrink: 0;
+  padding: 4px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--color-subtle-gray);
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 999px;
+}
+
+.home-fulfillment-chip--active {
+  color: var(--color-heritage-red);
+  background: rgba(179, 38, 30, 0.1);
+  font-weight: 600;
+}
+
 .home-product-list {
   display: flex;
   flex-direction: column;

apps/mini-user/src/styles/product-detail.css

@@ -301,6 +301,25 @@
   color: var(--color-on-surface-variant);
 }
 
+.product-detail-pickup-btn {
+  flex: 1;
+  height: 48px;
+  border-radius: 999px;
+  background: transparent;
+  border: 1px solid var(--color-heritage-red);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.product-detail-pickup-btn-text {
+  color: var(--color-heritage-red);
+  font-family: var(--font-headline);
+  font-size: 15px;
+  font-weight: 700;
+}
+
 .product-detail-buy-btn {
   flex: 1;
   height: 48px;
@@ -312,6 +331,12 @@
   box-shadow: 0 8px 24px rgba(166, 29, 36, 0.2);
 }
 
+.product-detail-buy-btn--disabled {
+  background: #c4c4c4;
+  box-shadow: none;
+  pointer-events: none;
+}
+
 .product-detail-buy-btn-text {
   color: #fff;
   font-family: var(--font-headline);