🐞 fix(ID1001459): 【内部商城】-删除客户A的面料后，跳转到客户B的购物车页面

【【内部商城】-删除客户A的面料后，跳转到客户B的购物车页面】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001001459

src/common/constant.ts

@@ -4,7 +4,7 @@
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
+// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
 export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
@@ -15,7 +15,7 @@ export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
 // export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
 // export const BASE_URL = `http://192.168.1.95:40001/lymarket` //  华
-// export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
+// export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷
 
 // CDN
 // 生成密钥

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

@@ -23,11 +23,16 @@ import LoadingCard from '@/components/loadingCard'
 import { ShoppingCartListApi } from '@/api'
 import { usePropsValue } from '@/use/useCommon'
 
-enum BackEndSaleModeListFieldMap {
+export enum BackEndSaleModeListFieldMap {
   bulk_color_list = 0,
   length_cut_color_list = 1,
   weight_cut_color_list = 2,
 }
+export const BackEndSaleModeListField: BackEndSaleModeListFieldMap[] = [
+  BackEndSaleModeListFieldMap.bulk_color_list,
+  BackEndSaleModeListFieldMap.length_cut_color_list,
+  BackEndSaleModeListFieldMap.weight_cut_color_list,
+]
 interface ButtonPropsType {
   isActive: boolean
   onClick?: Function
@@ -63,9 +68,10 @@ interface GoodsListPropType {
   selected: EnumSaleMode
   isPending: boolean
   startTransition: React.TransitionStartFunction
+  onSelectOrderType: (type: EnumSaleMode) => void
 }
 const GoodsList = (props: GoodsListPropType) => {
-  const { itemData, selected, isPending, startTransition, multipleSelection } = props
+  const { itemData, selected, isPending, startTransition, multipleSelection, onSelectOrderType } = props
   console.log('rerender component GoodsList', props, props.itemData?.purchaser_name)
   // const prevMultipleSelection = useRef(multipleSelection)
   const currentSelected = useRef<EnumSaleMode | null>(null)
@@ -87,7 +93,6 @@ const GoodsList = (props: GoodsListPropType) => {
           <View className={styles.noList}>暂无数据</View>
         ),
     )
-    // prevMultipleSelection.current = multipleSelection
   }
 
   useEffect(() => {
@@ -251,16 +256,21 @@ const ShoppingCartItem: FC<PropsType> = (props) => {
   const updatePurchaserMultipleSelection = (purchaserId: number, payload: Goods, operationType: OperationType, goodsId: number) => {
     console.log('delete', colorStore, purchaserId)
     if (operationType === 'add') {
+      const multipleSelection = {
+        ...colorStore?.[purchaserId]?.multipleSelection,
+        [goodsId]: payload,
+      }
       dispatch({
         type: ShoppingDispatchType.UPDATE_CHANGED_CHECKBOX,
         data: {
           purchaserId,
-          multipleSelection: {
+          multipleSelection,
-            ...colorStore?.[purchaserId]?.multipleSelection,
-            [goodsId]: payload,
-          },
         },
       })
+      // 全选标识
+      if (currentItemData.current?.purchaser_id === purchaserId && currentItemData.current?.[BackEndSaleModeListFieldMap[selected]].length === Object.keys(multipleSelection).length) {
+        dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: true })
+      }
     }
     else if (operationType === 'delete') {
       const temp = { ...colorStore?.[purchaserId]?.multipleSelection }
@@ -272,8 +282,30 @@ const ShoppingCartItem: FC<PropsType> = (props) => {
           multipleSelection: temp,
         },
       })
+      dispatch({ type: ShoppingDispatchType.UPDATE_MULTIPLE_SELECTION_STATUS, data: false })
     }
   }
