✨ feat(购物页面): 已完成页面逻辑，等待对接接口

src/api/index.ts

@@ -9,6 +9,8 @@ export {
   FindColorListApi,
 } from './product/index'
 
+export { ShoppingCartUpdateApi, ShoppingCartDeleteApi, ShoppingCartListApi } from './shopping/index'
+
 import { useRequest } from '@/use/useHttp'
 /**
  *  系列列表

src/api/shopping/index.ts

@@ -0,0 +1,31 @@
+import { useRequest } from "@/use/useHttp"
+/**
+ * 修改购物车
+ * @returns 
+ */
+export const ShoppingCartUpdateApi = () => {
+  return useRequest({
+    url: `/v1/mp/shoppingCart/productColor`,
+    method: 'put',
+  })
+}
+/**
+ * 删除购物车商品
+ * @returns 
+ */
+ export const ShoppingCartDeleteApi = () => {
+    return useRequest({
+        url: `/v1/mp/shoppingCart/productColor`,
+        method: "delete",
+    })
+}
+/**
+ * 获取购物车商品列表
+ * @returns 
+ */
+ export const ShoppingCartListApi = () => {
+    return useRequest({
+        url: `/v1/mp/shoppingCart/productColor`,
+        method: "get",
+    })
+}

src/components/checkbox/index.tsx

