对接售后列表订单状态

src/pages/salesAfterList/index copy 2.tsx

@@ -0,0 +1,123 @@
+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 { dataLoadingStatus, getFilterData } from "@/common/util"
+import OrderStatusList from "./components/orderStatusList"
+import { AFTER_ORDER_STATUS } from "@/common/enum"
+import { GetSaleOrderListApi, RefundOrderSatausApi } from "@/api/salesAfterOrder"
+import ReturnLogistics from "./components/returnLogistics"
+
+export default () => {
+  const {checkLogin} = useLogin()
+  useDidShow(async () => {
+    await checkLogin()
+  })
+
+  //搜索参数
+  const [searchField, setSearchField] = useState({
+    status: -1,
+    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()
+  }, [])
+
+  //获取订单列表
+  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)
+  }
+
+
+  //监听筛选条件变化
+  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(({status, orderInfo}) => {
+    if(status == 2) {
+      //退货物流
+
+    }
+  }, [orderData])
+
+  //物流显示
+  const [logisticsShow, setLogisticsShow] = useState(false)
+  const onCloseLogistics = useCallback(() => setLogisticsShow(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>
+    </View>
+  )
+}

src/pages/salesAfterList/index.tsx

@@ -7,10 +7,8 @@ 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"
 import { AFTER_ORDER_STATUS } from "@/common/enum"
 import { GetSaleOrderListApi } from "@/api/salesAfterOrder"
 import ReturnLogistics from "./components/returnLogistics"