Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页

src/api/index.ts

@@ -38,7 +38,16 @@ export {
 } from './takeDelivery/index'
 
 // 关于销售统计
-export { EnumMarketingDepartmentApi, EnumSalesTypeApi, SalesmanRankApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, CensusApi } from './statistic/index'
+export {
+  EnumMarketingDepartmentApi,
+  EnumSalesTypeApi,
+  SalesmanRankApi,
+  ProductRankApi,
+  PurchaserRankApi,
+  SupplierRankApi,
+  SaleOrderDataFormdataFormStatus,
+  SaleOrderDataFormApi,
+} from './statistic/index'
 
 import { useRequest } from '@/use/useHttp'
 /**

src/api/statistic/index.ts

@@ -1,2 +1,2 @@
 export { EnumSalesTypeApi, EnumMarketingDepartmentApi } from './enum'
-export { CensusApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic'
+export { SaleOrderDataFormdataFormStatus, SaleOrderDataFormApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic'

src/api/statistic/saleStatistic.ts

@@ -1,13 +1,13 @@
 import { useRequest } from '@/use/useHttp'
 
 /**
- *  客户列表
+ *  销售统计数据
  * @returns
  */
-export const CensusApi = () => {
+export const SaleOrderDataFormApi = () => {
   return useRequest({
     url: `/v1/mp/saleOrderDataForm`,
-        method: "get"
+    method: 'get',
   })
 }
 
@@ -54,3 +54,11 @@ export const SalesmanRankApi = () => {
     method: 'get',
   })
 }
+
+//获取排行指标枚举
+export const SaleOrderDataFormdataFormStatus = () => {
+  return useRequest({
+    url: `/v1/mp/saleOrderDataForm/dataFormStatus`,
+    method: 'get',
+  })
+}

src/common/format.js

@@ -141,7 +141,7 @@ export const formatMillionYuan = (num, digit = 10000) => {
  * @param {*} x
  * @returns
  */
-export const toDecimal2 = (x) => {
+export const toDecimal2 = x => {
   var f = parseFloat(x)
   if (isNaN(f)) {
     return 0
@@ -203,3 +203,55 @@ export const numberWithCommas = ({ number = 0, digit = 2 }) => {
     return 0.0
   }
 }
+
+// 计算数值大于指定值
+export const setPriceUnit = (num, cls) => {
+  if (cls) {
+    let res = formatMillionYuan(num, 1000)
+    return {
+      cls: res.million ? cls : '',
+      num: res.num,
+    }
+  } else if (num > 100000000) {
+    let res = formatMillionYuan(num, 100000000)
+    return {
+      cls: res.million ? 's-e' : '',
+      num: res.num,
+    }
+  } else {
+    let res = formatMillionYuan(num)
+    return {
+      cls: res.million ? 's-w' : '',
+      num: res.num,
+    }
+  }
+}
+
+//不四舍五入, val:原数据,num:保留位数
+const noScale = (val, num = 2) => {
+  val = parseFloat(val)
+  num = parseInt(num)
+  const power = Math.pow(10, num)
+  val = val * power + ''
+  val = val.split('.')[0]
+  val = parseInt(val) / power
+  return val
+}
+
+//处理数据单位(自然数)
+export const dataUnit = val => {
+  let newVal = ''
+  val = parseFloat(val)
+  if (val >= 100000000) {
+    newVal = noScale(val / 100000000) + '亿'
+  } else if (val >= 10000000) {
+    newVal = noScale(val / 10000000) + 'kw'
+  } else if (val >= 10000) {
+    newVal = noScale(val / 10000) + 'w'
+  } else if (val >= 1000) {
+    newVal = noScale(val / 1000) + 'k'
+  } else {
+    newVal = val
+  }
+  return newVal
+}

src/common/util.ts

@@ -117,7 +117,7 @@ function delay(delayTime = 25): Promise<null> {
   })
 }
 
-function delayQuerySelector(
+export function delayQuerySelector(
   selectorStr: string,
   delayTime = 500
 ): Promise<any[]> {
@@ -170,6 +170,5 @@ export const shareShop = () => {
     }
   }
 }
-export {
+
-  delayQuerySelector
+
-}

src/components/LoadMore/index.tsx

@@ -29,7 +29,7 @@ const LoadMore: FC<LoadMorePropsType> = props => {
     component = <LoadingCard title={loadingText}></LoadingCard>
   } else if (status === 'more') {
     component = (
-      <View onClick={handleShowMore}>
+      <View className='flex-row' onClick={handleShowMore}>
         <Text style={{ marginRight: '5px' }}>{moreText}</Text>
         <Iconfont name='icon-zhankai' size={32}></Iconfont>
       </View>

src/components/SelectMarketingDepartment/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, memo, useEffect, useMemo, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import { EnumMarketingDepartmentApi } from '@/api/index'
@@ -17,7 +17,7 @@ type EnumList = {
   name: string
 }
 // 营销部门
-const SelectSaleType: FC<SelectSaleTypeProps> = props => {
+const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
 
   const selectName = '营销部门'
 
@@ -64,5 +64,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
       </View>
     </DropDownItem>
   )
-}
+})
 export default SelectSaleType

src/components/SelectSaleRankingIndicators/index.tsx

@@ -1,7 +1,7 @@
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, memo, useEffect, useMemo, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
-import { EnumMarketingDepartmentApi } from '@/api/index'
+import { SaleOrderDataFormdataFormStatus } from '@/api/index'
 import { View } from '@tarojs/components'
 import styles from './index.module.scss'
 import classnames from 'classnames'
@@ -18,13 +18,13 @@ type EnumList = {
   name: string
 }
 // 销售排行指标
-const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
+const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
 
   const selectName = '排行指标'
 
   const { onChange } = props
   console.log(props)
-  const { fetchData } = EnumMarketingDepartmentApi()
+  const { fetchData } = SaleOrderDataFormdataFormStatus()
 
   const getData = async () => {
     const res = await fetchData()
@@ -65,5 +65,5 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
       </View>
     </DropDownItem>
   )
-}
+})
 export default SelectSaleRankingIndicators

