xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xuan 2022-11-11 10:53:48 +08:00
parent 851902873b
commit 45c656e0ed
14 changed files with 299 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/SelectGroup/index.module.scss Normal file
View File

44
src/components/SelectGroup/index.tsx Normal file
View File

@ -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

2
src/components/SelectMarketingDepartment/index.module.scss
View File

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

24
src/components/SelectMarketingDepartment/index.tsx
View File

@ -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

6
src/components/SelectSaleRankingIndicators/index.tsx
View File

@ -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) => {

25
src/components/SelectSaleType/index.tsx
View File

@ -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

26
src/components/SelectTimePicker/index.tsx
View File

@ -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 { onChange: change, defaultValue = '0', timeOptions = FilterTimeOptions } = props
const SelectTimePicker = memo(forwardRef((props: SelectSaleTypeProps, ref) => {
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

20
src/components/dropDown-item/index.tsx
View File

@ -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)
}
}))
const [showPopup, setShowPopup] = useState(false)
}), [showPopup])
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>

1
src/components/filterButton/index.module.scss
View File

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

2
src/components/table/index.module.scss
View File

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

3
src/components/toolTips/index.module.scss
View File

@ -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;
}

154
src/components/toolTips/index.tsx
View File

@ -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 {
left: 0,
top: '',
right: '',
coordsStyle = {
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 {
left: childrenRectRef.current.width + convertPx(arrowSize) - 5,
top: 0,
coordsStyle = {
left: childrenRect.width + convertPx(arrowSize) - 5,
right: '',
}
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 {
left: 0,
top: childrenRectRef.current.height + convertPx(arrowSize) - 5,
right: '',
coordsStyle = {
top: childrenRect.height + convertPx(arrowSize) - 5,
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,
}
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])

5
src/pages/saleStatistic/index.module.scss
View File

@ -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;

58
src/pages/saleStatistic/index.tsx
View File

@ -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>
<SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
<SelectTimePicker onChange={onChangeTimePicker} defaultValue='0' timeOptions={FilterTimeOptions}></SelectTimePicker>
<SelectGroup>
<View></View>
<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>
<Text className={styles.title}>订单</Text>
<IconText iconName='icon-guanlidingdan' iconSize={32} svg text='订单' textClassName={styles.title}></IconText>
</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>
<Text className={styles.title}>配布</Text>
<IconText iconName='icon-guanlidingdan' iconSize={32} svg text='配布' textClassName={styles.title}></IconText>
</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>
<Text className={styles.title}>货款</Text>
<IconText iconName='icon-daikuan' iconSize={32} svg text='货款' textClassName={styles.title}></IconText>
</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>
<Text className={styles.title}>退货</Text>
<IconText iconName='icon-tuikuan' iconSize={32} svg text='退货' textClassName={styles.title}></IconText>
</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 (