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

2022-09-16 19:04:29 +08:00 · 2022-09-16 19:04:29 +08:00 · ad32aa5773
commit ad32aa5773
parent c2fa0766aa
13 changed files with 424 additions and 184 deletions
--- a/src/api/index.ts
+++ b/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'
 /**
 *  系列列表
--- a/src/api/shopping/index.ts
+++ b/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",
+    })
+}
--- a/src/components/checkbox/index.tsx
+++ b/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>
--- a/src/components/infiniteScroll/index.tsx
+++ b/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,24 +7,26 @@ import LoadingCard from "../loadingCard"
 export type StatusParam = 0|1|2|3

 type Params = {
-    styleObj?: Object,
-    selfonScrollToLower?: () => void,
-    hasMore?: false|true, 
-    moreStatus?: false|true,
-    statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
-    children?: ReactNode,
-    lowerThresholdNum?: number,
-    selfOnScrollToUpper?:() => void
-    selfOnScroll?:(val:any) => void
-    selfOnRefresherPulling?: () => void
-    selfOnRefresherRefresh?: () => void
-    selfOnRefresherRestore?: () => void
-    selfOnRefresherAbort?: () => void
-    paddingBottom?: number,
-    refresherTriggered?: true|false,
-    refresherEnabled?: true|false,
+  styleObj?: React.CSSProperties
+  selfonScrollToLower?: () => void
+  hasMore?: boolean
+  moreStatus?: boolean
+  statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
+  children?: ReactNode
+  lowerThresholdNum?: number
+  selfOnScrollToUpper?: () => void
+  selfOnScroll?: (val: any) => void
+  selfOnRefresherPulling?: () => void
+  selfOnRefresherRefresh?: () => void
+  selfOnRefresherRestore?: () => void
+  selfOnRefresherAbort?: () => void
+  paddingBottom?: number
+  refresherTriggered?: boolean
+  refresherEnabled?: boolean
+  enableBackToTop?: boolean
 }
-export default memo(({
+export default memo(
+  ({
    styleObj,
    selfonScrollToLower,
    selfOnScrollToUpper,
@ -33,85 +35,93 @@ export default memo(({
    selfOnRefresherRefresh,
    selfOnRefresherRestore,
    selfOnRefresherAbort,
-    hasMore=true, 
+    hasMore = true,
    children,
    lowerThresholdNum = 5,
    paddingBottom = 0,
    refresherTriggered = false,
    refresherEnabled = false,
    moreStatus = true,
-    statusMore = 0
-}: Params) => {
+    statusMore = 0,
+    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) {
-            return 0.1
-        }
-    },[statusMore])
+      if (statusMore == 0) {
+        return 0.1
+      }
+    }, [statusMore])

    return (
-        <>
-            <ScrollView 
-                style={styleObj}  
-                className={style.scroll_main} 
-                scrollY 
-                onScrollToLower={() => scrollToLower()}
-                onScrollToUpper={() => scrollToUpper()}
-                onScroll={(e) => scroll(e)}
-                lowerThreshold={lowerThresholdNum}
-                refresherEnabled = {refresherEnabled}
-                refresherTriggered = {refresherTriggered}
-                onRefresherPulling = {() => refresherPulling()}
-                onRefresherRefresh = {() => refresherRefresh()}
-                onRefresherRestore = {() => refresherRestore()}
-                onRefresherAbort = {() => refresherAbort()}
-                refresherBackground ='#F8F8F8'
-                scrollTop={scrollTop}
-            >
-                {!moreStatus&&<>
-                    <View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
-                        {children}
-                    </View>
-                </>||
-                <>
-                    {(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
-                            {children}
-                            <View className={style.infinite_scroll}>
-                                {
-                                    (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
-                                    <View className={style.noMore}>没有更多数据了</View>
-                                }
-                            </View>
-                        </View>
-                    }
-                    {(statusMore == 0)&&<LoadingCard/>}
-                    {(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
-                </>}
+      <>
+        <ScrollView
+          style={styleObj}
+          className={style.scroll_main}
+          scrollY
+          onScrollToLower={() => scrollToLower()}
+          onScrollToUpper={() => scrollToUpper()}
+          onScroll={(e) => scroll(e)}
+          lowerThreshold={lowerThresholdNum}
+          refresherEnabled={refresherEnabled}
+          refresherTriggered={refresherTriggered}
+          onRefresherPulling={() => refresherPulling()}
+          onRefresherRefresh={() => refresherRefresh()}
+          onRefresherRestore={() => refresherRestore()}
+          onRefresherAbort={() => refresherAbort()}
+          refresherBackground='#F8F8F8'
+          enableBackToTop={enableBackToTop}
+          scrollTop={scrollTop}>
+          {(!moreStatus && (
+            <>
+              <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
+                {children}
+              </View>
+            </>
+          )) || (
+            <>
+              {(statusMore == 2 || statusMore == 3) && (
+                <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
+                  {children}
+                  <View className={style.infinite_scroll}>
+                    {(statusMore == 2 && (
+                      <View className={style.loading_more}>
+                        加载中
+                        <DotLoading />
+                      </View>
+                    )) || <View className={style.noMore}>没有更多数据了</View>}
+                  </View>
+                </View>
+              )}
+              {statusMore == 0 && <LoadingCard />}
+              {statusMore == 1 && <LoadingCard loadingIcon={false} title='暂无数据' />}
+            </>
+          )}

-                <View className="common_safe_area_y"></View>
-            </ScrollView>
-        </>
+          <View className='common_safe_area_y'></View>
+        </ScrollView>
+      </>
    )
-})
+  },
+)
--- a/src/components/layoutBlock/index.tsx
+++ b/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>
  )
--- a/src/pages/shopping/components/colorKindItem/index.tsx
+++ b/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
--- a/src/pages/shopping/components/shoppingCartItem/index.module.scss
+++ b/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;
 }
--- a/src/pages/shopping/components/shoppingCartItem/index.tsx
+++ b/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,
-      list: [
+      0: [
        { 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 },
      ],
-    },
-    {
-      sale_mode: 1,
-      list: [
+      1: [
        { 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 },
      ],
-    },
-    {
-      sale_mode: 2,
-      list: [
+      2: [
        { 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) => {
-    console.log('handleChecked', current)
-    const index = mockList.findIndex(item=>item.sale_mode === selected)
-    const tempList = mockList[index].list.map((item) => {
-      if (item.id === current.id) {
-        item = current
-      }
-      return item
-    })
-    setMockList((pre=>{
-      return pre.map(item=>{
-        if(item.sale_mode === selected){
-          item.list = tempList
+  const handleChecked = useCallback(
+    (current) => {
+      console.log('handleChecked', current)
+      const tempList = mockList[selected].map((item) => {
+        if (item.id === current.id) {
+          item = current
        }
        return item
      })
-    }))
-  }
-  const handleUnChecked = (current) => {
-    const index = mockList.findIndex((item) => item.sale_mode === selected)
-    const tempList = mockList[index].list.map((item) => {
-      if (item.id === current.id) {
-        item = current
-      }
-      return item
-    })
-    setMockList((pre) => {
-      return pre.map((item) => {
-        if (item.sale_mode === selected) {
-          item.list = tempList
+      setMockList((pre) => {
+        return {
+          ...pre,
+          [selected]: tempList,
+        }
+      })
+    },
+    [mockList, selected],
+  )
+  const handleUnChecked = useCallback(
+    (current) => {
+      console.log('handleChecked', current)
+      const tempList = mockList[selected].map((item) => {
+        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}>
-      <MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
+    <LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
+      <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())
--- a/src/pages/shopping/config.ts
+++ b/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,
+  },
+}
--- a/src/pages/shopping/index.module.scss
+++ b/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;
    }
  }
 }
--- a/src/pages/shopping/index.tsx
+++ b/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={styles['shopping--topBar']}>
+    <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
+      <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')}>
-          {/* <InfiniteScroll
-            statusMore={statusMore}
-            selfonScrollToLower={getScrolltolower}
-            refresherEnabled={true}
-            refresherTriggered={refresherTriggeredStatus}
-            selfOnRefresherRefresh={getRefresherRefresh}>
-            {orderData?.list?.map((item, index) => {
-              return (
-                <View key={item.id} className={styles.order_item_con}>
-                  <ItemList obj={item} key={index}></ItemList>
-                </View>
-              )
-            })}
-          </InfiniteScroll> */}
-          <ItemList></ItemList>
-          <ItemList></ItemList>
+        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
+          <ShoppingContext.Provider value={{isManager:false}}>
+            <InfiniteScroll statusMore={statusMore}>
+              {!!shoppingCartData.list?.length &&
+                shoppingCartData.list?.map((item, index) => {
+                  return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
+                })}
+            </InfiniteScroll>
+          </ShoppingContext.Provider>
+        </View>
+        <View id='bottomBar'>
+          {isManage ? (
+            <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
+          ) : (
+            <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
+          )}
        </View>
-        {isManage ? (
-          <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
-        ) : (
-          <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
-        )}
      </View>
    </View>
  )
--- a/src/pages/shopping/types.ts
+++ b/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
+}
--- a/src/use/useCommon.ts
+++ b/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)