feat(购物车页面): 对接结算按钮70%

src/pages/shopping/context/index.ts

@@ -1,30 +1,57 @@
+import { EnumSaleMode } from '@/common/Enumerate'
 import React, { useRef } from 'react'
 import { useContext } from 'react'
 
 /**
  * 456: {
- *  id: 456,
- *  checked: true
+ *  purchaserId: 456,
+ *  colorKind: {
+ *    4562: {
+ *      id: 4562,
+ *      checked: false
+ *    }
+ *  }
  * },
  * 457: {
- *  id: 457,
- *  checked: true
+ *  purchaserId: 457,
+ *  colorKind: {
+ *    4562: {
+ *      id: 4562,
+ *      checked: false
+ *    }
+ *  }
  * }
  */
-export type ColorStore = Record<string, any>
+export type ColorStore = {
+  [purchaserId: GoodsMeta['purchaserId']]: GoodsMeta
+}
 
-export interface ColorMeta {
-  id?: number
-  checked?: boolean
+export type Goods = {
+  id: number
+  estimate_amount: number // 预估金额
+  checked: boolean
+}
+// 分组
+export interface GoodsMeta {
+  purchaserId: number
+  goodsKind?: {
+    [id: number]: Goods
+  }
+  checked: boolean
 }
 
 export interface ShoppingContextValue {
   isManageStatus: boolean
   setManageStatus: (isManageStatus: boolean) => void
-  currentCheckedPurchaserId: number
+  currentCheckedPurchaserId: number // 当前高亮的客户ID
   setCurrentCheckedPurchaserId: (purchaserId: number) => void
+  currentCheckedSaleMode: number
+  setCurrentCheckedSaleMode: (saleMode: number) => void
   colorStore: ColorStore
-  setChangedCheckbox: (color: ColorMeta) => void
+  setColorStore: (colorStore: React.SetStateAction<ColorStore>) => void
+  setChangedCheckbox: (changedGoods: GoodsMeta) => void
+  selectedAmount: number
+  setSelectedAmount: (amount: React.SetStateAction<number>) => void
 }
 
 export const ShoppingContext = React.createContext<ShoppingContextValue | null>(null)
@@ -37,10 +64,9 @@ export function useShoppingContext() {
   return ctx
 }
 
-export function useWatch(id: ColorMeta['id']) {
+export function useWatch(purchaserId: GoodsMeta['purchaserId'], id: number) {
   const { colorStore } = useShoppingContext()
-  console.log('colorStore==>', colorStore)
-  return id ? colorStore[id] : colorStore
+  return id ? colorStore[purchaserId]['goodsKind']![id] : colorStore[purchaserId]['goodsKind']
 }
 
 export interface ShoppingCartAction {

src/pages/shopping/context/shoppingStore.ts

@@ -0,0 +1,36 @@
+import { GoodsMeta, ColorStore } from '.'
+// 用于优化数据流 结合发布订阅 更新组件内部状态可以组件自己处理
+
+export type SubscribeCallback = (changedGoods: GoodsMeta) => void
+
+export class ShoppingStore {
+  // 全局缓存
+  private store: ColorStore = {}
+  // 监听器数组
+  private observers: SubscribeCallback[] = []
+
+  constructor(initialValue: ColorStore) {
+    initialValue && this.updateStore(initialValue)
+  }
+  // 更新全局缓存
+  private updateStore(nextStore: ColorStore) {
+    this.store = nextStore
+  }
+  // 订阅
+  subscribe(callback: SubscribeCallback) {
+    this.observers.push(callback)
+    // 取消订阅
+    return () => {
+      this.observers = this.observers.filter((fn: SubscribeCallback) => {
+        return callback !== fn // 引用地址
+      })
+    }
+  }
+  // 通知
+  notify(changedGoods: GoodsMeta) {
+    // 循环调用
+    this.observers.forEach((callback) => {
+      callback(changedGoods)
+    })
+  }
+}