🐞 fix(#1000663#25#26#27): 修复销售统计页面的样式问题

src/components/SelectGroup/index.tsx

@@ -0,0 +1,44 @@
+import React, { FC, MutableRefObject } from "react"
+import SelectSaleType from "../SelectSaleType" 
+import SelectTimePicker from "../SelectTimePicker"
+import SelectMarketingDepartment from '../SelectMarketingDepartment'
+
+
+interface PropsType {
+  children?: React.ReactNode
+}
+
+const GroupItem = [
+  SelectMarketingDepartment.name,
+  SelectSaleType.name,
+  SelectTimePicker.name
+]
+
+const SelectGroup: FC<PropsType> = (props: PropsType) => {
+  const {children} = props
+
+  function handleChange(children,childEle) {
+    return function (value: any){
+      childEle.props.onChange(value)
+      children.forEach((child)=>{
+        child.ref?.current.closePopup()
+      })
+    }
+  }
+  function handleCloseOverlay(children) {
+    return function (){
+      children.forEach((child)=>{
+        child.ref?.current.closePopup()
+      })
+    }
+  }
+
+  const renderChildren = () => {
+    return React.Children.map(children, (child) => {
+      const childEle = child as React.FunctionComponentElement<any>
+      return React.cloneElement(childEle, {onChange: handleChange(children,childEle), onCloseOverlay: handleCloseOverlay(children)})
+    })
+  }
+  return <>{renderChildren()}</>
+}
+export default SelectGroup

src/components/SelectMarketingDepartment/index.module.scss

@@ -2,5 +2,5 @@
   padding: 24px 40px;
   display: grid;
   grid-gap: 24px 24px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 }

src/components/SelectMarketingDepartment/index.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useEffect, useMemo, useState } from 'react'
+import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import { EnumMarketingDepartmentApi } from '@/api/index'
@@ -9,6 +9,7 @@ type ChangedValue = string | number
 
 interface SelectSaleTypeProps {
   onChange?: (value: ChangedValue) => void
+  onCloseOverlay?: () => void
 }
 
 type EnumList = {
@@ -17,11 +18,11 @@ type EnumList = {
   name: string
 }
 // 营销部门
-const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
+const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
 
   const selectName = '营销部门'
 
-  const { onChange } = props
+  const { onChange,onCloseOverlay } = props
   console.log(props)
   const { fetchData } = EnumMarketingDepartmentApi()
 
@@ -42,6 +43,19 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
     setCurrentValue(value)
     onChange?.(value)
   }
+  const dropDownRef = useRef<any>(null)
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: dropDownRef.current.show,
+        showPopup: dropDownRef.current.showPopup,
+        closePopup: dropDownRef.current.closePopup,
+      }
+    },
+    [dropDownRef.current],
+  )
 
   const displayTitle = useMemo(() => {
     if (currentValue === -1) {
@@ -51,7 +65,7 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
   }, [enumList, currentValue])
 
   return (
-    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff'>
+    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
       <View className={styles.grid}>
         {!!enumList.length &&
           enumList.map((item: EnumList) => {
@@ -64,5 +78,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
       </View>
     </DropDownItem>
   )
-})
+}))
 export default SelectSaleType

src/components/SelectSaleRankingIndicators/index.tsx

