✨ feat(销售统计): 剩下销售排行UI界面

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

src/components/SelectSaleRankingIndicators/index.tsx

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

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_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'>
-      <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
-        {Object.entries(FilterTimeOptions).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>
-          <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>
+    <>
+      <DropDownItem
+        title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
+        direction='down'
+        value={currentValue}
+        activeColor='#337fff'>
+        <View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
+          {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={handleCustomTime}>
+            <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>