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

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 {
   }
@@ -26,16 +24,64 @@
 .filterTypeButton {
   padding: 0 24px;
   font-size: 28px;
-  
 }
 .filterTypeText {
   color: #6e6e6e !important;
 }
 .filterTimeButton {
-  padding: 0 24px;
-  font-size: 28px;
   grid-column-start: span 2;
 }
 .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;
+  }
+}

src/pages/delivery/components/Filter/index.tsx

@@ -1,15 +1,17 @@
-import NormalButton from "@/components/normalButton"
+import NormalButton from '@/components/normalButton'
-import Popup from "@/components/popup"
+import Popup from '@/components/popup'
-import { View } from "@tarojs/components"
+import { View } from '@tarojs/components'
-import classnames from "classnames"
+import classnames from 'classnames'
 import styles from './index.module.scss'
-import { FC, memo, useEffect, useState } from 'react'
+import React, { FC, memo, useEffect, useState } from 'react'
-import Search from "@/components/search"
+import Search from '@/components/search'
-import IconFont from "@/components/iconfont/iconfont"
+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 [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
+          <FilterButton isActive={searchFilter.type == undefined} onClick={() => handleSelectedType('default')}>
-            type={searchFilter.type == null ? 'primary' : 'info'}
-            plain={searchFilter.type === null}
-            circle
-            customClassName={classnames(styles.filterTypeButton)}
-            customTextClassName={searchFilter.type === null && styles.filterTypeText}
-            onClick={() => handleSelectedType('default')}>
             不限
-          </NormalButton>
+          </FilterButton>
-          {!!typeList?.length && typeList?.map(item => {
+          {!!typeList?.length &&
+            typeList?.map((item) => {
               return (
-              <NormalButton
+                <FilterButton isActive={searchFilter.type === item?.id} onClick={() => handleSelectedType(item?.id)}>
-                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>
+                </FilterButton>
               )
             })}
-          {/* <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> */}
         </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}>
+          {Object.entries(filterTimeOptions).map(([key, value]) => {
-            不限
+            return (
-          </NormalButton>
+              <FilterButton isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
+                {value.name}
-            今天
+              </FilterButton>
-          </NormalButton>
+            )
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
+          })}
-            昨日
+          <FilterButton isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
-          </NormalButton>
+            自定义时间<IconFont name='icon-chakanquanbukehu' size={40} color={searchFilter.timeKey === '6' ? '#4581ff' : '#909090'}></IconFont>
-          <NormalButton type='primary' circle customClassName={styles.filterTypeButton}>
+          </FilterButton>
-            近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>
         </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

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>

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