✨ feat(提货列表): 新增提货列表|提货详情

project.private.config.json

@@ -9,6 +9,20 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "提货详情",
+          "pathName": "pages/takeDeliveryDetail/index",
+          "query": "id=33356",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "提货列表",
+          "pathName": "pages/takeDelivery/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "发货详情",
           "pathName": "pages/deliveryDetail/index",

src/api/index.ts

@@ -21,6 +21,17 @@ export {
   EnumSaleorderStatus,
 } from './delivery/index'
 
+export {
+  EnumTakeGoodsOrderStatus,
+  EnumTakeGoodsOrderTypeList,
+  TakeGoodsOrderList,
+  TakeGoodsOrderRefuse,
+  TakeGoodsOrderAudit,
+  TakeGoodsOrder,
+  UserInvitationInfoRecord,
+  GenBarCodeOrQrCode,
+} from './takeDelivery/index'
+
 import { useRequest } from '@/use/useHttp'
 /**
  *  系列列表

src/api/takeDelivery/enum.ts

@@ -0,0 +1,15 @@
+import { useRequest } from '@/use/useHttp'
+//提货类型
+export const EnumTakeGoodsOrderTypeList = () => {
+  return useRequest({
+    url: `/v1/mp/enum/takeGoodsOrderType/list`,
+    method: 'get',
+  })
+}
+//tabs枚举
+export const EnumTakeGoodsOrderStatus = () => {
+  return useRequest({
+    url: `/v1/mp/enum/takeGoodsOrderStatus/list`,
+    method: 'get',
+  })
+}

src/api/takeDelivery/index.ts

@@ -0,0 +1,2 @@
+export { EnumTakeGoodsOrderStatus, EnumTakeGoodsOrderTypeList } from './enum'
+export { TakeGoodsOrderList, TakeGoodsOrderRefuse, TakeGoodsOrderAudit, TakeGoodsOrder, UserInvitationInfoRecord, GenBarCodeOrQrCode } from './takeDelivery'

src/api/takeDelivery/takeDelivery.ts

@@ -0,0 +1,45 @@
+import { useRequest } from '@/use/useHttp'
+import { CAP_HTML_TO_IMAGE_BASE_URL } from '@/common/constant'
+//列表
+export const TakeGoodsOrderList = () => {
+  return useRequest({
+    url: `/v1/mp/takeGoodsOrder/list`,
+    method: 'get',
+  })
+}
+//拒收提货
+export const TakeGoodsOrderRefuse = () => {
+  return useRequest({
+    url: `/v1/mp/takeGoodsOrder/refuse`,
+    method: 'put',
+  })
+}
+//审核提货单
+export const TakeGoodsOrderAudit = () => {
+  return useRequest({
+    url: `/v1/mp/takeGoodsOrder/audit`,
+    method: 'put',
+  })
+}
+//详情
+export const TakeGoodsOrder = () => {
+  return useRequest({
+    url: `/v1/mp/takeGoodsOrder`,
+    method: 'get',
+  })
+}
+//邀请码
+export const UserInvitationInfoRecord = () => {
+  return useRequest({
+    url: `/v1/mp/user/invitationInfoRecord`,
+    method: 'get',
+  })
+}
+//生成二维码
+export const GenBarCodeOrQrCode = () => {
+  return useRequest({
+    url: `/xima-caphtml/genBarcodeOrQrCode`,
+    base_url: CAP_HTML_TO_IMAGE_BASE_URL,
+    method: 'post',
+  })
+}

src/app.config.ts

@@ -36,6 +36,14 @@ export default defineAppConfig({
     'custom-wrapper': '/custom-wrapper',
   },
   subPackages: [
+    {
+      root: 'pages/takeDelivery',
+      pages: ['index'],
+    },
+    {
+      root: 'pages/takeDeliveryDetail',
+      pages: ['index'],
+    },
     {
       root: 'pages/delivery',
       pages: ['index'],
@@ -77,34 +85,24 @@ export default defineAppConfig({
       pages: ['index'],
     },
     {
-      root: "pages/refundPage",
-      pages: [
-        "index"
-      ]
+      root: 'pages/refundPage',
+      pages: ['index'],
     },
     {
-      root: "pages/refundDetail",
-      pages: [
-        "index"
-      ]
+      root: 'pages/refundDetail',
+      pages: ['index'],
     },
     {
-      root: "pages/refundMoneyDetail",
-      pages: [
-        "index"
-      ]
+      root: 'pages/refundMoneyDetail',
+      pages: ['index'],
     },
     {
-      root: "pages/applyGoods",
-      pages: [
-        "index"
-      ]
+      root: 'pages/applyGoods',
+      pages: ['index'],
     },
     {
-      root: "pages/applyMoney",
-      pages: [
-        "index"
-      ]
-    }
+      root: 'pages/applyMoney',
+      pages: ['index'],
+    },
   ],
 })

src/components/SegmentedControl/index.tsx

@@ -21,9 +21,13 @@ const segmentedControl: FC<PropsType> = (props) => {
   })
   const { list, defaultId = -1, onSelect } = props
 
+  const isValidNumber = (value: any) => {
+    return typeof value === 'number' && value >= 0
+  }
+
   useEffect(() => {
     console.log('defaultId', defaultId)
-    if (typeof defaultId === 'number' && defaultId >= 0) {
+    if (isValidNumber(defaultId)) {
       console.log('defaultId:::', defaultId)
       const index = list?.findIndex((item) => {
         return item.id == defaultId
@@ -33,7 +37,7 @@ const segmentedControl: FC<PropsType> = (props) => {
         setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
       }
     }
-    setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
+    setSelectInfo((e) => ({ ...e, selected: isValidNumber(defaultId) ? defaultId : -1 }))
     console.log('selectInfo', selectInfo)
   }, [defaultId])
 

src/components/iconCard/index.tsx

@@ -1,14 +1,12 @@
 import { View } from '@tarojs/components'
 import { FC, ReactNode } from 'react'
-import IconFont from '../iconfont/iconfont'
+import IconFont, { IconNames } from '../iconfont/iconfont'
 import styles from './index.module.scss'
 
 import classname from 'classnames'
 
-type IconfontName = Parameters<typeof IconFont>['0']['name']
-
 interface PropsType {
-  iconName: IconfontName
+  iconName: IconNames
   title: string
   children?: ReactNode
   onClick?: Function

src/pages/takeDelivery/components/DeliveryStatusList/index.tsx

@@ -0,0 +1,42 @@
+import SegmentedControl from '@/components/segmentedControl'
+import { FC, memo, useCallback, useEffect, useState } from 'react'
+import { EnumTakeGoodsOrderStatus } from '@/api/index'
+
+type PropsType = {
+  onChangeStatus?: (data: { id: number; name: string }) => void
+}
+
+const DeliveryStatusList = memo<PropsType>((props) => {
+  const { onChangeStatus } = props
+  const { fetchData } = EnumTakeGoodsOrderStatus()
+  const [statusList, setStatusList] = useState([
+    {
+      id: -1,
+      name: '全部',
+    },
+  ])
+  // 请求
+  const getDeliveryStatusList = async () => {
+    const res = await fetchData()
+    console.log(res.data.list)
+    setStatusList(
+      res.data.list.filter((item) => {
+        return item.id === 0 || item.id === 1 // 提货中  已收货
+      }),
+    )
+  }
+
+  useEffect(() => {
+    getDeliveryStatusList()
+  }, [])
+
+  // //状态改变
+  const changeStatus = useCallback(
+    (data: { id: number; name: string }) => {
+      onChangeStatus && onChangeStatus({ id: data.id, name: data.name })
+    },
+    [onChangeStatus],
+  )
+  return <SegmentedControl list={statusList} onSelect={changeStatus} defaultId={statusList[0].id} />
+})
+export default DeliveryStatusList

src/pages/takeDelivery/components/Filter/index.module.scss

@@ -0,0 +1,88 @@
+.filterItem {
+  margin: 24px 48px;
+  &--title {
+    font-size: 28px;
+    font-weight: 550;
+    line-height: 1.5;
+  }
+  &--wrapper {
+    margin-top: 24px;
+    display: grid;
+    grid-gap: 16px 16px;
+  }
+}
+.filter {
+  &--time {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  &--inputBar {
+  }
+  &--type {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.filterTypeButton {
+  padding: 0 24px;
+  font-size: 28px;
+}
+.filterTypeText {
+  color: #6e6e6e !important;
+}
+.filterTimeButton {
+  grid-column-start: span 2;
+}
+.selected {
+  background-color: #eaf2ff;
+}
+
+.filterButton {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background-color: #f6f6f6;
+  border-radius: 8px;
+  font-size: 28px;
+  height: 72px;
+  &--text {
+    color: #909090;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+  &--active {
+    border: 1px solid $color_main;
+    background-color: #eaf2ff;
+    .filterButton--text {
+      color: $color_main;
+    }
+  }
+}
+.filterController {
+  margin-top: 60px;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-around;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
+  btn:hover{
+    filter: blur(.7);
+  }
+
+  .rest_btn {
+    font-size: 28px;
+  }
+  .verify_btn {
+    font-size: 28px;
+  }
+}

src/pages/takeDelivery/components/Filter/index.tsx

@@ -0,0 +1,237 @@
+import NormalButton from '@/components/normalButton'
+import Popup from '@/components/popup'
+import { View } from '@tarojs/components'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Search from '@/components/search'
+import IconFont from '@/components/iconfont/iconfont'
+import { EnumTakeGoodsOrderTypeList } from '@/api/index'
+import dayjs from 'dayjs'
+import { getFilterData } from '@/common/util'
+import Taro from '@tarojs/taro'
+
+interface SearchFilter {
+  take_goods_order_type?: number
+  timeKey?: string
+  take_goods_order_no?: string
+}
+
+export interface SearchField extends Omit<SearchFilter, 'timeKey'> {
+  date_min?: string
+  date_max?: string
+}
+
+interface DeliveryPropsType {
+  onSearchTime?: () => void
+  onConfirm?: (searchField: SearchField, timeKey?: Pick<SearchFilter, 'timeKey'>['timeKey']) => void
+  onCancal?: () => void
+  onReset?: () => void
+}
+
+interface ButtonPropsType {
+  isActive: boolean
+  onClick?: Function
+  children?: React.ReactNode
+  customClassName?: string
+}
+
+export const filterTimeOptions = {
+  0: {
+    name: '不限',
+    date_min: undefined,
+    date_max: undefined,
+  },
+  1: {
+    name: '今天',
+    date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  2: {
+    name: '昨日',
+    date_min: `${dayjs(new Date()).add(-1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  3: {
+    name: '近7日',
+    date_min: `${dayjs(new Date()).add(-7, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  4: {
+    name: '近30日',
+    date_min: `${dayjs(new Date()).add(-30, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  5: {
+    name: '近90日',
+    date_min: `${dayjs(new Date()).add(-90, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+} as const
+
+const DeliveryFilter = memo<DeliveryPropsType>((props) => {
+  const { onSearchTime, onConfirm, onCancal, onReset } = props
+
+  const { fetchData, state } = EnumTakeGoodsOrderTypeList()
+
+  const [searchFilter, setSearchFilter] = useState<SearchFilter>({
+    take_goods_order_type: undefined,
+    timeKey: '0',
+    take_goods_order_no: '',
+  })
+  const handleSelectedType = (type: string | number) => {
+    console.log('type==>', type)
+    if (typeof type === 'string' && type === 'default') {
+      setSearchFilter((e) => ({ ...e, take_goods_order_type: undefined }))
+    } else {
+      setSearchFilter((e) => ({ ...e, take_goods_order_type: type as number }))
+    }
+  }
+
+
+  const handleSearchBarChange = useCallback((searchValue: string) => {
+    console.log('searchValue==>', searchValue)
+    setSearchFilter((prevProps) => ({ ...prevProps, take_goods_order_no: searchValue }))
+  }, [])
+
+  const typeList = useMemo<{ id: number; name: string }[]>(() => {
+    return state.data.list
+  }, [state])
+
+  useEffect(() => {
+    if (!!!typeList?.length) {
+      getEnumData()
+      console.log('getEnumData')
+    }
+  }, [typeList])
+
+  const getEnumData = async () => {
+    await fetchData()
+  }
+
+  const [customTime, setCustomTime] = useState({
+    date_min: undefined,
+    date_max: undefined,
+  })
+
+  
+
+  const handleSelectedTime = (timeOptionId) => {
+    setSearchFilter((e) => ({ ...e, timeKey: timeOptionId }))
+    // 不是设置了自定义时间
+    if (timeOptionId !== '6') {
+      setCustomTime({
+        date_min: filterTimeOptions[timeOptionId]['date_min'],
+        date_max: filterTimeOptions[timeOptionId]['date_max'],
+      })
+      return
+    } 
+    onSearchTime?.()
+  }
+
+  const handleReset = () => {
+    setSearchFilter({ take_goods_order_type: undefined, timeKey: '0', take_goods_order_no: '' })
+    onReset?.()
+  }
+  const handleConfirm = () => {
+    const changedField = {
+      take_goods_order_type: searchFilter.take_goods_order_type,
+      take_goods_order_no: searchFilter.take_goods_order_no,
+      date_min: customTime.date_min,
+      date_max: customTime.date_max,
+    }
+    console.log('changedField==>', changedField)
+    onConfirm?.(changedField, searchFilter.timeKey)
+  }
+
+  const scanIcon = () => {
+    // 扫描
+    const handleScan = () => {
+      Taro.scanCode({
+        success(res) {
+          setSearchFilter((prevProps) => ({ ...prevProps, take_goods_order_no: res.result }))
+        },
+        fail(res) {
+          console.log(res)
+        },
+      })
+    }
+    return (
+      <View onClick={handleScan} className={styles.scanHandler}>
+        <IconFont name='icon-saomiao' size={40}></IconFont>
+      </View>
+    )
+  }
+
+  return (
+    <>
+      <View className={styles.filterItem}>
+        <View className={styles['filterItem--title']}>提货单号</View>
+        <View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
+          <Search
+            placeholder='请输入或扫描条形码'
+            showBtn={false}
+            adjustPosition={true}
+            changeOnSearch={handleSearchBarChange}
+            debounceTime={300}
+            defaultValue={searchFilter.take_goods_order_no}
+            customRightSlot={scanIcon()}></Search>
+        </View>
+      </View>
+      <View className={styles.filterItem}>
+        <View className={styles['filterItem--title']}>提货类型</View>
+        <View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
+          <FilterButton isActive={searchFilter.take_goods_order_type == undefined} onClick={() => handleSelectedType('default')}>
+            不限
+          </FilterButton>
+          {!!typeList?.length &&
+            typeList?.map((item) => {
+              return (
+                <FilterButton isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
+                  {item.name}
+                </FilterButton>
+              )
+            })}
+        </View>
+      </View>
+
+      <View className={styles.filterItem}>
+        <View className={styles['filterItem--title']}>查询日期</View>
+        <View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
+          {Object.entries(filterTimeOptions).map(([key, value]) => {
+            return (
+              <FilterButton isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
+                {value.name}
+              </FilterButton>
+            )
+          })}
+          <FilterButton isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
+            自定义时间<IconFont name='icon-chakanquanbukehu' size={40} color={searchFilter.timeKey === '6' ? '#4581ff' : '#909090'}></IconFont>
+          </FilterButton>
+        </View>
+      </View>
+      <View className={styles.filterController}>
+        <NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
+          重置
+        </NormalButton>
+        <NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
+          确认
+        </NormalButton>
+      </View>
+    </>
+  )
+})
+
+const FilterButton: FC<ButtonPropsType> = (props) => {
+  const { onClick, children, isActive = false, customClassName } = props
+  const handleClick = () => {
+    onClick?.()
+  }
+  return (
+    <View className={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)} onClick={handleClick}>
+      <View className={classnames(styles['filterButton--text'])}>{children}</View>
+    </View>
+  )
+}
+
+export default DeliveryFilter

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

@@ -0,0 +1,62 @@
+.layoutBlock{
+  margin: 24px;
+}
+.topBar {
+  font-size: 28px;
+  &__orderNo {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    color: $color_font_one;
+  }
+  &__orderType {
+    color: rgba($color: #000000, $alpha: 0.6);
+    font-weight: 550;
+  }
+  &__orderStatus {
+    font-weight: 550;
+    &--finished{
+      color: $color_font_three;
+    }
+    &--takingGoods{
+      color: $color_main;
+    }
+  }
+}
+.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 {
+      min-width: 140px;
+    }
+    &__right {
+      @include common_ellipsis(2);
+    }
+  }
+}
+.bottomBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10px;
+  &__button {
+    margin: 0 24px;
+    font-size: 28px;
+    padding: 0 26px;
+  }
+  &__button:last-child {
+    margin: 0;
+  }
+}
+.bord {
+  color: $color_font_one;
+}
+.tag{
+  margin: 0 16px;
+}

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

@@ -0,0 +1,100 @@
+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'
+import classnames from 'classnames'
+import { EnumSaleMode } from '@/common/Enumerate'
+import { formatDateTime, formatMeterDiv } from '@/common/format'
+import { goLink } from '@/common/common'
+import { TakeGoodsOrderAudit } from '@/api/index'
+import Taro from '@tarojs/taro'
+import SaleModeTag from '@/components/saleModeTag'
+
+type PropsType = {
+  itemData: Record<string, any>
+  onSuccess?: Function
+}
+
+const ItemList:FC<PropsType> = (props) => {
+  const { itemData, onSuccess } = props
+  // 查看详情
+  const handleDetail = (itemData: Record<string, any>) => {
+    goLink('/pages/takeDeliveryDetail/index', {
+      id: itemData.id,
+    })
+  }
+
+  const { fetchData, state } = TakeGoodsOrderAudit()
+
+  // 确认审核
+  const handleAudit = (id: number) => {
+    Taro.showModal({
+      content: '确认要审核吗？',
+      confirmColor: '#337FFF',
+      success: async (res) => {
+        if (res.confirm) {
+          const res = await fetchData({ id })
+          if (res.success) {
+            Taro.showToast({ title: '审核成功', icon: 'success' })
+            onSuccess?.()
+          }else{
+            Taro.showToast({ title: '审核失败', icon: 'error' })
+          }
+        }
+      },
+    })
+  }
+
+  return (
+    <LayoutBlock circle customClassName={styles.layoutBlock}>
+      <View className={styles.topBar}>
+        <View className={styles.topBar__orderNo}>
+          <View>单号：{itemData?.take_goods_order_no}</View>
+          {itemData?.take_goods_status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>}
+          {itemData?.take_goods_status === 1 && (
+            <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>
+          )}
+        </View>
+        <Text className={styles.topBar__orderType}>{itemData?.take_goods_order_type_name}</Text>
+      </View>
+      <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+      <View className={styles.content}>
+        <View className={classnames(styles.content__row, styles.bord)}>
+          <View className={styles.content__row__left}>货品信息：</View>
+          <View className={styles.content__row__right}>
+            <SaleModeTag saleMode={itemData.sale_mode} size='small' customClassName={styles.tag}></SaleModeTag>
+            {itemData.delivery_product_nums}种面料，{itemData.delivery_product_color_nums}种颜色，共
+            {itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.take_roll}条` : `${formatMeterDiv(itemData?.take_meters)}米`}
+          </View>
+        </View>
+        <View className={styles.content__row}>
+          <View className={styles.content__row__left}>供应信息：</View>
+          <View className={styles.content__row__right}>{itemData?.delivery_address || '空'}</View>
+        </View>
+        <View className={styles.content__row}>
+          <View className={styles.content__row__left}>创建时间：</View>
+          <View className={styles.content__row__right}>{formatDateTime(itemData?.create_time) || '空'}</View>
+        </View>
+      </View>
+      <View className={styles.bottomBar}>
+        <NormalButton
+          customClassName={styles.bottomBar__button}
+          type='info'
+          customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
+          round
+          onClick={() => handleDetail(itemData)}>
+          查看详情
+        </NormalButton>
+        {itemData?.status === 0 && (
+          <NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
+            确认审核
+          </NormalButton>
+        )}
+      </View>
+    </LayoutBlock>
+  )
+}
+export default ItemList

src/pages/takeDelivery/index.config.ts

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

src/pages/takeDelivery/index.module.scss

@@ -0,0 +1,43 @@
+page {
+  background: #f7f7f7;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.delivery {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+  padding-bottom: env(safe-area-inset-bottom);
+  .searchBox {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 8px 24px;
+    flex: none;
+  }
+
+  .listBox {
+    flex: 1 1 auto;
+    background-color: #f7f7f7;
+    height: 100%;
+    &--total {
+      display: block;
+      margin-top: 24px;
+      padding: 0 24px;
+      font-size: 24px;
+      color: #9d9d9d;
+    }
+  }
+}
+.scanHandler {
+  width: 40px;
+  height: 40px;
+}
+
+.icon__filter {
+  padding: 0 20px;
+  padding-right: 10px;
+}

src/pages/takeDelivery/index.tsx

@@ -0,0 +1,199 @@
+import { View, Text } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, FC, memo } from 'react'
+import styles from './index.module.scss'
+import Search from '@/components/search'
+import { TakeGoodsOrderList } from '@/api/index'
+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 IconFont from '@/components/iconfont/iconfont'
+import ItemList from './components/ItemList'
+import DeliveryStatusList from './components/DeliveryStatusList'
+import Popup from '@/components/popup'
+import DeliveryFilter, { SearchField } from './components/Filter'
+import TimePicker from '@/components/timePicker'
+
+type SearchData = {
+  take_goods_order_no?: string // 提货单号
+  take_goods_status?: number | string // 提货状态
+  date_min?: string // 开始时间
+  date_max?: string // 结束时间
+  take_goods_order_type?: number // 提货类型
+  page: number
+  size: number
+}
+
+
+
+const defaultSearchFields = {
+  take_goods_status: 0, // 待提货
+  page: 1,
+  size: 10,
+}
+
+// 提货列表
+const Delivery: FC = () => {
+  const [search, setSearch] = useState<SearchData>(defaultSearchFields)
+  const [takeDeliveryOrderList, setDeliveryOrderList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
+
+  const { fetchData: FetchDeliveryOrderList, state: orderState } = TakeGoodsOrderList()
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({ list: takeDeliveryOrderList.list, total: takeDeliveryOrderList.total, status: orderState.loading })
+  }, [takeDeliveryOrderList, orderState])
+
+  //输入搜索关键字
+  const getSearchData = useCallback((searchValue: string) => {
+    setSearch((prevProps) => ({ ...prevProps, take_goods_order_no: searchValue }))
+    console.log('searchValue==>', searchValue)
+  }, [])
+
+  useEffect(() => {
+    console.log('useEffect ===> search', search)
+    getData()
+  }, [search])
+
+  //上拉加载数据
+  const pageNum = useRef({ size: search.size, page: search.page })
+
+  const getScrollToLower = useCallback(() => {
+    if (takeDeliveryOrderList.list.length < takeDeliveryOrderList.total) {
+      pageNum.current.page++
+      const size = pageNum.current.size * pageNum.current.page
+      setSearch((e) => ({ ...e, size }))
+      console.log(search, 11111)
+    }
+  }, [takeDeliveryOrderList])
+
+  //列表下拉刷新
+  const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+
+  const getRefresherRefresh = async () => {
+    pageNum.current.size = 1
+    setRefresherTriggeredStatus(true)
+    setSearch((val) => ({ ...val, size: 10 }))
+  }
+  // 请求数据
+  const getData = async () => {
+    const res = await FetchDeliveryOrderList(getFilterData(search))
+
+    setDeliveryOrderList((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+    setRefresherTriggeredStatus(() => false)
+  }
+
+  const [currentStatus, setCurrentStatus] = useState('待提货')
+
+  const handleChangeStatus = ({ id: statusId, name: statusName }) => {
+    setCurrentStatus(statusName)
+    setSearch((e) => ({ ...e, take_goods_status: statusId }))
+  }
+
+  const handleAuditSuccess = () => {
+    getData()
+  }
+
+  const [showFilter, setShowFilter] = useState(false)
+  // 筛选列表
+  const onShowFilter = () => {
+    setShowFilter(true)
+  }
+  // 点击关闭筛选列表框
+  const handlePopupClose = () => {
+    setShowFilter(false)
+  }
+
+  // 展示时间筛选
+  const [showTime, setShowTime] = useState(false)
+
+  // 点击关闭时间筛选
+  const handClose = () => {
+    setShowTime(false)
+  }
+  const [start, setStart] = useState(new Date().toLocaleDateString())
+  const [end, setEnd] = useState('')
+  // 选择时间
+  const handTime = (event) => {
+    console.log(event?.value, 'event?.value?.start')
+    setStart(event?.value?.start)
+    setEnd(event?.value?.end)
+    setShowTime(false)
+    console.log(search, 8888)
+  }
+  // 显示时间选择器
+  const handleSearchTime = () => {
+    setShowTime(true)
+  }
+  // 筛选框点击确认
+  const handleConfirm = (changedFields: SearchField, timeKey) => {
+    console.log('changedFields==>changedFields', changedFields)
+    // 自定义时间
+    if (timeKey === '6') {
+      setSearch((prevProps) => ({ ...prevProps, ...changedFields, date_min: start, date_max: end }))
+    } else {
+      setSearch((prevProps) => ({ ...prevProps, ...changedFields }))
+    }
+    handlePopupClose()
+  }
+  // 筛选框点击重置
+  const handleReset = () => {
+    setSearch(defaultSearchFields)
+    handlePopupClose()
+  }
+
+  const scanIcon = () => {
+    // 扫描
+    const handleScan = () => {
+      Taro.scanCode({
+        success(res) {
+          setSearch((e) => ({ ...e, take_goods_order_no: res.result }))
+        },
+        fail(res) {
+          console.log(res)
+        },
+      })
+    }
+    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 svg iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
+          </View>
+        </Search>
+      </View>
+      {/* 状态栏 */}
+      <DeliveryStatusList onChangeStatus={handleChangeStatus}></DeliveryStatusList>
+
+      <View className={styles.listBox}>
+        <InfiniteScroll
+          statusMore={statusMore}
+          selfonScrollToLower={getScrollToLower}
+          refresherEnabled={true}
+          refresherTriggered={refresherTriggeredStatus}
+          selfOnRefresherRefresh={getRefresherRefresh}>
+          <Text className={styles['listBox--total']}>
+            {currentStatus}共 {takeDeliveryOrderList.total} 单
+          </Text>
+          {takeDeliveryOrderList.list.map((item, index) => {
+            return <ItemList itemData={item} key={item.id} onSuccess={handleAuditSuccess}></ItemList>
+          })}
+        </InfiniteScroll>
+      </View>
+      <Popup show={showFilter} title='筛选列表' onClose={handlePopupClose}>
+        <DeliveryFilter onSearchTime={handleSearchTime} onConfirm={handleConfirm} onReset={handleReset} />
+      </Popup>
+      <TimePicker start={start} end={end} showTime={showTime} closePopup={handClose} onSelectDate={(e) => handTime(e)}></TimePicker>
+    </View>
+  )
+}
+
+export default Delivery

