🎈 perf(多选): 完成购物车多选逻辑

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

@@ -76,9 +76,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  Text {
-    font-size: 52px;
-  }
 }
 
 .drawerOpen {

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

@@ -14,15 +14,14 @@ import { EnumSaleMode } from '@/common/Enumerate'
 import { useNeedMemoCallback } from '@/use/useCommon'
 import { selectList } from '../../config'
 import { useShoppingContext } from '../../context'
+import IconFont from '@/components/iconfont/iconfont'
 
 type PropsType = {
   itemData?: ShoppingCartData
 }
 
 const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
-  return (
-    <View className={styles.drawerButton}>{isOpen ? <Text className='iconfont icon-shouqi'></Text> : <Text className='iconfont icon-zhankai'></Text>}</View>
-  )
+  return <View className={styles.drawerButton}>{isOpen ? <IconFont name='icon-shouqi' size={52}></IconFont> : <IconFont name='icon-zhankai' size={52}></IconFont>}</View>
 })
 
 enum BackEndSaleModeListFieldMap {
@@ -68,16 +67,21 @@ export default memo<PropsType>((props) => {
   const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus, setSelectedAmount, colorStore } = useShoppingContext()
 
   const memoList = useMemo(() => {
+
+    const selectedList = itemData?.[BackEndSaleModeListFieldMap[selected]].length !==0 ? itemData?.[BackEndSaleModeListFieldMap[selected]] : [{}]
+    
+    selectedList.forEach((item) => {
+      console.log('memoList itemData', item)
+      // 初始化选中状态
+      setChangedCheckbox({
+        purchaserId: itemData?.purchaser_id!,
+        goodsKind: { [item?.id]: { id: item?.id, estimate_amount: item.estimate_amount, checked: false } },
+        checked: false,
+      })
+    })
+
     return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
       itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-        console.log('memoList itemData', item)
-        // 初始化选中状态
-        setChangedCheckbox({
-          purchaserId: itemData.purchaser_id,
-          goodsKind: { [item.id]: { id: item.id, estimate_amount: item.estimate_amount, checked: false } },
-          checked: false,
-        })
-
         return <ColorKindItem purchaserId={itemData.purchaser_id} key={item.id} item={item} orderType={selected}></ColorKindItem>
       })
     ) : (

src/pages/shopping/context/index.ts

@@ -1,4 +1,3 @@
-import { EnumSaleMode } from '@/common/Enumerate'
 import React, { useRef } from 'react'
 import { useContext } from 'react'
 

src/pages/shopping/index.tsx

@@ -1,7 +1,7 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
-import React, { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
@@ -12,7 +12,7 @@ import { formatPriceDiv } from '@/common/format'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
-import { dataLoadingStatus } from '@/common/util'
+import { dataLoadingStatus, debounce } from '@/common/util'
 import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
 import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context'
 import { alert, goLink } from '@/common/common'
@@ -60,7 +60,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   const { fetchData, state } = ShoppingCartListApi()
 
   // 输入了搜索关键字
-  const getSearchData = useCallback((e) => {
+  const getSearchData = useCallback(e => {
     fetchData({ short_name_or_phone: e })
     // pageNum.current.page = 1
     // setOrderData(() => ({ list: [], total: 0 }))
@@ -74,7 +74,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
   }, [shoppingCartData, state])
 
-  useDidShow(() => {
+  // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
+  useLayoutEffect(() => {
     ;(async () => {
       await fetchData()
       let query = Taro.createSelectorQuery()
@@ -82,7 +83,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       query.select('#shoppingContainer').boundingClientRect()
       query.select('#topBar').boundingClientRect()
       query.select('#bottomBar').boundingClientRect()
-      query.exec((res) => {
+      query.exec(res => {
         console.log('res==>', res)
         const containerHeight = res[0].height
         const topBarHeight = res[1].height
@@ -91,26 +92,29 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         setListHeight(listHeight + 'px')
       })
     })()
-  })
+  }, [])
 
   useEffect(() => {
     setShoppingCartData({ list: state.data, total: state.data.length })
   }, [state])
 
   // 结算
-  const handleSettleAccount = () => {
+  const handleSettleAccount = debounce(() => {
     const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind']
-    if (!targetGoodsKind) return
+    if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' })
+    const checkedGoodsKind = Object.values(targetGoodsKind).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', {
       purchaser_id: currentCheckedPurchaserId,
       sale_mode: currentCheckedSaleMode,
-      shopping_cart_product_color_list: Object.values(targetGoodsKind).map((item: Goods) => {
-        if (item.checked) {
-          return item.id
-        }
-      }),
+      shopping_cart_product_color_list: JSON.stringify(checkedGoodsKind),
     })
-  }
+  }, 400)
 
   const { fetchData: deleteApi } = ShoppingCartDeleteApi()
 
@@ -122,7 +126,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     }
     Taro.showModal({
       title: '要取消这些商品吗？',
-      success: async function (res) {
+      success: async function(res) {
         if (res.confirm) {
           const res = await deleteApi()
           if (res.success) {
@@ -138,8 +142,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   // 全选
   const handleSelectAllCheckbox = (isSelectAll: boolean) => {
     console.log('handleSelectAllCheckbox', isSelectAll)
-    const tempObject = colorStore
-    Object.entries(colorStore).forEach(([key,value])=>{
+    const tempObject = {}
+    Object.entries(colorStore).forEach(([key, value]) => {
       tempObject[key] = {
         ...value,
         checked: isSelectAll,
@@ -155,9 +159,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
           <View className={styles.flexBox} onClick={onStartToManage}>
             {isManageStatus ? (
-              <IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
+              <IconText svg iconName='icon-guanlidingdan' text='取消' color='#4581ff' customClass={styles['icon--manage--cancel']} />
             ) : (
-              <IconText iconName='icon-guanlidingdan' text='管理' />
+              <IconText svg iconName='icon-guanlidingdan' text='管理' />
             )}
           </View>
         </Search>
@@ -174,7 +178,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       </View>
       <View id='bottomBar'>
         {isManageStatus ? (
-          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={(isAll) => handleSelectAllCheckbox(isAll)}></BottomEditBar>
+          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={isAll => handleSelectAllCheckbox(isAll)}></BottomEditBar>
         ) : (
           <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
         )}