+
+  const handleOtherHighLight = (purchaserId: number) => {
+    console.log('handleOtherHighLight', purchaserId, currentCheckedPurchaserId)
+    if (purchaserId === currentCheckedPurchaserId) {
+      for (let i = 0; i < BackEndSaleModeListField.length; i++) {
+        if (itemData?.[BackEndSaleModeListFieldMap[i]].length !== 0) {
+          // 控制高亮
+          onSelectOrderType(i)
+          return
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    events.on('handleOtherHighLight', handleOtherHighLight)
+    return () => {
+      events.off('handleOtherHighLight', handleOtherHighLight)
+    }
+  }, [handleOtherHighLight])
+
   // 发布订阅
   useEffect(() => {
     events.on('updatePurchaserMultipleSelection', updatePurchaserMultipleSelection)
@@ -418,6 +450,7 @@ const ShoppingCartItem: FC<PropsType> = (props) => {
                 selected={selected}
                 isPending={isPending}
                 startTransition={startTransition}
+                onSelectOrderType={onSelectOrderType}
               />
             </View>
           </View>
@@ -429,7 +462,7 @@ const ShoppingCartItem: FC<PropsType> = (props) => {
 
 // State 分割组件 思路就是把 context 直接通过 props 的形式传给组件，这样的话就解决了 context 强制刷新 memo 的问题了
 // 那么当 context 内的 value 被更新的时候，react 只会强制渲染 Wrapper
-const withStateSlice = (comp, slice) => {
+const withStateSlice = (comp, slice: (state: ShoppingStateContextValue, props: PropsType) => any) => {
   const MemoComp = memo(comp, (prevProps, nextProps) => {
     let needMemo = true
     if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) {
@@ -461,7 +494,7 @@ const withStateSlice = (comp, slice) => {
     }
     return needMemo
   })
-  const Wrapper = (props, ref) => {
+  const Wrapper = (props: PropsType, ref) => {
     const state = useShoppingState()
     // console.log('Wrapper colorStore', state.colorStore)
     return <MemoComp ref={ref} state={slice(state, props)} {...props} />
@@ -469,9 +502,9 @@ const withStateSlice = (comp, slice) => {
   return memo(forwardRef(Wrapper))
 }
 
-const ShoppingCartItemWithStateSlice = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props) => ({
+const ShoppingCartItemWithStateSlice = withStateSlice(ShoppingCartItem, (state: ShoppingStateContextValue, props: PropsType) => ({
   colorStore: state.colorStore,
-  multipleSelection: state.colorStore?.[props.itemData.purchaser_id]?.multipleSelection,
+  multipleSelection: state.colorStore?.[props.itemData!.purchaser_id]?.multipleSelection,
   currentCheckedPurchaserId: state.currentCheckedPurchaserId,
   Observer: state.Observer,
 }))

src/pages/shopping/index.tsx

@@ -4,12 +4,13 @@ import type { FC } from 'react'
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import ItemList from './components/shoppingCartItem/index'
+import ItemList, { BackEndSaleModeListField, BackEndSaleModeListFieldMap } from './components/shoppingCartItem/index'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingProvider } from './components/shoppingCart/index'
 import type { Goods } from './context'
 import { ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context'
+import { events } from './context/shoppingStore'
 import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
 import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
 import { formatPriceDiv } from '@/common/format'
@@ -162,6 +163,7 @@ const ShoppingCartContainer: FC = () => {
               },
             })
             fetchData(searchOptions)
+            events.trigger('handleOtherHighLight', currentCheckedPurchaserId)
             // Observer.notify(currentCheckedPurchaserId)
           }
           else {

src/pages/user/index.tsx

@@ -193,6 +193,7 @@ const UserInfo: FC = () => {
       console.log(err, 'err')
     }
   }
+
   return (
     <>
       <LayoutBlock circle customStyle={{ paddingTop: '10px', paddingBottom: '10px' }}>
@@ -260,16 +261,16 @@ const UserInfo: FC = () => {
 
 // 我的
 const User = () => {
+  const [current_env, _] = useState(CURRENT_ENV)
+  const [current_version, __] = useState(CURRENT_VERSION)
   return (
-    <>
+    <View className={styles.main}>
-      <View className={styles.main}>
+      <UserInfo />
-        <UserInfo />
 
-        {/* 测试暂时添加 */}
+      {/* 测试暂时添加 */}
-        <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{CURRENT_VERSION}</View>
+      <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{current_version}</View>
-        {CURRENT_ENV !== 'production' && <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{BASE_URL}</View>}
+      {current_env !== 'production' && <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{BASE_URL}</View>}
-      </View>
+    </View>
-    </>
   )
 }