✨ feat(销售统计): 剩下销售排行UI界面
This commit is contained in:
xuan
parent
3f01990a35
commit
7bf3fedf9c
@ -0,0 +1,6 @@
|
||||
.grid {
|
||||
padding: 24px 40px;
|
||||
display: grid;
|
||||
grid-gap: 24px 24px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
68
src/components/SelectSaleRankingIndicators/index.tsx
Normal file
68
src/components/SelectSaleRankingIndicators/index.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
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'
|
||||
|
||||
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={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
|
||||
@ -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_max: undefined,
|
||||
date_min: '',
|
||||
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(),
|
||||
end: new Date(),
|
||||
start: new Date().toLocaleDateString(),
|
||||
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'>
|
||||
<>
|
||||
<DropDownItem
|
||||
title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
|
||||
direction='down'
|
||||
value={currentValue}
|
||||
activeColor='#337fff'>
|
||||
<View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
|
||||
{Object.entries(FilterTimeOptions).map(([key, value]) => {
|
||||
{Object.entries(FilterTimeOptions)
|
||||
.slice(0, -1)
|
||||
.map(([key, value]) => {
|
||||
return (
|
||||
<FilterButton isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={() => handleClick('6' as Key)}>
|
||||
<Text>自定义时间</Text>
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText}</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
<View style={{ paddingBottom: '24rpx' }}>
|
||||
<TimePicker start={currentDate.start} end={currentDate.end} onSelectDate={onSelectDate}></TimePicker>
|
||||
</View>
|
||||
</DropDownItem>
|
||||
<TimePickerPopup start={currentDate.start} end={currentDate.end} showTime={showTime} closePopup={handClose} onSelectDate={onSelectDate}></TimePickerPopup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default SelectTimePicker
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,40 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,45 +1,33 @@
|
||||
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 TimePicker from '@/components/timePicker'
|
||||
import { View } from '@tarojs/components'
|
||||
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[]>([
|
||||
{
|
||||
text: 'name',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
text: 'name1',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: 'name2',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: 'name3',
|
||||
value: 3,
|
||||
},
|
||||
])
|
||||
|
||||
const onChangeTimePicker = (value) => {
|
||||
const onChangeTimePicker = (value: ChangedValue) => {
|
||||
console.log(value)
|
||||
}
|
||||
const onChangeSaleType = (saleType) => {
|
||||
console.log(saleType)
|
||||
|
||||
const onChangeSaleType = (saleType: number) => {
|
||||
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)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -49,6 +37,216 @@ const saleStatistic = () => {
|
||||
<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}>
|
||||
<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']}>（共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'>
|
||||
<View className='flex-row justify-between'>
|
||||
<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>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
</LayoutBlock>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user