✨ feat(发货列表): 初步完成发货列表UI界面

config/dev.js

@@ -18,7 +18,7 @@ module.exports = {
             args: [
               {
                 terserOptions: {
-                  compress: true, // 默认使用terser压缩
+                  compress: false, // 默认使用terser压缩
                   // compress: {
                   //   drop_console: true, // 去掉打印
                   // }, // 默认使用terser压缩

project.config.json

@@ -6,8 +6,8 @@
   "setting": {
     "urlCheck": false,
     "es6": false,
-    "postcss": false,
+    "postcss": true,
-    "minified": false,
+    "minified": true,
     "coverView": true,
     "lazyloadPlaceholderEnable": false,
     "preloadBackgroundData": false,

project.private.config.json

@@ -9,6 +9,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "发货列表",
+          "pathName": "pages/delivery/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "购物页面",
           "pathName": "pages/shopping/index",

src/app.config.ts

@@ -1,11 +1,5 @@
 export default defineAppConfig({
-  pages: [
+  pages: ['pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/user/index', 'pages/login/index'],
-    'pages/index/index',
-    'pages/order/index',
-    'pages/shopping/index',
-    'pages/user/index',
-    'pages/login/index',
-  ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
@@ -42,55 +36,41 @@ export default defineAppConfig({
     'custom-wrapper': '/custom-wrapper',
   },
   subPackages: [
+    {
+      root: 'pages/delivery',
+      pages: ['index'],
+    },
     {
       root: 'pages/colorRelated',
-      pages: [
+      pages: ['sampleComparison/index', 'takeColor/index', 'findColor/index'],
-        'sampleComparison/index',
-        'takeColor/index',
-        'findColor/index'
-      ],
     },
     {
-      root: "pages/addAddress",
+      root: 'pages/addAddress',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/addressManager",
+      root: 'pages/addressManager',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/customerPage",
+      root: 'pages/customerPage',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/orderDetails",
+      root: 'pages/orderDetails',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/saleuserPage",
+      root: 'pages/saleuserPage',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/searchPage",
+      root: 'pages/searchPage',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
     {
-      root: "pages/submitOrder",
+      root: 'pages/submitOrder',
-      pages: [
+      pages: ['index'],
-        "index"
-      ]
     },
   ],
 })

src/components/SegmentedControl/index.module.scss

@@ -0,0 +1,19 @@
+.status_list{
+    background-color: #fff;
+    font-size: $font_size;
+    color: #000;
+    // margin-top: 20px;
+    .status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #337FFF;
+        border-bottom: 4px solid #337FFF;
+    }
+    .list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}

src/components/SegmentedControl/index.tsx

@@ -0,0 +1,59 @@
+import { ScrollView, View } from '@tarojs/components'
+import classnames from 'classnames'
+import { FC, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+type PropsType = {
+  list: { id: number; name: string }[]
+  defaultId?: number | null
+  onSelect?: (val: number) => void
+}
+
+const segmentedControl: FC<PropsType> = (props) => {
+  const [selectInfo, setSelectInfo] = useState({
+    selected: -1, //当前选中的id
+    tabId: '', //需要滚动到的id
+  })
+  const { list, defaultId, onSelect } = props
+
+  useEffect(() => {
+    if (typeof defaultId === 'number' && defaultId >= 0) {
+      console.log('defaultId:::', defaultId)
+      const index = list?.findIndex((item) => {
+        return item.id == defaultId
+      })
+      if (index !== -1) {
+        const num = index > 0 ? index - 1 : 0
+        setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
+      }
+    }
+    setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
+  }, [defaultId])
+
+  const clickEvent = ({ item, index }: { item: any; index: number }) => {
+    const num = index > 0 ? index - 1 : 0
+    setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
+    onSelect?.(item.id)
+  }
+
+  return (
+    <View className={styles.status_list}>
+      <ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+        <View className={styles.list_scroll}>
+          {list.map((item, index) => {
+            return (
+              <View
+                key={item.id}
+                id={`tabs_${item.id}`}
+                onClick={() => clickEvent({ item, index })}
+                className={classnames(styles.status_item, selectInfo.selected == item.id && styles.selected)}>
+                {item.name}
+              </View>
+            )
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+export default segmentedControl

src/components/search/index.module.scss

@@ -12,7 +12,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        width: 100%;
+        flex: 1 1 auto;
         input{
             font-size: 27px;
             background: #eee;
@@ -66,4 +66,4 @@
         padding-left: 20px !important;
     }
     
-}
+}

src/components/search/index.tsx

@@ -18,7 +18,8 @@ type Params = {
     btnTitle?: string,
     debounceTime?: number //防抖时间，不设默认为零
     defaultValue?: string,
-    children?: ReactNode
+    children?: ReactNode,
+    customRightSlot?: ReactNode
 }
 
 export default memo(forwardRef(({
@@ -33,7 +34,8 @@ export default memo(forwardRef(({
     btnTitle = '搜索', //搜索文字
     debounceTime = 0, //防抖时间，不设默认为零
     defaultValue = '',//默认值
-    children
+    children,
+    customRightSlot
 }: Params, ref) => {
     const [inputCon, setInputCon] = useState('')
     const debounceTimeRef = useRef(0)
@@ -69,18 +71,40 @@ export default memo(forwardRef(({
     }
 
     return (
-        <>
+      <>
-            <View className={styles.search_main}>
+        <View className={styles.search_main}>
-                <View className={styles.search_con}>
+          <View className={styles.search_con}>
-                    {showIcon && <View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></View>}
+            {showIcon && (
-                    <Input placeholderStyle='color:#ABABAB; font-size:26rpx' onConfirm={onSearch} className={classnames(placeIcon == 'out' && styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
+              <View
-                    {!!inputCon && <View className={styles.search_closeBtn}>
+                className={classnames(
-                        <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
+                  'iconfont',
-                    </View>}
+                  'icon-sousuo',
-                </View>
+                  styles.icon_a_sousuo1_self,
-                {showBtn && <View style={btnStyle} className={styles.btn} onClick={onSearch}>{btnTitle}</View>}
+                  placeIcon == 'inner' ? styles.icon_inner : styles.icon_out,
-                {children}
+                )}></View>
+            )}
+            <Input
+              placeholderStyle='color:#ABABAB; font-size:26rpx'
+              onConfirm={onSearch}
+              className={classnames(placeIcon == 'out' && styles.input_out)}
+              disabled={disabled}
+              value={inputCon}
+              placeholder={placeholder}
+              onInput={(e) => onInputEven(e)}></Input>
+            {!!inputCon && (
+              <View className={styles.search_closeBtn}>
+                <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
+              </View>
+            )}
+            {customRightSlot}
+          </View>
+          {showBtn && (
+            <View style={btnStyle} className={styles.btn} onClick={onSearch}>
+              {btnTitle}
             </View>
-        </>
+          )}
+          {children}
+        </View>
+      </>
     )
-}))
+}))

src/pages/delivery/components/ItemList/index.module.scss

@@ -0,0 +1,50 @@
+.layoutBlock{
+  margin: 24px;
+}
+.topBar {
+  &__orderNo {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    color: $color_font_one;
+    font-size: 28px;
+  }
+  &__orderType {
+    color: rgba($color: #000000, $alpha: 0.6);
+    font-weight: 550;
+  }
+  &__orderStatus {
+    color: #e42945;
+  }
+}
+.content {
+  &__row {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    margin: 16px 0;
+    font-size: 28px;
+    color: rgba($color: #000000, $alpha: 0.4);
+    &__left {
+    }
+    &__right {
+    }
+  }
+}
+.bottomBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 24px;
+  margin-top: 10px;
+  &__button {
+    margin: 0 24px;
+  }
+  &__button:last-child {
+    margin: 0;
+  }
+}
+.bord {
+  color: $color_font_one;
+}

src/pages/delivery/components/ItemList/index.tsx

@@ -0,0 +1,64 @@
+import LayoutBlock from '@/components/layoutBlock'
+import Divider from '@/components/divider'
+import Tag from '@/components/tag'
+import { View, Text } from '@tarojs/components'
+import { FC } from 'react'
+import NormalButton from '@/components/normalButton'
+import styles from './index.module.scss'
+
+type PropsType = {
+  itemData?: Record<string, any>
+}
+
+const ItemList:FC<PropsType> = (props) => {
+  const { itemData } = props
+  // 查看详情
+  const handleDetail = () => {
+
+  }
+  // 确认审核
+  const handleAudit = () => {
+
+  }
+
+  return (
+    <LayoutBlock circle customClassName={styles.layoutBlock}>
+      <View className={styles.topBar}>
+        <View className={styles.topBar__orderNo}>
+          <View>单号：XS-LY-2208220092</View>
+          <View className={styles.topBar__orderStatus}>待审核</View>
+        </View>
+        <Text className={styles.topBar__orderType}>销售发货单</Text>
+      </View>
+      <Divider direction='horizontal'></Divider>
+      <View className={styles.content}>
+        <View className={styles.content__row}>
+          <View className={styles.content__row__left}>货品信息：</View>
+          <View className={styles.content__row__right}>
+            <Tag type='primary' circle plain>
+              大货
+            </Tag>
+            2种面料，4种颜色，共5米
+          </View>
+        </View>
+        <View className={styles.content__row}>
+          <View className={styles.content__row__left}>发货地址：</View>
+          <View className={styles.content__row__right}>永川纺织有限公司</View>
+        </View>
+        <View className={styles.content__row}>
+          <View className={styles.content__row__left}>创建时间：</View>
+          <View className={styles.content__row__right}>2022-09-01 18:32:32</View>
+        </View>
+      </View>
+      <View className={styles.bottomBar}>
+        <NormalButton customClassName={styles.bottomBar__button} type='info' round onClick={handleDetail}>
+          查看详情
+        </NormalButton>
+        <NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={handleAudit}>
+          确认审核
+        </NormalButton>
+      </View>
+    </LayoutBlock>
+  )
+}
+export default ItemList

src/pages/delivery/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '发货列表',
+}

src/pages/delivery/index.module.scss

@@ -0,0 +1,113 @@
+page {
+  background: #f7f7f7;
+}
+
+.delivery {
+  display: flex;
+  flex-flow: column nowrap;
+  .searchBox {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 8px 24px;
+    
+  }
+
+  .listBox {
+    background-color: #f7f7f7;
+  }
+
+  .itemBox {
+    margin-left: 24px;
+    background: #ffffff;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+    box-sizing: border-box;
+
+    .cussName {
+      margin-left: 48px;
+      width: 168px;
+      height: 34px;
+      font-size: 28px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000000;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .phone {
+      margin-left: 88px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+    }
+
+    .woker {
+      margin-left: 88px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+
+    }
+  }
+
+  .acticveitemBox {
+    margin-left: 24px;
+    width: 702px;
+    height: 104px;
+    background: #ffffff;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+    box-sizing: border-box;
+
+    border: 1px solid #337fff;
+
+    .cussName {
+      margin-left: 48px;
+      width: 168px;
+      height: 34px;
+      font-size: 28px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #000000;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .phone {
+      margin-left: 88px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+    }
+
+    .woker {
+      margin-left: 88px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+    }
+  }
+}
+.scanHandler{
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  right: 40px;
+}
+
+.icon__filter{
+    padding: 0 20px;
+    padding-right: 10px;
+}

src/pages/delivery/index.tsx

@@ -0,0 +1,198 @@
+import { View, Text } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, FC } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import Search from '@/components/search'
+import { ClientListApi } from '@/api/order'
+import Taro from '@tarojs/taro'
+import { useRouter } from '@tarojs/taro'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
+import IconText from '@/components/iconText'
+import SegmentedControl from '@/components/SegmentedControl'
+import IconFont from '@/components/iconfont/iconfont'
+import ItemList from './components/ItemList'
+
+// 发货列表
+const Delivery: FC = () => {
+  const [search, setSearch] = useState({
+    name: null,
+    page: 1,
+    size: 10,
+  })
+  const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+
+  const { fetchData: clitentFetch, state: orderState } = ClientListApi()
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+  }, [clentList, orderState])
+
+  const [clientObj, setclientObj] = useState({
+    clientId: null,
+    clientName: '',
+  })
+
+  //输入了搜索关键字
+  const getSearchData = useCallback((eq) => {
+    pageNum.current.page = 1
+    setClientlist(() => ({ list: [], total: 0 }))
+    setSearch((e) => ({ ...e, name: eq, size: 10 }))
+  }, [])
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (search.name === '') {
+      setSearch((e) => ({ ...e, name: null }))
+    }
+    if (search.name !== '') getCuss()
+  }, [search])
+
+  //上拉加载数据
+  const pageNum = useRef({ size: search.size, page: search.page })
+  const getScrolltolower = useCallback(() => {
+    if (clentList.list.length < clentList.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearch((e) => ({ ...e, size }))
+      console.log(search, 11111)
+    }
+  }, [clentList])
+
+  //列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+  const getRefresherRefresh = async () => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearch((val) => ({ ...val, size: 10 }))
+  }
+  const getCuss = async () => {
+    let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
+    if (router?.params.clientId) {
+      res.data.list.map((item) => {
+        if (item.id == router?.params.clientId) {
+          item.checked = true
+        } else {
+          item.checked = false
+        }
+        return item
+      })
+    }
+    setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+    setRefresherTriggeredStatus(() => false)
+  }
+
+  //选择客户
+  const selectClient = (item) => {
+    clentList.list.map((it) => {
+      if (item.id === it.id) {
+        it.checked = true
+      } else {
+        it.checked = false
+      }
+      return it
+    })
+    setclientObj(item)
+    let pages = Taro.getCurrentPages() // 获取当前的页面栈
+    let prevPage = pages[pages.length - 2]
+    prevPage.setData({
+      //设置上一个页面的值
+      clientId: item.id,
+      clientName: item.name,
+    })
+    setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
+    Taro.navigateBack({
+      delta: 1,
+    })
+  }
+  useEffect(() => {
+    if (clientObj?.clientId !== null) {
+      setclientObj(clientObj)
+    } else {
+      let pages = Taro.getCurrentPages() // 获取当前的页面栈
+      let prevPage = pages[pages.length - 2]
+      prevPage.setData({
+        //设置上一个页面的值
+        clientId: '',
+        clientName: '',
+      })
+    }
+  }, [clientObj])
+
+  // 筛选列表
+  const onShowFilter = () => {}
+
+  const [statusList, setStatusList] = useState([
+    {
+      id: 1,
+      name: '待发货',
+    },
+    {
+      id: 2,
+      name: '已完成',
+    },
+  ])
+
+  // //状态改变
+  const changeStatus = useCallback((e) => {
+    pageNum.current.page = 1
+    // setSearchField((value) => ({ ...value, status: e, size: 10 }))
+
+    console.log(e, '123123')
+    // setOrderData(() => ({ list: [], total: 0 }))
+  }, [])
+  // 扫描
+  const handleScan = () => {}
+
+  const scanIcon = () => {
+    return (
+      <View onClick={handleScan} className={styles.scanHandler}>
+        <IconFont name='icon-saomiao' size={40}></IconFont>
+      </View>
+    )
+  }
+
+  return (
+    <View className={styles.delivery}>
+      <View className={styles.searchBox}>
+        <Search placeholder='请输入或扫描条形码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} customRightSlot={scanIcon()}>
+          <View onClick={onShowFilter} className={styles.icon__filter}>
+            <IconText iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
+          </View>
+        </Search>
+      </View>
+      {/* 状态栏 */}
+      <SegmentedControl list={statusList} onSelect={changeStatus} defaultId={0} />
+
+      <View className={styles.listBox}>
+        {/* <InfiniteScroll
+          statusMore={statusMore}
+          selfonScrollToLower={getScrolltolower}
+          refresherEnabled={true}
+          refresherTriggered={refresherTriggeredStatus}
+          selfOnRefresherRefresh={getRefresherRefresh}>
+          {clentList.list.map((item, index) => {
+            return (
+              <View
+                className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)}
+                key={index}
+                onClick={() => {
+                  selectClient(item)
+                }}>
+                <View className={styles.cussName}>{item.name}</View>
+                <View className={styles.phone}>{item.phone}</View>
+                <View className={styles.woker}>{item.sale_user_name}</View>
+              </View>
+            )
+          })}
+        </InfiniteScroll> */}
+        <ItemList ></ItemList>
+        <ItemList ></ItemList>
+        <ItemList ></ItemList>
+        <ItemList ></ItemList>
+      </View>
+    </View>
+  )
+}
+export default Delivery

src/pages/order/components/orderStatusList/index.tsx

@@ -14,7 +14,7 @@ export default memo(({ list = [], defaultId = null, onSelect }: Param) => {
     tabId: '', //需要滚动到的id
   })
   useEffect(() => {
-    if (defaultId) {
+    if (typeof defaultId === 'number' && defaultId >= 0) {
       console.log('defaultId:::', defaultId)
       const index = list?.findIndex((item) => {
         return item.id == defaultId

src/pages/order/index.tsx

@@ -580,14 +580,14 @@ export default () => {
   return (
     <View>
       <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
-        <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+        <Search placeholder='搜索商品/名称/颜色/订单号' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
           <View className={styles.flexBox} onClick={() => showSelctPopup()}>
             <View className={classnames('iconfont', 'icon-shaixuan', !isDisabled ? styles.icon_shaixuan : styles.activeshaixuan)}></View>
             <View className={classnames(isDisabled ? styles.shaixuan : styles.activeshai)}>筛选</View>
           </View>
         </Search>
       </View>
-      <View style={{ background: '#FFFFFF', }}>
+      <View style={{ background: '#FFFFFF' }}>
         <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={-1} />
       </View>
       <View className={styles.order_list}>
@@ -605,8 +605,7 @@ export default () => {
                   key={index}
                   cancle={(e, item) => cancle(e, item)}
                   nextBuy={(e, item) => nextBuy(e, item)}
-                  toPay={(e, item) => toPay(e, item)}
+                  toPay={(e, item) => toPay(e, item)}></ItemList>
-                ></ItemList>
               </View>
             )
           })}
@@ -634,41 +633,76 @@ export default () => {
           <View className={styles.secondBox}>
             <View className={styles.secondTopfont}>订单单号</View>
             <View className={styles.inputBox}>
-              <Input onInput={(e) => { handInput(e) }} placeholderStyle='color:#000000; font-size:26rpx' className={styles.orderInput} value={searchObj.orderNo} placeholder={'请输入或扫描条形码'}></Input>
+              <Input
-              <View className={classnames('iconfont', 'icon-saomiao', styles.saomiao)} onClick={() => { handScan() }}></View>
+                onInput={(e) => {
+                  handInput(e)
+                }}
+                placeholderStyle='color:#000000; font-size:26rpx'
+                className={styles.orderInput}
+                value={searchObj.orderNo}
+                placeholder={'请输入或扫描条形码'}></Input>
+              <View
+                className={classnames('iconfont', 'icon-saomiao', styles.saomiao)}
+                onClick={() => {
+                  handScan()
+                }}></View>
             </View>
           </View>
           <View className={styles.thirdBox}>
             <View className={styles.thirdTopfont}>订单类型</View>
             <View className={styles.flexModebox}>
-              {
+              {modeList.map((item, index) => {
-                modeList.map((item, index) => {
+                return (
-                  return (
+                  <View
-                    <View onClick={() => { handCheckMode(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
+                    onClick={() => {
-                  )
+                      handCheckMode(item)
-                })
+                    }}
-              }
+                    className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)}
+                    key={index}>
+                    {item.name}
+                  </View>
+                )
+              })}
             </View>
           </View>
           <View className={styles.thirdBox}>
             <View className={styles.thirdTopfont}>发货方式</View>
             <View className={styles.flexModebox}>
-              {
+              {deliveryList.map((item, index) => {
-                deliveryList.map((item, index) => {
+                return (
-                  return (
+                  <View
-                    <View onClick={() => { handCheckDelivery(item) }} className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)} key={index}>{item.name}</View>
+                    onClick={() => {
-                  )
+                      handCheckDelivery(item)
-                })
+                    }}
-              }
+                    className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)}
+                    key={index}>
+                    {item.name}
+                  </View>
+                )
+              })}
             </View>
           </View>
           <View>{isDisabled}</View>
           <View style={{ height: '160rpx' }}></View>
 
           <View className={styles.bottomBox}>
-
+            <Button
-            <Button className={styles.resetBox} onClick={() => { handReset() }}> 重置</Button >
+              className={styles.resetBox}
-            <Button className={classnames(isDisabled ? styles.button : styles.activeButton)} disabled={isDisabled} onClick={() => { handSure?.() }}> 确认</Button >
+              onClick={() => {
+                handReset()
+              }}>
+              {' '}
+              重置
+            </Button>
+            <Button
+              className={classnames(isDisabled ? styles.button : styles.activeButton)}
+              disabled={isDisabled}
+              onClick={() => {
+                handSure?.()
+              }}>
+              {' '}
+              确认
+            </Button>
           </View>
           {/* <View className={styles.areaBox}></View> */}
         </View>
@@ -682,9 +716,8 @@ export default () => {
         handsurePay={(obj) => handsurePay(obj)}
         showSide={showSide}
         title={title}
-        picUrl={picUrl}
+        picUrl={picUrl}></PayPopup>
-      ></PayPopup>
       <OfflinePay show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={itemObj}></OfflinePay>
-    </View >
+    </View>
   )
 }

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

@@ -1,5 +1,5 @@
 import { Text, View } from '@tarojs/components'
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import { formatPriceDiv } from '@/common/format'
@@ -27,9 +27,8 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
   )
 })
 
-export default memo((props: PropsType) => {
+export default memo<PropsType>((props) => {
-
+  console.log('props==>', props)
-  // const { handleSelectedItem } = useLayoutBlockContext()
   const { itemData, selectedId } = props
 
   console.log('重新渲染 shoppingCartItem', selectedId)
@@ -45,25 +44,22 @@ export default memo((props: PropsType) => {
     setSelect(type)
   }
 
-  const [mockList, setMockList] = useState(
+  const [mockList, setMockList] = useState({
-    {
+    0: [
-      0: [
+      { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
-        { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
+      { id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
-        { id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
+      { id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
-        { id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
+    ],
-      ],
+    1: [
-      1: [
+      { id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
-        { id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
+      { id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
-        { id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
+      { id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
-        { id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
+    ],
-      ],
+    2: [
-      2: [
+      { id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
-        { id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
+      { id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
-        { id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
+    ],
-      ],
+  })
-    }
-  )
-  // const [mockList, setMockList] = useState(itemData?.color_list)
 
   const handleChecked = useCallback(
     (current) => {
@@ -120,11 +116,11 @@ export default memo((props: PropsType) => {
     console.log('itemData===>', itemData)
   }
 
-  const {isManager} = useContext(ShoppingContext)
+  // const { isManager } = useContext(ShoppingContext)
 
   return (
     <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}>
+      <MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
         <View className='flex-row justify-between' onClick={handleOpenDetail}>
           <View className={styles.topItem}>
             <View className='flex-row items-center'>
@@ -135,7 +131,7 @@ export default memo((props: PropsType) => {
             </View>
             <View className={styles.summary}>
               <Text>
-                已选 {mockList[selected].filter(item=>item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
+                已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
               </Text>
             </View>
           </View>

src/pages/shopping/index.tsx

@@ -33,7 +33,7 @@ export const Shopping: FC = () => {
   // 管理
   const onStartToManage = () => {
     setManage((isManage) => !isManage)
-    ShoppingContext.Consumer
+    // ShoppingContext.Consumer
   }
 
   const [selectedAmount, setSelectedAmount] = useState(0)
@@ -59,28 +59,31 @@ export const Shopping: FC = () => {
   }, [shoppingCartData, state])
 
   useDidShow(() => {
-    fetchData()
+    (async () => {
+      await fetchData()
+      let query = Taro.createSelectorQuery()
+      console.log('query', query)
+      query.select('#shoppingContainer').boundingClientRect()
+      query.select('#topBar').boundingClientRect()
+      query.select('#bottomBar').boundingClientRect()
+      query.exec((res) => {
+        console.log('res==>', res)
+        const containerHeight = res[0].height
+        const topBarHeight = res[1].height
+        const bottomBarHeight = res[2].height
+        const listHeight = containerHeight - topBarHeight - bottomBarHeight
+        setListHeight(listHeight + 'px')
+      })
+    })()
   })
 
   useEffect(() => {
     setShoppingCartData({ list: state.data, total: state.data.length })
   }, [state])
 
-  useEffect(() => {
+  useDidShow(() => {
-    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>()
 
@@ -105,8 +108,9 @@ export const Shopping: FC = () => {
         <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?.length &&
-                shoppingCartData.list?.map((item, index) => {
+                shoppingCartData?.list?.map((item, index) => {
+                  console.log('item==>', item)
                   return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
                 })}
             </InfiniteScroll>

src/use/useCommon.ts

@@ -103,7 +103,7 @@ const defaultOptions = {
  */
 export const useNeedMemoCallback = (options: Options = defaultOptions) => {
   return (prevProps: NormalPropsType, nextProps: NormalPropsType) => {
-    // console.log(options)
+    console.log(options)
     console.log('memo==>', prevProps, nextProps)
     let needMemoized = true
     // 引用类型