139 lines
4.5 KiB
TypeScript
139 lines
4.5 KiB
TypeScript
import Search from "@/components/search"
|
|
import useLogin from "@/use/useLogin"
|
|
import { Image, ScrollView, Text, View } from "@tarojs/components"
|
|
import Taro, { useDidShow, usePullDownRefresh, useRouter } 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 {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
|
|
import { dataLoadingStatus, getFilterData } from "@/common/util"
|
|
import OrderStatusList from "./components/orderStatusList"
|
|
import Payment from "../order/components/payment"
|
|
|
|
export default () => {
|
|
const {checkLogin} = useLogin()
|
|
useDidShow(async () => {
|
|
await checkLogin()
|
|
})
|
|
|
|
//搜索参数
|
|
const [searchField, setSearchField] = useState({
|
|
status: -1,
|
|
page : 1,
|
|
size : 10,
|
|
Name:''
|
|
})
|
|
|
|
//获取订单状态
|
|
const {fetchData: statusFetchData} = GetOrderStatusListApi()
|
|
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
|
|
const getOrderStatusList = async () => {
|
|
let res = await statusFetchData()
|
|
let list = [...statusList, ...res.data.list||[]]
|
|
setStatusList(() => list)
|
|
}
|
|
useEffect(() => {
|
|
getOrderStatusList()
|
|
}, [])
|
|
|
|
//获取订单列表
|
|
const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
|
|
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)
|
|
}
|
|
|
|
|
|
//监听筛选条件变化
|
|
useEffect(() => {
|
|
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 clickOrderBtn = useCallback((state) => {
|
|
if(state == 2) {
|
|
//去支付
|
|
toPay()
|
|
}
|
|
}, [orderData])
|
|
|
|
//去付款
|
|
const [shouldCollectOrderId, setShouldCollectOrderId] = useState(0)
|
|
const [payMentShow, setPayMentShow] = useState(false)
|
|
const toPay = () => {
|
|
setPayMentShow(true)
|
|
}
|
|
//关闭支付弹窗
|
|
const closePayShow = useCallback(() => {
|
|
setPayMentShow(() => false)
|
|
}, [])
|
|
|
|
//支付成功
|
|
const onPaySuccess = useCallback(() => {
|
|
closePayShow()
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
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>
|
|
</View>
|
|
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={shouldCollectOrderId}/>
|
|
</View>
|
|
)
|
|
}
|