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

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

src/pages/saleStatistic/index.tsx

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