订单列表对接

src/pages/orderList/components/orderStatusList/index.module.scss

@@ -0,0 +1,18 @@
+.order_status_list{
+    font-size: $font_size;
+    color: #9E9E9E;
+    margin-top: 20px;
+    .order_status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #000;
+        border-bottom: 4px solid #707070;
+    }
+    .order_list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}

src/pages/orderList/components/orderStatusList/index.tsx

@@ -0,0 +1,46 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, useEffect, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    list: {id: number, name: string}[],
+    defaultId?: number|null,
+    onSelect?: (val: number) => void
+}
+export default memo(({list = [], defaultId = null, onSelect}: Param) => {
+    const [selectInfo, setSelectInfo] = useState({
+        selected: -1, //当前选中的id
+        tabId: '', //需要滚动到的id
+    })
+    useEffect(() => {
+        if(defaultId) {
+            const index = list?.findIndex(item => {
+                console.log(item.id, defaultId)
+                return item.id == defaultId 
+            })
+            if(index !== -1) {
+                const num = index > 0?( index - 1) : 0
+                setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
+            }
+        }
+    }, [defaultId])
+    const clickEvent = ({item, index}: {item:any, index:number}) => {
+        const num = index > 0?( index - 1) : 0
+        setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
+        onSelect?.(item.id)
+    }
+
+    return (
+        <View className={styles.order_status_list}>
+          <ScrollView scrollX  scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+            <View className={styles.order_list_scroll}> 
+              {list.map((item, index) => {
+                return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})}  className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
+        </View>
+    )
+})
+

src/pages/orderList/index.tsx

@@ -3,14 +3,13 @@ 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 {ORDER_STATUS} from '@/common/enum'
 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 Tabs from "@/components/tabs"
+import OrderStatusList from "./components/orderStatusList"
 
 export default () => {
   const {checkLogin} = useLogin()
@@ -44,6 +43,7 @@ export default () => {
   const getOrderList = async () => {
     let res = await listFetchData(getFilterData(searchField))
     setOrderData({list: res.data.list, total: res.data.total})
+    setRefresherTriggeredStatus(() => false)
   }
 
 
@@ -91,24 +91,17 @@ export default () => {
   const getRefresherRefresh = async () => {
     pageNum.current.size = 1
     setRefresherTriggeredStatus(true)
+    setSearchField((val) => ({...val, size:10}))
   }
   
   return (
     <View className={styles.order_list_main}>
       <View className={styles.title}>
         <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
-        <View className={styles.order_status_list}>
-          <ScrollView scrollX >
-            <View className={styles.order_list_scroll}> 
-              {statusList.map(item => {
-                return <View key={item.id} onClick={() => changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name}</View>
-              })}
-            </View>
-          </ScrollView>
-        </View>
+        <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
       </View>
       <View className={styles.order_list}>
-          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} selfOnRefresherRefresh={getRefresherRefresh}>
+          <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>
             })}