✨ feat(发货列表): 完成发货列表UI界面

2022-09-21 12:48:05 +08:00 · 2022-09-21 12:48:05 +08:00 · 25628dccdc
commit 25628dccdc
parent 45de2e92c0
4 changed files with 170 additions and 98 deletions
--- a/src/pages/delivery/components/Filter/index.module.scss
+++ b/src/pages/delivery/components/Filter/index.module.scss
@ -1,4 +1,3 @@
-
 .filterItem {
  margin: 24px 48px;
  &--title {
@ -15,7 +14,6 @@
 .filter {
  &--time {
    grid-template-columns: 1fr 1fr 1fr 1fr;
-
  }
  &--inputBar {
  }
@ -23,19 +21,67 @@
    grid-template-columns: 1fr 1fr;
  }
 }
-.filterTypeButton{
+.filterTypeButton {
  padding: 0 24px;
  font-size: 28px;
-  
 }
-.filterTypeText{
+.filterTypeText {
  color: #6e6e6e !important;
 }
-.filterTimeButton{
-  padding: 0 24px;
-  font-size: 28px;
+.filterTimeButton {
  grid-column-start: span 2;
 }
-.selected{
+.selected {
  background-color: #eaf2ff;
 }
+
+.filterButton {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background-color: #f6f6f6;
+  border-radius: 8px;
+  font-size: 28px;
+  height: 72px;
+  &--text {
+    color: #909090;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+  }
+  &:hover {
+    opacity: 0.7;
+  }
+  &--active {
+    border: 1px solid $color_main;
+    background-color: #eaf2ff;
+    .filterButton--text {
+      color: $color_main;
+    }
+  }
+}
+.filterController {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-around;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+
+  btn:hover{
+    filter: blur(.7);
+  }
+
+  .rest_btn {
+    font-size: 28px;
+  }
+  .verify_btn {
+    font-size: 28px;
+  }
+}
--- a/src/pages/delivery/components/Filter/index.tsx
+++ b/src/pages/delivery/components/Filter/index.tsx
@ -1,15 +1,17 @@
-import NormalButton from "@/components/normalButton"
-import Popup from "@/components/popup"
-import { View } from "@tarojs/components"
-import classnames from "classnames"
+import NormalButton from '@/components/normalButton'
+import Popup from '@/components/popup'
+import { View } from '@tarojs/components'
+import classnames from 'classnames'
 import styles from './index.module.scss'
-import { FC, memo, useEffect, useState } from 'react'
-import Search from "@/components/search"
-import IconFont from "@/components/iconfont/iconfont"
-import {EnumDeliveryNoticeTypeList} from '@/api/index'
+import React, { FC, memo, useEffect, useState } from 'react'
+import Search from '@/components/search'
+import IconFont from '@/components/iconfont/iconfont'
+import { EnumDeliveryNoticeTypeList } from '@/api/index'
+import dayjs from 'dayjs'

 type SearchFilter = {
  type?: number
+  timeKey?: string
 }

 const scanIcon = () => {
@ -23,17 +25,18 @@ const scanIcon = () => {
 }

 const DeliveryFilter: FC = memo(() => {
+  const { fetchData } = EnumDeliveryNoticeTypeList()

-  const {fetchData} = EnumDeliveryNoticeTypeList()
-
-  const [searchFilter, useSearchFilter] = useState<SearchFilter>({
-    
+  const [searchFilter, setSearchFilter] = useState<SearchFilter>({
+    type: undefined,
+    timeKey: '0',
  })
  const handleSelectedType = (type: string | number) => {
+    console.log('type==>', type)
    if (typeof type === 'string' && type === 'default') {
-      // setSearch((e) => ({ ...e }))
+      setSearchFilter((e) => ({ ...e, type: undefined }))
    } else {
-      // setSearch((e) => ({ ...e, type: type as number }))
+      setSearchFilter((e) => ({ ...e, type: type as number }))
    }
  }

@ -41,72 +44,76 @@ const DeliveryFilter: FC = memo(() => {

  useEffect(() => {
    getEnumData()
-  
  }, [])
-  

-  const [typeList, setTypeList] = useState<{id: number, name: string}[]>()
+  const [typeList, setTypeList] = useState<{ id: number; name: string }[]>()

  const getEnumData = async () => {
    const res = await fetchData()
    setTypeList(res.data.list)
  }
-  
+
+  const [customTime, setCustomTime] = useState({
+    date_min: undefined,
+    date_max: undefined,
+  })
+
+  const filterTimeOptions = {
+    0: {
+      name: '不限',
+      date_min: undefined,
+      date_max: undefined,
+    },
+    1: {
+      name: '今天',
+      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+      date_max: `${dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    },
+    2: {
+      name: '昨日',
+      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+      date_max: `${dayjs(new Date()).add(-1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    },
+    3: {
+      name: '近7日',
+      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+      date_max: `${dayjs(new Date()).add(-7, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    },
+    4: {
+      name: '近30日',
+      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+      date_max: `${dayjs(new Date()).add(-30, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    },
+    5: {
+      name: '近90日',
+      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+      date_max: `${dayjs(new Date()).add(-90, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    },
+  }
+
+  const handleSelectedTime = (timeOptionId) => {
+    setSearchFilter((e) => ({ ...e, timeKey: timeOptionId }))
+  }
+
+  const handleReset = () => {}
+  const handleConfirm = () => {}

  return (
    <>
      <View className={styles.filterItem}>
        <View className={styles['filterItem--title']}>发货类型</View>
        <View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
-          <NormalButton
-            type={searchFilter.type == null ? 'primary' : 'info'}
-            plain={searchFilter.type === null}
-            circle
-            customClassName={classnames(styles.filterTypeButton)}
-            customTextClassName={searchFilter.type === null && styles.filterTypeText}
-            onClick={() => handleSelectedType('default')}>
+          <FilterButton isActive={searchFilter.type == undefined} onClick={() => handleSelectedType('default')}>
            不限
-          </NormalButton>
-          {!!typeList?.length && typeList?.map(item => {
-            return (
-              <NormalButton
-                type={searchFilter.type === item?.id ? 'primary' : 'info'}
-                plain={searchFilter.type !== item?.id}
-                circle
-                customClassName={styles.filterTypeButton}
-                customTextClassName={searchFilter.type === item?.id && styles.filterTypeText}
-                onClick={() => handleSelectedType(item?.id)}>
-                {item.name}
-              </NormalButton>
-            )
-          })}
-          {/* <NormalButton
-            type={searchFilter.type === 0 ? 'primary' : 'info'}
-            plain={searchFilter.type !== 0}
-            circle
-            customClassName={styles.filterTypeButton}
-            customTextClassName={searchFilter.type === 0 && styles.filterTypeText}
-            onClick={() => handleSelectedType(1)}>
-            销售发货单
-          </NormalButton>
-          <NormalButton
-            type={searchFilter.type === 0 ? 'primary' : 'info'}
-            plain={searchFilter.type !== 0}
-            circle
-            customClassName={styles.filterTypeButton}
-            customTextClassName={searchFilter.type === 1 && styles.filterTypeText}
-            onClick={() => handleSelectedType(2)}>
-            调拨发货单
-          </NormalButton>
-          <NormalButton
-            type={searchFilter.type === 0 ? 'primary' : 'info'}
-            plain={searchFilter.type !== 0}
-            circle
-            customClassName={styles.filterTypeButton}
-            customTextClassName={searchFilter.type === 2 && styles.filterTypeText}
-            onClick={() => handleSelectedType(3)}>
-            采购退货单
-          </NormalButton> */}
+          </FilterButton>
+          {!!typeList?.length &&
+            typeList?.map((item) => {
+              return (
+                <FilterButton isActive={searchFilter.type === item?.id} onClick={() => handleSelectedType(item?.id)}>
+                  {item.name}
+                </FilterButton>
+              )
+            })}
        </View>
      </View>
      <View className={styles.filterItem}>
@ -123,30 +130,46 @@ const DeliveryFilter: FC = memo(() => {
      <View className={styles.filterItem}>
        <View className={styles['filterItem--title']}>查询日期</View>
        <View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            不限
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            今天
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            昨日
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            近7日
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            近30日
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
-            近90日
-          </NormalButton>
-          <NormalButton type='primary' circle customClassName={styles.filterTimeButton}>
-            自定义起始时间{<IconFont name='icon-chakanquanbukehu' size={60}></IconFont>}
-          </NormalButton>
+          {Object.entries(filterTimeOptions).map(([key, value]) => {
+            return (
+              <FilterButton isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
+                {value.name}
+              </FilterButton>
+            )
+          })}
+          <FilterButton isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
+            自定义时间<IconFont name='icon-chakanquanbukehu' size={40} color={searchFilter.timeKey === '6' ? '#4581ff' : '#909090'}></IconFont>
+          </FilterButton>
        </View>
      </View>
+      <View className={styles.filterController}>
+        <NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
+          重置
+        </NormalButton>
+        <NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
+          确认
+        </NormalButton>
+      </View>
    </>
  )
 })
+
+interface PropsType {
+  isActive: boolean
+  onClick?: Function
+  children?: React.ReactNode
+  customClassName?: string
+}
+
+const FilterButton: FC<PropsType> = ({ onClick, children, isActive = false, customClassName }) => {
+  const handleClick = () => {
+    onClick?.()
+  }
+  return (
+    <View className={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)} onClick={handleClick}>
+      <View className={classnames(styles['filterButton--text'])}>{children}</View>
+    </View>
+  )
+}
+
 export default DeliveryFilter
--- a/src/pages/delivery/index.tsx
+++ b/src/pages/delivery/index.tsx
@ -171,7 +171,9 @@ const Delivery: FC = () => {
    setShowFilter(true)
  }

-
+  const handlePopupClose = () => {
+    setShowFilter(false)
+  }
  

  return (
@ -201,7 +203,7 @@ const Delivery: FC = () => {
          })}
        </InfiniteScroll>
      </View>
-      <Popup show={showFilter} title='筛选列表'>
+      <Popup show={showFilter} title='筛选列表' onClose={handlePopupClose}>
        <DeliveryFilter />
      </Popup>
    </View>
--- a/src/pages/shopping/components/shoppingCartItem/index.tsx
+++ b/src/pages/shopping/components/shoppingCartItem/index.tsx
@ -138,6 +138,7 @@ export default memo<PropsType>((props) => {
          <DrawerButton isOpen={openDetail} />
        </View>
      </MCheckbox>
+      {/* 减少节点渲染 */}
      {openDetail && (
        <View className={classnames(styles.detailBox, openDetail ? styles.drawerOpen : styles.drawerClose)}>
          <View className={styles.orderType}>