@@ -11,6 +11,8 @@ type ChangedValue = string | number
 
 interface SelectSaleTypeProps {
   onChange?: (value: ChangedValue) => void
+  dropDownStyle?: React.CSSProperties
+  dropDownClassName?: string
 }
 
 type EnumList = {
@@ -23,7 +25,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
 
   const selectName = '排行指标'
 
-  const { onChange } = props
+  const { onChange, dropDownStyle, dropDownClassName } = props
   console.log(props)
   const { fetchData } = SaleOrderDataFormdataFormStatus()
 
@@ -53,7 +55,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
   }, [enumList, currentValue])
 
   return (
-    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' showOverlay={false}>
+    <DropDownItem title={displayTitle} customClassName={dropDownClassName} customStyle={dropDownStyle} value={currentValue} activeColor='#337fff' showOverlay={false}>
       <View className={classnames(styles.grid)}>
         {!!enumList.length &&
           enumList.map((item: EnumList) => {

src/components/SelectSaleType/index.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useEffect, useMemo, useState } from 'react'
+import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import { EnumSalesTypeApi } from '@/api/index'
@@ -9,6 +9,7 @@ type ChangedValue = string | number
 
 interface SelectSaleTypeProps {
   onChange?: (value: ChangedValue) => void
+  onCloseOverlay?: () => void
   defaultValue?: ChangedValue
 }
 
@@ -18,9 +19,9 @@ type EnumList = {
   name: string
 }
 // 销售类型
-const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
+const SelectSaleType = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
   const selectName = '销售类型'
-  const { onChange, defaultValue = 0 } = props
+  const { onChange, defaultValue = 0,onCloseOverlay } = props
   console.log(props)
   const { fetchData } = EnumSalesTypeApi()
 
@@ -42,6 +43,20 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
     onChange?.(value)
   }
 
+  const dropDownRef = useRef<any>(null)
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: dropDownRef.current.show,
+        showPopup: dropDownRef.current.showPopup,
+        closePopup: dropDownRef.current.closePopup,
+      }
+    },
+    [dropDownRef.current],
+  )
+
   const displayTitle = useMemo(() => {
     if (currentValue === -1) {
       return selectName
@@ -50,7 +65,7 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
   }, [enumList, currentValue])
 
   return (
-    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff'>
+    <DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' ref={dropDownRef} onCloseOverlay={onCloseOverlay}>
       <View className={styles.grid}>
         {!!enumList.length &&
           enumList.map((item: EnumList) => {
@@ -63,5 +78,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = memo((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, memo, useRef, useState } from 'react'
+import { FC, forwardRef, memo, useImperativeHandle, useRef, useState } from 'react'
 import DropDownItem from '../dropDown-item'
 import FilterButton from '../filterButton'
 import IconFont from '../iconfont/iconfont'
@@ -14,6 +14,7 @@ interface SelectSaleTypeProps {
   defaultValue?: Key   // 默认值
   timeOptions?: {[Property: string]: Value}   // 支持自定义 时间配置
   onChange?: (value: ChangedValue) => void
+  onCloseOverlay?: () => void
 }
 
 const FilterTimeOptions = {
@@ -77,8 +78,8 @@ const FilterTimeOptions = {
 type Key = keyof typeof FilterTimeOptions
 type Value = typeof FilterTimeOptions[Key]
 
-const SelectTimePicker: FC<SelectSaleTypeProps> = memo((props) => {
+const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
-  const { onChange: change, defaultValue = '0', timeOptions = FilterTimeOptions } = props
+  const { onChange: change,onCloseOverlay, defaultValue = '0', timeOptions = FilterTimeOptions } = props
   // rerender 的时候需要更新 ref 的值
   const Options = useRef({ ...timeOptions, 'custom': FilterTimeOptions['custom'] })
   Options.current = { ...timeOptions, 'custom': FilterTimeOptions['custom'] }
@@ -125,14 +126,29 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = memo((props) => {
     setCurrentValue('custom')
     setShowTime(true)
   }
+  const dropDownRef = useRef<any>(null)
   
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        show: dropDownRef.current.show,
+        showPopup: dropDownRef.current.showPopup,
+        closePopup: dropDownRef.current.closePopup,
+      }
+    },
+    [dropDownRef.current],
+  )
   return (
     <>
       <DropDownItem
         title={currentValue === '0' ? '查询日期' : Options.current[currentValue].name}
         direction='down'
         value={currentValue}
-        activeColor='#337fff'>
+        activeColor='#337fff'
+        ref={dropDownRef}
+        onCloseOverlay={onCloseOverlay}
+        >
         <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
           {Object.entries(Options.current)
             .slice(0, -1)
@@ -152,5 +168,5 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = memo((props) => {
       <TimePickerPopup start={currentDate.start} end={currentDate.end} showTime={showTime} closePopup={handClose} onSelectDate={onSelectDate}></TimePickerPopup>
     </>
   )
-})
+}))
 export default SelectTimePicker

src/components/dropDown-item/index.tsx

@@ -9,6 +9,8 @@ import Iconfont from '../iconfont/iconfont'
 import Popup from '../popup'
 import Cell from '../cell'
 import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+import { usePropsValue } from '@/use/useCommon'
 // 弹窗选择向上弹窗还是向下弹窗
 type Direction = 'up' | 'down'
 // 配置 菜单可选项
@@ -19,6 +21,7 @@ export type DropDownOptions = {
 
 interface DropDownEvent {
   change?: (value: DropDownOptions['value']) => void // value 变化时触发
+  onCloseOverlay?: () => void
 }
 
 interface PropsType extends DropDownEvent {
@@ -35,16 +38,20 @@ interface PropsType extends DropDownEvent {
 }
 
 export default forwardRef((props: PropsType, ref) => {
-  const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false } = props
+  const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false,customClassName,customStyle,onCloseOverlay } = props
+
+  const [showPopup, setShowPopup] = useState(false)
 
   useImperativeHandle(ref, () => ({
+    show: showPopup,
     //暴露出方法给有需要的用
     closePopup() {
       setShowPopup(false)
+    },
+    showPopup() {
+      setShowPopup(true)
     }
-  }))
+  }), [showPopup])
-
-  const [showPopup, setShowPopup] = useState(false)
 
   const handleClickOption = (value: DropDownOptions['value']) => {
     change?.(value)
@@ -69,12 +76,15 @@ export default forwardRef((props: PropsType, ref) => {
   }
 
   const handleClickTitle = () => {
+    console.log('handleClickTitle', showPopup);
+    onCloseOverlay?.()
     setShowPopup(prev => !prev)
   }
 
   const handleClosePopup = () => {
     if (hasBottomBtn) return
     setShowPopup(false)
+    onCloseOverlay?.()
   }
 
   const [overlayOffsetTop, setOverlayOffsetTop] = useState('unset')
@@ -112,7 +122,7 @@ export default forwardRef((props: PropsType, ref) => {
 
   return (
     <View className={styles.dropDownItem} id='DropDownItem'>
-      <View className={styles['dropDownItem--title']} onClick={handleClickTitle}>
+      <View className={classNames(customClassName, styles['dropDownItem--title'])} style={customStyle} onClick={handleClickTitle}>
         <Text className={styles['dropDownItem--title--text']} style={showPopup ? { color: activeColor } : {}}>
           {title ? title : text}
         </Text>

src/components/filterButton/index.module.scss

@@ -25,6 +25,7 @@
     border: 1px solid $color_main;
     background-color: #eaf2ff;
     .filterButton--text {
+      font-weight: 550;
       color: $color_main;
     }
   }

src/components/table/index.module.scss

@@ -10,7 +10,7 @@
   width: 100%;
   justify-content: center;
   align-items: center;
-  padding: 24px 0;
+  padding: 12px 0;
   border-bottom: 1px solid #f7f7f7;
 }
 

src/components/toolTips/index.module.scss

@@ -22,6 +22,9 @@
     box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
     border-radius: 8px;
     &-content {
+      font-size: 24px;
+      font-weight: lighter;
+      color: white;
       padding: 8px 12px;
       white-space: nowrap;
     }

src/components/toolTips/index.tsx

@@ -1,7 +1,8 @@
 import { View } from '@tarojs/components'
+import { nextTick } from '@tarojs/runtime'
 import Taro from '@tarojs/taro'
 import classNames from 'classnames'
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useTransition } from 'react'
 import IconFont from '../iconfont/iconfont'
 import styles from './index.module.scss'
 
@@ -15,7 +16,19 @@ const convertPx = (px: number) => {
   return realPx
 }
 
-type Placement = 'top' | 'right' | 'bottom' | 'left'
+type Placement = 
+  | 'top' 
+  | 'top-start' 
+  | 'top-end' 
+  | 'right' 
+  | 'right-start' 
+  | 'right-end' 
+  | 'bottom' 
+  | 'bottom-start' 
+  | 'bottom-end' 
+  | 'left' 
+  | 'left-start' 
+  | 'left-end'
 
 interface ToolTipEvent {
   onVisibleChange?: (visible?: boolean) => void
@@ -42,7 +55,9 @@ const popoverStyle = {
 }
 
 const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
-  const { placement = 'top', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
+  const id = useId();
+  const [,setForceUpdate] = useState({})
+  const { placement = 'top-start', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
 
   if (!content){
     throw new Error('tooltip: content 不能为空')
@@ -66,11 +81,13 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
     [visible],
   )
     
+
   const handleClick = useCallback(() => {
     setVisible(v => {
       onVisibleChangeRef.current?.(!v)
       return !v
     })
+    
   }, [])
 
   const handleClickMark = useCallback(() => {
@@ -98,6 +115,22 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
   const viewportRef = useRef(viewport)
   viewportRef.current = viewport
 
+  const contextRectRef = useRef<any>(null)
+
+
+  useEffect(()=>{
+    if(visible && !contextRectRef.current) {
+      nextTick(()=>{
+        const query = Taro.createSelectorQuery()
+        query.select(`#content-${id}`).boundingClientRect((res)=>{
+          console.log('contextRectRef',res);
+          contextRectRef.current = res
+          setForceUpdate({})
+        }).exec()
+      })
+    }
+  }, [visible, contextRectRef.current])
+
   useEffect(() => {
     console.log('useLayoutEffect')
     const query = Taro.createSelectorQuery()
@@ -111,10 +144,14 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
       setViewport(res[1])
       viewportRef.current = res[1]
     })
+    
   }, [])
 
   // 箭头 坐标
   const arrowCoords = useMemo(() => {
+    const contextRect = contextRectRef.current
+    // contextRect 没获取到之前  隐藏
+    if(!contextRect) return {top: '9999px'}
     console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
     switch (getArrowSide) {
       case 'bottom': // 下箭头
@@ -146,44 +183,119 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
           bottom: '',
         }
     }
-  }, [getArrowSide, childrenRectRef.current])
+  }, [getArrowSide, childrenRectRef.current, contextRectRef.current])
 
   // content 坐标
   const contentCoords = useMemo(() => {
+    const placementSide = placement.split('-')[1] as string // placement = 'top-start'  取 'start'
+    console.log('placementSide',placementSide);
+    let coordsStyle = {}
+    const contextRect = contextRectRef.current
+    // contextRect 没获取到之前  隐藏
+    if(!contextRect) return {top: '9999px'}
+    console.log('contextRect',contextRect);
+    const childrenRect = childrenRectRef.current
     switch (getArrowSide) {
       case 'bottom': // 下箭头
-        return {
+        coordsStyle = {
-          left: 0,
-          top: '',
-          right: '',
           bottom: convertPx(arrowSize) - 5,
+          top: '',
+        }
+        if(placementSide === 'start'){
+          return {
+            ...coordsStyle,
+            left: 0,
+            right: '',
+          }
+        }else if(placementSide === 'end'){
+          return {
+            ...coordsStyle,
+            left: '',
+            right: 0,
+          }
+        }else{
+          return {
+            ...coordsStyle,
+            left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
+            right: '',
+          }
         }
       case 'left': // 左箭头
-        return {
+        coordsStyle = {
-          left: childrenRectRef.current.width + convertPx(arrowSize) - 5,
+          left: childrenRect.width + convertPx(arrowSize) - 5,
-          top: 0,
           right: '',
-          bottom: '',
+        }
+        if(placementSide === 'start'){
+          return {
+            ...coordsStyle,
+            top: 0,
+            bottom: '',
+          }
+        }else if(placementSide === 'end'){
+          return {
+            ...coordsStyle,
+            top: '',
+            bottom: -childrenRect.height + 'px',
+          }
+        }else{
+          return {
+            ...coordsStyle,
+            top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
+            bottom: '',
+          }
         }
       case 'top': // 上箭头
-        return {
+        coordsStyle = {
-          left: 0,
+          top: childrenRect.height + convertPx(arrowSize) - 5,
-          top: childrenRectRef.current.height + convertPx(arrowSize) - 5,
-          right: '',
           bottom: '',
         }
+        if(placementSide === 'start'){
+          return {
+            ...coordsStyle,
+            left: 0,
+            right: '',
+          }
+        }else if(placementSide === 'end'){
+          return {
+            ...coordsStyle,
+            left: '',
+            right: 0,
+          }
+        }else{
+          return {
+            ...coordsStyle,
+            left: - (contextRect?.width / 2 - childrenRect.width / 2) + 'px',
+            right: '',
+          }
+        }
       case 'right': // 右箭头
-        return {
+        coordsStyle = {
           left: '',
-          top: 0,
           right: convertPx(arrowSize) - 5,
-          bottom: '',
+        }
+        if(placementSide === 'start'){
+          return {
+            ...coordsStyle,
+            top: 0,
+            bottom: '',
+          }
+        }else if(placementSide === 'end'){
+          return {
+            ...coordsStyle,
+            top: '',
+            bottom: -childrenRect.height + 'px',
+          }
+        }else{
+          return {
+            ...coordsStyle,
+            top: -(contextRect.height / 2 - childrenRect.height / 2) + 'px',
+            bottom: '',
+          }
         }
     }
-  }, [getArrowSide, childrenRectRef.current])
+  }, [getArrowSide, childrenRectRef.current, contextRectRef.current])
 
   const ContentComponent = useMemo(() => {
-    console.log('执行完')
 
     return (
       <View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
@@ -192,9 +304,9 @@ const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
           <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']} id={`content-${id}`} style={{ ...contentCoords, ...customContentStyle }}>
           <View className={styles['tooltip-inner-content']}>{content}</View>
-        </View>
+        </View>}
       </View>
     )
   }, [content, getArrowSide, visible, arrowCoords, contentCoords])

src/pages/saleStatistic/index.module.scss

@@ -21,21 +21,22 @@ page {
   }
 }
 .title {
-  margin: 0 10px;
   font-size: $font_size;
   color: $color_font_one;
+  font-weight: bold;
 }
 .cell-desc {
   font-weight: 550;
   color: $color_font_one;
   font-size: 34px;
+  padding: 6px 0;
 }
 .totalSummary {
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  padding: 24px 0;
+  padding: 12px 0 24px 0;
   &--title {
     font-size: $font_size;
     margin: 0 10px;

src/pages/saleStatistic/index.tsx

@@ -17,6 +17,8 @@ import dayjs from 'dayjs'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { OrderForm, ArrangedForm, PaymentAmountForm, ReturnGoodsOrderForm } from './config'
+import IconText from '@/components/iconText'
+import SelectGroup from '@/components/SelectGroup'
 
 //处理金额(后端单位分，转元)
 const priceformat = (val: number) => {
@@ -155,21 +157,26 @@ const saleStatistic = () => {
     }
   }, [])
 
+  const selectSaleTypeRef = useRef<any>(null)
+  const selectMarketingDepartmentRef = useRef<any>(null)
+  const selectTimePickerRef = useRef<any>(null)
+
   return (
     <View className={styles.saleStatistic}>
-      {/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
       <View className={styles['saleStatistic--filterBar']}>
-        <SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
+        <SelectGroup>
-        <SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
+          <View></View>
-        <SelectTimePicker onChange={onChangeTimePicker} defaultValue='0' timeOptions={FilterTimeOptions}></SelectTimePicker>
+          <SelectSaleType onChange={onChangeSaleType} onCloseOverlay={()=>true} ref={selectSaleTypeRef}></SelectSaleType>
+          <SelectMarketingDepartment onChange={onChangeDepartment}  onCloseOverlay={()=>true} ref={selectMarketingDepartmentRef}></SelectMarketingDepartment>
+          <SelectTimePicker onChange={onChangeTimePicker}  onCloseOverlay={()=>true} defaultValue='0' timeOptions={FilterTimeOptions} ref={selectTimePickerRef}></SelectTimePicker>
+        </SelectGroup>
       </View>
       <View className={styles['saleStatistic--content']}>
-        <LayoutBlock circle flexDirection='col'>
+        <LayoutBlock circle flexDirection='col' customStyle={{padding: '20rpx 32rpx'}}>
           <View className='flex-row items-center'>
-            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
+            <IconText iconName='icon-guanlidingdan' iconSize={32} svg text='订单' textClassName={styles.title}></IconText>
-            <Text className={styles.title}>订单</Text>
           </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <Divider direction='horizontal' customStyles={{ margin: '20rpx 0 10rpx 0 ' }}></Divider>
           <View className={styles.totalSummary}>
             <ToolTip placement='top' content={OrderForm.summary.tips}>
               <View className='flex-row items-center'>
@@ -188,7 +195,7 @@ const saleStatistic = () => {
               <Cell
                 key={key}
                 title={
-                  <ToolTip placement='top' content={value.tips}>
+                  <ToolTip placement='top-start' content={value.tips}>
                     <View className='flex-row items-center'>
                       <Text className={styles.title}>{value.cellTitle}</Text>
                       <Iconfont name='icon-tishi' size={36}></Iconfont>
@@ -201,12 +208,11 @@ const saleStatistic = () => {
             )
           })}
         </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
+        <LayoutBlock circle flexDirection='col' customStyle={{padding: '20rpx 32rpx'}}>
           <View className='flex-row items-center'>
-            <Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
+            <IconText iconName='icon-guanlidingdan' iconSize={32} svg text='配布' textClassName={styles.title}></IconText>
-            <Text className={styles.title}>配布</Text>
           </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <Divider direction='horizontal' customStyles={{ margin: '20rpx 0 10rpx 0 ' }}></Divider>
           <View className={styles.totalSummary}>
             <ToolTip placement='top' content={ArrangedForm.summary.tips}>
               <View className='flex-row items-center'>
@@ -225,7 +231,7 @@ const saleStatistic = () => {
                 <Cell
                   key={key}
                   title={
-                    <ToolTip placement='top' content={value.tips}>
+                    <ToolTip placement='top-start' content={value.tips}>
                       <View className='flex-row items-center'>
                         <Text className={styles.title}>{value.cellTitle}</Text>
                         <Iconfont name='icon-tishi' size={36}></Iconfont>
@@ -235,17 +241,16 @@ const saleStatistic = () => {
                   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>}
+                {((index + 1) % 3 === 0 && (index + 1) !== 9) ? <Divider direction='horizontal' customStyles={{ margin: '10rpx 0' }}></Divider> : null}
               </>
             )
           })}
         </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
+        <LayoutBlock circle flexDirection='col' customStyle={{padding: '20rpx 32rpx'}}>
           <View className='flex-row items-center'>
-            <Iconfont name='icon-daikuan' size={32}></Iconfont>
+            <IconText iconName='icon-daikuan' iconSize={32} svg text='货款' textClassName={styles.title}></IconText>
-            <Text className={styles.title}>货款</Text>
           </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <Divider direction='horizontal' customStyles={{ margin: '20rpx 0 10rpx 0 ' }}></Divider>
           <View className={styles.totalSummary}>
             <ToolTip placement='top' content={PaymentAmountForm.summary.tips}>
               <View className='flex-row items-center'>
@@ -260,7 +265,7 @@ const saleStatistic = () => {
               <Cell
                 key={key}
                 title={
-                  <ToolTip placement='top' content={value.tips}>
+                  <ToolTip placement='top-start' content={value.tips}>
                     <View className='flex-row items-center'>
                       <Text className={styles.title}>{value.cellTitle}</Text>
                       <Iconfont name='icon-tishi' size={36}></Iconfont>
@@ -273,12 +278,11 @@ const saleStatistic = () => {
             )
           })}
         </LayoutBlock>
-        <LayoutBlock circle flexDirection='col'>
+        <LayoutBlock circle flexDirection='col' customStyle={{padding: '20rpx 32rpx'}}>
           <View className='flex-row items-center'>
-            <Iconfont name='icon-tuikuan' size={32}></Iconfont>
+            <IconText iconName='icon-tuikuan' iconSize={32} svg text='退货' textClassName={styles.title}></IconText>
-            <Text className={styles.title}>退货</Text>
           </View>
-          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
+          <Divider direction='horizontal' customStyles={{ margin: '20rpx 0 10rpx 0 ' }}></Divider>
           <View className={styles.totalSummary}>
             <ToolTip placement='top' content={ReturnGoodsOrderForm.summary.tips}>
               <View className='flex-row items-center'>
@@ -295,7 +299,7 @@ const saleStatistic = () => {
               <Cell
                 key={key}
                 title={
-                  <ToolTip placement='top' content={value.tips}>
+                  <ToolTip placement='top-start' content={value.tips}>
                     <View className='flex-row items-center'>
                       <Text className={styles.title}>{value.cellTitle}</Text>
                       <Iconfont name='icon-tishi' size={36}></Iconfont>
@@ -559,11 +563,11 @@ const RankingBlock = memo<RankingBlockPropsType>(props => {
             <Text className={styles.title}>销售排行</Text>
           </View>
           <View style={{ width: '90px' }}>
-            <SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
+            <SelectSaleRankingIndicators onChange={onChangeIndicators} dropDownStyle={{padding: '16rpx 0'}}></SelectSaleRankingIndicators>
           </View>
         </View>
         <View style={{ padding: '0 32rpx' }}>
-          <Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
+          <Divider direction='horizontal' customStyles={{ margin: '10rpx 0 20rpx 0' }}></Divider>
           <View className={styles.rankingTabs} onClick={handleClickTab}>
             {tabsConfig.map(item => {
               return (