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

2022-11-11 11:43:29 +08:00
parent 851902873b
commit 45c656e0ed
14 changed files with 299 additions and 77 deletions
@@ -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;
@@ -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 (