From 25628dccdc642723d64e77f4ff8b984043b98a95 Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 21 Sep 2022 12:48:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat(=E5=8F=91=E8=B4=A7?= =?UTF-8?q?=E5=88=97=E8=A1=A8):=20=E5=AE=8C=E6=88=90=E5=8F=91=E8=B4=A7?= =?UTF-8?q?=E5=88=97=E8=A1=A8UI=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Filter/index.module.scss | 64 +++++- .../delivery/components/Filter/index.tsx | 197 ++++++++++-------- src/pages/delivery/index.tsx | 6 +- .../components/shoppingCartItem/index.tsx | 1 + 4 files changed, 170 insertions(+), 98 deletions(-) diff --git a/src/pages/delivery/components/Filter/index.module.scss b/src/pages/delivery/components/Filter/index.module.scss index c8d3e6f..6a57756 100644 --- 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; + } +} diff --git a/src/pages/delivery/components/Filter/index.tsx b/src/pages/delivery/components/Filter/index.tsx index 7909818..8d63a82 100644 --- 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({ - + const [searchFilter, setSearchFilter] = useState({ + 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 ( <> 发货类型 - handleSelectedType('default')}> + handleSelectedType('default')}> 不限 - - {!!typeList?.length && typeList?.map(item => { - return ( - handleSelectedType(item?.id)}> - {item.name} - - ) - })} - {/* handleSelectedType(1)}> - 销售发货单 - - handleSelectedType(2)}> - 调拨发货单 - - handleSelectedType(3)}> - 采购退货单 - */} + + {!!typeList?.length && + typeList?.map((item) => { + return ( + handleSelectedType(item?.id)}> + {item.name} + + ) + })} @@ -123,30 +130,46 @@ const DeliveryFilter: FC = memo(() => { 查询日期 - - 不限 - - - 今天 - - - 昨日 - - - 近7日 - - - 近30日 - - - 近90日 - - - 自定义起始时间{} - + {Object.entries(filterTimeOptions).map(([key, value]) => { + return ( + handleSelectedTime(key)}> + {value.name} + + ) + })} + handleSelectedTime('6')}> + 自定义时间 + + + + 重置 + + + 确认 + + ) }) + +interface PropsType { + isActive: boolean + onClick?: Function + children?: React.ReactNode + customClassName?: string +} + +const FilterButton: FC = ({ onClick, children, isActive = false, customClassName }) => { + const handleClick = () => { + onClick?.() + } + return ( + + {children} + + ) +} + export default DeliveryFilter diff --git a/src/pages/delivery/index.tsx b/src/pages/delivery/index.tsx index 9ebd542..ac3aed4 100644 --- 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 = () => { })} - + diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 6f962bb..c02a6ab 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -138,6 +138,7 @@ export default memo((props) => { + {/* 减少节点渲染 */} {openDetail && ( From 5df6024528ea3a8b60fb722f61568789e4039a5e Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 21 Sep 2022 19:19:58 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat(=E5=8F=91=E8=B4=A7?= =?UTF-8?q?=E5=88=97=E8=A1=A8):=20=E5=B7=B2=E5=AE=8C=E6=88=90=E5=8F=91?= =?UTF-8?q?=E8=B4=A7=E5=88=97=E8=A1=A8=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project.private.config.json | 3 +- src/components/popup/index.module.scss | 157 +++++++------- src/components/popup/index.tsx | 111 +++++----- src/components/search/index.tsx | 9 +- .../components/timePicker/index.scss | 0 src/components/timePicker/index.tsx | 47 ++++ .../components/Filter/index.module.scss | 1 + .../delivery/components/Filter/index.tsx | 204 ++++++++++++------ src/pages/delivery/index.module.scss | 3 +- src/pages/delivery/index.tsx | 156 +++++++------- .../components/timePicker/index.tsx | 47 ---- src/pages/refundPage/index.tsx | 4 +- 12 files changed, 393 insertions(+), 349 deletions(-) rename src/{pages/refundPage => }/components/timePicker/index.scss (100%) create mode 100644 src/components/timePicker/index.tsx delete mode 100644 src/pages/refundPage/components/timePicker/index.tsx diff --git a/project.private.config.json b/project.private.config.json index d783659..64c3512 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -109,5 +109,6 @@ } ] } - } + }, + "libVersion": "2.26.0" } \ No newline at end of file diff --git a/src/components/popup/index.module.scss b/src/components/popup/index.module.scss index 00efd3c..6c3b1d5 100644 --- a/src/components/popup/index.module.scss +++ b/src/components/popup/index.module.scss @@ -1,91 +1,88 @@ $am-ms: 200ms; -.drawer_main{ - .drawer { - position:fixed; - left: 0; - top:0; +.drawer_main { + .drawer { + position: fixed; + left: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: 100vh; + margin: 0 auto; + z-index: 1000; + visibility: hidden; + transition: visibility $am-ms ease-in-out; + .drawer_mask { + display: flex; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.6); + z-index: 1011; + opacity: 0; + transition: opacity $am-ms ease-in; + .drawer_container { display: flex; - align-items: center; - justify-content: center; flex-direction: column; - width: 100%; - height: 100vh; - margin: 0 auto; - z-index: 1000; - visibility: hidden; - transition: visibility $am-ms ease-in-out; - .drawer_mask{ - display: flex; - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.6); - z-index: 1011; - opacity: 0; - transition: opacity $am-ms ease-in; - .drawer_container{ - display: flex; - flex-direction: column; - position: absolute; - background-color: #fff; - z-index: 1012; - transition: transform $am-ms ease-in-out; - .drawer_container_title { - display: flex; - align-items: center; - justify-content: center; - height: 80px; - font-size: 29px; - color: #000000; - padding-top: 10px; - } - .common_close_btn_icon{ - position: absolute; - top: 10px; - left: 10px; - } - } - .drawer_container_active{ - transform: translate3d(0, 0, 0); - } + position: absolute; + background-color: #fff; + z-index: 1012; + transition: transform $am-ms ease-in-out; + .drawer_container_title { + display: flex; + align-items: center; + justify-content: center; + height: 80px; + font-size: 29px; + color: #000000; + padding-top: 10px; } - .drawer_mask_active{ - opacity: 1; + .common_close_btn_icon { + position: absolute; + top: 10px; + left: 10px; } + } + .drawer_container_active { + transform: translate3d(0, 0, 0); + } } - .drawer_active { - visibility:visible; + .drawer_mask_active { + opacity: 1; } + } + .drawer_active { + visibility: visible; + } - .drawer_container_bottom{ - bottom: 0; - left: 0; - min-height: 200px; - width: 100vw; - border-radius: 20px 20px 0px 0px; - transform: translate3d(0, 100%, 0); - } + .drawer_container_bottom { + bottom: 0; + left: 0; + min-height: 200px; + width: 100vw; + border-radius: 20px 20px 0px 0px; + transform: translate3d(0, 100%, 0); + } - .drawer_container_top{ - top: 0; - left: 0; - min-height: 200px; - width: 100vw; - border-radius: 0 0 20px 20px; - transform: translate3d(0, -100%, 0); - } + .drawer_container_top { + top: 0; + left: 0; + min-height: 200px; + width: 100vw; + border-radius: 0 0 20px 20px; + transform: translate3d(0, -100%, 0); + } - .drawer_container_right{ - bottom: 0; - right: 0; - height: 100vh; - min-width: 300px; - border-radius: 20px 0 0 20px; - transform: translate3d(100%, 0, 0); - } - + .drawer_container_right { + bottom: 0; + right: 0; + height: 100vh; + min-width: 300px; + border-radius: 20px 0 0 20px; + transform: translate3d(100%, 0, 0); + } } - - diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx index 75030cf..4907caa 100644 --- a/src/components/popup/index.tsx +++ b/src/components/popup/index.tsx @@ -1,74 +1,61 @@ -import { View } from "@tarojs/components"; -import style from "./index.module.scss" -import classnames from "classnames"; -import { memo, ReactNode, useEffect, useMemo, useRef } from "react"; -import CloseBtnIcon from "@/components/closeBtn" +import { View } from '@tarojs/components' +import style from './index.module.scss' +import classnames from 'classnames' +import { memo, ReactNode, useEffect, useMemo, useRef } from 'react' +import CloseBtnIcon from '@/components/closeBtn' export interface Params { - title?: string, //标题 - show?: false|true, //显示显示弹窗 - showTitle?: false|true, //是否显示标题 - onClose?:() => void, //关闭事件 - children?: ReactNode, //插槽内容 - // IconButton?: ReactNode, // - showIconButton?: false|true, //是否显示关闭按钮 - position?: 'bottom'|'top'|'right', //弹出位置 - animationEnd?: () => void //弹出动画结束 + title?: string //标题 + show?: false | true //显示显示弹窗 + showTitle?: false | true //是否显示标题 + onClose?: () => void //关闭事件 + children?: ReactNode //插槽内容 + // IconButton?: ReactNode, // + showIconButton?: false | true //是否显示关闭按钮 + position?: 'bottom' | 'top' | 'right' //弹出位置 + animationEnd?: () => void //弹出动画结束 } -export default memo(( - { - title = '标题', - show = false, - showTitle = true, - onClose, - showIconButton = false, - children, - position = 'bottom', - animationEnd - }:Params) => { - +export default memo( + ({ title = '标题', show = false, showTitle = true, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => { const animationTime = useRef(null) useEffect(() => { - if(show) { - animationTime.current = setTimeout(() => { - animationEnd?.() - }, 260) - } else { - clearTimeout(animationTime.current) - } + if (show) { + animationTime.current = setTimeout(() => { + animationEnd?.() + }, 260) + } else { + clearTimeout(animationTime.current) + } }, [show]) useEffect(() => { - return () => { - clearTimeout(animationTime.current) - } + return () => { + clearTimeout(animationTime.current) + } }, []) - + return ( - <> - - - onClose?.()} - > - e.stopPropagation()} - > - {showTitle&&{title}} - {showIconButton&& - onClose?.()}/> - } - - - {show&&children} - - - - - + <> + + + onClose?.()}> + e.stopPropagation()}> + {showTitle && {title}} + {showIconButton && ( + + onClose?.()} /> + + )} + + {children} + + - + + + ) -}) + }, +) diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 63c8473..e4bcfea 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -8,19 +8,20 @@ import IconFont from '../iconfont/iconfont' type Params = { clickOnSearch?: (val: string) => void - disabled?: false | true + disabled?: boolean placeholder?: string changeOnSearch?: (value: string) => void - showIcon?: false | true + showIcon?: boolean placeIcon?: 'out' | 'inner' style?: Object - showBtn?: false | true + showBtn?: boolean btnStyle?: Object btnTitle?: string debounceTime?: number //防抖时间，不设默认为零 defaultValue?: string children?: ReactNode customRightSlot?: ReactNode + adjustPosition?: boolean } export default memo( @@ -29,6 +30,7 @@ export default memo( { clickOnSearch, //点击筛选按钮触发 changeOnSearch, //输入文字触发 + adjustPosition=false, disabled = false, //是否禁用 placeholder = '输入搜索内容', showIcon = true, //是否显示关闭图标 @@ -88,6 +90,7 @@ export default memo( )} void + end?: DateArg + start?: DateArg + onSelectDate?: (any) => void +} + +export default memo((props: Props) => { + let { showTime = false, closePopup, start = '', end = '', onSelectDate } = props + const [time, setTime] = useState({}) + + const handTime = (e) => { + const { start, end } = e.value + // 如果选的是同一天的日期, end 自动加一天 + if (start === end) { + e.value.end = `${dayjs(new Date(start)).add(1, 'day').format('YYYY-MM-DD')} 00:00:00` + } + setTime(e) + } + return ( + closePopup?.()}> + + handTime?.(e)} + /> + + onSelectDate?.(time)}> + 确认 + + + ) +}) diff --git a/src/pages/delivery/components/Filter/index.module.scss b/src/pages/delivery/components/Filter/index.module.scss index 6a57756..175fa29 100644 --- a/src/pages/delivery/components/Filter/index.module.scss +++ b/src/pages/delivery/components/Filter/index.module.scss @@ -66,6 +66,7 @@ } } .filterController { + margin-top: 60px; width: 100%; display: flex; flex-flow: row nowrap; diff --git a/src/pages/delivery/components/Filter/index.tsx b/src/pages/delivery/components/Filter/index.tsx index 8d63a82..e9c1b77 100644 --- a/src/pages/delivery/components/Filter/index.tsx +++ b/src/pages/delivery/components/Filter/index.tsx @@ -3,33 +3,81 @@ import Popup from '@/components/popup' import { View } from '@tarojs/components' import classnames from 'classnames' import styles from './index.module.scss' -import React, { FC, memo, useEffect, useState } from 'react' +import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import Search from '@/components/search' import IconFont from '@/components/iconfont/iconfont' import { EnumDeliveryNoticeTypeList } from '@/api/index' import dayjs from 'dayjs' +import { getFilterData } from '@/common/util' +import Taro from '@tarojs/taro' -type SearchFilter = { +interface SearchFilter { type?: number timeKey?: string + delivery_notice_order_no?: string } -const scanIcon = () => { - // 扫描 - const handleScan = () => {} - return ( - - - - ) +export interface SearchField extends Omit { + date_min?: string + date_max?: string } -const DeliveryFilter: FC = memo(() => { - const { fetchData } = EnumDeliveryNoticeTypeList() +interface DeliveryPropsType { + onSearchTime?: () => void + onConfirm?: (searchField: SearchField, timeKey?: Pick['timeKey']) => void + onCancal?: () => void + onReset?: () => void +} + +interface ButtonPropsType { + isActive: boolean + onClick?: Function + children?: React.ReactNode + customClassName?: string +} + +export 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(-1, 'day').format('YYYY-MM-DD')} 00:00:00`, + date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`, + }, + 3: { + name: '近7日', + date_min: `${dayjs(new Date()).add(-7, 'day').format('YYYY-MM-DD')} 00:00:00`, + date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`, + }, + 4: { + name: '近30日', + date_min: `${dayjs(new Date()).add(-30, 'day').format('YYYY-MM-DD')} 00:00:00`, + date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`, + }, + 5: { + name: '近90日', + date_min: `${dayjs(new Date()).add(-90, 'day').format('YYYY-MM-DD')} 00:00:00`, + date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`, + }, +} as const + +const DeliveryFilter = memo((props) => { + const { onSearchTime, onConfirm, onCancal, onReset } = props + + const { fetchData, state } = EnumDeliveryNoticeTypeList() const [searchFilter, setSearchFilter] = useState({ type: undefined, timeKey: '0', + delivery_notice_order_no: '', }) const handleSelectedType = (type: string | number) => { console.log('type==>', type) @@ -40,17 +88,25 @@ const DeliveryFilter: FC = memo(() => { } } - const handleSearchBarChange = () => {} - useEffect(() => { - getEnumData() + const handleSearchBarChange = useCallback((searchValue: string) => { + console.log('searchValue==>', searchValue) + setSearchFilter((prevProps) => ({ ...prevProps, delivery_notice_order_no: searchValue })) }, []) - const [typeList, setTypeList] = useState<{ id: number; name: string }[]>() + const typeList = useMemo<{ id: number; name: string }[]>(() => { + return state.data.list + }, [state]) + + useEffect(() => { + if (!!!typeList?.length) { + getEnumData() + console.log('getEnumData') + } + }, [typeList]) const getEnumData = async () => { - const res = await fetchData() - setTypeList(res.data.list) + await fetchData() } const [customTime, setCustomTime] = useState({ @@ -58,48 +114,70 @@ const DeliveryFilter: FC = memo(() => { 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 })) + // 不是设置了自定义时间 + if (timeOptionId !== '6') { + setCustomTime({ + date_min: filterTimeOptions[timeOptionId]['date_min'], + date_max: filterTimeOptions[timeOptionId]['date_max'], + }) + return + } + onSearchTime?.() } - const handleReset = () => {} - const handleConfirm = () => {} + const handleReset = () => { + setSearchFilter({ type: undefined, timeKey: '0', delivery_notice_order_no: '' }) + onReset?.() + } + const handleConfirm = () => { + const changedField = { + type: searchFilter.type, + delivery_notice_order_no: searchFilter.delivery_notice_order_no, + date_min: customTime.date_min, + date_max: customTime.date_max, + } + console.log('changedField==>', changedField) + onConfirm?.(changedField, searchFilter.timeKey) + } + + const scanIcon = () => { + // 扫描 + const handleScan = () => { + Taro.scanCode({ + success(res) { + setSearchFilter((prevProps) => ({ ...prevProps, delivery_notice_order_no: res.result })) + }, + fail(res) { + console.log(res) + }, + }) + } + return ( + + + + ) + } return ( <> + + 发货单号 + + + + 发货类型 @@ -116,17 +194,7 @@ const DeliveryFilter: FC = memo(() => { })} - - 发货单号 - - - - + 查询日期 @@ -154,14 +222,8 @@ const DeliveryFilter: FC = memo(() => { ) }) -interface PropsType { - isActive: boolean - onClick?: Function - children?: React.ReactNode - customClassName?: string -} - -const FilterButton: FC = ({ onClick, children, isActive = false, customClassName }) => { +const FilterButton: FC = (props) => { + const { onClick, children, isActive = false, customClassName } = props const handleClick = () => { onClick?.() } diff --git a/src/pages/delivery/index.module.scss b/src/pages/delivery/index.module.scss index 8886863..d31e751 100644 --- a/src/pages/delivery/index.module.scss +++ b/src/pages/delivery/index.module.scss @@ -6,6 +6,7 @@ page { } .delivery { + position: relative; display: flex; flex-flow: column nowrap; overflow: hidden; @@ -21,7 +22,7 @@ page { .listBox { flex: 1 1 auto; background-color: #f7f7f7; - overflow: scroll; + height: 100%; &--total { display: block; margin-top: 24px; diff --git a/src/pages/delivery/index.tsx b/src/pages/delivery/index.tsx index ac3aed4..1bdc83f 100644 --- a/src/pages/delivery/index.tsx +++ b/src/pages/delivery/index.tsx @@ -13,7 +13,8 @@ import IconFont from '@/components/iconfont/iconfont' import ItemList from './components/ItemList' import DeliveryStatusList from './components/DeliveryStatusList' import Popup from '@/components/popup' -import DeliveryFilter from './components/Filter' +import DeliveryFilter, { SearchField } from './components/Filter' +import TimePicker from '@/components/timePicker' type SearchData = { delivery_notice_order_no?: string // 发货单号 @@ -25,23 +26,17 @@ type SearchData = { size: number } -const scanIcon = () => { - // 扫描 - const handleScan = () => {} - return ( - - - - ) + + +const defaultSearchFields = { + delivery_notice_order_status: 0, // 待发货 + page: 1, + size: 10, } // 发货列表 const Delivery: FC = () => { - const [search, setSearch] = useState({ - delivery_notice_order_status: 0, // 待发货 - page: 1, - size: 10, - }) + const [search, setSearch] = useState(defaultSearchFields) const [deliveryOrderList, setDeliveryOrderList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 }) const { fetchData: FetchDeliveryOrderList, state: orderState } = DeliverNoticeOrderList() @@ -50,27 +45,15 @@ const Delivery: FC = () => { return dataLoadingStatus({ list: deliveryOrderList.list, total: deliveryOrderList.total, status: orderState.loading }) }, [deliveryOrderList, orderState]) - // const [clientObj, setclientObj] = useState({ - // clientId: null, - // clientName: '', - // }) - //输入搜索关键字 const getSearchData = useCallback((searchValue: string) => { + setSearch((prevProps) => ({ ...prevProps, delivery_notice_order_no: searchValue })) console.log('searchValue==>', searchValue) - // pageNum.current.page = 1 - // setClientlist(() => ({ list: [], total: 0 })) - // setSearch((e) => ({ ...e, name: eq, size: 10 })) }, []) - // const router = useRouter() - useEffect(() => { console.log('useEffect ===> search', search) - if (search.delivery_notice_order_no === '') { - setSearch((e) => ({ ...e, delivery_notice_order_no: undefined })) - } - if (search.delivery_notice_order_no !== '') getData() + getData() }, [search]) //上拉加载数据 @@ -87,6 +70,7 @@ const Delivery: FC = () => { //列表下拉刷新 const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async () => { pageNum.current.size = 1 setRefresherTriggeredStatus(true) @@ -94,59 +78,11 @@ const Delivery: FC = () => { } const getData = async () => { const res = await FetchDeliveryOrderList(getFilterData(search)) - // if (router?.params.clientId) { - // res.data.list.map((item) => { - // if (item.id == router?.params.clientId) { - // item.checked = true - // } else { - // item.checked = false - // } - // return item - // }) - // } + setDeliveryOrderList((e) => ({ ...e, list: res.data?.list, total: res.data?.total })) setRefresherTriggeredStatus(() => false) } - // //选择客户 - // const selectClient = (item) => { - // clentList.list.map((it) => { - // if (item.id === it.id) { - // it.checked = true - // } else { - // it.checked = false - // } - // return it - // }) - // setclientObj(item) - // let pages = Taro.getCurrentPages() // 获取当前的页面栈 - // let prevPage = pages[pages.length - 2] - // prevPage.setData({ - // //设置上一个页面的值 - // clientId: item.id, - // clientName: item.name, - // }) - // setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total })) - // Taro.navigateBack({ - // delta: 1, - // }) - // } - // useEffect(() => { - // if (clientObj?.clientId !== null) { - // setclientObj(clientObj) - // } else { - // let pages = Taro.getCurrentPages() // 获取当前的页面栈 - // let prevPage = pages[pages.length - 2] - // prevPage.setData({ - // //设置上一个页面的值 - // clientId: '', - // clientName: '', - // }) - // } - // }, [clientObj]) - - const handleChangeFilterData = () => {} - const [currentStatus, setCurrentStatus] = useState('待发货') const handleChangeStatus = ({ id: statusId, name: statusName }) => { @@ -158,7 +94,6 @@ const Delivery: FC = () => { } setCurrentStatus(statusName) setSearch((e) => ({ ...e, delivery_notice_order_status: fuckingBadCodeId })) - getData() } const handleAuditSuccess = () => { @@ -170,18 +105,74 @@ const Delivery: FC = () => { const onShowFilter = () => { setShowFilter(true) } - + // 点击关闭筛选列表框 const handlePopupClose = () => { setShowFilter(false) } - + + // 展示时间筛选 + const [showTime, setShowTime] = useState(false) + + // 点击关闭时间筛选 + const handClose = () => { + setShowTime(false) + } + const [start, setStart] = useState(new Date().toLocaleDateString()) + const [end, setEnd] = useState('') + // 选择时间 + const handTime = (event) => { + console.log(event?.value, 'event?.value?.start') + setStart(event?.value?.start) + setEnd(event?.value?.end) + setShowTime(false) + console.log(search, 8888) + } + // 显示时间选择器 + const handleSearchTime = () => { + setShowTime(true) + } + // 筛选框点击确认 + const handleConfirm = (changedFields: SearchField, timeKey) => { + console.log('changedFields==>changedFields', changedFields) + // 自定义时间 + if (timeKey === '6') { + setSearch((prevProps) => ({ ...prevProps, ...changedFields, date_min: start, date_max: end })) + } else { + setSearch((prevProps) => ({ ...prevProps, ...changedFields })) + } + handlePopupClose() + } + // 筛选框点击重置 + const handleReset = () => { + setSearch(defaultSearchFields) + handlePopupClose() + } + + const scanIcon = () => { + // 扫描 + const handleScan = () => { + Taro.scanCode({ + success(res) { + setSearch((e) => ({ ...e, delivery_notice_order_no: res.result })) + }, + fail(res) { + console.log(res) + }, + }) + } + return ( + + + + ) + } return ( - + @@ -204,8 +195,9 @@ const Delivery: FC = () => { - + + handTime(e)}> ) } diff --git a/src/pages/refundPage/components/timePicker/index.tsx b/src/pages/refundPage/components/timePicker/index.tsx deleted file mode 100644 index 7f4eede..0000000 --- a/src/pages/refundPage/components/timePicker/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import Popup from '@/components/popup' -import React, { useState, memo, useEffect } from "react"; -import Taro, { getCurrentInstance } from "@tarojs/taro"; -import { View, Swiper, SwiperItem, Text } from "@tarojs/components"; -// import { AtIcon } from 'taro-ui' -import './index.scss' -import classnames from "classnames"; -import AtCalendar from "@/components/calendar/index" - -type DateArg = string | number | Date -interface Props { - showTime: true | false, - closePopup?: () => void, - end?: DateArg - start?: DateArg, - onSelectDate?: (any) => void -} - -export default memo((props: Props) => { - let { - showTime = false, - closePopup, - start = "", - end = "", - onSelectDate - } = props - const [time, setTime] = useState({}) - - const handTime = (e) => { - setTime(e) - } - return ( - closePopup?.()}> - - handTime?.(e)} - /> - - onSelectDate?.(time)}>确认 - - ) -}) diff --git a/src/pages/refundPage/index.tsx b/src/pages/refundPage/index.tsx index 52d8837..383b6d9 100644 --- a/src/pages/refundPage/index.tsx +++ b/src/pages/refundPage/index.tsx @@ -15,7 +15,7 @@ import { mpenumreturnType } from "@/api/refound" import Tabs from "./components/tabs" -import TimePicker from "./components/timePicker" +import TimePicker from "@/components/timePicker" export default () => { @@ -375,4 +375,4 @@ export default () => { > ) -} \ No newline at end of file +}