🎈 perf(购物页面): 多选面料的性能优化

src/components/counter/index.tsx

@@ -66,12 +66,14 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
         if(res === '') {
             setValue({...value, count:minNum})
             onChange?.(minNum)
+            return minNum
         }
         else if(!isNaN(Number(res))) {
             let count = formatDigits(res)
             count = checkData(count)
             setValue({...value, count})
             onChange?.(parseFloat(count as string))
+            return count
         } else {
             let num = parseFloat(res)
             if (!isNaN(num)) {
@@ -79,9 +81,11 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
               count = checkData(count)
               setValue({ ...value, count })
               onChange?.(count as number)
+              return count
             } else {
               setValue({ ...value, count: defaultNum })
               onChange?.(defaultNum)
+              return defaultNum
             }
             
         }
@@ -94,9 +98,11 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
           count = checkData(count)
           setValue({ ...value, count })
           onBlue?.(count as number)
+          return count
         } else {
           setValue({ ...value, count: defaultNum })
           onBlue?.(defaultNum)
+          return defaultNum
         }
     }   
     const noop = (e) => {

src/pages/login/index.tsx

@@ -62,7 +62,6 @@ const Login: FC = () => {
       account,
       password,
     })
-    console.log('state===>', res)
     if (res.success) {
       alert.success('登陆成功')
       setToken(res.data.token)

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

@@ -1,7 +1,7 @@
 import { View, Text, Image } from '@tarojs/components'
 import MCheckbox from '@/components/checkbox'
 import Counter from '@/components/counter'
-import { FC, forwardRef, memo, ReactNode, useCallback, useEffect, useState } from 'react'
+import { FC, forwardRef, memo } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
 import { debounce } from '@/common/util'
@@ -9,6 +9,7 @@ import { formatImgUrl, formatPriceDiv } from '@/common/format'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { selectList } from '../../config'
 import { Goods, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context'
+
 type PropsType = {
   state?: Goods
   purchaserId: number
@@ -20,11 +21,9 @@ type PropsType = {
 
 let ColorKindItem: FC<PropsType> = props => {
   console.log('Rerender component: ColorKindItem')
-  const { state: goods, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
+  const { state: multipleSelection, purchaserId, itemData, orderType = EnumSaleMode.Bulk } = props
-  // const { colorStore } = useShoppingState()
   const dispatch = useShoppingDispatch()
   // console.log('checked==>', checked)
-  // const { checked } = colorStore[purchaserId]['goodsKind']![itemData.id] || { checked: false }
 
   //格式化金额
   const formatPrice = (price: number) => {
@@ -42,39 +41,45 @@ let ColorKindItem: FC<PropsType> = props => {
   }
 
   const handleSelect = () => {
-    // console.log('handleSelect')
     dispatch({
       type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
       data: {
         purchaserId: purchaserId,
-        goodsKind: { [itemData.id]: { ...goods!, checked: true } },
+        multipleSelection: { ...multipleSelection, [itemData.id]: itemData },
       },
     })
   }
   const handleClose = () => {
+    const temp = multipleSelection
+    delete temp?.[itemData.id]
     dispatch({
       type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
       data: {
         purchaserId: purchaserId,
-        goodsKind: { [itemData.id]: { ...goods!, checked: false } },
+        multipleSelection: temp,
       },
     })
   }
 
+
+  // TODO：需要新增调整条数/米数的接口  并在调整完成后重新请求整个购物车页面
   const getInputValue = debounce(async (num, itemData) => {
     if (itemData.sale_mode === EnumSaleMode.Bulk) {
       itemData.roll = num
     } else {
       itemData.length = num
     }
-  }, 300)
+    
+  }, 260)
+
+
 
   return (
     <MCheckbox
-      status={goods?.checked}
+      status={multipleSelection?.hasOwnProperty(itemData.id) || false}
       onSelect={handleSelect}
       onClose={handleClose}
-      customClassName={classnames(styles.checkbox, goods?.checked ? styles.selected : '')}
+      customClassName={classnames(styles.checkbox, multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')}
       customTextClass={styles.colorKindItem}>
       <View className={styles['colorKindItem__left']}>
         <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image>
@@ -119,7 +124,7 @@ const withStateSlice = (comp, slice) => {
 ColorKindItem = withStateSlice(
   ColorKindItem,
   (state: ShoppingStateContextValue, props: PropsType) => {
-    return state.colorStore[props.purchaserId]['goodsKind']![props.itemData.id]
+    return state.colorStore[props.purchaserId]['multipleSelection']
   },
 )
 

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

@@ -9,7 +9,7 @@ import Divider from '@/components/divider'
 import ColorKindItem from '../colorKindItem'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { selectList } from '../../config'
-import { Goods, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context'
+import { Goods, GoodsMeta, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context'
 import IconFont from '@/components/iconfont/iconfont'
 import { isEmptyObject } from '@/common/common'
 import classNames from 'classnames'
@@ -51,14 +51,14 @@ enum BackEndSaleModeListFieldMap {
 type PropsType = {
   itemData?: ShoppingCartData
   state?: {
-    goodsKind?: Goods
+    multipleSelection?: GoodsMeta['multipleSelection']
     currentCheckedPurchaserId?: number
   }
 }
 
 let ShoppingCartItem: FC<PropsType> = props => {
   const { itemData, state } = props
-  const { goodsKind, currentCheckedPurchaserId } = state!
+  const { multipleSelection, currentCheckedPurchaserId } = state!
   const dispatch = useShoppingDispatch()
 
   const [openDetail, setOpenDetail] = useState(false)
@@ -93,49 +93,42 @@ let ShoppingCartItem: FC<PropsType> = props => {
 
   // 统计已选面料
   const materialChecked = useMemo(() => {
-    const targetGoodsKind = goodsKind
+    if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
-    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
     return new Set(
-      // @ts-ignore
+      Object.values(multipleSelection)?.reduce((prev, item: Goods) => {
-      Object.values(targetGoodsKind)?.reduce((prev, item: Goods) => {
+        if (item.sale_mode === selected) {
-        if (item.checked && item.sale_mode === selected) {
           return [...prev, item.product_code]
         }
         return prev
       }, []),
     ).size
-  }, [goodsKind, currentCheckedPurchaserId, selected, itemData])
+  }, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
 
   // 统计已选颜色
   const colorChecked = useMemo(() => {
-    const targetGoodsKind = goodsKind
+    if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
-    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
     return new Set(
-      // @ts-ignore
+      Object.values(multipleSelection).reduce((prev, item: Goods) => {
-      Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+        if (item.sale_mode === selected) {
-        if (item.checked && item.sale_mode === selected) {
           return [...prev, item.product_color_code]
         }
         return prev
       }, []),
     ).size
-  }, [goodsKind, currentCheckedPurchaserId, selected, itemData])
+  }, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
 
   // 统计已选条数 / 米数
   const lengthOrRollChecked = useMemo(() => {
-    const targetGoodsKind = goodsKind
+    if (!multipleSelection || isEmptyObject(multipleSelection)) return 0
-    if (!targetGoodsKind || isEmptyObject(targetGoodsKind)) return 0
     return (
-      // @ts-ignore
+      Object.values(multipleSelection).reduce((prev, item: Goods) => {
-      Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+        if (item.sale_mode === selected) {
-        if (item.checked && item.sale_mode === selected) {
-          // @ts-ignore
           return prev + item.count
         }
         return prev
       }, 0) || 0
     )
-  }, [goodsKind, currentCheckedPurchaserId, selected, itemData])
+  }, [multipleSelection, currentCheckedPurchaserId, selected, itemData])
 
   const [isPending, startTransition] = useTransition()
 
@@ -236,13 +229,13 @@ const GoodsList = memo<GoodsListPropType>(props => {
                   [item?.id]: {
                     id: item?.id,
                     estimate_amount: item.estimate_amount,
-                    checked: false,
                     product_code: item.product_code,
                     product_color_code: item.product_color_code,
                     sale_mode: item.sale_mode,
                     count: selected === EnumSaleMode.Bulk ? item.roll : Number(formatMeterDiv(item.length)),
                   },
                 },
+                multipleSelection: {},
               },
             })
             return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} itemData={item} orderType={selected}></ColorKindItem>
@@ -287,7 +280,7 @@ const withStateSlice = (comp, slice) => {
 }
 
 ShoppingCartItem = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
-  goodsKind: state.colorStore?.[props.itemData?.purchaser_id]?.['goodsKind']!,
+  multipleSelection: state.colorStore?.[props.itemData?.purchaser_id]?.['multipleSelection'],
   currentCheckedPurchaserId: state.currentCheckedPurchaserId,
 }))
 

src/pages/shopping/context/index.ts

@@ -32,13 +32,15 @@ export type Goods = {
   estimate_amount: number // 预估金额
   count: number // 已选的条数或米数
   sale_mode: number
-  checked: boolean
 }
 // 分组
 export interface GoodsMeta {
   purchaserId: number
   goodsKind?: {
-    [id: number]: Goods
+    [id: Goods['id']]: Goods
+  }
+  multipleSelection: {
+    [id: Goods['id']]: Goods
   }
 }
 
@@ -100,6 +102,7 @@ export function shoppingReducer(state: ShoppingStateContextValue, action: Shoppi
           [data.purchaserId as number]: {
             purchaserId: data.purchaserId,
             goodsKind: { ...state.colorStore[data.purchaserId]?.goodsKind, ...data.goodsKind },
+            multipleSelection: { ...data.multipleSelection },
           },
         },
       }

src/pages/shopping/index.tsx

@@ -20,15 +20,12 @@ import LoadingCard from '@/components/loadingCard'
 export const Shopping: FC = memo(() => {
   // 计算总的预估金额
   const handleTriggerCheckbox = ({ colorStore, currentCheckedPurchaserId, setSelectedAmount }) => {
-    const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
+    const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.multipleSelection
     console.log('handleTriggerCheckbox==>', colorStore)
 
-    if (targetGoodsKind) {
+    if (multipleSelection) {
-      const result = Object.values(targetGoodsKind).reduce((prev: number, value: Goods) => {
+      const result = Object.values(multipleSelection).reduce((prev: number, value: Goods) => {
-        if (value.checked) {
         return prev + Number(formatPriceDiv(value.estimate_amount))
-        }
-        return prev
       }, 0) as number
       console.log('result==>', result)
       // 同步修改上下文的 预估金额
@@ -125,13 +122,10 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   // 结算
   const handleSettleAccount = debounce(() => {
-    const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
+    const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection']
-    if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
+    if (!multipleSelection) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
-    const checkedGoodsKind = Object.values(targetGoodsKind).reduce((prev, item: Goods) => {
+    const checkedGoodsKind = Object.values(multipleSelection).reduce((prev, item: Goods) => {
-      if (item.checked) {
       return [...prev, item.id]
-      }
-      return prev
     }, [])
     if (checkedGoodsKind.length === 0) return Taro.showToast({ title: '请先选择商品', icon: 'error' })
     goLink('/pages/submitOrder/index', {
@@ -146,14 +140,11 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   // 批量某个客户的删除商品
   const handleDelete = async () => {
-    const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
+    const multipleSelection = colorStore?.[currentCheckedPurchaserId]?.['multipleSelection']
-    let checked: Goods[] = []
+    let checked: Goods[] = Object.values(multipleSelection)
-    if (targetGoodsKind) {
-      checked = Object.values(targetGoodsKind).filter((item: Goods) => item.checked)
     if (checked.length === 0) {
       return Taro.showToast({ title: '请选择商品', icon: 'error' })
     }
-    }
     console.log('checked==>', checked)
     Taro.showModal({
       title: '要删除这些商品吗？',
@@ -179,26 +170,15 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
     console.log('targetGoodsKind==>', targetGoodsKind)
 
-    const tempObject = {}
+    const tempObject = { ...targetGoodsKind }
-    Object.entries(targetGoodsKind).forEach(([key, value]) => {
-      tempObject[key] = {
-        ...value,
-        checked: isSelectAll,
-      }
-    })
     console.log('tempObject==>', tempObject)
     dispatch({
       type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
       data: {
         purchaserId: currentCheckedPurchaserId,
-        goodsKind: tempObject,
+        multipleSelection: isSelectAll ? tempObject : {},
       },
     })
-
-    // setChangedCheckbox({
-    //   purchaserId: currentCheckedPurchaserId,
-    //   goodsKind: tempObject,
-    // })
   }
 
   // 加载刷新数据