xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(发货列表): 已完成发货列表对接

Browse Source
This commit is contained in:
xuan 2022-09-21 19:19:58 +08:00
parent 25628dccdc
commit 5df6024528
12 changed files with 393 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
project.private.config.json
View File

@ -109,5 +109,6 @@
}
]
}
}
},
"libVersion": "2.26.0"
}

157
src/components/popup/index.module.scss
View File

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

111
src/components/popup/index.tsx
View File

@ -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<any>(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 (
<>
<View className={style.drawer_main}>
<View catchMove={true} className={`${style.drawer} ${show?style.drawer_active:''}` }>
<View
className={classnames(style.drawer_mask, {[style.drawer_mask_active]: show})}
onClick={() => onClose?.()}
>
<View
className={classnames(style.drawer_container, style['drawer_container_'+position], {[style.drawer_container_active]: show})}
onClick={(e) => e.stopPropagation()}
>
{showTitle&&<View className={style.drawer_container_title}>{title}</View>}
{showIconButton&&<View className={style.common_close_btn_icon}>
<CloseBtnIcon onClose={() => onClose?.()}/>
</View>}
<View className={style.drawer_container_context}>
{show&&children}
</View>
<View className="common_safe_area_y"></View>
</View>
</View>
</View>
<>
<View className={style.drawer_main}>
<View catchMove={true} className={`${style.drawer} ${show ? style.drawer_active : ''}`}>
<View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={() => onClose?.()}>
<View
className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
onClick={(e) => e.stopPropagation()}>
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
{showIconButton && (
<View className={style.common_close_btn_icon}>
<CloseBtnIcon onClose={() => onClose?.()} />
</View>
)}
<View className={style.drawer_container_context}>{children}</View>
<View className='common_safe_area_y'></View>
</View>
</View>
</>
</View>
</View>
</>
)
})
},
)

9
src/components/search/index.tsx
View File

@ -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(
)}
<View className={styles.input_bar}>
<Input
adjustPosition={adjustPosition}
placeholderStyle='color:#ABABAB; font-size:26rpx'
onConfirm={onSearch}
className={classnames(placeIcon == 'out' && styles.input_out)}

0
src/pages/refundPage/components/timePicker/index.scss → src/components/timePicker/index.scss
View File

47
src/components/timePicker/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import Popup from '@/components/popup'
import { useState, memo } from 'react'
import { View } from '@tarojs/components'
import './index.scss'
import AtCalendar from '@/components/calendar/index'
import dayjs from 'dayjs'
type DateArg = string | number | Date
interface Props {
showTime: boolean
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<any>({})
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 (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className='time-box'>
<AtCalendar
isMultiSelect
format='YYYY-MM-DD 00:00:00'
currentDate={{
start: start,
end: end,
}}
onSelectDate={(e) => handTime?.(e)}
/>
</View>
<View className='sure-box' onClick={() => onSelectDate?.(time)}>
确认
</View>
</Popup>
)
})

1
src/pages/delivery/components/Filter/index.module.scss
View File

@ -66,6 +66,7 @@
}
}
.filterController {
margin-top: 60px;
width: 100%;
display: flex;
flex-flow: row nowrap;

204
src/pages/delivery/components/Filter/index.tsx
View File

@ -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 (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
export interface SearchField extends Omit<SearchFilter, 'timeKey'> {
date_min?: string
date_max?: string
}
const DeliveryFilter: FC = memo(() => {
const { fetchData } = EnumDeliveryNoticeTypeList()
interface DeliveryPropsType {
onSearchTime?: () => void
onConfirm?: (searchField: SearchField, timeKey?: Pick<SearchFilter, 'timeKey'>['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<DeliveryPropsType>((props) => {
const { onSearchTime, onConfirm, onCancal, onReset } = props
const { fetchData, state } = EnumDeliveryNoticeTypeList()
const [searchFilter, setSearchFilter] = useState<SearchFilter>({
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 (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
}
return (
<>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>发货单号</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
<Search
placeholder='请输入或扫描条形码'
showBtn={false}
adjustPosition={true}
changeOnSearch={handleSearchBarChange}
debounceTime={300}
defaultValue={searchFilter.delivery_notice_order_no}
customRightSlot={scanIcon()}></Search>
</View>
</View>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>发货类型</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
@ -116,17 +194,7 @@ const DeliveryFilter: FC = memo(() => {
})}
</View>
</View>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>发货单号</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
<Search
placeholder='请输入或扫描条形码'
showBtn={false}
changeOnSearch={handleSearchBarChange}
debounceTime={300}
customRightSlot={scanIcon()}></Search>
</View>
</View>
<View className={styles.filterItem}>
<View className={styles['filterItem--title']}>查询日期</View>
<View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
@ -154,14 +222,8 @@ const DeliveryFilter: FC = memo(() => {
)
})
interface PropsType {
isActive: boolean
onClick?: Function
children?: React.ReactNode
customClassName?: string
}
const FilterButton: FC<PropsType> = ({ onClick, children, isActive = false, customClassName }) => {
const FilterButton: FC<ButtonPropsType> = (props) => {
const { onClick, children, isActive = false, customClassName } = props
const handleClick = () => {
onClick?.()
}

3
src/pages/delivery/index.module.scss
View File

@ -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;

156
src/pages/delivery/index.tsx
View File

@ -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 (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
const defaultSearchFields = {
delivery_notice_order_status: 0, // 待发货
page: 1,
size: 10,
}
// 发货列表
const Delivery: FC = () => {
const [search, setSearch] = useState<SearchData>({
delivery_notice_order_status: 0, // 待发货
page: 1,
size: 10,
})
const [search, setSearch] = useState<SearchData>(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 (
<View onClick={handleScan} className={styles.scanHandler}>
<IconFont name='icon-saomiao' size={40}></IconFont>
</View>
)
}
return (
<View className={styles.delivery}>
<View className={styles.searchBox}>
<Search placeholder='请输入或扫描条形码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} customRightSlot={scanIcon()}>
<View onClick={onShowFilter} className={styles.icon__filter}>
<IconText iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
<IconText svg iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
</View>
</Search>
</View>
@ -204,8 +195,9 @@ const Delivery: FC = () => {
</InfiniteScroll>
</View>
<Popup show={showFilter} title='筛选列表' onClose={handlePopupClose}>
<DeliveryFilter />
<DeliveryFilter onSearchTime={handleSearchTime} onConfirm={handleConfirm} onReset={handleReset} />
</Popup>
<TimePicker start={start} end={end} showTime={showTime} closePopup={handClose} onSelectDate={(e) => handTime(e)}></TimePicker>
</View>
)
}

47
src/pages/refundPage/components/timePicker/index.tsx
View File

@ -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<any>({})
const handTime = (e) => {
setTime(e)
}
return (
<Popup title={'选择时间'} show={showTime} onClose={() => closePopup?.()}>
<View className='time-box'>
<AtCalendar
isMultiSelect
currentDate={{
start: start,
end: end
}}
onSelectDate={(e) => handTime?.(e)}
/>
</View>
<View className='sure-box' onClick={() => onSelectDate?.(time)}>确认</View>
</Popup >
)
})

4
src/pages/refundPage/index.tsx
View File

@ -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 () => {
></TimePicker>
</>
)
}
}