修改我的订单样式

src/pages/Order/OrderList/OrderList.scss

+page {
+  padding-top: 80px;
+  background-color: #eee;
+}
 .OrderList {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  overflow: hidden;
+  // height: 100%;
+  // overflow: hidden;
   .Tab {
-    position: absolute;
+    position: fixed;
     top: 0;
     display: flex;
     background-color: #fff;
@@ -14,6 +18,7 @@
     line-height: 80px;
     text-align: center;
     font-size: 30px;
+    z-index: 1;
     .Tab-item {
       width: 50%;
       color: #999;
@@ -28,6 +33,10 @@
     margin-top: 80px;
     background-color: #eee;
   }
+  .OrderList-Wrap {
+    padding-top: 22px;
+    background-color: #eee;
+  }
   .OrderList-Group {
     margin-bottom: 22px;
     .OrderList-GroupTitle {

src/pages/Order/OrderList/store.ts

@@ -11,16 +11,20 @@ import {
 } from './actions';
 import { RechargeOrderItem } from '@/api/order';
 
+export type ConsumeOrderInfo = {
+  consumeOrders: AllOrderItem[];
+  lastOrderId: number;
+};
+
+export type RechargeOrderInfo = {
+  rechargeOrders: RechargeOrderItem[];
+  lastOrderId: number;
+};
+
 export interface OrderStoreState {
   selectedOrder: Order;
-  consume: {
-    consumeOrders: AllOrderItem[];
-    lastOrderId: number;
-  };
-  recharge: {
-    rechargeOrders: RechargeOrderItem[];
-    lastOrderId: number;
-  };
+  consume: ConsumeOrderInfo;
+  recharge: RechargeOrderInfo;
 }
 const initOrder = () => ({
   actualMoney: 0,
@@ -64,6 +68,18 @@ const INITIAL_STATE = {
   },
 };
 
+const getLastId = (arr): number => {
+  const itemIdx = arr.length - 1;
+  if (itemIdx >= 0) {
+    const orderIdx = arr[itemIdx].data.length - 1;
+    if (orderIdx >= 0) {
+      let lastOrderId = arr[itemIdx].data[orderIdx].id;
+      return lastOrderId;
+    }
+  }
+  return 0;
+};
+
 export default function OrderList(
   state: OrderStoreState = INITIAL_STATE,
   actions: Actions,
@@ -75,6 +91,17 @@ export default function OrderList(
         selectedOrder: actions.payload,
       };
     case UPDATE_CONSUME_ORDERS:
+      if (actions.payload.length) {
+        let arr = actions.payload;
+        let lastOrderId = getLastId(arr);
+        return {
+          ...state,
+          consume: {
+            lastOrderId: lastOrderId,
+            consumeOrders: actions.payload,
+          },
+        };
+      }
       return {
         ...state,
         consume: {
@@ -83,6 +110,17 @@ export default function OrderList(
         },
       };
     case APPEND_CONSUME_ORDERS:
+      if (actions.payload.length) {
+        let arr = actions.payload;
+        let lastOrderId = getLastId(arr);
+        return {
+          ...state,
+          consume: {
+            lastOrderId: lastOrderId,
+            consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
+          },
+        };
+      }
       return {
         ...state,
         consume: {
@@ -99,6 +137,17 @@ export default function OrderList(
         },
       };
     case UPDATE_RECHARGE_ORDERS:
+      if (actions.payload.length) {
+        let arr = actions.payload;
+        let lastOrderId = getLastId(arr);
+        return {
+          ...state,
+          recharge: {
+            lastOrderId: lastOrderId,
+            rechargeOrders: actions.payload,
+          },
+        };
+      }
       return {
         ...state,
         recharge: {
@@ -107,6 +156,20 @@ export default function OrderList(
         },
       };
     case APPEND_RECHARGE_ORDERS:
+      if (actions.payload.length) {
+        let arr = actions.payload;
+        let lastOrderId = getLastId(arr);
+        return {
+          ...state,
+          recharge: {
+            lastOrderId: lastOrderId,
+            rechargeOrders: [
+              ...state.recharge.rechargeOrders,
+              ...actions.payload,
+            ],
+          },
+        };
+      }
       return {
         ...state,
         recharge: {

src/pages/Order/OrderList/useConsumeOrders.ts

@@ -34,16 +34,6 @@ const useConsumeOrders = (
         console.log(err);
       });
   const fetchMore = () => {
-    let arr = state.consumeOrders;
-    const itemIdx = arr.length - 1;
-    if (itemIdx >= 0) {
-      const orderIdx = arr[itemIdx].data.length - 1;
-      if (orderIdx >= 0) {
-        dispatch(updateConsumeLastId(arr[itemIdx].data[orderIdx].id));
-        return fetchData(customerId, pageSize);
-      }
-    }
-    dispatch(updateConsumeLastId(0));
     return fetchData(customerId, pageSize);
   };
   const resetOrders = () => {

src/pages/Order/OrderList/useRechargeOrders.ts

@@ -32,16 +32,6 @@ const useRechargeOrders = (
         console.log(err);
       });
   const fetchMore = () => {
-    let arr = state.rechargeOrders;
-    const itemIdx = arr.length - 1;
-    if (itemIdx >= 0) {
-      const orderIdx = arr[itemIdx].data.length - 1;
-      if (orderIdx >= 0) {
-        dispatch(updateRechargeLastId(arr[itemIdx].data[orderIdx].id));
-        return fetchData(customerId, pageSize);
-      }
-    }
-    dispatch(updateRechargeLastId(0));
     return fetchData(customerId, pageSize);
   };
   const resetOrders = () => {