Merge branch 'develop' into test

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/OrderList.tsx

 import { ComponentClass } from 'react';
 import Taro, { Component, Config, useState, useEffect } from '@tarojs/taro';
 import { View, Text, ScrollView } from '@tarojs/components';
-import { connect, useSelector, useDispatch } from '@tarojs/redux';
+import { connect, useSelector, useDispatch, useStore } from '@tarojs/redux';
 
 import OrderItem from '../components/OrderItem/OrderItem';
 
 import './OrderList.scss';
 
-import { fetchAllOrder, RechargeOrderItem } from '../../../api/order';
+import {
+  fetchAllOrder,
+  RechargeOrderItem,
+  fetchRechargeOrders,
+} from '../../../api/order';
 import { Customer } from '@/types/Customer/Customer';
 import { shareHandle } from '@/common/shareMethod';
 import RechargeItem from '../components/RechargeItem/RechargeItem';
-import useRechargeOrders from './useRechargeOrders';
-import useConsumeOrders from './useConsumeOrders';
 import Order, { AllOrderItem } from '@/types/Order/Order';
-import { selectOrder, updateConsumeOrders } from './actions';
+import {
+  selectOrder,
+  updateConsumeOrders,
+  updateRechargeOrders,
+  appendConsumeOrders,
+  appendRechargeOrders,
+} from './actions';
+import { ConsumeOrderInfo, RechargeOrderInfo, OrderStoreState } from './store';
 
 type PageStateProps = {
   userinfo: Customer;
+  consume: ConsumeOrderInfo;
+  recharge: RechargeOrderInfo;
 };
 type PageDispatchProps = {
   selectOrder: (entity: Order) => void;
   updateConsumeOrders: (entity: AllOrderItem[]) => void;
+  appendConsumeOrders: (entity: AllOrderItem[]) => void;
+  updateRechargeOrders: (entity: RechargeOrderItem[]) => void;
+  appendRechargeOrders: (entity: RechargeOrderItem[]) => void;
 };
 type PageOwnProps = {};
 
