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

src/components/LoadMore/index.module.scss

@@ -0,0 +1,9 @@
+.loadMore{
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  color: $color_font_three;
+  padding: 24px 0;
+}

src/components/LoadMore/index.tsx

@@ -0,0 +1,42 @@
+import { View, Text } from '@tarojs/components'
+import { FC } from 'react'
+import Iconfont from '../iconfont/iconfont'
+import LoadingCard from '../loadingCard/index'
+import styles from './index.module.scss'
+
+export type LoadMoreStatus = 'more' | 'loading' | 'noMore'
+
+interface LoadMoreEvent {
+  onClick?: () => void
+}
+
+interface LoadMorePropsType extends LoadMoreEvent {
+  status: LoadMoreStatus
+  moreText?: string
+  loadingText?: string
+  noMoreText?: string
+}
+
+const LoadMore: FC<LoadMorePropsType> = props => {
+  const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', onClick } = props
+
+  const handleShowMore = () => {
+    onClick && onClick()
+  }
+
+  let component: JSX.Element | null = null
+  if (status === 'loading') {
+    component = <LoadingCard title={loadingText}></LoadingCard>
+  } else if (status === 'more') {
+    component = (
+      <View onClick={handleShowMore}>
+        <Text style={{ marginRight: '5px' }}>{moreText}</Text>
+        <Iconfont name='icon-zhankai' size={32}></Iconfont>
+      </View>
+    )
+  } else {
+    component = <Text>{noMoreText}</Text>
+  }
+  return <View className={styles.loadMore}>{component}</View>
+}
+export default LoadMore

src/components/SelectSaleRankingIndicators/index.module.scss

@@ -0,0 +1,6 @@
+.grid {
+  padding: 24px 40px;
+  display: grid;
+  grid-gap: 24px 24px;
+  grid-template-columns: 1fr 1fr 1fr;
+}

src/components/SelectSaleRankingIndicators/index.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useMemo, useState } from 'react'
+import DropDownItem from '../dropDown-item'
+import FilterButton from '../filterButton'
+import { EnumMarketingDepartmentApi } from '@/api/index'
+import { View } from '@tarojs/components'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+
+type ChangedValue = string | number
+
+interface SelectSaleTypeProps {
+  onChange?: (value: ChangedValue) => void
+}
+
+type EnumList = {
+  id: number
+  code: string
+  name: string
+}
+// 销售排行指标
+const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
+
+  const selectName = '排行指标'
+
+  const { onChange } = props
+  console.log(props)
+  const { fetchData } = EnumMarketingDepartmentApi()
+
+  const getData = async () => {
+    const res = await fetchData()
+    setEnumList([{ id: -1, code: '', name: '全部' }, ...res.data.list])
+  }
+
+  const [enumList, setEnumList] = useState<EnumList[]>([])
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  const [currentValue, setCurrentValue] = useState<ChangedValue>(-1)
+
+  const handleClick = (value: ChangedValue) => {
+    setCurrentValue(value)
+    onChange?.(value)
+  }
+
+  const displayTitle = useMemo(() => {
+    if (currentValue === -1) {
+      return selectName
+    }
+    return !!enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
+  }, [enumList, currentValue])
+
+  return (
+    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' showOverlay={false}>
+      <View className={classnames(styles.grid)}>
+        {!!enumList.length &&
+          enumList.map((item: EnumList) => {
+            return (
+              <FilterButton isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
+                {item.name}
+              </FilterButton>
+            )
+          })}
+      </View>
+    </DropDownItem>
+  )
+}
+export default SelectSaleRankingIndicators

src/components/SelectTimePicker/index.tsx

