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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/delivery/components/Filter/index.module.scss
+1
View File
@@ -66,6 +66,7 @@
}
}
.filterController {
margin-top: 60px;
width: 100%;
display: flex;
flex-flow: row nowrap;
src/pages/delivery/components/Filter/index.tsx
+133 -71
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?.()
}
src/pages/delivery/index.module.scss
+2 -1
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;
src/pages/delivery/index.tsx
+74 -82
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>
)
}
src/pages/refundPage/components/timePicker/index.scss
-19
View File
@@ -1,19 +0,0 @@
.time-box {
padding: 40px;
}
.sure-box {
// padding: 16px 102px 30px 102px;
margin-left: 102px;
margin-right: 102px;
height: 80px;
background: #337FFF;
border-radius: 44px;
font-size: 28px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 80px;
}
src/pages/refundPage/components/timePicker/index.tsx
-47
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 >
)
})
src/pages/refundPage/index.tsx
+2 -2
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>
</>
)
}
}