@@ -29,6 +43,9 @@ type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
 
 type PageState = {
   needRefresh: boolean;
+  orderType: number; // 0 消费,1 充值
+  consumeScrollTop: number;
+  rechargeScrollTop: number;
 };
 
 interface OrderList {
@@ -36,8 +53,10 @@ interface OrderList {
   state: PageState;
 }
 @connect(
-  state => ({
+  (state: { userinfo: Customer; OrderList: OrderStoreState }) => ({
     userinfo: state.userinfo,
+    consume: state.OrderList.consume,
+    recharge: state.OrderList.recharge,
   }),
   dispatch => ({
     selectOrder(data: Order) {
@@ -46,6 +65,15 @@ interface OrderList {
     updateConsumeOrders(data: AllOrderItem[]) {
       dispatch(updateConsumeOrders(data));
     },
+    appendConsumeOrders(data: AllOrderItem[]) {
+      dispatch(appendConsumeOrders(data));
+    },
+    updateRechargeOrders(data: RechargeOrderItem[]) {
+      dispatch(updateRechargeOrders(data));
+    },
+    appendRechargeOrders(data: RechargeOrderItem[]) {
+      dispatch(appendRechargeOrders(data));
+    },
   }),
 )
 class OrderList extends Component {
@@ -59,20 +87,80 @@ class OrderList extends Component {
     super(props);
     this.state = {
       needRefresh: false,
+      orderType: 0,
+      consumeScrollTop: 0,
+      rechargeScrollTop: 0,
     };
   }
 
-  // componentWillMount() {
-  //   this.getAllOrderHandle();
-  // }
+  componentWillMount() {
+    this.fetchConsumeOrders();
+    this.fetchRechargeOrders();
+  }
   componentDidShow() {
     const { needRefresh } = this.state;
+
+    if (needRefresh) {
+      this.fetchConsumeOrders();
+    }
+  }
+
+  onPullDownRefresh() {
+    const { orderType } = this.state;
+    Taro.showLoading({
+      title: '',
+      mask: true,
+    });
+
+    if (orderType) {
+      this.fetchRechargeOrders().then(() => {
+        Taro.stopPullDownRefresh();
+        Taro.hideLoading();
+      });
+    } else {
+      this.fetchConsumeOrders().then(() => {
+        Taro.stopPullDownRefresh();
+        Taro.hideLoading();
+      });
+    }
+  }
+  onReachBottom() {
+    const { orderType } = this.state;
+    Taro.showLoading({
+      title: '',
+      mask: true,
+    });
+    if (orderType) {
+      this.appendRechargeOrders().then(() => {
+        Taro.stopPullDownRefresh();
+        Taro.hideLoading();
+      });
+    } else {
+      this.appendConsumeOrders().then(() => {
+        Taro.stopPullDownRefresh();
+        Taro.hideLoading();
+      });
+    }
+  }
+  onPageScroll(e) {
+    const { orderType } = this.state;
+    if (orderType) {
+      this.setState({
+        rechargeScrollTop: e.scrollTop,
+      });
+    } else {
+      this.setState({
+        consumeScrollTop: e.scrollTop,
+      });
+    }
+  }
+
+  fetchConsumeOrders() {
     const {
       userinfo: { customerId },
       updateConsumeOrders,
     } = this.props;
-    if (needRefresh) {
-      fetchAllOrder({
+    return fetchAllOrder({
       customerId,
       pageSize: 10,
     })
@@ -85,16 +173,67 @@ class OrderList extends Component {
           icon: 'none',
         });
       });
-      // this.getAllOrderHandle();
   }
+  appendConsumeOrders() {
+    const {
+      userinfo: { customerId },
+      consume: { lastOrderId },
+      appendConsumeOrders,
+    } = this.props;
+    return fetchAllOrder({
+      customerId,
+      lastOrderId,
+      pageSize: 10,
+    })
+      .then(res => {
+        appendConsumeOrders(res.data);
+      })
+      .catch(err => {
+        Taro.showToast({
+          title: err.msg || '请求失败',
+          icon: 'none',
+        });
+      });
+  }
+
+  fetchRechargeOrders() {
+    const {
+      userinfo: { customerId },
+      updateRechargeOrders,
+    } = this.props;
+    return fetchRechargeOrders({
+      customerId,
+      pageSize: 10,
+    })
+      .then(res => {
+        updateRechargeOrders(res.data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+  appendRechargeOrders() {
+    const {
+      userinfo: { customerId },
+      recharge: { lastOrderId },
+      appendRechargeOrders,
+    } = this.props;
+    return fetchRechargeOrders({
+      customerId,
+      lastOrderId,
+      pageSize: 10,
+    })
+      .then(res => {
+        appendRechargeOrders(res.data);
+      })
+      .catch(err => {
+        Taro.showToast({
+          title: err.msg || '请求失败',
+          icon: 'none',
+        });
+      });
   }
 
-  // const onPullDownRefresh = () => {
-  //   console.log('in onPullDownRefresh');
-  //   this.getAllOrderHandle().then(() => {
-  //     Taro.stopPullDownRefresh();
-  //   });
-  // };
   goPayPage = (data: Order) => {
     const { selectOrder } = this.props;
     // dispatch(selectOrder(data));
@@ -119,86 +258,51 @@ class OrderList extends Component {
       url: '/pages/Order/OrderDetail/OrderDetail',
     });
   };
+  setOrderType(type: number) {
+    this.setState(
+      {
+        orderType: type,
+      },
+      () => {
+        const { orderType, consumeScrollTop, rechargeScrollTop } = this.state;
+        if (orderType) {
+          Taro.pageScrollTo({
+            scrollTop: rechargeScrollTop,
+            duration: 0,
+          });
+        } else {
+          Taro.pageScrollTo({
+            scrollTop: consumeScrollTop,
+            duration: 0,
+          });
+        }
+      },
+    );
+  }
 
   render() {
+    const { orderType } = this.state;
     const {
-      userinfo: { customerId },
+      consume: { consumeOrders },
+      recharge: { rechargeOrders },
     } = this.props;
-    const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
-    const [
-      consumeOrders,
-      fetchMoreConsumeOrders,
-      resetConsumeOrders,
-    ] = useConsumeOrders(customerId, 10);
-    // const [consumeScrollTop, setConsumeScrollTop] = useState(0);
-    // const scrollHandle = e => {
-    //   console.log(e);
-    // };
-    const onConsumeScrollToLower = () => {
-      Taro.showLoading({
-        title: '',
-        mask: true,
-      });
-      fetchMoreConsumeOrders()
-        .then(() => {
-          Taro.hideLoading();
-        })
-        .catch(err => {
-          Taro.hideLoading();
-          Taro.showToast({
-            title: err.msg || '请求失败',
-            icon: 'none',
-          });
-        });
-    };
-
-    const [
-      rechargeOrders,
-      fetchMoreRechargeOrders,
-      resetRechargeOrders,
-    ] = useRechargeOrders(customerId, 10);
-    const onRechargeScrollToLower = () => {
-      Taro.showLoading({
-        title: '',
-        mask: true,
-      });
-      fetchMoreRechargeOrders()
-        .then(() => {
-          Taro.hideLoading();
-        })
-        .catch(err => {
-          Taro.hideLoading();
-          Taro.showToast({
-            title: err.msg || '请求失败',
-            icon: 'none',
-          });
-        });
-    };
 
     return (
       <View className='OrderList'>
         <View className='Tab'>
           <Text
             className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
-            onClick={() => setOrderType(0)}>
+            onClick={() => this.setOrderType(0)}>
             消费
           </Text>
           <Text
             className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
-            onClick={() => setOrderType(1)}>
+            onClick={() => this.setOrderType(1)}>
             充值
           </Text>
         </View>
         {orderType === 0 ? (
-          <ScrollView
-            className='OrderList-Content'
-            scrollY
-            onScrollToUpper={() => resetConsumeOrders()}
-            onScrollToLower={onConsumeScrollToLower}
-            upperThreshold={-100}
-            lowerThreshold={70}
-            scrollWithAnimation
-            scrollTop={0}>
+          <View className='OrderList-Wrap'>
             {consumeOrders.map((allItem, index) => (
               <View key={allItem.groupName} className='OrderList-Group'>
                 <View className='OrderList-GroupTitle'>
@@ -217,17 +321,9 @@ class OrderList extends Component {
                 ))}
               </View>
             ))}
-          </ScrollView>
+          </View>
         ) : (
-          <ScrollView
-            className='OrderList-Content'
-            scrollY
-            onScrollToUpper={() => resetRechargeOrders()}
-            onScrollToLower={onRechargeScrollToLower}
-            upperThreshold={-100}
-            lowerThreshold={70}
-            scrollWithAnimation
-            scrollTop={0}>
+          <View className='OrderList-Wrap'>
             {rechargeOrders.map(reChargeItem => (
               <View key={reChargeItem.groupName} className='OrderList-Group'>
                 <View className='OrderList-GroupTitle'>
@@ -241,7 +337,7 @@ class OrderList extends Component {
                 ))}
               </View>
             ))}
-          </ScrollView>
+          </View>
         )}
       </View>
     );

src/pages/Order/OrderList/store.ts

@@ -11,16 +11,20 @@ import {
 } from './actions';
 import { RechargeOrderItem } from '@/api/order';
 
-export interface OrderStoreState {
-  selectedOrder: Order;
-  consume: {
+export type ConsumeOrderInfo = {
   consumeOrders: AllOrderItem[];
   lastOrderId: number;
-  };
-  recharge: {
+};
+
+export type RechargeOrderInfo = {
   rechargeOrders: RechargeOrderItem[];
   lastOrderId: number;
-  };
+};
+
+export interface OrderStoreState {
+  selectedOrder: Order;
+  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 = () => {