src/components/SelectSaleType/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, memo, useEffect, useMemo, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import { EnumSalesTypeApi } from '@/api/index'
@@ -9,7 +9,7 @@ type ChangedValue = string | number
 
 interface SelectSaleTypeProps {
   onChange?: (value: ChangedValue) => void
-  defaultValue?: string
+  defaultValue?: ChangedValue
 }
 
 type EnumList = {
@@ -18,9 +18,9 @@ type EnumList = {
   name: string
 }
 // 销售类型
-const SelectSaleType: FC<SelectSaleTypeProps> = props => {
+const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
   const selectName = '销售类型'
-  const { onChange } = props
+  const { onChange, defaultValue = 0 } = props
   console.log(props)
   const { fetchData } = EnumSalesTypeApi()
 
@@ -35,7 +35,7 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
     getData()
   }, [])
 
-  const [currentValue, setCurrentValue] = useState<ChangedValue>(-1)
+  const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
 
   const handleClick = (value: ChangedValue) => {
     setCurrentValue(value)
@@ -63,5 +63,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
       </View>
     </DropDownItem>
   )
-}
+})
 export default SelectSaleType

src/components/SelectTimePicker/index.tsx

@@ -1,7 +1,7 @@
 import { formatDateTime } from '@/common/format'
 import { View, Text } from '@tarojs/components'
 import dayjs from 'dayjs'
-import { FC, useState } from 'react'
+import { FC, memo, useRef, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import IconFont from '../iconfont/iconfont'
@@ -11,6 +11,8 @@ import styles from './index.module.scss'
 export type ChangedValue = string[]
 
 interface SelectSaleTypeProps {
+  defaultValue?: Key   // 默认值
+  timeOptions?: {[Property: string]: Value}   // 支持自定义 时间配置
   onChange?: (value: ChangedValue) => void
 }
 
@@ -65,7 +67,7 @@ const FilterTimeOptions = {
       .add(0, 'day')
       .format('YYYY-MM-DD')} 00:00:00`,
   },
-  '6': {
+  'custom': {
     name: '自定义时间',
     date_min: '',
     date_max: '',
@@ -75,10 +77,13 @@ const FilterTimeOptions = {
 type Key = keyof typeof FilterTimeOptions
 type Value = typeof FilterTimeOptions[Key]
 
-const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
+const SelectTimePicker: FC<SelectSaleTypeProps> = memo((props) => {
-  const { onChange: change } = props
+  const { onChange: change, defaultValue = '0', timeOptions = FilterTimeOptions } = props
+  // rerender 的时候需要更新 ref 的值
+  const Options = useRef({ ...timeOptions, 'custom': FilterTimeOptions['custom'] })
+  Options.current = { ...timeOptions, 'custom': FilterTimeOptions['custom'] }
 
-  const [currentValue, setCurrentValue] = useState('0')
+  const [currentValue, setCurrentValue] = useState(defaultValue)
 
   const [currentDate, setCurrentDate] = useState({
     start: new Date().toLocaleDateString(),
@@ -96,10 +101,11 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
 
   const handleClick = (key: Key) => {
     setCurrentValue(key)
-    change?.([FilterTimeOptions[key].date_min, FilterTimeOptions[key].date_max])
+    change?.([Options.current[key].date_min, Options.current[key].date_max])
-    setCustomFilterButtonText('自定义时间')
+    customFilterButtonText.current = '自定义时间'
   }
-  // 选择时间
+  
+  // 选择自定义时间
   const onSelectDate = event => {
     console.log(event?.value, 'event?.value?.start')
     setCurrentDate({
@@ -107,27 +113,28 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
       end: event?.value?.end,
     })
     setShowTime(false)
-    setCustomFilterButtonText(`${formatDateTime(event?.value?.start, 'YYYY年MM月DD日')} 至 ${formatDateTime(event?.value?.end, 'YYYY年MM月DD日')}`)
+    customFilterButtonText.current = `${formatDateTime(event?.value?.start, 'YYYY年MM月DD日')} 至 ${formatDateTime(event?.value?.end, 'YYYY年MM月DD日')}`
     change?.([event?.value?.start, event?.value?.end])
   }
 
-  const [customFilterButtonText, setCustomFilterButtonText] = useState('自定义时间')
+  // const [customFilterButtonText, setCustomFilterButtonText] = useState('自定义时间')
+  const customFilterButtonText = useRef('自定义时间')
 
   // 点击自定义时间
   const handleCustomTime = () => {
-    setCurrentValue('6')
+    setCurrentValue('custom')
     setShowTime(true)
   }
 
   return (
     <>
       <DropDownItem
-        title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
+        title={currentValue === '0' ? '查询日期' : Options.current[currentValue].name}
         direction='down'
         value={currentValue}
         activeColor='#337fff'>
         <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
-          {Object.entries(FilterTimeOptions)
+          {Object.entries(Options.current)
             .slice(0, -1)
             .map(([key, value]) => {
               return (
@@ -136,14 +143,14 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
                 </FilterButton>
               )
             })}
-          <FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={handleCustomTime}>
+          <FilterButton customClassName={styles.customFilterTime} isActive={'custom' === currentValue} onClick={handleCustomTime}>
-            <Text>{customFilterButtonText}</Text>
+            <Text>{customFilterButtonText.current}</Text>
-            <IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
+            <IconFont name='icon-chakanquanbukehu' color={'custom' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
           </FilterButton>
         </View>
       </DropDownItem>
       <TimePickerPopup start={currentDate.start} end={currentDate.end} showTime={showTime} closePopup={handClose} onSelectDate={onSelectDate}></TimePickerPopup>
     </>
   )
-}
+})
 export default SelectTimePicker

src/components/cell/index.tsx

@@ -11,10 +11,11 @@ interface CellPropsType {
   onClick?: () => void
   customStyle?: React.CSSProperties
   customClassName?: string
+  customDescClassName?: string
   iconName?: IconNames
 }
 const Cell:FC<CellPropsType> = (props) => {
-  const {title, desc, isLink = false, customClassName, customStyle, onClick, iconName} = props
+  const { title, desc, isLink = false, customClassName, customStyle, onClick, iconName, customDescClassName } = props
 
   const onClickRef = useRef(onClick)
   onClickRef.current = onClick
@@ -31,7 +32,7 @@ const Cell:FC<CellPropsType> = (props) => {
           <View>{title}</View>
         </View>
         <View className={styles.desc}>
-          <Text className={styles.descText}>{desc}</Text>
+          <Text className={classNames(styles.descText, customDescClassName)}>{desc}</Text>
           {isLink && <IconFont name='icon-chakanquanbukehu' size={46} color='inherit'></IconFont>}
         </View>
       </View>

src/components/dropDown-item/index.module.scss

@@ -3,7 +3,6 @@
 
   &--title {
     position: relative;
-    z-index: 2000;
     background-color: white;
     display: flex;
     flex-flow: row nowrap;

src/components/infiniteScroll/index.tsx

@@ -9,7 +9,8 @@ export type StatusParam = 0|1|2|3
 type Params = {
   styleObj?: React.CSSProperties
   selfonScrollToLower?: () => void
-  hasMore?: boolean
+  enableLoadMoreStatus?: boolean
+  safeAreaInsetBottom?: boolean
   moreStatus?: boolean
   statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
   children?: ReactNode
@@ -35,7 +36,8 @@ export default memo(
     selfOnRefresherRefresh,
     selfOnRefresherRestore,
     selfOnRefresherAbort,
-    hasMore = true,
+    safeAreaInsetBottom=true,
+    enableLoadMoreStatus = true,
     children,
     lowerThresholdNum = 5,
     paddingBottom = 0,
@@ -43,7 +45,7 @@ export default memo(
     refresherEnabled = false,
     moreStatus = true,
     statusMore = 0,
-    enableBackToTop=true,
+    enableBackToTop = true,
   }: Params) => {
     const scrollToLower = () => {
       selfonScrollToLower?.()
@@ -51,7 +53,7 @@ export default memo(
     const scrollToUpper = () => {
       selfOnScrollToUpper?.()
     }
-    const scroll = (e) => {
+    const scroll = e => {
       selfOnScroll?.(e)
     }
     const refresherPulling = () => {
@@ -74,32 +76,17 @@ export default memo(
       }
     }, [statusMore])
 
+
+    const component = () => {
+      if(enableLoadMoreStatus){
+        if (!moreStatus){
           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'
-          enableBackToTop={enableBackToTop}
-          scrollTop={scrollTop}>
-          {(!moreStatus && (
-            <>
             <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
               {children}
             </View>
-            </>
+          )
-          )) || (
+        }else{
+          return (
             <>
               {(statusMore == 2 || statusMore == 3) && (
                 <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
@@ -117,9 +104,39 @@ export default memo(
               {statusMore == 0 && <LoadingCard />}
               {statusMore == 1 && <LoadingCard loadingIcon={false} title='暂无数据' />}
             </>
-          )}
+          )
+        }
           
-          <View className='common_safe_area_y'></View>
+      }else{
+        return (
+          <View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
+            {children}
+          </View>
+        )
+      }
+    }
+
+    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'
+          enableBackToTop={enableBackToTop}
+          scrollTop={scrollTop}>
+          {component()}
+          {safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
         </ScrollView>
       </>
     )

src/components/normalButton/index.module.scss

@@ -3,7 +3,7 @@
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
-  padding: 0 80px;
+  padding: 0 30px;
   height: 72px;
   border: 1px solid $color_main;
   background-color: #fff;

src/components/popup/index.module.scss

@@ -72,8 +72,10 @@ $am-ms: 200ms;
     min-height: 200px;
     width: 100%;
     border-radius: 20px 20px 0px 0px;
-    box-shadow: 1px ​1px 1px 1px #f2f2f2;
     transform: translate3d(0, 100%, 0);
+    &-withShadow {
+      box-shadow: 0px -1px 9px -1px #333;
+    }
   }
 
   .drawer_container_top {
@@ -82,8 +84,10 @@ $am-ms: 200ms;
     min-height: 200px;
     width: 100%;
     border-radius: 0 0 20px 20px;
-    box-shadow: 6px ​6px 5px 14px red;
     transform: translate3d(0, -100%, 0);
+    &-withShadow {
+      box-shadow: 0 1px 9px -1px #333;
+    }
   }
 
   .drawer_container_right {
@@ -93,5 +97,8 @@ $am-ms: 200ms;
     min-width: 300px;
     border-radius: 20px 0 0 20px;
     transform: translate3d(100%, 0, 0);
+    &-withShadow {
+      box-shadow: -1px 0px 9px -1px #333;
+    }
   }
 }

src/components/popup/index.tsx

@@ -53,13 +53,11 @@ export default memo(
 
     useEffect(() => {
       return () => {
-
         clearTimeout(animationTime.current)
       }
     }, [])
 
     return (
-      <>
       <View className={style.drawer_main}>
         <View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
           <View
@@ -68,7 +66,10 @@ export default memo(
             style={overlayStyle}></View>
           <View
             style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}` }}
