改造订单页面

src/api/order.ts

@@ -118,7 +118,7 @@ export type RechargeOrder = {
   handler?: string;
 
   /** 主键id */
-  id?: number;
+  id: number;
 
   /** 操作类型 1入账 2出账 */
   operType?: string;

src/pages/Order/OrderList/OrderList.tsx

 import { ComponentClass } from 'react';
 import Taro, { Component, Config, useState } from '@tarojs/taro';
 import { View, Text, ScrollView } from '@tarojs/components';
-import { connect } from '@tarojs/redux';
+import { connect, useSelector } from '@tarojs/redux';
 
 import OrderItem from '../components/OrderItem/OrderItem';
 
 import './OrderList.scss';
 
-import {
-  toggleOrderState,
-  updatePayOrderList,
-  updateAllOrderList,
-  UpdateOrderParams,
-} from './actions';
-import { StoreState } from './store';
-import { fetchAllOrder, fetchPayOrder } from '../../../api/order';
-import Order, { AllOrderItem } from '../../../types/Order/Order';
+import { fetchAllOrder } from '../../../api/order';
 import { Customer } from '@/types/Customer/Customer';
 import { shareHandle } from '@/common/shareMethod';
-import useRechargeOrders from '@/hooks/useRechargeOrders';
 import RechargeItem from '../components/RechargeItem/RechargeItem';
-
-type PageStateProps = {
-  orderList: StoreState;
-  userinfo: Customer;
-};
-type PageDispatchProps = {
-  toggleOrderState: (state: String) => void;
-  updatePayOrder: (entity: UpdateOrderParams<Order>) => void;
-  updateAllOrder: (entity: UpdateOrderParams<AllOrderItem>) => void;
-};
+import useRechargeOrders from './useRechargeOrders';
+import useConsumeOrders from './useConsumeOrders';
 
 type PageOwnProps = {};
 
-type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
+type PageProps = PageOwnProps;
 
 type PageState = {
   needRefresh: boolean;
@@ -44,158 +27,80 @@ interface OrderList {
   state: PageState;
 }
 
-@connect(
-  ({ OrderList, userinfo }) => ({
-    orderList: OrderList,
-    userinfo,
-  }),
-  dispatch => ({
-    toggleOrderState(state: String) {
-      dispatch(toggleOrderState(state));
-    },
-    updatePayOrder(data) {
-      dispatch(updatePayOrderList(data));
-    },
-    updateAllOrder(data) {
-      dispatch(updateAllOrderList(data));
-    },
-  }),
-)
-class OrderList extends Component {
-  config: Config = {
-    navigationBarTitleText: '订单',
-    enablePullDownRefresh: true,
-  };
-  constructor(props: PageProps) {
-    super(props);
-    this.state = {
-      needRefresh: false,
-    };
-  }
-  onShareAppMessage = shareHandle;
-
-  componentWillMount() {
-    this.getPayOrderHandle();
-    this.getAllOrderHandle();
-  }
-  componentDidShow() {
-    const { needRefresh } = this.state;
-    if (needRefresh) {
-      this.getPayOrderHandle();
-      this.getAllOrderHandle();
-    }
-  }
-
-  onPullDownRefresh() {
+const OrderList = () => {
+  // constructor(props: PageProps) {
+  //   super(props);
+  //   this.state = {
+  //     needRefresh: false,
+  //   };
+  // }
+
+  // componentWillMount() {
+  //   this.getAllOrderHandle();
+  // }
+  // componentDidShow() {
+  //   const { needRefresh } = this.state;
+  //   if (needRefresh) {
+  //     this.getAllOrderHandle();
+  //   }
+  // }
+
+  const onPullDownRefresh = () => {
     console.log('in onPullDownRefresh');
     this.getAllOrderHandle().then(() => {
       Taro.stopPullDownRefresh();
     });
-  }
-
-  getPayOrderHandle(lastOrderId?: number) {
-    const { userinfo, updatePayOrder } = this.props;
-    return fetchPayOrder(
-      lastOrderId
-        ? {
-            customerId: userinfo.customerId,
-            pageSize: 10,
-            lastOrderId,
-          }
-        : {
-            customerId: userinfo.customerId,
-            pageSize: 10,
-          },
-    )
-      .then(res => {
-        console.log(res);
-        updatePayOrder({ list: res.data, lastOrderId: lastOrderId });
-      })
-      .catch(console.error);
-  }
-
-  getAllOrderHandle(lastOrderId?: number) {
-    const {
-      userinfo: { customerId },
-      updateAllOrder,
-    } = this.props;
-    return fetchAllOrder(
-      lastOrderId
-        ? {
-            customerId: customerId,
-            pageSize: 10,
-            lastOrderId,
-          }
-        : {
-            customerId: customerId,
-            pageSize: 10,
-          },
-    )
-      .then(res => {
-        console.log(res);
-        updateAllOrder({ list: res.data, lastOrderId: lastOrderId });
-      })
-      .catch(console.error);
-  }
+  };
 
-  goPayPage(data) {
-    this.setState({
-      needRefresh: true,
-    });
+  const goPayPage = data => {
+    // this.setState({
+    //   needRefresh: true,
+    // });
     this.$preload({ id: data.id });
     Taro.navigateTo({
       url: '/pages/Order/OrderPay/OrderPay',
     });
-  }
-  goDetail(data) {
-    this.setState({
-      needRefresh: false,
-    });
+  };
+  const goDetail = data => {
+    // this.setState({
+    //   needRefresh: false,
+    // });
     this.$preload(data);
     Taro.navigateTo({
       url: '/pages/Order/OrderDetail/OrderDetail',
     });
-  }
-
-  toggleStateHandle(type: string) {
-    const {
-      toggleOrderState,
-      orderList: { payList, allList },
-    } = this.props;
-    if (type === '1' && payList.length === 0) {
-      this.getPayOrderHandle();
-    }
-    if (type === 'all' && allList.length === 0) {
-      this.getAllOrderHandle();
-    }
-    toggleOrderState(type);
-  }
-
-  refreshList() {
-    console.log('in refreshList');
-    // Taro.startPullDownRefresh({
-    //   success: this.onPullDownRefresh,
-    // });
-  }
-  fetchMoreList() {
-    const {
-      orderList: { allList },
-    } = this.props;
-    const itemIdx = allList.length - 1;
-    const orderIdx = allList[itemIdx].data.length - 1;
-    console.log(itemIdx, orderIdx);
-
-    this.getAllOrderHandle(allList[itemIdx].data[orderIdx].id);
-  }
+  };
 
-  render() {
-    const {
-      orderList: { allList },
-      userinfo,
-    } = this.props;
+  // const { allList } = useSelector(
+  //   (state: { OrderList: OrderStoreState }) => state.OrderList,
+  // );
+  const userinfo = useSelector(
+    (state: { userinfo: Customer }) => state.userinfo,
+  );
   const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
-    const reChargeOrders = useRechargeOrders(userinfo.customerId, 0, 10);
-    console.log(reChargeOrders);
+  const [consumenLastId, setConsumenLastId] = useState(0);
+  const consumeOrders = useConsumeOrders(
+    userinfo.customerId,
+    consumenLastId,
+    10,
+  );
+  const fetchMoreConsumeOrders = () => {
+    const itemIdx = consumeOrders.length - 1;
+    const orderIdx = consumeOrders[itemIdx].data.length - 1;
+    setConsumenLastId(consumeOrders[itemIdx].data[orderIdx].id);
+  };
+
+  const [rechargeLastId, setRechargeLastId] = useState(0);
+  const rechargeOrders = useRechargeOrders(
+    userinfo.customerId,
+    rechargeLastId,
+    10,
+  );
+  const fetchMoreRechargeOrders = () => {
+    const itemIdx = rechargeOrders.length - 1;
+    const orderIdx = rechargeOrders[itemIdx].data.length - 1;
+    setRechargeLastId(rechargeOrders[itemIdx].data[orderIdx].id);
+  };
 
   return (
     <View className='OrderList'>
@@ -215,26 +120,24 @@ class OrderList extends Component {
         <ScrollView
           className='OrderList-Content'
           scrollY
-            onScrollToUpper={this.refreshList}
-            onScrollToLower={this.fetchMoreList}
+          onScrollToUpper={() => setConsumenLastId(0)}
+          onScrollToLower={fetchMoreConsumeOrders}
           upperThreshold={-100}
           lowerThreshold={70}
           scrollWithAnimation
           scrollTop={0}>
-            {allList.map((allItem, index) => (
+          {consumeOrders.map((allItem, index) => (
             <View key={allItem.groupName} className='OrderList-Group'>
               <View className='OrderList-GroupTitle'>
-                  <View className='OrderList-GroupName'>
-                    {allItem.groupName}
-                  </View>
+                <View className='OrderList-GroupName'>{allItem.groupName}</View>
                 {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
               </View>
               {allItem.data.map(order => (
                 <OrderItem
                   key={order.id}
                   data={order}
-                    onGoDetail={this.goDetail}
-                    onPayHandle={this.goPayPage}
+                  onGoDetail={goDetail}
+                  onPayHandle={goPayPage}
                 />
               ))}
             </View>
@@ -244,13 +147,13 @@ class OrderList extends Component {
         <ScrollView
           className='OrderList-Content'
           scrollY
-            onScrollToUpper={this.refreshList}
-            onScrollToLower={this.fetchMoreList}
+          onScrollToUpper={() => setRechargeLastId(0)}
+          onScrollToLower={fetchMoreRechargeOrders}
           upperThreshold={-100}
           lowerThreshold={70}
           scrollWithAnimation
           scrollTop={0}>
-            {reChargeOrders.map(reChargeItem => (
+          {rechargeOrders.map(reChargeItem => (
             <View key={reChargeItem.groupName} className='OrderList-Group'>
               <View className='OrderList-GroupTitle'>
                 <View className='OrderList-GroupName'>
@@ -267,7 +170,11 @@ class OrderList extends Component {
       )}
     </View>
   );
-  }
-}
+};
+OrderList.config = {
+  navigationBarTitleText: '订单',
+  enablePullDownRefresh: true,
+};
+OrderList.onShareAppMessage = shareHandle;
 
-export default OrderList as ComponentClass<PageOwnProps>;
+export default OrderList;

src/pages/Order/OrderList/store.ts

@@ -6,7 +6,7 @@ import {
   UPDATE_ALL_LIST,
 } from './actions';
 
-export interface StoreState {
+export interface OrderStoreState {
   orderState: String;
   payList: Order[];
   allList: AllOrderItem[];
@@ -19,7 +19,7 @@ const INITIAL_STATE = {
 };
 
 export default function OrderList(
-  state: StoreState = INITIAL_STATE,
+  state: OrderStoreState = INITIAL_STATE,
   actions: Actions,
 ) {
   switch (actions.type) {

src/pages/Order/OrderList/useConsumeOrders.ts

+import { useEffect, useReducer } from '@tarojs/taro';
+import { fetchAllOrder } from '@/api/order';
+import Actions from '@/types/Store/Actions';
+import { AllOrderItem } from '@/types/Order/Order';
+
+const reducer = (state: AllOrderItem[], action: Actions) => {
+  switch (action.type) {
+    case 'updateConsumeOrders':
+      return action.payload;
+    case 'appendConsumeOrders':
+      return [...state, ...action.payload];
+    default:
+      return state;
+  }
+};
+const useConsumeOrders = (
+  customerId: number,
+  lastOrderId: number,
+  pageSize: number,
+): AllOrderItem[] => {
+  const [state, dispatch] = useReducer(reducer, []);
+  const fetchData = (
+    customerId: number,
+    lastOrderId: number,
+    pageSize: number,
+  ) =>
+    fetchAllOrder({
+      customerId,
+      lastOrderId,
+      pageSize,
+    })
+      .then(res => {
+        lastOrderId
+          ? dispatch({ type: 'appendConsumeOrders', payload: res.data })
+          : dispatch({ type: 'updateConsumeOrders', payload: res.data });
+        return res.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
+
+  useEffect(() => {
+    console.log('in fetch');
+
+    fetchData(customerId, lastOrderId, pageSize);
+  }, [customerId, lastOrderId, pageSize]);
+
+  return state;
+};
+
+export default useConsumeOrders;

src/hooks/useRechargeOrders.ts → src/pages/Order/OrderList/useRechargeOrders.ts

@@ -6,7 +6,8 @@ const reducer = (state: RechargeOrderItem[], action: Actions) => {
   switch (action.type) {
     case 'updateRechargeOrders':
       return action.payload;
-
+    case 'appendRechargeOrders':
+      return [...state, ...action.payload];
     default:
       return state;
   }
@@ -28,7 +29,9 @@ const useRechargeOrders = (
       pageSize,
     })
       .then(res => {
-        dispatch({ type: 'updateRechargeOrders', payload: res.data });
+        lastOrderId
+          ? dispatch({ type: 'appendRechargeOrders', payload: res.data })
+          : dispatch({ type: 'updateRechargeOrders', payload: res.data });
         return res.data;
       })
       .catch(err => {