@@ -10,6 +10,7 @@ type params = {
   onSelect?: () => void //选择触发
   onClose?: () => void //取消触发
   status?: boolean //是否选中
+  hidden?: boolean   // 隐藏单选框
   disabled?: boolean //是否禁用
   triggerLabel?: boolean   // 点击label是否触发选中
   circle?: boolean
@@ -34,6 +35,7 @@ export default forwardRef((props: params, ref) => {
     customStyles = {},
     customClassName = '',
     customTextClass = '',
+    hidden = false,
   } = props
   const [selected, SetSelected] = useState(false)
   const onSelectEven = () => {
@@ -79,7 +81,7 @@ export default forwardRef((props: params, ref) => {
   }, [status])
   return (
     <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
-      <View className={classnames(styles.checkbox_main, getMainClassName())}>
+      <View className={classnames(styles.checkbox_main, getMainClassName())} hidden={hidden}>
         <View className={classnames(styles.checkbox_item, getClassName())}>
           {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
         </View>

src/components/infiniteScroll/index.tsx

@@ -1,5 +1,5 @@
 import { ScrollView, View } from "@tarojs/components"
-import { memo, ReactNode, useMemo, useState } from "react"
+import React, { memo, ReactNode, useMemo, useState } from "react"
 import style from "./index.module.scss"
 import DotLoading from "@/components/dotLoading"
 import LoadingCard from "../loadingCard"
@@ -7,111 +7,121 @@ import LoadingCard from "../loadingCard"
 export type StatusParam = 0|1|2|3
 
 type Params = {
-    styleObj?: Object,
+  styleObj?: React.CSSProperties
-    selfonScrollToLower?: () => void,
+  selfonScrollToLower?: () => void
-    hasMore?: false|true, 
+  hasMore?: boolean
-    moreStatus?: false|true,
+  moreStatus?: boolean
-    statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
+  statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
-    children?: ReactNode,
+  children?: ReactNode
-    lowerThresholdNum?: number,
+  lowerThresholdNum?: number
-    selfOnScrollToUpper?:() => void
+  selfOnScrollToUpper?: () => void
-    selfOnScroll?:(val:any) => void
+  selfOnScroll?: (val: any) => void
-    selfOnRefresherPulling?: () => void
+  selfOnRefresherPulling?: () => void
-    selfOnRefresherRefresh?: () => void
+  selfOnRefresherRefresh?: () => void
-    selfOnRefresherRestore?: () => void
+  selfOnRefresherRestore?: () => void
-    selfOnRefresherAbort?: () => void
+  selfOnRefresherAbort?: () => void
-    paddingBottom?: number,
+  paddingBottom?: number
-    refresherTriggered?: true|false,
+  refresherTriggered?: boolean
-    refresherEnabled?: true|false,
+  refresherEnabled?: boolean
+  enableBackToTop?: boolean
 }
-export default memo(({
+export default memo(
-    styleObj, 
+  ({
-    selfonScrollToLower, 
+    styleObj,
+    selfonScrollToLower,
     selfOnScrollToUpper,
     selfOnScroll,
     selfOnRefresherPulling,
     selfOnRefresherRefresh,
     selfOnRefresherRestore,
     selfOnRefresherAbort,
-    hasMore=true, 
+    hasMore = true,
-    children, 
+    children,
-    lowerThresholdNum = 5, 
+    lowerThresholdNum = 5,
     paddingBottom = 0,
     refresherTriggered = false,
     refresherEnabled = false,
     moreStatus = true,
-    statusMore = 0
+    statusMore = 0,
-}: Params) => {
+    enableBackToTop=true,
+  }: Params) => {
     const scrollToLower = () => {
-        selfonScrollToLower?.()
+      selfonScrollToLower?.()
     }
     const scrollToUpper = () => {
-        selfOnScrollToUpper?.()
+      selfOnScrollToUpper?.()
     }
     const scroll = (e) => {
-        selfOnScroll?.(e)
+      selfOnScroll?.(e)
     }
     const refresherPulling = () => {
-        selfOnRefresherPulling?.()
+      selfOnRefresherPulling?.()
     }
     const refresherRefresh = () => {
-        selfOnRefresherRefresh?.()
+      selfOnRefresherRefresh?.()
     }
     const refresherRestore = () => {
-        selfOnRefresherRestore?.()
+      selfOnRefresherRestore?.()
     }
     const refresherAbort = () => {
-        selfOnRefresherAbort?.()
+      selfOnRefresherAbort?.()
     }
 
     //返回顶部
     const scrollTop = useMemo(() => {
-        if(statusMore == 0) {
+      if (statusMore == 0) {
-            return 0.1
+        return 0.1
-        }
+      }
-    },[statusMore])
+    }, [statusMore])
 
     return (
-        <>
+      <>
-            <ScrollView 
+        <ScrollView
-                style={styleObj}  
+          style={styleObj}
-                className={style.scroll_main} 
+          className={style.scroll_main}
-                scrollY 
+          scrollY
-                onScrollToLower={() => scrollToLower()}
+          onScrollToLower={() => scrollToLower()}
-                onScrollToUpper={() => scrollToUpper()}
+          onScrollToUpper={() => scrollToUpper()}
-                onScroll={(e) => scroll(e)}
+          onScroll={(e) => scroll(e)}
-                lowerThreshold={lowerThresholdNum}
+          lowerThreshold={lowerThresholdNum}
-                refresherEnabled = {refresherEnabled}
+          refresherEnabled={refresherEnabled}
-                refresherTriggered = {refresherTriggered}
+          refresherTriggered={refresherTriggered}
-                onRefresherPulling = {() => refresherPulling()}
+          onRefresherPulling={() => refresherPulling()}
-                onRefresherRefresh = {() => refresherRefresh()}
+          onRefresherRefresh={() => refresherRefresh()}
-                onRefresherRestore = {() => refresherRestore()}
+          onRefresherRestore={() => refresherRestore()}
-                onRefresherAbort = {() => refresherAbort()}
+          onRefresherAbort={() => refresherAbort()}
-                refresherBackground ='#F8F8F8'
+          refresherBackground='#F8F8F8'
-                scrollTop={scrollTop}
+          enableBackToTop={enableBackToTop}
-            >
+          scrollTop={scrollTop}>
-                {!moreStatus&&<>
+          {(!moreStatus && (
-                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
+            <>
-                        {children}
+              <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
-                    </View>
+                {children}
-                </>||
+              </View>
-                <>
+            </>
-                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
+          )) || (
-                            {children}
+            <>
-                            <View className={style.infinite_scroll}>
+              {(statusMore == 2 || statusMore == 3) && (
-                                {
+                <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
-                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
+                  {children}
-                                    <View className={style.noMore}>没有更多数据了</View>
+                  <View className={style.infinite_scroll}>
-                                }
+                    {(statusMore == 2 && (
-                            </View>
+                      <View className={style.loading_more}>
-                        </View>
+                        加载中
-                    }
+                        <DotLoading />
-                    {(statusMore == 0)&&<LoadingCard/>}
+                      </View>
-                    {(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
+                    )) || <View className={style.noMore}>没有更多数据了</View>}
-                </>}
+                  </View>
-                
+                </View>
-                <View className="common_safe_area_y"></View>
+              )}
-            </ScrollView>
+              {statusMore == 0 && <LoadingCard />}
-        </>
+              {statusMore == 1 && <LoadingCard loadingIcon={false} title='暂无数据' />}
+            </>
+          )}
+
+          <View className='common_safe_area_y'></View>
+        </ScrollView>
+      </>
     )
-})
+  },
+)

src/components/layoutBlock/index.tsx

@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { Button, Radio, View } from '@tarojs/components'
 import { FC, ReactNode } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -7,7 +7,7 @@ type FlexDirection = 'row' | 'col'
 
 interface PropsType {
   flexDirection?: FlexDirection
-  
+  onClick?: Function
   circle?: boolean
   children?: ReactNode
   customStyle?: React.CSSProperties
@@ -15,7 +15,7 @@ interface PropsType {
 }
 
 const LayoutBlock: FC<PropsType> = (props) => {
-  const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName='' } = props
+  const { flexDirection = 'col', circle = false, children, customStyle = {}, customClassName = '', onClick } = props
 
   const getClassName = () => {
     const classObject = {
@@ -25,8 +25,16 @@ const LayoutBlock: FC<PropsType> = (props) => {
     return classObject
   }
 
+  const handleClick = (event)=>{
+    console.log('event==>', event)
+    onClick && onClick()
+  }
+
   return (
-    <View className={classnames(styles.layoutBlock, getClassName(), customClassName)} style={customStyle}>
+    <View
+      className={classnames(styles.layoutBlock, getClassName(), customClassName)}
+      style={customStyle}
+      onClick={handleClick}>
       {children}
     </View>
   )

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

@@ -7,7 +7,8 @@ import styles from './index.module.scss'
 import { debounce } from '@/common/util'
 import { formatPriceDiv } from '@/common/format'
 import { EnumSaleMode } from '@/common/Enumerate'
-
+import { useNeedMemoCallback } from '@/use/useCommon'
+import {selectList} from '../../config'
 type PropsType = {
   item: Record<string, any> & object
   orderType: EnumSaleMode
@@ -16,12 +17,6 @@ type PropsType = {
   onUnChecked?: Function
 }
 
-const selectList = [
-  { value: 0, title: '大货', unit: '条', eunit: 'kg', step: 1, digits: 0, minNum: 1, maxNum: 100000, defaultNum: 1 },
-  { value: 1, title: '剪板', unit: '米', eunit: 'm', step: 1, digits: 2, minNum: 0.5, maxNum: 9.99, defaultNum: 1 },
-  { value: 2, title: '散剪', unit: '米', eunit: 'kg', step: 1, digits: 2, minNum: 3, maxNum: 100000, defaultNum: 3 },
-]
-
 const ColorKindItem: FC<PropsType> = memo(
   (props) => {
     const { item, orderType = EnumSaleMode.Bulk, isSelected = false, onChecked, onUnChecked } = props
@@ -41,13 +36,6 @@ const ColorKindItem: FC<PropsType> = memo(
       return item.sale_mode == EnumSaleMode.Bulk ? '条' : '米'
     }, [])
 
-    // const [checked, setCheck] = useState(false)
-
-    // useEffect(() => {
-    //   setCheck(isSelected)
-    //   console.log('useEffect', isSelected)
-    // }, [isSelected])
-
     const handleSelect = () => {
       console.log('handleSelect')
       // setCheck(true)
@@ -58,7 +46,14 @@ const ColorKindItem: FC<PropsType> = memo(
       onUnChecked && onUnChecked({ ...item, checked: false })
     }
 
-    const getInputValue = debounce(async (num, item) => {}, 300)
+    const getInputValue = debounce(async (num, item) => {
+      if (item.sale_mode === EnumSaleMode.Bulk) {
+        item.roll = num
+      }else{
+        item.length = num
+      } 
+      onChecked && onChecked({ ...item, checked: true })
+    }, 300)
 
     return (
       <MCheckbox

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

@@ -2,6 +2,7 @@
   margin: 24px;
   padding-left: 0;
   padding-right: 0;
+  border: 1px solid transparent;
   .checkbox {
     padding: 0 24px;
     &--text {
@@ -11,6 +12,10 @@
   }
 }
 
+.selected{
+  border-color: $color_main;
+}
+
 .line {
   margin: 16px 0;
 }
@@ -80,6 +85,5 @@
   height: auto;
 }
 .drawerClose {
-
   height: 0;
 }

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

@@ -1,9 +1,9 @@
 import { Text, View } from '@tarojs/components'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import { formatPriceDiv } from '@/common/format'
-import Taro from '@tarojs/taro'
+import Taro, { useDidShow } from '@tarojs/taro'
 import LayoutBlock from '@/components/layoutBlock'
 import MCheckbox from '@/components/checkbox'
 import Tag from '@/components/tag'
@@ -11,9 +11,14 @@ import Divider from '@/components/divider'
 import NormalButton from '@/components/normalButton'
 import ColorKindItem from '../colorKindItem'
 import { EnumSaleMode } from '@/common/Enumerate'
+import { useNeedMemoCallback } from '@/use/useCommon'
+import {selectList} from '../../config'
+import { ShoppingContext } from '../../index'
 
 type PropsType = {
-  obj?: any
+  itemData?: ShoppingCartData
+  selectedId?: number
+  onSelectedId?: Function
 }
 
 const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
@@ -23,12 +28,15 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
 })
 
 export default memo((props: PropsType) => {
-  console.log('重新渲染 shoppingCartItem');
+
+  // const { handleSelectedItem } = useLayoutBlockContext()
+  const { itemData, selectedId } = props
+
+  console.log('重新渲染 shoppingCartItem', selectedId)
   const [openDetail, setOpenDetail] = useState(false)
 
   const handleOpenDetail = () => {
     setOpenDetail((isOpen) => !isOpen)
-    
   }
 
   const [selected, setSelect] = useState<EnumSaleMode>(0)
@@ -37,70 +45,65 @@ export default memo((props: PropsType) => {
     setSelect(type)
   }
 
-  const [mockList, setMockList] = useState([
+  const [mockList, setMockList] = useState(
     {
-      sale_mode: 0,
+      0: [
-      list: [
         { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
         { id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
         { id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
       ],
-    },
+      1: [
-    {
-      sale_mode: 1,
-      list: [
         { id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
         { id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
         { id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
       ],
-    },
+      2: [
-    {
-      sale_mode: 2,
-      list: [
         { id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
         { id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
       ],
-    },
+    }
-  ])
+  )
+  // const [mockList, setMockList] = useState(itemData?.color_list)
 
-  const handleChecked = (current) => {
+  const handleChecked = useCallback(
-    console.log('handleChecked', current)
+    (current) => {
-    const index = mockList.findIndex(item=>item.sale_mode === selected)
+      console.log('handleChecked', current)
-    const tempList = mockList[index].list.map((item) => {
+      const tempList = mockList[selected].map((item) => {
-      if (item.id === current.id) {
+        if (item.id === current.id) {
-        item = current
+          item = current
-      }
-      return item
-    })
-    setMockList((pre=>{
-      return pre.map(item=>{
-        if(item.sale_mode === selected){
-          item.list = tempList
         }
         return item
       })
-    }))
+      setMockList((pre) => {
-  }
+        return {
-  const handleUnChecked = (current) => {
+          ...pre,
-    const index = mockList.findIndex((item) => item.sale_mode === selected)
+          [selected]: tempList,
-    const tempList = mockList[index].list.map((item) => {
+        }
-      if (item.id === current.id) {
+      })
-        item = current
+    },
-      }
+    [mockList, selected],
-      return item
+  )
-    })
+  const handleUnChecked = useCallback(
-    setMockList((pre) => {
+    (current) => {
-      return pre.map((item) => {
+      console.log('handleChecked', current)
-        if (item.sale_mode === selected) {
+      const tempList = mockList[selected].map((item) => {
-          item.list = tempList
+        if (item.id === current.id) {
+          item = current
         }
         return item
       })
-    })
+      setMockList((pre) => {
-  }
+        return {
+          ...pre,
+          [selected]: tempList,
+        }
+      })
+    },
+    [mockList, selected],
+  )
 
   const memoList = useMemo(() => {
-    return mockList[selected].list.map((item, index) => {
+    return mockList[selected].map((item, index) => {
       return (
         <ColorKindItem
           key={item.id}
@@ -113,19 +116,27 @@ export default memo((props: PropsType) => {
     })
   }, [mockList, selected])
 
+  const handleClickLayout = () => {
+    console.log('itemData===>', itemData)
+  }
+
+  const {isManager} = useContext(ShoppingContext)
+
   return (
-    <LayoutBlock circle customClassName={styles.layout}>
+    <LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
-      <MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
+      <MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false} hidden={isManager}>
         <View className='flex-row justify-between' onClick={handleOpenDetail}>
           <View className={styles.topItem}>
             <View className='flex-row items-center'>
-              <View className={styles.topTitle}>灵玉布行</View>
+              <View className={styles.topTitle}>{itemData?.purchaser_name}</View>
               <Tag type='info' size='normal' circle plain>
-                刘思伟
+                {itemData?.sale_user_name}
               </Tag>
             </View>
             <View className={styles.summary}>
-              <Text>已选 1 种面料，1 个颜色，共 4 条</Text>
+              <Text>
+                已选 {mockList[selected].filter(item=>item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
+              </Text>
             </View>
           </View>
           <DrawerButton isOpen={openDetail} />
@@ -167,7 +178,7 @@ export default memo((props: PropsType) => {
           <View className={classnames(styles.orderTitle, 'justify-between')}>
             <Text>布料颜色</Text>
             <Tag type='danger' size='normal' circle plain={false}>
-              大货单位：条
+              {selectList[selected].title}单位：{selectList[selected].unit}
             </Tag>
           </View>
         </View>
@@ -175,4 +186,4 @@ export default memo((props: PropsType) => {
       </View>
     </LayoutBlock>
   )
-})
+}, useNeedMemoCallback())

src/pages/shopping/config.ts

@@ -0,0 +1,23 @@
+export const selectList = {
+  0: { title: '大货', unit: '条', eunit: 'kg', step: 1, digits: 0, minNum: 1, maxNum: 100000, defaultNum: 1 },
+  1: {
+    title: '剪板',
+    unit: '米',
+    eunit: 'm',
+    step: 1,
+    digits: 2,
+    minNum: 0.5,
+    maxNum: 9.99,
+    defaultNum: 1,
+  },
+  2: {
+    title: '散剪',
+    unit: '米',
+    eunit: 'kg',
+    step: 1,
+    digits: 2,
+    minNum: 3,
+    maxNum: 100000,
+    defaultNum: 3,
+  },
+}

src/pages/shopping/index.module.scss

@@ -10,7 +10,8 @@
     justify-content: space-between;
     height: 100%;
     .shopping__list__container{
-      overflow: scroll;
+      flex: 0 1 auto;
+      overflow: hidden;
     }
   }
 }

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 { FC, useCallback, useMemo, useState } from 'react'
+import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
@@ -11,20 +11,29 @@ import BottomBtns from '@/components/BottomBtns'
 import { formatPriceDiv } from '@/common/format'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
+import { ShoppingCartListApi } from '@/api/index'
+import { dataLoadingStatus } from '@/common/util'
 
-const Shopping: FC = () => {
+const defaultContext = {
+  isManager: false
+}
+
+export const ShoppingContext = React.createContext(defaultContext)
+
+export const Shopping: FC = () => {
   //输入了搜索关键字
   const getSearchData = useCallback((e) => {
     // pageNum.current.page = 1
     // setOrderData(() => ({ list: [], total: 0 }))
     // setSearchField((val) => ({ ...val, name: e, size: 10 }))
   }, [])
-
+  // 是否在 管理 状态
   const [isManage, setManage] = useState(false)
 
   // 管理
   const onStartToManage = () => {
     setManage((isManage) => !isManage)
+    ShoppingContext.Consumer
   }
 
   const [selectedAmount, setSelectedAmount] = useState(0)
@@ -38,9 +47,50 @@ const Shopping: FC = () => {
     console.log('handleSelectAllCheckbox', isSelectAll)
   }
 
+  const [listHeight, setListHeight] = useState('auto')
+
+  const { fetchData, state } = ShoppingCartListApi()
+
+  const [shoppingCartData, setShoppingCartData] = useState<{ list: ShoppingCartData[]; total: number }>({ list: [], total: 0 })
+
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
+  }, [shoppingCartData, state])
+
+  useDidShow(() => {
+    fetchData()
+  })
+
+  useEffect(() => {
+    setShoppingCartData({ list: state.data, total: state.data.length })
+  }, [state])
+
+  useEffect(() => {
+    let query = Taro.createSelectorQuery()
+    console.log(query)
+    query.select('#shoppingContainer').boundingClientRect()
+    query.select('#topBar').boundingClientRect()
+    query.select('#bottomBar').boundingClientRect()
+    query.exec((res) => {
+      const containerHeight = res[0].height
+      const topBarHeight = res[1].height
+      const bottomBarHeight = res[2].height
+      const listHeight = containerHeight - topBarHeight - bottomBarHeight
+      console.log('res==>', listHeight)
+      setListHeight(listHeight + 'px')
+    })
+  }, [])
+
+  const [selectedId, setSelectedId] = useState<number>()
+
+  const handleSelectedItem = (item: ShoppingCartData) => {
+    setSelectedId(item.purchaser_id)
+  }
+
   return (
-    <View className={classnames('flex-col', styles.shopping)}>
+    <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
-      <View className={styles['shopping--topBar']}>
+      <View className={styles['shopping--topBar']} id='topBar'>
         <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
           <View className={styles.flexBox} onClick={onStartToManage}>
             {isManage ? (
@@ -52,29 +102,23 @@ const Shopping: FC = () => {
         </Search>
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
-        <View className={classnames(styles.shopping__list__container, 'flex-item')}>
+        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
-          {/* <InfiniteScroll
+          <ShoppingContext.Provider value={{isManager:false}}>
-            statusMore={statusMore}
+            <InfiniteScroll statusMore={statusMore}>
-            selfonScrollToLower={getScrolltolower}
+              {!!shoppingCartData.list?.length &&
-            refresherEnabled={true}
+                shoppingCartData.list?.map((item, index) => {
-            refresherTriggered={refresherTriggeredStatus}
+                  return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
-            selfOnRefresherRefresh={getRefresherRefresh}>
+                })}
-            {orderData?.list?.map((item, index) => {
+            </InfiniteScroll>
-              return (
+          </ShoppingContext.Provider>
-                <View key={item.id} className={styles.order_item_con}>
+        </View>
-                  <ItemList obj={item} key={index}></ItemList>
+        <View id='bottomBar'>
-                </View>
+          {isManage ? (
-              )
+            <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
-            })}
+          ) : (
-          </InfiniteScroll> */}
+            <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
-          <ItemList></ItemList>
+          )}
-          <ItemList></ItemList>
         </View>
-        {isManage ? (
-          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
-        ) : (
-          <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
-        )}
       </View>
     </View>
   )

src/pages/shopping/types.ts

@@ -0,0 +1,31 @@
+type ProductImageUrl = string
+interface ShoppingCartData {
+  purchaser_code: string
+  purchaser_id: number
+  purchaser_name: string
+  purchaser_short_name: string
+  sale_user_id: number
+  sale_user_name: string
+  color_list: ColorList
+  [Property:string]: any
+}
+interface ColorList {
+  estimate_amount: number
+  estimate_weight: number
+  id: number
+  length: number
+  product_code: string
+  product_color_code: string
+  product_color_id: number
+  product_color_name: string
+  product_color_texture_url: ProductImageUrl
+  product_id: number
+  product_name: string
+  roll: number
+  sale_mode: number
+  sale_mode_name: string
+  sale_offset: number
+  sale_price: number
+  standard_price: number
+  [Property: string]: any
+}

src/use/useCommon.ts

@@ -1,5 +1,3 @@
-import { SubscriptionMessageApi } from '@/api/user'
-import Taro from '@tarojs/taro'
 import dayjs from 'dayjs'
 import { useEffect, useRef, useState } from 'react'
 
@@ -88,3 +86,83 @@ export const useTimeCountDown = () => {
 //     openSubscriptionMessage,
 //   }
 // }
+
+type NormalPropsType = Record<string | symbol | number, any>
+type Options = {
+  deep?: boolean
+}
+
+const defaultOptions = {
+  deep: false
+}
+/**
+ * 适用于 memo 第二个入参 手动触发渲染
+ * 目前是判断 引用地址 是否相同 TODO： 判断值是否相同
+ * @param options 配置
+ * @returns {(prevProps: NormalPropsType, nextProps: NormalPropsType) => boolean} 回调函数
+ */
+export const useNeedMemoCallback = (options: Options = defaultOptions) => {
+  return (prevProps: NormalPropsType, nextProps: NormalPropsType) => {
+    // console.log(options)
+    console.log('memo==>', prevProps, nextProps)
+    let needMemoized = true
+    // 引用类型
+    // function array object   
+    // 基本类型
+    // number boolean string number symbol null undefined
+  
+    // 循环props对象
+    const handleDiff = () => {
+      for (let [key, value] of Object.entries(prevProps)){
+        if (!Object.is(value, nextProps[key])) {
+          console.log('函数不相等',value === nextProps[key])
+          console.log('asdfasdf',value)
+          needMemoized = false
+          break
+        }
+      }
+        // Object.entries(prevProps).forEach(([key, value]) => {
+        //   if (!nextProps.hasOwnProperty(key)) {
+        //     needMemoized = false
+        //     // 新增的属性
+        //     if (Object.prototype.toString.call(value) === '[object Object]') {
+        //       parent[key] = {}
+        //     } else if (Object.prototype.toString.call(value) === '[object Array]') {
+        //       parent[key] = []
+        //     }
+        //   }
+        //   if (typeof data[key] === 'object') {
+        //     o[key] = internalSetData(parent[key], data[key])
+        //   } else {
+        //     // 核心处理逻辑
+        //     // key == data第一层  如果要做到data第二层呢？所以需要递归
+        //     if (parent[key] != data[key]) {
+        //       o[key] = data[key]
+        //       changed = true
+        //     }
+        //   }
+        // })
+    }
+    handleDiff()
+    return needMemoized
+  }
+}
+
+const needMemo = useNeedMemoCallback()
+const hobby = {
+      play1: 1,
+      play2: 2
+    }
+const bool = needMemo(
+  {
+    name: '小明',
+    age: 18,
+    hobby: hobby,
+  },
+  {
+    name: '小明',
+    age: 18,
+    hobby: hobby,
+  },
+)
+console.log('bool==>', bool)