@@ -1,13 +1,14 @@
+import { formatDateTime } from '@/common/format'
 import { View, Text } from '@tarojs/components'
 import dayjs from 'dayjs'
 import { FC, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import IconFont from '../iconfont/iconfont'
-import TimePicker from '../timePicker'
+import TimePickerPopup from '../timePickerPopup'
 import styles from './index.module.scss'
 
-type ChangedValue = string | number
+export type ChangedValue = string[]
 
 interface SelectSaleTypeProps {
   onChange?: (value: ChangedValue) => void
@@ -16,8 +17,8 @@ interface SelectSaleTypeProps {
 const FilterTimeOptions = {
   '0': {
     name: '全部',
-    date_min: undefined,
+    date_min: '',
-    date_max: undefined,
+    date_max: '',
   },
   '1': {
     name: '今天',
@@ -64,50 +65,85 @@ const FilterTimeOptions = {
       .add(0, 'day')
       .format('YYYY-MM-DD')} 00:00:00`,
   },
-} as const
+  '6': {
+    name: '自定义时间',
+    date_min: '',
+    date_max: '',
+  },
+}
 
 type Key = keyof typeof FilterTimeOptions
-type Value = (typeof FilterTimeOptions)[Key] 
+type Value = typeof FilterTimeOptions[Key]
 
 const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
   const { onChange: change } = props
+
   const [currentValue, setCurrentValue] = useState('0')
 
   const [currentDate, setCurrentDate] = useState({
-    start: new Date(),
+    start: new Date().toLocaleDateString(),
-    end: new Date(),
+    end: '',
   })
 
-  
+  // 展示时间筛选
+  const [showTime, setShowTime] = useState(false)
+
+  // 点击关闭时间筛选
+  const handClose = () => {
+    setShowTime(false)
 
-  const onSelectDate = time => {
-    console.log(time)
-    change?.(time)
   }
 
   const handleClick = (key: Key) => {
     setCurrentValue(key)
+    change?.([FilterTimeOptions[key].date_min, FilterTimeOptions[key].date_max])
+    setCustomFilterButtonText('自定义时间')
+  }
+  // 选择时间
+  const onSelectDate = event => {
+    console.log(event?.value, 'event?.value?.start')
+    setCurrentDate({
+      start: event?.value?.start,
+      end: event?.value?.end,
+    })
+    setShowTime(false)
+    setCustomFilterButtonText(`${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 handleCustomTime = () => {
+    setCurrentValue('6')
+    setShowTime(true)
   }
 
   return (
-    <DropDownItem title='查询日期' direction='down' value={currentValue} activeColor='#337fff'>
+    <>
-      <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
+      <DropDownItem
-        {Object.entries(FilterTimeOptions).map(([key, value]) => {
+        title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
-          return (
+        direction='down'
-            <FilterButton isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
+        value={currentValue}
-              {value.name}
+        activeColor='#337fff'>
-            </FilterButton>
+        <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
-          )
+          {Object.entries(FilterTimeOptions)
-        })}
+            .slice(0, -1)
-        <FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={() => handleClick('6' as Key)}>
+            .map(([key, value]) => {
-          <Text>自定义时间</Text>
+              return (
-          <IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
+                <FilterButton isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
-        </FilterButton>
+                  {value.name}
-      </View>
+                </FilterButton>
-      <View style={{ paddingBottom: '24rpx' }}>
+              )
-        <TimePicker start={currentDate.start} end={currentDate.end} onSelectDate={onSelectDate}></TimePicker>
+            })}
-      </View>
+          <FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={handleCustomTime}>
-    </DropDownItem>
+            <Text>{customFilterButtonText}</Text>
+            <IconFont name='icon-chakanquanbukehu' color={'6' === 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

@@ -5,7 +5,7 @@ import IconFont, { IconNames } from "../iconfont/iconfont"
 import styles from './index.module.scss'
 
 interface CellPropsType {
-  title: string
+  title: string | React.ReactNode
   desc: string
   isLink?: boolean
   onClick?: () => void
@@ -28,7 +28,7 @@ const Cell:FC<CellPropsType> = (props) => {
       <View className={classNames(styles.cell, customClassName)} style={customStyle} onClick={handleClick}>
         <View className={styles.title}>
           {iconName && <IconFont name={iconName} size={46}></IconFont>}
-          <Text>{title}</Text>
+          <View>{title}</View>
         </View>
         <View className={styles.desc}>
           <Text className={styles.descText}>{desc}</Text>

src/components/dropDown-item/index.tsx

@@ -1,3 +1,7 @@
+/**
+ * 注意：需要在父节点设置 position: relative;
+ */
+
 import { View, Text } from '@tarojs/components'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'

src/components/loadingCard/index.tsx

@@ -4,12 +4,10 @@ import style from "./index.module.scss"
 import { memo } from "react";
 
 type Params = {
-    styleLoading?: Object,
     title?: string,
     loadingIcon?: false|true
 }
 export default memo(({
-    styleLoading = {},
     title = "加载中...", //显示的文字
     loadingIcon = true //是否显示加载图标
 }:Params) => {
@@ -22,4 +20,4 @@ export default memo(({
             </View>
         </>
     )
-})
+})

src/components/popup/index.module.scss

@@ -70,8 +70,9 @@ $am-ms: 200ms;
     bottom: 0;
     left: 0;
     min-height: 200px;
-    width: 100vw;
+    width: 100%;
     border-radius: 20px 20px 0px 0px;
+    box-shadow: 1px ​1px 1px 1px #f2f2f2;
     transform: translate3d(0, 100%, 0);
   }
 
@@ -79,8 +80,9 @@ $am-ms: 200ms;
     top: 0;
     left: 0;
     min-height: 200px;
-    width: 100vw;
+    width: 100%;
     border-radius: 0 0 20px 20px;
+    box-shadow: 6px ​6px 5px 14px red;
     transform: translate3d(0, -100%, 0);
   }
 

src/components/table/index.module.scss

@@ -0,0 +1,50 @@
+.table {
+  border: 0px solid darkgray;
+  border-radius: 5px;
+  font-size: 22px;
+  color: #333;
+}
+
+.tr {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  border-bottom: 1px solid #f7f7f7;
+}
+
+.td {
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  font-size: 26px;
+}
+
+.th{
+  font-size: 26px;
+}
+
+.bg-line {
+  background: #fff;
+}
+
+.bg-header {
+  justify-content: center;
+  background: #f6f7fb;
+  color: $color_font_three;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  border-radius: 8px;
+}
+
+.ellipsis_1{
+  @include common_ellipsis(1)
+}
+.ellipsis_2{
+  @include common_ellipsis(2)
+}
+
+

src/components/table/index.tsx

@@ -0,0 +1,106 @@
+import { ScrollView, View, Text } from '@tarojs/components'
+import classnames from 'classnames'
+import { FC, 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 = {
+  title: string
+  dataIndex: string
+  width: string
+  key: string
+  render?: (text?: string, record?: RecordType, index?: number) => React.ReactNode
+  ellipsis?: boolean | { isEllipsis: boolean; rows: number }
+}
+
+type RecordType = {
+  key: string
+  [Property: string]: any
+}
+
+interface TablePropsType {
+  columns: ColumnsType[]
+  dataSource: RecordType[]
+}
+
+const Table: FC<TablePropsType> = props => {
+  const { columns, dataSource } = props
+
+
+  const [showMore, setShowMore] = useState(false)
+
+  const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
+
+  const handleShowMore = () => {
+
+  }
+
+  const getColumnStyle = (columnConfig: ColumnsType) => {
+    const columnStyle = {}
+    if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
+      columnStyle[styles.ellipsis_1] = true
+    }
+    if (typeof columnConfig.ellipsis === 'object' && columnConfig.ellipsis.isEllipsis) {
+      const rows = columnConfig.ellipsis.rows
+      if (rows === 2) {
+        columnStyle[styles.ellipsis_2] = true
+      } else {
+        columnStyle[styles.ellipsis_1] = true
+      }
+    }
+    return columnStyle
+  }
+
+  const sourceContainer = () => {
+    return (
+      <>
+        {!!dataSource.length &&
+          dataSource.map(source => {
+            return (
+              <View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
+                {columns.map(column => {
+                  if (column.render) {
+                    return (
+                      <View className={styles.td} style={{ width: column.width }}>
+                        {/* 判断表头是不是有render 有就执行render */}
+                        {column.render(source[column.dataIndex])}
+                      </View>
+                    )
+                  } else {
+                    return (
+                      <View className={classnames(styles.td, getColumnStyle(column))} style={{ width: column.width }}>
+                        {
+                          source[column.dataIndex] //根据表头填数据
+                        }
+                      </View>
+                    )
+                  }
+                })}
+              </View>
+            )
+          })}
+        {showMore && (
+          <LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <View className={styles.table}>
+      <View className={classnames(styles.tr, styles['bg-header'])}>
+        {columns.map(column => {
+          return (
+            <View className={styles.th} style={{ width: column.width }} key={column.key}>
+              {column.title}
+            </View>
+          )
+        })}
+      </View>
+      <ScrollView>{sourceContainer()}</ScrollView>
+    </View>
+  )
+}
+export default Table

src/components/toolTips/index.module.scss

@@ -0,0 +1,50 @@
+.mark {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+.tooltip {
+  &-container{
+    position: relative;
+  }
+  position: absolute;
+  left: 0;
+  top: 0;
+  user-select: text;
+  color: white;
+  &-inner {
+    position: absolute;
+    background-color: #333333;
+    font-size: $font_size;
+    box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
+    border-radius: 8px;
+    &-content {
+      padding: 8px 12px;
+      white-space: nowrap;
+    }
+  }
+  &-hidden {
+    display: none;
+  }
+}
+.arrowIcon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &-top {
+    transform: rotate(0deg);
+  }
+  &-left {
+    transform: rotate(270deg);
+  }
+  &-right {
+    transform: rotate(90deg);
+  }
+  &-bottom {
+    transform: rotate(180deg);
+  }
+}

src/components/toolTips/index.tsx

@@ -0,0 +1,216 @@
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import IconFont from '../iconfont/iconfont'
+import styles from './index.module.scss'
+
+const SystemWidth = Taro.getSystemInfoSync().windowWidth
+
+const arrowSize = 32
+
+// 由于taro自动把px编译成rpx，所以这里需要把单位处理一下 转成真正的px
+const convertPx = (px: number) => {
+  const realPx = (px / 750) * SystemWidth
+  return realPx
+}
+
+type Placement = 'top' | 'right' | 'bottom' | 'left'
+
+interface ToolTipEvent {
+  onVisibleChange?: (visible?: boolean) => void
+}
+
+interface ToolTipPropsType extends ToolTipEvent {
+  defaultVisible?: boolean
+  content: React.ReactNode
+  placement?: Placement
+  children?: React.ReactNode
+  customClassName?: string
+  customStyle?: React.CSSProperties
+  customContentStyle?: React.CSSProperties
+}
+
+interface ToolTipRef {
+  show: () => void
+  hide: () => void
+  visible: boolean
+}
+
+const popoverStyle = {
+  color: '#333333',
+}
+
+const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
+  const { placement = 'top', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
+
+  if (!content){
+    throw new Error('tooltip: content 不能为空')
+  } 
+  
+  const [visible, setVisible] = useState(defaultVisible)
+
+  const onVisibleChangeRef = useRef(onVisibleChange)
+  onVisibleChangeRef.current = onVisibleChange
+
+  // 暴露方法给外部
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+        visible,
+      }
+    },
+    [visible],
+  )
+
+  const handleClick = useCallback(() => {
+    setVisible(v => {
+      onVisibleChangeRef.current?.(!v)
+      return !v
+    })
+  }, [])
+
+  const handleClickMark = useCallback(() => {
+    setVisible(false)
+    onVisibleChangeRef.current?.(false)
+  }, [])
+
+  const getArrowSide = useMemo(() => {
+    const side = placement.split('-')[0] as string // placement = 'top-start'  取 'top'
+
+    const arrowSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right',
+    }[side] as string
+    return arrowSide
+  }, [placement])
+
+  const [childrenRect, setChildrenRect] = useState<any>({})
+  const childrenRectRef = useRef(childrenRect)
+  childrenRectRef.current = childrenRect
+
+  const [viewport, setViewport] = useState<any>({})
+  const viewportRef = useRef(viewport)
+  viewportRef.current = viewport
+
+  useEffect(() => {
+    console.log('useLayoutEffect')
+    const query = Taro.createSelectorQuery()
+    query.select('#children').boundingClientRect()
+    query.selectViewport().scrollOffset()
+    query.exec(res => {
+      console.log(res[0])
+      console.log(res[1])
+      setChildrenRect(res[0])
+      childrenRectRef.current = res[0]
+      setViewport(res[1])
+      viewportRef.current = res[1]
+    })
+  }, [])
+
+  // 箭头 坐标
+  const arrowCoords = useMemo(() => {
+    console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
+    switch (getArrowSide) {
+      case 'bottom': // 下箭头
+        return {
+          left: childrenRectRef.current.width / 2 - convertPx(arrowSize) / 2,
+          top: -convertPx(arrowSize),
+          right: '',
+          bottom: '',
+        }
+      case 'left': // 左箭头
+        return {
+          left: childrenRectRef.current.width,
+          right: '',
+          top: childrenRectRef.current.height / 2 - convertPx(arrowSize) / 2,
+          bottom: '',
+        }
+      case 'top': // 上箭头
+        return {
+          left: childrenRectRef.current.width / 2 - convertPx(arrowSize) / 2,
+          right: '',
+          top: childrenRectRef.current.height,
+          bottom: '',
+        }
+      case 'right': // 右箭头
+        return {
+          left: -convertPx(arrowSize),
+          right: '',
+          top: childrenRectRef.current.height / 2 - convertPx(arrowSize) / 2,
+          bottom: '',
+        }
+    }
+  }, [getArrowSide, childrenRectRef.current])
+
+  // content 坐标
+  const contentCoords = useMemo(() => {
+    switch (getArrowSide) {
+      case 'bottom': // 下箭头
+        return {
+          left: 0,
+          top: '',
+          right: '',
+          bottom: convertPx(arrowSize) - 5,
+        }
+      case 'left': // 左箭头
+        return {
+          left: childrenRectRef.current.width + convertPx(arrowSize) - 5,
+          top: 0,
+          right: '',
+          bottom: '',
+        }
+      case 'top': // 上箭头
+        return {
+          left: 0,
+          top: childrenRectRef.current.height + convertPx(arrowSize) - 5,
+          right: '',
+          bottom: '',
+        }
+      case 'right': // 右箭头
+        return {
+          left: '',
+          top: 0,
+          right: convertPx(arrowSize) - 5,
+          bottom: '',
+        }
+    }
+  }, [getArrowSide, childrenRectRef.current])
+
+  const ContentComponent = useMemo(() => {
+    console.log('执行完')
+
+    return (
+      <View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
+        {/* 箭头 */}
+        <View className={classNames(styles.arrowIcon, styles[`arrowIcon-${getArrowSide}`])} style={arrowCoords}>
+          <IconFont name='icon-shouqi1' size={arrowSize} color={popoverStyle.color}></IconFont>
+        </View>
+        {/* content */}
+        <View className={styles['tooltip-inner']} id='content' style={{ ...contentCoords, ...customContentStyle }}>
+          <View className={styles['tooltip-inner-content']}>{content}</View>
+        </View>
+      </View>
+    )
+  }, [content, getArrowSide, visible, arrowCoords, contentCoords])
+
+  return (
+    <>
+      {/* 遮罩层 */}
+      <View className={classNames(styles.mark, visible ? '' : styles['tooltip-hidden'])} onClick={handleClickMark}></View>
+      <View className={styles['tooltip-container']}>
+        <View onClick={handleClick} id='children'>
+          {children}
+        </View>
+        {ContentComponent}
+      </View>
+    </>
+  )
+})
+
+export default ToolTip

src/pages/saleStatistic/index.module.scss

@@ -1,4 +1,11 @@
+page {
+  height: 100%;
+  overflow: hidden;
+}
 .saleStatistic {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
   &--filterBar {
     display: flex;
     flex-flow: row nowrap;
@@ -7,4 +14,76 @@
     width: 100%;
     background-color: white;
   }
+  &--content {
+    flex: 1 1 auto;
+    padding-top: 24px;
+    overflow-y: scroll;
+  }
+}
+.title {
+  margin: 0 10px;
+  font-size: $font_size;
+  color: $color_font_one;
+}
+.cell-desc {
+  font-weight: 550;
+  color: $color_font_one;
+  font-size: 34px;
+}
+.totalSummary {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  &--title {
+    font-size: $font_size;
+    margin: 0 10px;
+    color: $color_font_three;
+  }
+  &--current {
+    color: $color_main;
+    font-size: 42px;
+    font-weight: 550;
+  }
+  &--totalNum {
+    color: $color_font_three;
+    font-size: $font_size;
+  }
+}
+
+.rankingIndicatorTitle {
+  position: 'relative';
+  padding: 0 32px;
+}
+
+.rankingTabs {
+  position: relative;
+  background-color: #f5f5f5;
+  box-sizing: border-box;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  .rankingTab {
+    flex: 1;
+    padding: 15px;
+    color: $color_font_one;
+    background-color: transparent;
+    text-align: center;
+    font-size: $font_size;
+    transition: all 0.1s;
+  }
+  .active {
+    color: white;
+    border-radius: 8px;
+    background-color: $color_main;
+  }
+}
+
+.amount {
+  color: $color_main;
 }

src/pages/saleStatistic/index.tsx

@@ -1,55 +1,401 @@
 import AtCalendar from '@/components/calendar'
+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 from '@/components/SelectTimePicker'
+import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
+import Table from '@/components/table'
 import TimePicker from '@/components/timePicker'
-import { View } from '@tarojs/components'
+import ToolTip from '@/components/toolTips'
+import { View, Text } from '@tarojs/components'
 import classnames from 'classnames'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import styles from './index.module.scss'
 
 const saleStatistic = () => {
-  const [options, setOptions] = useState<DropDownOptions[]>([
+  const onChangeTimePicker = (value: ChangedValue) => {
-    {
-      text: 'name',
-      value: 0,
-    },
-    {
-      text: 'name1',
-      value: 1,
-    },
-    {
-      text: 'name2',
-      value: 2,
-    },
-    {
-      text: 'name3',
-      value: 3,
-    },
-  ])
-
-  const onChangeTimePicker = (value) => {
     console.log(value)
   }
-  const onChangeSaleType = (saleType) => {
+  const onChangeSaleType = (saleType: number) => {
-    console.log(saleType)
+    console.log('saleType', saleType)
-
+  }
+  const onChangeDepartment = (department: number) => {
+    console.log('department', department)
   }
-  const onChangeDepartment = (department) => {
-    console.log(department)
 
+  const onChangeIndicators = (indicators: number) => {
+    console.log('indicators', indicators)
+  }
+
+  //需要传进来的数据示例
+  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 = [
+    {
+      key: 'username',
+      title: '编号',
+      dataIndex: 'username',
+      width: '20%',
+    },
+    {
+      key: 'count',
+      title: '面料名称',
+      dataIndex: 'count',
+      width: '20%',
+      ellipsis: {
+        isEllipsis: true,
+        rows: 2,
+      },
+    },
+    {
+      key: 'gb',
+      title: '匹数',
+      dataIndex: 'gb',
+      width: '30%',
+    },
+    {
+      key: 'dbd',
+      title: '交易金额',
+      dataIndex: 'dbd',
+      width: '30%',
+      render: (text: string) => <Text className={styles.amount}>{text}</Text>,
+    },
+  ]
+
+  const tabsConfig = [
+    {
+      name: '面料',
+      key: 0,
+    },
+    {
+      name: '客户',
+      key: 1,
+    },
+    {
+      name: '业务员',
+      key: 2,
+    },
+  ]
+
+  const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
+
+  const handleClickTab = event => {
+    const key = event.target.dataset.key
+    if (key === currentKey) return
+    setCurrentKey(key)
   }
 
   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' }}>
+            <View className='flex-row items-center'>
+              <Iconfont name='icon-paiming' size={32}></Iconfont>
+              <Text className={styles.title}>销售排行</Text>
+            </View>
+            <View style={{ width: '90px' }}>
+              <SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
+            </View>
+          </View>
+          <View style={{ padding: '0 32rpx' }}>
+            <Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
+            <View className={styles.rankingTabs} onClick={handleClickTab}>
+              {tabsConfig.map(item => {
+                return (
+                  <View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
+                    {item.name}
+                  </View>
+                )
+              })}
+            </View>
+            <Table columns={examplecolumns} dataSource={exampledataSource}></Table>
+          </View>
+        </LayoutBlock>
+      </View>
     </View>
   )
 }
+
 export default saleStatistic