🧪 test(context): 新增shopping购物模块的context

src/api/shopping/index.ts

@@ -25,7 +25,7 @@ export const ShoppingCartUpdateApi = () => {
  */
  export const ShoppingCartListApi = () => {
     return useRequest({
-        url: `/v1/mp/shoppingCart/productColor`,
+        url: `/v2/mp/shoppingCart/productColor`,
         method: "get",
     })
 }

src/pages/shopping/components/shoppingCart/index.tsx

@@ -0,0 +1,37 @@
+import { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { ShoppingContext } from '../../context'
+import { ColorMeta, ColorStore, ShoppingContextValue } from '../../context'
+
+export interface ShoppingCartPropsType {
+  initialValues?: ColorStore
+  onTriggerCheckbox?: (options: { colorStore: ColorStore; changedCheckbox: ColorMeta }) => void
+  children?: ReactNode
+}
+
+export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
+  const { children, onTriggerCheckbox, initialValues } = props
+
+  const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
+  onTriggerCheckboxRef.current = onTriggerCheckbox
+
+  const [colorStore, setColorStore] = useState<ColorStore>(() => initialValues || {})
+  const [changedCheckbox, setChangedCheckbox] = useState<ColorMeta>({})
+
+  const ctx: ShoppingContextValue = useMemo(() => {
+    return {
+      colorStore,
+      setChangedCheckbox() {},
+    }
+  }, [colorStore])
+
+  useEffect(() => {
+    onTriggerCheckboxRef.current?.({
+      colorStore,
+      changedCheckbox,
+    })
+
+  }, [colorStore, changedCheckbox])
+  
+
+  return <ShoppingContext.Provider value={ctx}>{children}</ShoppingContext.Provider>
+}

src/pages/shopping/components/shoppingCartItem/index.module.scss

@@ -12,7 +12,7 @@
   }
 }
 
-.selected{
+.selected {
   border-color: $color_main;
 }
 
@@ -81,9 +81,49 @@
   }
 }
 
-.drawerOpen{
+.drawerOpen {
   height: auto;
 }
 .drawerClose {
   height: 0;
 }
+
+.saleModeButton {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background-color: #f6f6f6;
+  border-radius: 8px;
+  font-size: 28px;
+  height: 72px;
+  &--text {
+    color: #909090;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+  &--active {
+    border: 1px solid $color_main;
+    background-color: #eaf2ff;
+    .saleModeButton--text {
+      color: $color_main;
+    }
+  }
+}
+.noList {
+  margin: 100px 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #707070;
+  font-size: 26px;
+}

src/pages/shopping/components/shoppingCartItem/index.tsx

@@ -1,5 +1,5 @@
 import { Text, View } from '@tarojs/components'
-import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import { formatPriceDiv } from '@/common/format'
@@ -13,7 +13,6 @@ import ColorKindItem from '../colorKindItem'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { useNeedMemoCallback } from '@/use/useCommon'
 import { selectList } from '../../config'
-import { ShoppingContext } from '../../index'
 
 type PropsType = {
   itemData?: ShoppingCartData
@@ -27,6 +26,12 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
   )
 })
 
