购物车悬浮加减

src/pages/index/index.tsx

@@ -8,8 +8,10 @@ import { getHomeConfigApi } from '@/services/home'
 import type { HomeConfig } from '@/services/home'
 import { getProductListApi } from '@/services/product'
 import { getProductCover } from '@/types/product'
-import type { Product } from '@/types/product'
+import type { Product, ProductCartPatch } from '@/types/product'
 import PriceText from '@/components/PriceText'
+import CartBall from '@/components/CartBall'
+import CartStepper from '@/components/CartStepper'
 import { formatSpec } from '@/utils/format'
 import './index.less'
 
@@ -41,6 +43,7 @@ function getStatusBarHeight(): number {
 
 export default function IndexPage() {
   const addItem = useCartStore(s => s.addItem)
+  const setSummary = useCartStore(s => s.setSummary)
 
   /** 首页配置（轮播图 / 宫格导航 / 促销卡片） */
   const [config, setConfig] = useState<HomeConfig>({ banners: [], navs: [], promos: [] })
@@ -56,15 +59,17 @@ export default function IndexPage() {
     loadRecommend()
   })
 
-  /** 首页配置聚合数据 */
+  /** 首页配置聚合数据（响应附带悬浮球汇总） */
   const loadHomeConfig = useCallback(async () => {
     try {
       const res = await getHomeConfigApi()
       setConfig(res.data)
+      // 旧版本后端可能未返回 cart 块
+      if (res.data.cart) setSummary(res.data.cart)
     } catch {
       // 错误已由 request 层 toast
     }
-  }, [])
+  }, [setSummary])
 
   /** 推荐商品 */
   const loadRecommend = useCallback(async () => {
@@ -112,18 +117,24 @@ export default function IndexPage() {
     goProduct(keyword.trim())
   }, [goProduct, keyword])
 
-  /** 快捷加购 */
+  /** 行内加减购确认后回写推荐商品项的购物车字段 */
+  const handleRowSync = useCallback((productId: number, patch: ProductCartPatch) => {
+    setProducts(prev => prev.map(p => (p.id === productId ? { ...p, ...patch } : p)))
+  }, [])
+
+  /** 快捷加购（用返回的购物车行回写，卡片随即展示加减器） */
   const handleQuickAdd = useCallback(
     async (product: Product, e: any) => {
       e.stopPropagation()
       try {
-        await addItem(product.id, 1)
+        const res = await addItem(product.id, 1)
+        handleRowSync(product.id, { cart_id: res.id, cart_quantity: res.quantity })
         Taro.showToast({ title: '已加入购物车', icon: 'success' })
       } catch {
         // 错误（未设等级价等）已由 request 层 toast
       }
     },
-    [addItem],
+    [addItem, handleRowSync],
   )
 
   return (
@@ -261,9 +272,14 @@ export default function IndexPage() {
                     ) : (
                       <Text className='product-card__price product-card__price--none'>登陆后查看价格</Text>
                     )}
-                    <View className='product-card__add' onClick={e => handleQuickAdd(product, e)}>
-                      <Text className='product-card__add-icon'>＋</Text>
-                    </View>
+                    {/* 已加购展示行内加减器，否则展示快捷加购按钮 */}
+                    {Number(product.cart_quantity ?? 0) > 0 ? (
+                      <CartStepper product={product} onSync={handleRowSync} />
+                    ) : (
+                      <View className='product-card__add' onClick={e => handleQuickAdd(product, e)}>
+                        <Text className='product-card__add-icon'>＋</Text>
+                      </View>
+                    )}
                   </View>
                 </View>
               </View>
@@ -271,6 +287,9 @@ export default function IndexPage() {
           </View>
         )}
       </View>
+
+      {/* ========== 购物车悬浮球 ========== */}
+      <CartBall />
     </View>
   )
 }