-              className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
+            className={classnames(style.drawer_container, style['drawer_container_' + position], {
+              [style.drawer_container_active]: show,
+              [style[`drawer_container_${position}-withShadow`]]: !showOverLay,
+            })}
             onClick={e => e.stopPropagation()}>
             {showTitle && <View className={style.drawer_container_title}>{title}</View>}
             {showIconButton && (
@@ -84,7 +85,6 @@ export default memo(
           </View>
         </View>
       </View>
-      </>
     )
   },
 )

src/components/sideBar/index.tsx

@@ -106,7 +106,7 @@ export default memo(({list = [],
                     }
                 </ScrollView>
                 <View className={styles.sideBar_con}>
-                    <InfiniteScroll statusMore={statusMore} hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
+                    <InfiniteScroll statusMore={statusMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
                         {children}
                     </InfiniteScroll>
                 </View>

src/components/table/index.tsx

@@ -1,12 +1,12 @@
 import { ScrollView, View, Text } from '@tarojs/components'
 import classnames from 'classnames'
-import { FC, useState } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 import Iconfont from '../iconfont/iconfont'
 import InfiniteScroll from '../infiniteScroll'
 import LoadMore, { LoadMoreStatus } from '../LoadMore'
 import styles from './index.module.scss'
 
-type ColumnsType = {
+export type ColumnsType = {
   title: string
   dataIndex: string
   width: string
@@ -15,29 +15,26 @@ type ColumnsType = {
   ellipsis?: boolean | { isEllipsis: boolean; rows: number }
 }
 
-type RecordType = {
+export type RecordType = {
   key: string
   [Property: string]: any
 }
 
-interface TablePropsType {
+export interface TablePropsType {
   columns: ColumnsType[]
-  dataSource: RecordType[]
+  dataSource?: { list: RecordType[]; total: number }
+  onLoadMore?: () => void
+  height?: number
 }
 
 const Table: FC<TablePropsType> = props => {
-  const { columns, dataSource } = props
+  const { columns, dataSource, onLoadMore, height=400 } = props
-
-
-  const [showMore, setShowMore] = useState(false)
-
-  const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
 
   const handleShowMore = () => {
-
+    onLoadMore && onLoadMore()
   }
 
-  const getColumnStyle = (columnConfig: ColumnsType) => {
+  const getColumnStyle = useCallback((columnConfig: ColumnsType) => {
     const columnStyle = {}
     if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
       columnStyle[styles.ellipsis_1] = true
@@ -51,13 +48,25 @@ const Table: FC<TablePropsType> = props => {
       }
     }
     return columnStyle
+  }, [])
+
+  const loadMoreComponent = useMemo(() => {
+    if (dataSource) {
+      if (dataSource.list.length < dataSource.total) {
+        return <LoadMore status='more' onClick={handleShowMore}></LoadMore>
+      } else if (dataSource.list.length >= dataSource.total) {
+        return <LoadMore status='noMore' onClick={handleShowMore}></LoadMore>
       }
+    } else {
+      return <LoadMore status='loading' onClick={handleShowMore}></LoadMore>
+    }
+  }, [dataSource])
 
   const sourceContainer = () => {
     return (
       <>
-        {!!dataSource.length &&
+        {!!dataSource?.list?.length &&
-          dataSource.map(source => {
+          dataSource.list.map(source => {
             return (
               <View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
                 {columns.map(column => {
@@ -81,9 +90,7 @@ const Table: FC<TablePropsType> = props => {
               </View>
             )
           })}
-        {showMore && (
+        {loadMoreComponent}
-          <LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
-        )}
       </>
     )
   }
@@ -99,7 +106,9 @@ const Table: FC<TablePropsType> = props => {
           )
         })}
       </View>
-      <ScrollView>{sourceContainer()}</ScrollView>
+      <InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom={true}>
+        {sourceContainer()}
+      </InfiniteScroll>
     </View>
   )
 }

src/pages/saleStatistic/config.ts

@@ -0,0 +1,181 @@
+// 订单
+export const OrderForm = {
+  summary: {
+    summaryTitle: '订单总数',
+    tips: '已成功下单的总单数',
+    value: {
+      num: '',
+      cls: '',
+    },
+    total: {
+      num: '',
+      cls: '',
+    },
+  },
+  form: {
+    processing_order_number: {
+      cellTitle: '待配布订单',
+      tips: '已经预约和正在配布的订单数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    processed_order_number: {
+      cellTitle: '已配布订单',
+      tips: '所有配完布、已批准发货、已经发货的订单总单数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+  },
+}
+// 配布
+export const ArrangedForm = {
+  summary: {
+    summaryTitle: '已配布匹数',
+    tips: '所有配完布、已批准发货、已经发货的订单总匹数',
+    value: {
+      num: '',
+      cls: '',
+    },
+    total: {
+      num: '',
+      cls: '',
+    },
+  },
+  form: {
+    wait_collect_order_number: {
+      cellTitle: '待收款单数',
+      tips: '已配完布但未批准发货的所有订单总单数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    wait_collect_number: {
+      cellTitle: '待收款匹数',
+      tips: '已配完布但未批准发货的所有订单总匹数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    wait_collect_amount_sum: {
+      cellTitle: '待收款金额',
+      tips: '已配完布但未批准发货的所有订单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    not_shipped_order_number: {
+      cellTitle: '待发货单数',
+      tips: '已批准发货但未发货出库的所有订单总单数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    not_shipped_number: {
+      cellTitle: '待发货匹数',
+      tips: '已批准发货但未发货出库的所有订单总匹数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    not_shipped_amount_sum: {
+      cellTitle: '待发货金额',
+      tips: '已批准发货但未发货出库的所有订单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    shipped_order_number: {
+      cellTitle: '已发货单数',
+      tips: '已经发货出库的所有订单总单数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    shipped_number: {
+      cellTitle: '已发货匹数',
+      tips: '已经发货出库的所有订单总匹数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    shipped_amount_sum: {
+      cellTitle: '已发货金额',
+      tips: '已经发货出库的所有订单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+  },
+}
+// 货款
+export const PaymentAmountForm = {
+  summary: {
+    summaryTitle: '货款金额',
+    tips: '已经发货出库的所有订单总金额',
+    value: {
+      num: '',
+      cls: '',
+    },
+  },
+  form: {
+    amount_unreceived_sum: {
+      cellTitle: '未收金额',
+      tips: '已经批准发货出库但未收到货款的所有订单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    amount_received_sum: {
+      cellTitle: '已收金额',
+      tips: '已收且已经发货出库的所有订单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+  },
+}
+// 退货
+export const ReturnGoodsOrderForm = {
+  summary: {
+    summaryTitle: '退货单数',
+    tips: '已经完成退货入库的退货单总单数',
+    value: {
+      num: '',
+      cls: '',
+    },
+  },
+  form: {
+    return_goods_number: {
+      cellTitle: '退货匹数',
+      tips: '已经完成退货入库的退货单总匹数',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+    return_amount_sum: {
+      cellTitle: '退货金额',
+      tips: '已经完成退货入库的退货单总金额',
+      value: {
+        num: '',
+        cls: '',
+      },
+    },
+  },
+}
+

src/pages/saleStatistic/index.module.scss

@@ -87,3 +87,5 @@ page {
 .amount {
   color: $color_main;
 }
+
+

src/pages/saleStatistic/index.tsx

@@ -1,123 +1,333 @@
-import AtCalendar from '@/components/calendar'
+import { ProductRankApi, PurchaserRankApi, SaleOrderDataFormApi, SalesmanRankApi } from '@/api/statistic/saleStatistic'
+import { formatPriceDiv, setPriceUnit, dataUnit } from '@/common/format'
+import { getFilterData } from '@/common/util'
 import Cell from '@/components/cell'
 import Divider from '@/components/Divider'
-import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
 import Iconfont from '@/components/iconfont/iconfont'
 import LayoutBlock from '@/components/layoutBlock'
 import SelectMarketingDepartment from '@/components/SelectMarketingDepartment'
 import SelectSaleRankingIndicators from '@/components/SelectSaleRankingIndicators'
 import SelectSaleType from '@/components/SelectSaleType'
 import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
-import Table from '@/components/table'
+import Table, { TablePropsType } from '@/components/table'
-import TimePicker from '@/components/timePicker'
 import ToolTip from '@/components/toolTips'
 import { View, Text } from '@tarojs/components'
 import classnames from 'classnames'
 import dayjs from 'dayjs'
-import { useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { OrderForm, ArrangedForm, PaymentAmountForm, ReturnGoodsOrderForm } from './config'
 
+//处理金额(后端单位分，转元)
+const priceformat = (val: number) => {
+  return dataUnit(val / 100)
+}
+
+const defaultLimit = 10
+
+const FilterTimeOptions = {
+  '0': {
+    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`,
+  },
+  '1': {
+    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`,
+  },
+  '2': {
+    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`,
+  },
+  '3': {
+    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`,
+  },
+  '4': {
+    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`,
+  },
+}
+
+// 销售统计
 const saleStatistic = () => {
-  const onChangeTimePicker = (value: ChangedValue) => {
+  const { fetchData } = SaleOrderDataFormApi()
+
+  const [saleType, setSaleType] = useState<number | null>(0)
+  const [saleDepartmentId, setSaleDepartmentId] = useState<number | null>(null)
+  const [dateRange, setDateRange] = useState({
+    date_min: FilterTimeOptions[0].date_min,
+    date_max: FilterTimeOptions[0].date_max,
+  })
+
+  useEffect(() => {
+    getData()
+  }, [saleType, saleDepartmentId, dateRange])
+
+  const getData = async () => {
+    const res = await fetchData(
+      getFilterData({
+        sale_type: saleType,
+        sale_department_id: saleDepartmentId,
+        date_min: dateRange.date_min,
+        date_max: dateRange.date_max,
+      }),
+    )
+    if (res.data) {
+      // 订单
+      OrderForm.summary.value = setPriceUnit(res.data.order_number)
+      OrderForm.summary.total = setPriceUnit(res.data.total_roll)
+      OrderForm.form.processed_order_number.value = setPriceUnit(res.data.processed_order_number)
+      OrderForm.form.processing_order_number.value = setPriceUnit(res.data.processing_order_number)
+      // 配布
+      ArrangedForm.summary.total = setPriceUnit(res.data.arranged_amount_sum)
+      ArrangedForm.summary.value = setPriceUnit(res.data.arranged_number)
+      ArrangedForm.form.not_shipped_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.not_shipped_amount_sum) as number)
+      ArrangedForm.form.not_shipped_number.value = setPriceUnit(res.data.not_shipped_amount_sum)
+      ArrangedForm.form.not_shipped_order_number.value = setPriceUnit(res.data.not_shipped_order_number)
+      ArrangedForm.form.shipped_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.shipped_amount_sum) as number)
+      ArrangedForm.form.shipped_number.value = setPriceUnit(res.data.shipped_number)
+      ArrangedForm.form.shipped_order_number.value = setPriceUnit(res.data.shipped_order_number)
+      ArrangedForm.form.wait_collect_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.wait_collect_amount_sum) as number)
+      ArrangedForm.form.wait_collect_number.value = setPriceUnit(res.data.wait_collect_number)
+      ArrangedForm.form.wait_collect_order_number.value = setPriceUnit(res.data.wait_collect_order_number)
+      // 货款
+      PaymentAmountForm.summary.value = setPriceUnit(formatPriceDiv(res.data.payment_amount_sum) as number)
+      PaymentAmountForm.form.amount_received_sum.value = setPriceUnit(formatPriceDiv(res.data.amount_received_sum) as number)
+      PaymentAmountForm.form.amount_unreceived_sum.value = setPriceUnit(formatPriceDiv(res.data.amount_unreceived_sum) as number)
+      // 退货
+      ReturnGoodsOrderForm.summary.value = setPriceUnit(res.data.return_goods_order_number)
+      ReturnGoodsOrderForm.form.return_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.return_amount_sum) as number)
+      ReturnGoodsOrderForm.form.return_goods_number.value = setPriceUnit(res.data.return_goods_number)
+      console.log(res.data)
+    }
+  }
+
+  const onChangeTimePicker = useCallback((value: ChangedValue) => {
     console.log(value)
-  }
+    setDateRange({
-  const onChangeSaleType = (saleType: number) => {
+      date_max: value[1],
+      date_min: value[0],
+    })
+  }, [])
+
+  const onChangeSaleType = useCallback((saleType: number) => {
     console.log('saleType', saleType)
+    // 全部
+    if (saleType === -1) {
+      setSaleType(null)
+    } else {
+      setSaleType(saleType)
     }
-  const onChangeDepartment = (department: number) => {
+  }, [])
+
+  const onChangeDepartment = useCallback((department: number) => {
     console.log('department', department)
+    // 全部
+    if (department === -1) {
+      setSaleDepartmentId(null)
+    } else {
+      setSaleDepartmentId(department)
     }
+  }, [])
 
-  const onChangeIndicators = (indicators: number) => {
+  return (
-    console.log('indicators', indicators)
+    <View className={styles.saleStatistic}>
+      {/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
+      <View className={styles['saleStatistic--filterBar']}>
+        <SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
+        <SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
+        <SelectTimePicker onChange={onChangeTimePicker} defaultValue='0' timeOptions={FilterTimeOptions}></SelectTimePicker>
+      </View>
+      <View className={styles['saleStatistic--content']}>
+        <LayoutBlock circle flexDirection='col'>
+          <View className='flex-row items-center'>
+            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
+            <Text className={styles.title}>订单</Text>
+          </View>
+          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={OrderForm.summary.tips}>
+              <View className='flex-row items-center'>
+                <Text className={styles['totalSummary--title']}>{OrderForm.summary.summaryTitle}</Text>
+                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
+              </View>
+            </ToolTip>
+            <View className={classnames(styles['totalSummary--current'], OrderForm.summary.value.cls)}>{OrderForm.summary.value.num}</View>
+            <View className={classnames(styles['totalSummary--totalNum'])}>
+              （共 <Text className={OrderForm.summary.total.cls}>{OrderForm.summary.total.num}</Text>
+              匹）
+            </View>
+          </View>
+          {Object.entries(OrderForm.form).map(([key, value]) => {
+            return (
+              <Cell
+                key={key}
+                title={
+                  <ToolTip placement='top' content={value.tips}>
+                    <View className='flex-row items-center'>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
+                      <Iconfont name='icon-tishi' size={36}></Iconfont>
+                    </View>
+                  </ToolTip>
                 }
+                desc={value.value.num}
+                customDescClassName={value.value.cls}
+                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
+        </LayoutBlock>
+        <LayoutBlock circle flexDirection='col'>
+          <View className='flex-row items-center'>
+            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
+            <Text className={styles.title}>配布</Text>
+          </View>
+          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={ArrangedForm.summary.tips}>
+              <View className='flex-row items-center'>
+                <Text className={styles['totalSummary--title']}>{ArrangedForm.summary.summaryTitle}</Text>
+                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
+              </View>
+            </ToolTip>
+            <View className={classnames(styles['totalSummary--current'], ArrangedForm.summary.value.cls)}>{ArrangedForm.summary.value.num}</View>
+            <View className={classnames(styles['totalSummary--totalNum'])}>
+              （共计 <Text className={ArrangedForm.summary.total.cls}>{ArrangedForm.summary.total.num}</Text>）
+            </View>
+          </View>
+          {Object.entries(ArrangedForm.form).map(([key, value], index) => {
+            return (
+              <>
+                <Cell
+                  key={key}
+                  title={
+                    <ToolTip placement='top' content={value.tips}>
+                      <View className='flex-row items-center'>
+                        <Text className={styles.title}>{value.cellTitle}</Text>
+                        <Iconfont name='icon-tishi' size={36}></Iconfont>
+                      </View>
+                    </ToolTip>
+                  }
+                  desc={value.value.num}
+                  customDescClassName={value.value.cls}
+                  customClassName={styles['cell-desc']}></Cell>
+                {(index + 1) % 3 === 0 && <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>}
+              </>
+            )
+          })}
+        </LayoutBlock>
+        <LayoutBlock circle flexDirection='col'>
+          <View className='flex-row items-center'>
+            <Iconfont name='icon-daikuan' size={32}></Iconfont>
+            <Text className={styles.title}>货款</Text>
+          </View>
+          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={PaymentAmountForm.summary.tips}>
+              <View className='flex-row items-center'>
+                <Text className={styles['totalSummary--title']}>{PaymentAmountForm.summary.summaryTitle}</Text>
+                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
+              </View>
+            </ToolTip>
+            <View className={classnames(styles['totalSummary--current'], PaymentAmountForm.summary.value.cls)}>{PaymentAmountForm.summary.value.num}</View>
+          </View>
+          {Object.entries(PaymentAmountForm.form).map(([key, value]) => {
+            return (
+              <Cell
+                key={key}
+                title={
+                  <ToolTip placement='top' content={value.tips}>
+                    <View className='flex-row items-center'>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
+                      <Iconfont name='icon-tishi' size={36}></Iconfont>
+                    </View>
+                  </ToolTip>
+                }
+                desc={value.value.num}
+                customDescClassName={value.value.cls}
+                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
+        </LayoutBlock>
+        <LayoutBlock circle flexDirection='col'>
+          <View className='flex-row items-center'>
+            <Iconfont name='icon-tuikuan' size={32}></Iconfont>
+            <Text className={styles.title}>退货</Text>
+          </View>
+          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={ReturnGoodsOrderForm.summary.tips}>
+              <View className='flex-row items-center'>
+                <Text className={styles['totalSummary--title']}>{ReturnGoodsOrderForm.summary.summaryTitle}</Text>
+                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
+              </View>
+            </ToolTip>
+            <View className={classnames(styles['totalSummary--current'], ReturnGoodsOrderForm.summary.value.cls)}>
+              {ReturnGoodsOrderForm.summary.value.num}
+            </View>
+          </View>
+          {Object.entries(ReturnGoodsOrderForm.form).map(([key, value]) => {
+            return (
+              <Cell
+                key={key}
+                title={
+                  <ToolTip placement='top' content={value.tips}>
+                    <View className='flex-row items-center'>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
+                      <Iconfont name='icon-tishi' size={36}></Iconfont>
+                    </View>
+                  </ToolTip>
+                }
+                desc={value.value.num}
+                customDescClassName={value.value.cls}
+                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
+        </LayoutBlock>
+        <RankingBlock saleType={saleType} saleDepartmentId={saleDepartmentId} date_min={dateRange.date_min} date_max={dateRange.date_max}></RankingBlock>
+      </View>
+    </View>
+  )
+}
 
-  //需要传进来的数据示例
+//需要传进来的数据示例
-  const exampledataSource = [
-    {
-      key: '1',
-      username: '小红',
-      count: '123打发手动阀手动阀啊手动阀',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '2',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '3',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '4',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '5',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '6',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '7',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '8',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '9',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-    {
-      key: '10',
-      username: '小红',
-      count: '123',
-      gb: '321',
-      dbd: '¥6634.93w',
-    },
-  ]
 
-  //需要传进来的表头数据示例
+//需要传进来的表头数据示例
-  const examplecolumns = [
+const productRankingColumns = [
   {
-      key: 'username',
+    key: 'index',
     title: '编号',
-      dataIndex: 'username',
+    dataIndex: 'index',
     width: '20%',
   },
   {
-      key: 'count',
+    key: 'product_name',
     title: '面料名称',
-      dataIndex: 'count',
+    dataIndex: 'product_name',
     width: '20%',
     ellipsis: {
       isEllipsis: true,
@@ -125,21 +335,87 @@ const saleStatistic = () => {
     },
   },
   {
-      key: 'gb',
+    key: 'roll',
     title: '匹数',
-      dataIndex: 'gb',
+    dataIndex: 'roll',
     width: '30%',
   },
   {
-      key: 'dbd',
+    key: 'sales_amount',
     title: '交易金额',
-      dataIndex: 'dbd',
+    dataIndex: 'sales_amount',
     width: '30%',
     render: (text: string) => <Text className={styles.amount}>{text}</Text>,
   },
-  ]
+]
 
-  const tabsConfig = [
+//需要传进来的表头数据示例
+const purchaserRankingColumns = [
+  {
+    key: 'index',
+    title: '编号',
+    dataIndex: 'index',
+    width: '20%',
+  },
+  {
+    key: 'purchaser_name',
+    title: '客户名称',
+    dataIndex: 'purchaser_name',
+    width: '20%',
+    ellipsis: {
+      isEllipsis: true,
+      rows: 2,
+    },
+  },
+  {
+    key: 'roll',
+    title: '交易匹数',
+    dataIndex: 'roll',
+    width: '30%',
+  },
+  {
+    key: 'sales_amount',
+    title: '交易金额',
+    dataIndex: 'sales_amount',
+    width: '30%',
+    render: (text: string) => <Text className={styles.amount}>{text}</Text>,
+  },
+]
+
+//需要传进来的表头数据示例
+const salesmanRankingColumns = [
+  {
+    key: 'index',
+    title: '编号',
+    dataIndex: 'index',
+    width: '20%',
+  },
+  {
+    key: 'sale_user_name',
+    title: '业务员名称',
+    dataIndex: 'sale_user_name',
+    width: '25%',
+    ellipsis: {
+      isEllipsis: true,
+      rows: 2,
+    },
+  },
+  {
+    key: 'roll',
+    title: '销售匹数',
+    dataIndex: 'roll',
+    width: '25%',
+  },
+  {
+    key: 'sales_amount',
+    title: '销售金额',
+    dataIndex: 'sales_amount',
+    width: '30%',
+    render: (text: string) => <Text className={styles.amount}>{text}</Text>,
+  },
+]
+
+const tabsConfig = [
   {
     name: '面料',
     key: 0,
@@ -152,7 +428,35 @@ const saleStatistic = () => {
     name: '业务员',
     key: 2,
   },
-  ]
+]
+
+interface RankingBlockPropsType {
+  saleType?: number | null
+  saleDepartmentId?: number | null
+  date_min?: string
+  date_max?: string
+}
+// 销售排行
+const RankingBlock = memo<RankingBlockPropsType>(props => {
+  const { saleType, saleDepartmentId, date_min, date_max } = props
+
+  const { fetchData: fetchProductRank } = ProductRankApi()
+  const { fetchData: fetchPurchaserRank } = PurchaserRankApi()
+  const { fetchData: fetchSalesmanRank } = SalesmanRankApi()
+
+  let [limit, setLimit] = useState(defaultLimit)
+
+  const [indicator, setIndicator] = useState<number | null>(null)
+
+  // 切换排行指标
+  const onChangeIndicators = useCallback((indicators: number) => {
+    console.log('indicators', indicators)
+    if (indicators === -1) {
+      setIndicator(null)
+    } else {
+      setIndicator(indicators)
+    }
+  }, [])
 
   const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
 
@@ -160,214 +464,93 @@ const saleStatistic = () => {
     const key = event.target.dataset.key
     if (key === currentKey) return
     setCurrentKey(key)
+    setLimit(defaultLimit)
   }
 
+  const getData = useCallback(
+    async (tabKey: number) => {
+      let res: any
+      const payload = {
+        limit,
+        saleType,
+        saleDepartmentId,
+        date_min,
+        date_max,
+        data_form_status: indicator,
+      }
+      if (tabKey === 0) {
+        res = await fetchProductRank(getFilterData(payload))
+      } else if (tabKey === 1) {
+        res = await fetchPurchaserRank(getFilterData(payload))
+      } else {
+        res = await fetchSalesmanRank(getFilterData(payload))
+      }
+      if (res.data) {
+        console.log('排名', res.data)
+        if (tabKey === 0) {
+          setCurrentTable(() => ({
+            columns: productRankingColumns,
+            dataSource: {
+              list: res.data.list.map((item, index: number) => ({
+                key: index,
+                index: index + 1,
+                product_name: item.product_name || '--',
+                sales_amount: `￥${priceformat(item.sales_amount)}`,
+                roll: dataUnit(item.roll),
+              })),
+              total: res.data.total,
+            },
+          }))
+        } else if (tabKey === 1) {
+          setCurrentTable(() => ({
+            columns: purchaserRankingColumns,
+            dataSource: {
+              list: res.data.list.map((item, index: number) => ({
+                key: index,
+                index: index + 1,
+                purchaser_name: item.purchaser_name || '--',
+                sales_amount: `￥${priceformat(item.sales_amount)}`,
+                roll: dataUnit(item.roll),
+              })),
+              total: res.data.total,
+            },
+          }))
+        } else {
+          setCurrentTable(() => ({
+            columns: salesmanRankingColumns,
+            dataSource: {
+              list: res.data.list.map((item, index: number) => ({
+                key: index,
+                index: index + 1,
+                sale_user_name: item.sale_user_name || '--',
+                sales_amount: `￥${priceformat(item.sales_amount)}`,
+                roll: dataUnit(item.roll),
+              })),
+              total: res.data.total,
+            },
+          }))
+        }
+      }
+    },
+    [limit, saleType, saleDepartmentId, date_min, date_max, indicator],
+  )
+
+  useEffect(() => {
+    getData(currentKey)
+  }, [currentKey, getData])
+
+  const handleLoadMore = () => {
+    console.log('loadmore')
+    // TODO（优化）：结合接口的offset 和 limit 分段请求接口然后通过 push 将旧数据和新数据拼接起来
+    setLimit(v => v + defaultLimit)
+  }
+
+  const [currentTable, setCurrentTable] = useState<TablePropsType>({
+    columns: productRankingColumns,
+  })
+
   return (
-    <View className={styles.saleStatistic}>
+    <>
-      {/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
-      <View className={styles['saleStatistic--filterBar']}>
-        <SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
-        <SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
-        <SelectTimePicker onChange={onChangeTimePicker}></SelectTimePicker>
-      </View>
-      <View className={styles['saleStatistic--content']}>
-        <LayoutBlock circle flexDirection='col'>
-          <View className='flex-row items-center'>
-            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
-            <Text className={styles.title}>订单</Text>
-          </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <View className={styles.totalSummary}>
-            <ToolTip placement='top' content='请填入提示信息'>
-              <View className='flex-row items-center'>
-                <Text className={styles['totalSummary--title']}>订单总数</Text>
-                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
-              </View>
-            </ToolTip>
-            <View className={styles['totalSummary--current']}>3425</View>
-            <View className={styles['totalSummary--totalNum']}>（共432423匹）</View>
-          </View>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待配布订单</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'323'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>已配布订单</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-        </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
-          <View className='flex-row items-center'>
-            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
-            <Text className={styles.title}>配布</Text>
-          </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <View className={styles.totalSummary}>
-            <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>已配布匹数</Text>
-              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
-            </View>
-            <View className={styles['totalSummary--current']}>3425</View>
-            <View className={styles['totalSummary--totalNum']}>（共计 ¥231.23w）</View>
-          </View>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待收款单数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'323'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待收款匹数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待收款金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待发货单数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'323'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待发货匹数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>待发货金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>已发货单数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>已发货匹数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>已发货金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-        </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
-          <View className='flex-row items-center'>
-            <Iconfont name='icon-daikuan' size={32}></Iconfont>
-            <Text className={styles.title}>货款</Text>
-          </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <View className={styles.totalSummary}>
-            <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>货款金额</Text>
-              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
-            </View>
-            <View className={styles['totalSummary--current']}>56133.32</View>
-          </View>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>未收金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>已收金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-        </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
-          <View className='flex-row items-center'>
-            <Iconfont name='icon-tuikuan' size={32}></Iconfont>
-            <Text className={styles.title}>退货</Text>
-          </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
-          <View className={styles.totalSummary}>
-            <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>退货单数</Text>
-              <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
-            </View>
-            <View className={styles['totalSummary--current']}>42</View>
-          </View>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>退货匹数</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-          <Cell
-            title={
-              <View className='flex-row items-center'>
-                <Text className={styles.title}>退货金额</Text>
-                <Iconfont name='icon-tishi' size={36}></Iconfont>
-              </View>
-            }
-            desc={'2972'}
-            customClassName={styles['cell-desc']}></Cell>
-        </LayoutBlock>
       {/* 销售排行 */}
       <LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>
         <View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
@@ -390,12 +573,11 @@ const saleStatistic = () => {
               )
             })}
           </View>
-            <Table columns={examplecolumns} dataSource={exampledataSource}></Table>
+          <Table columns={currentTable.columns} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
         </View>
       </LayoutBlock>
-      </View>
+    </>
-    </View>
   )
-}
+})
 
 export default saleStatistic

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

@@ -22,7 +22,7 @@ export default memo<PropsType>((props) => {
         <Text className={styles.moneyText}>预估金额：</Text>
         <Text className={styles.moneyNumber}>
           <Text className={styles.unit}>¥</Text>
-          {amount}
+          {amount.toFixed(2)}
         </Text>
       </View>
       <View className={styles.bottomRight}>

src/pages/shopping/index.tsx

@@ -1,21 +1,20 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
-import Taro, { useDidShow } from '@tarojs/taro'
+import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro'
-import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
 import InfiniteScroll from '@/components/infiniteScroll'
 import ItemList from './components/shoppingCartItem/index'
-import BottomBtns from '@/components/BottomBtns'
 import { formatPriceDiv } from '@/common/format'
 import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
-import { dataLoadingStatus, debounce } from '@/common/util'
+import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
-import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
+import { ShoppingCart } from './components/shoppingCart/index'
-import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context'
+import { Goods, useShoppingContext } from './context'
-import { alert, goLink } from '@/common/common'
+import { alert, goLink, isEmptyObject } from '@/common/common'
 
 export const Shopping: FC = memo(() => {
   // 计算总的预估金额
@@ -48,6 +47,9 @@ export const Shopping: FC = memo(() => {
 interface InternalContainer {}
 
 const ShoppingCartContainer: FC<InternalContainer> = () => {
+
+  let isFirst = useRef(true)
+
   const { isManageStatus, setManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore, setColorStore } = useShoppingContext()
 
   // 管理
@@ -55,16 +57,30 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     setManageStatus(!isManageStatus)
   }
 
-  const [listHeight, setListHeight] = useState('auto')
+  const listHeightRef = useRef('auto')
 
   const { fetchData, state } = ShoppingCartListApi()
 
   const [searchOptions, setSearchOptions] = useState({
     short_name_or_phone: '',
   })
+  useDidShow(()=>{
+    console.log('onShow');
+    if (!isFirst.current){
+
+      fetchData(searchOptions)
+    } 
+  })
+  useDidHide(() => {
+    console.log('onHide');
+  })
+  console.log('rerender');
 
   useEffect(() => {
+    console.log('useEffect fetchData')
+    if (!isEmptyObject(getFilterData(searchOptions))){
       fetchData(searchOptions)
+    } 
   }, [searchOptions])
 
   // 输入了搜索关键字
@@ -82,7 +98,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
   useLayoutEffect(() => {
     ;(async () => {
+      console.log('useLayoutEffect')
       await fetchData()
+      isFirst.current = false
       let query = Taro.createSelectorQuery()
       console.log('query', query)
       query.select('#shoppingContainer').boundingClientRect()
@@ -94,7 +112,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         const topBarHeight = res[1].height
         const bottomBarHeight = res[2].height
         const listHeight = containerHeight - topBarHeight - bottomBarHeight
-        setListHeight(listHeight + 'px')
+        listHeightRef.current = listHeight + 'px'
       })
     })()
   }, [])
@@ -191,12 +209,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
         </Search>
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
-        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
+        <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
-          <InfiniteScroll
+          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            statusMore={statusMore}
-            refresherEnabled={true}
-            selfOnRefresherRefresh={handleRefresh}
-            refresherTriggered={refreshStatus}>
             {!!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>

src/pages/user/index.module.scss

@@ -39,7 +39,8 @@ page{
   .left {
   }
   .middle {
-    margin: 0 40px;
+    max-width: 40%;
+    padding: 0 40px;
     flex: 1 1 auto;
   }
   .right {
@@ -58,11 +59,13 @@ page{
   display: block;
   font-size: 36px;
   font-weight: 600;
+  @include common_ellipsis()
 }
 .userno {
   display: block;
   font-size: 28px;
   color: $color_font_two;
+  @include common_ellipsis()
 }
 .userTitle {
   color: #626262;

src/styles/common.scss

@@ -80,3 +80,12 @@ $customTabBarHeight: 100px;
 .color-white{
   color: white;
 }
+
+.s-w::after {
+  content: 'W';
+  font-size: $font_size;
+}
+.s-e::after {
+  content: 'E';
+  font-size: $font_size;
+}