135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
import Search from "@/components/search"
|
|
import useLogin from "@/use/useLogin"
|
|
import {View } from "@tarojs/components"
|
|
import Taro, { useDidShow} from "@tarojs/taro"
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
import styles from './index.module.scss'
|
|
import classnames from "classnames";
|
|
import Order from "./components/order"
|
|
import InfiniteScroll from "@/components/infiniteScroll"
|
|
import { dataLoadingStatus, getFilterData } from "@/common/util"
|
|
import OrderStatusList from "./components/orderStatusList"
|
|
import { GetSaleOrderListApi, RefundOrderSatausApi } from "@/api/salesAfterOrder"
|
|
import ReturnLogistics from "./components/returnLogistics"
|
|
import ApplyRecord from "../salesAfter/components/applyRecord"
|
|
|
|
export default () => {
|
|
useLogin()
|
|
|
|
|
|
//搜索参数
|
|
const [searchField, setSearchField] = useState<{status: number|null, page: number, size: number, name: string}>({
|
|
status: null,
|
|
page : 1,
|
|
size : 10,
|
|
name:''
|
|
})
|
|
|
|
//获取订单状态
|
|
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
|
|
const {fetchData: fetchDataStatus} = RefundOrderSatausApi()
|
|
const getOrderStatusList = async () => {
|
|
let res = await fetchDataStatus()
|
|
setStatusList((e) => [...e, ...res.data.list])
|
|
}
|
|
useEffect(() => {
|
|
getOrderStatusList()
|
|
setSearchField((e) => ({...e, status:-1}))
|
|
}, [])
|
|
|
|
//获取订单列表
|
|
const {fetchData: listFetchData, state:orderState} = GetSaleOrderListApi()
|
|
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
|
|
const getOrderList = async () => {
|
|
let res = await listFetchData(getFilterData(searchField))
|
|
setOrderData({list: res.data.list, total: res.data.total})
|
|
setRefresherTriggeredStatus(() => false)
|
|
}
|
|
|
|
useDidShow(() => {
|
|
if(searchField.status != null) getOrderList()
|
|
})
|
|
|
|
//监听筛选条件变化
|
|
useEffect(() => {
|
|
if(searchField.status != null) getOrderList()
|
|
}, [searchField])
|
|
|
|
//上拉加载数据
|
|
const pageNum = useRef({size: searchField.size, page: searchField.page})
|
|
const getScrolltolower = useCallback(() => {
|
|
if(orderData.list.length < orderData.total) {
|
|
pageNum.current.page++
|
|
const size = pageNum.current.size * pageNum.current.page
|
|
setSearchField({...searchField, size })
|
|
}
|
|
}, [orderData])
|
|
|
|
//状态改变
|
|
const changeStatus = useCallback((e) => {
|
|
pageNum.current.page = 1
|
|
setSearchField((value) => ({...value, status:e, size:10}))
|
|
setOrderData(() => ({list:[], total:0}))
|
|
}, [])
|
|
|
|
|
|
//数据加载状态
|
|
const statusMore = useMemo(() => {
|
|
return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
|
|
}, [orderData, orderState])
|
|
|
|
//输入了搜索关键字
|
|
const getSearchData = useCallback((e) => {
|
|
pageNum.current.page = 1
|
|
setOrderData(() => ({list:[], total:0}))
|
|
setSearchField((val) => ({...val, name:e, size:10}))
|
|
}, [])
|
|
|
|
|
|
//列表下拉刷新
|
|
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
|
const getRefresherRefresh = async () => {
|
|
pageNum.current.size = 1
|
|
setRefresherTriggeredStatus(true)
|
|
setSearchField((val) => ({...val, size:10}))
|
|
}
|
|
|
|
//监听点击的按钮
|
|
const [callBackOrderInfo, setCallBackPayOrderInfo] = useState<any>()
|
|
const clickOrderBtn = useCallback(({status, orderInfo}) => {
|
|
if(status == 1 || status == 6) {
|
|
getOrderList()
|
|
} else if (status == 8) {
|
|
setApplyRecord(true)
|
|
}
|
|
setCallBackPayOrderInfo(orderInfo)
|
|
}, [orderData])
|
|
|
|
//物流显示
|
|
const [logisticsShow, setLogisticsShow] = useState(false)
|
|
const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
|
|
|
|
//显示记录
|
|
const [applyRecord, setApplyRecord] = useState(false)
|
|
|
|
|
|
|
|
return (
|
|
<View className={styles.order_list_main}>
|
|
<View className={styles.title}>
|
|
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
|
|
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
|
|
</View>
|
|
<View className={styles.order_list}>
|
|
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
|
|
{orderData?.list.map(item => {
|
|
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
|
|
})}
|
|
</InfiniteScroll>
|
|
<ReturnLogistics show={logisticsShow} onClose={onCloseLogistics}/>
|
|
</View>
|
|
<ApplyRecord show={applyRecord} id={callBackOrderInfo?.id} onClose={() => setApplyRecord(false)}/>
|
|
</View>
|
|
)
|
|
}
|