+enum BackEndSaleModeListFieldMap {
+  bulk_color_list = 0,
+  length_cut_color_list = 1,
+  weight_cut_color_list = 2,
+}
+
 export default memo<PropsType>((props) => {
   console.log('props==>', props)
   const { itemData, selectedId } = props
@@ -44,6 +49,17 @@ export default memo<PropsType>((props) => {
     setSelect(type)
   }
 
+  const saleModeList = useRef({
+    bulk_color_list: itemData?.bulk_color_list,
+    length_cut_color_list: itemData?.length_cut_color_list,
+    weight_cut_color_list: itemData?.weight_cut_color_list
+  })
+  saleModeList.current = {
+    bulk_color_list: itemData?.bulk_color_list,
+    length_cut_color_list: itemData?.length_cut_color_list,
+    weight_cut_color_list: itemData?.weight_cut_color_list
+  }
+
   const [mockList, setMockList] = useState({
     0: [
       { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
@@ -62,9 +78,9 @@ export default memo<PropsType>((props) => {
   })
 
   const handleChecked = useCallback(
-    (current) => {
+    (current: any) => {
       console.log('handleChecked', current)
-      const tempList = mockList[selected].map((item) => {
+      const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
         if (item.id === current.id) {
           item = current
         }
@@ -79,10 +95,11 @@ export default memo<PropsType>((props) => {
     },
     [mockList, selected],
   )
+
   const handleUnChecked = useCallback(
-    (current) => {
+    (current: any) => {
       console.log('handleChecked', current)
-      const tempList = mockList[selected].map((item) => {
+      const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
         if (item.id === current.id) {
           item = current
         }
@@ -99,17 +116,21 @@ export default memo<PropsType>((props) => {
   )
 
   const memoList = useMemo(() => {
-    return mockList[selected].map((item, index) => {
-      return (
-        <ColorKindItem
-          key={item.id}
-          isSelected={item.checked}
-          item={item}
-          orderType={selected}
-          onChecked={handleChecked}
-          onUnChecked={handleUnChecked}></ColorKindItem>
-      )
-    })
+    return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
+      itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
+        return (
+          <ColorKindItem
+            key={item.id}
+            isSelected={item.checked}
+            item={item}
+            orderType={selected}
+            onChecked={handleChecked}
+            onUnChecked={handleUnChecked}></ColorKindItem>
+        )
+      })
+    ) : (
+      <View className={styles.noList}>暂无数据</View>
+    )
   }, [mockList, selected])
 
   const handleClickLayout = () => {
@@ -145,30 +166,24 @@ export default memo<PropsType>((props) => {
             <Divider customClassName={styles.line}></Divider>
             <View className={styles.orderTitle}>订单类型</View>
             <View className={styles.orderTypeDetail}>
-              <NormalButton
-                type={selected === EnumSaleMode.Bulk ? 'primary' : 'info'}
-                plain={selected !== EnumSaleMode.Bulk}
-                customStyles={{ padding: '0 50rpx' }}
-                circle
+              <SaleModeButton
+                customStyle={{ padding: '0 50rpx' }}
+                isActive={selected === EnumSaleMode.Bulk}
                 onClick={() => onSelectOrderType(EnumSaleMode.Bulk)}>
                 大货
-              </NormalButton>
-              <NormalButton
-                type={selected === EnumSaleMode.Plate ? 'primary' : 'info'}
-                plain={selected !== EnumSaleMode.Plate}
-                customStyles={{ padding: '0 50rpx' }}
-                circle
+              </SaleModeButton>
+              <SaleModeButton
+                customStyle={{ padding: '0 50rpx' }}
+                isActive={selected === EnumSaleMode.Plate}
                 onClick={() => onSelectOrderType(EnumSaleMode.Plate)}>
                 剪板
-              </NormalButton>
-              <NormalButton
-                type={selected === EnumSaleMode.BulkCut ? 'primary' : 'info'}
-                plain={selected !== EnumSaleMode.BulkCut}
-                customStyles={{ padding: '0 50rpx' }}
-                circle
+              </SaleModeButton>
+              <SaleModeButton
+                customStyle={{ padding: '0 50rpx' }}
+                isActive={selected === EnumSaleMode.BulkCut}
                 onClick={() => onSelectOrderType(EnumSaleMode.BulkCut)}>
                 散剪
-              </NormalButton>
+              </SaleModeButton>
             </View>
           </View>
           <View className={styles.orderColor}>
@@ -186,3 +201,22 @@ export default memo<PropsType>((props) => {
     </LayoutBlock>
   )
 }, useNeedMemoCallback())
+
+interface ButtonPropsType {
+  isActive: boolean
+  onClick?: Function
+  children?: React.ReactNode
+  customStyle?: React.CSSProperties
+}
+// 订单类型
+const SaleModeButton: FC<ButtonPropsType> = (props) => {
+  const { onClick, children, isActive = false, customStyle } = props
+  const handleClick = () => {
+    onClick?.()
+  }
+  return (
+    <View className={classnames(styles.saleModeButton, isActive && styles['saleModeButton--active'])} style={customStyle} onClick={handleClick}>
+      <View className={classnames(styles['saleModeButton--text'])}>{children}</View>
+    </View>
+  )
+}

src/pages/shopping/context/index.ts

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useContext } from 'react'
+
+/**
+ * 456: {
+ *  id: 456,
+ *  name: 'asdfasf',
+ *  checked: true
+ * },
+ * 457: {
+ *  id: 457,
+ *  name: 'dsfaf654',
+ *  checked: true
+ * }
+ */
+export type ColorStore = Record<string, any>
+
+export interface ColorMeta {
+  id?: number
+  checked?: boolean
+}
+
+export interface ShoppingContextValue {
+  colorStore: ColorStore
+  setChangedCheckbox: (color: ColorMeta) => void
+}
+
+export const ShoppingContext = React.createContext<ShoppingContextValue | null>(null)
+
+export function useShoppingContext() {
+  const ctx = useContext(ShoppingContext)
+  if (!ctx) {
+    throw new Error('没有获取到shopping context')
+  }
+  return ctx
+}

src/pages/shopping/index.tsx

@@ -13,12 +13,7 @@ import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartListApi } from '@/api/index'
 import { dataLoadingStatus } from '@/common/util'
-
-const defaultContext = {
-  isManager: false
-}
-
-export const ShoppingContext = React.createContext(defaultContext)
+import { ShoppingCart } from './components/shoppingCart/index'
 
 export const Shopping: FC = () => {
   //输入了搜索关键字
@@ -59,7 +54,7 @@ export const Shopping: FC = () => {
   }, [shoppingCartData, state])
 
   useDidShow(() => {
-    (async () => {
+    ;(async () => {
       await fetchData()
       let query = Taro.createSelectorQuery()
       console.log('query', query)
@@ -81,9 +76,7 @@ export const Shopping: FC = () => {
     setShoppingCartData({ list: state.data, total: state.data.length })
   }, [state])
 
-  useDidShow(() => {
-    
-  })
+  useDidShow(() => {})
 
   const [selectedId, setSelectedId] = useState<number>()
 
@@ -91,6 +84,10 @@ export const Shopping: FC = () => {
     setSelectedId(item.purchaser_id)
   }
 
+  const handleTriggerCheckbox = () => {
+    
+  }
+
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
@@ -106,7 +103,7 @@ export const Shopping: FC = () => {
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
-          <ShoppingContext.Provider value={{isManager:false}}>
+          <ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
             <InfiniteScroll statusMore={statusMore}>
               {!!shoppingCartData?.list?.length &&
                 shoppingCartData?.list?.map((item, index) => {
@@ -114,7 +111,7 @@ export const Shopping: FC = () => {
                   return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
                 })}
             </InfiniteScroll>
-          </ShoppingContext.Provider>
+          </ShoppingCart>
         </View>
         <View id='bottomBar'>
           {isManage ? (

src/pages/shopping/types.ts

@@ -6,8 +6,10 @@ interface ShoppingCartData {
   purchaser_short_name: string
   sale_user_id: number
   sale_user_name: string
-  color_list: ColorList
-  [Property:string]: any
+  bulk_color_list: ColorList
+  length_cut_color_list: ColorList   // 剪板
+  weight_cut_color_list: ColorList   // 散剪
+  [Property: string]: any
 }
 interface ColorList {
   estimate_amount: number