src/pages/takeDeliveryDetail/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '提货',
+}

src/pages/takeDeliveryDetail/index.module.scss

@@ -0,0 +1,104 @@
+page {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+.deliveryDetail {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  .content {
+    padding-top: 24px;
+    flex: 1 1 auto;
+    overflow: scroll;
+    .detailTop {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28px;
+    }
+    .topBar__orderType {
+      color: rgba($color: #000000, $alpha: 0.6);
+      font-size: 28px;
+      font-weight: 550;
+    }
+  }
+  .bottomBar {
+    flex: none;
+    margin: 0 24px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 24px;
+    padding-bottom: calc(20px + constant(safe-area-inset-bottom));
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  }
+}
+.detailInfo {
+  .detailInfoItem {
+    &--title {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28px;
+      padding: 10px 0;
+    }
+    &--detail {
+      &--row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0;
+        font-size: 28px;
+      }
+      &--name {
+      }
+      &--count {
+      }
+      &--weight {
+      }
+    }
+  }
+}
+.orderInfoTop {
+  font-size: 28px;
+  color: $color_font_one;
+  font-weight: 550;
+}
+
+.orderNo {
+  font-size: 28px;
+  font-weight: 550;
+}
+.status {
+  font-size: 28px;
+  &--takingGoods {
+    color: $color_main;
+  }
+  &--finished {
+    color: $color_font_three;
+  }
+}
+
+.divider {
+  margin: 24px 0;
+}
+.total {
+  margin-top: 24px;
+  padding: 15px 24px;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+  color: #f79b31;
+  background: #fef9f4;
+  border-radius: 8px;
+  display: flex;
+  .totalContent {
+    flex: 1 1 auto;
+    display: inline-block;
+    text-align: right;
+  }
+}

src/pages/takeDeliveryDetail/index.tsx

@@ -0,0 +1,189 @@
+import { TakeGoodsOrder, TakeGoodsOrderAudit, DeliveryNoticeOrderUpload, TakeGoodsOrderRefuse } from '@/api'
+import { formatDateTime, formatMeterDiv, formatWeightDiv } from '@/common/format'
+import Cell from '@/components/cell'
+import Divider from '@/components/divider'
+import LayoutBlock from '@/components/layoutBlock'
+import NormalButton from '@/components/normalButton'
+import SaleModeTag from '@/components/saleModeTag'
+import UploadImage from '@/components/uploadImage'
+import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useRouter } from '@tarojs/taro'
+import { alert } from '@/common/common'
+import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+
+const TakeDeliveryDetail: FC = () => {
+  const router = useRouter()
+
+  const { fetchData } = TakeGoodsOrder()
+
+  const [detailInfo, setDetailInfo] = useState<Record<string, any>>({})
+
+  const getData = async () => {
+    const { id } = router.params
+    const res = await fetchData({
+      id,
+    })
+    console.log('res==>', res.data)
+    setDetailInfo(res.data)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  const { fetchData: uploadData } = DeliveryNoticeOrderUpload()
+
+  const { fetchData: FetchAudit } = TakeGoodsOrderAudit()
+
+  const DetailItem = useMemo(() => {
+    const element =
+      !!detailInfo?.dyelot_number_list?.length &&
+      detailInfo?.dyelot_number_list.map((weightItem) => {
+        return (
+          <View className={styles.detailInfo}>
+            <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+            <View className={styles.detailInfoItem}>
+              <View className={styles['detailInfoItem--title']}>
+                <View className=''>
+                  <Text style={{ marginRight: '20rpx' }}>
+                    {weightItem.product_code}# {weightItem.product_name}
+                  </Text>
+                  <SaleModeTag saleMode={weightItem?.sale_mode} />
+                </View>
+                <View className=''>共 {weightItem?.sale_mode === 0 ? `${weightItem.sale_roll} 条` : `${formatMeterDiv(weightItem?.sale_length || 0)} 米`}</View>
+              </View>
+              <View className={styles['detailInfoItem--detail']}>
+                <View className={styles['detailInfoItem--detail--row']}>
+                  <View className={styles['detailInfoItem--detail--name']}>
+                    {weightItem.product_color_code}# {weightItem.product_color_name}
+                  </View>
+                  <View className={styles['detailInfoItem--detail--count']}>
+                    x{weightItem?.sale_mode === 0 ? `${weightItem.sale_roll} 条` : `${formatMeterDiv(weightItem?.sale_length || 0)} 米`}
+                  </View>
+                  <View className={styles['detailInfoItem--detail--weight']}>{formatWeightDiv(weightItem.weight)}/kg</View>
+                </View>
+              </View>
+            </View>
+          </View>
+        )
+      })
+    return <>{element}</>
+  }, [detailInfo])
+
+  const [readyToUploadList, setReadyToUploadList] = useState<string[]>([])
+
+  const handleUploadChange = (imageList: string[]) => {
+    console.log('imageList===>', imageList)
+    setReadyToUploadList((prev) => [...prev, ...imageList])
+  }
+  // 拒收
+  const handleRefuse = useCallback(async () => {}, [])
+
+  // 审核
+  const handleAudit = useCallback(() => {
+    Taro.showModal({
+      confirmColor: '#337FFF',
+      title: '确定审核？',
+      success: async function (res) {
+        if (res.confirm) {
+          const res = await FetchAudit({ id: Number(router.params.id) })
+          if (res.success) {
+            alert.success('审核成功')
+            getData()
+          } else {
+            alert.error('审核失败')
+          }
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      },
+    })
+  }, [readyToUploadList])
+
+  const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
+  const { fetchData: auditOrder } = TakeGoodsOrderAudit()
+
+  const BottomBar = useMemo(() => {
+    if (detailInfo?.take_goods_order_type === 0) {
+      // 采购提货
+      return (
+        <View className={styles.bottomBar}>
+          <NormalButton type='primary' plain round onClick={handleAudit}>
+            确认提货
+          </NormalButton>
+        </View>
+      )
+    } else {
+      // 退货提货
+      return (
+        <View className={styles.bottomBar}>
+          <NormalButton type='primary' round onClick={handleRefuse}>
+            拒收
+          </NormalButton>
+          <NormalButton type='primary' plain round onClick={handleAudit}>
+            确认提货
+          </NormalButton>
+        </View>
+      )
+    }
+  }, [handleRefuse, handleAudit])
+  return (
+    <View className={styles.deliveryDetail}>
+      <View className={styles.content}>
+        <LayoutBlock circle>
+          <View className={styles.detailTop}>
+            <View className={styles.orderNo}>提货单号：{detailInfo?.take_order_no}</View>
+            {detailInfo?.take_goods_status === 0 ? (
+              <View className={styles['status--takingGoods']}>{detailInfo?.take_goods_status_name}</View>
+            ) : (
+              <View className={styles['status--finished']}>{detailInfo?.take_goods_status_name}</View>
+            )}
+          </View>
+          {detailInfo?.take_goods_order_type === 0 && <Text className={styles.topBar__orderType}>供应信息：{detailInfo?.supplier_name}</Text>}
+          {DetailItem}
+          <View className={styles.total}>
+            <Text>汇总：</Text>
+            <Text className={styles.totalContent}>
+              共{detailInfo?.dyelot_number_list?.length || 0}种面料，4种颜色，共
+              {detailInfo?.sale_mode === 0 ? `${detailInfo?.take_roll}条` : `${formatMeterDiv(detailInfo?.take_meters)}米`}
+              ，重量{detailInfo?.weight}kg
+            </Text>
+          </View>
+        </LayoutBlock>
+        {detailInfo?.take_goods_order_type !== 0 && (
+          <>
+            <LayoutBlock circle>
+              <View className={styles.orderInfoTop}>退货布匹附件</View>
+              <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+              <UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.fabric_piece_accessory_url}></UploadImage>
+            </LayoutBlock>
+            <LayoutBlock circle>
+              <View className={styles.orderInfoTop}>退货物流附件</View>
+              <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+              <UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.accessory_url}></UploadImage>
+            </LayoutBlock>
+          </>
+        )}
+
+        <LayoutBlock circle>
+          <View className={styles.orderInfoTop}>订单信息</View>
+          <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+          <View className='orderInfoDetail'>
+            <Cell title='提货人：' desc={detailInfo?.auditor_name}></Cell>
+            <Cell title='创建时间：' desc={formatDateTime(detailInfo?.create_time)}></Cell>
+            <Cell title='提货时间：' desc={formatDateTime(detailInfo?.audit_time)}></Cell>
+          </View>
+        </LayoutBlock>
+        <LayoutBlock circle>
+          <View className={styles.orderInfoTop}>备注信息</View>
+          <Divider direction='horizontal' customClassName={styles.divider}></Divider>
+          <View className='orderInfoDetail'>{detailInfo?.remark}</View>
+        </LayoutBlock>
+      </View>
+      {detailInfo?.take_goods_status === 0 && BottomBar}
+    </View>
+  )
+}
+export default TakeDeliveryDetail

src/pages/user/index.tsx

@@ -7,13 +7,12 @@ import Tag from '@/components/tag'
 import Divider from '@/components/Divider'
 import LayoutBlock from '@/components/layoutBlock'
 import IconCard from '@/components/iconCard'
-import IconFont from '@/components/iconfont/iconfont'
+import { IconNames } from '@/components/iconfont/iconfont'
 import useUserInfo from '@/use/useUserInfo'
 import { goLink } from '@/common/common'
 
-type IconfontName = Parameters<typeof IconFont>['0']['name']
 type IconCardType = {
-  iconName: IconfontName
+  iconName: IconNames
   name: string
   path: string
 }
@@ -42,7 +41,7 @@ const feature: IconCardType[] = [
   {
     iconName: 'icon-tihuoliebiao',
     name: '提货列表',
-    path: '',
+    path: '/pages/takeDelivery/index',
   },
   {
     iconName: 'icon-shouhouzhongxin',