改造我的订单

src/api/order.ts

@@ -156,13 +156,9 @@ export type RechargeOrderItem = {
   sortNum: number;
 };
 
-type RechageResponse = {
-  data: RechargeOrderItem[];
-};
-
 export const fetchRechargeOrders = (
   data: RechargeParams,
-): Promise<ResponseDataEntity<RechageResponse>> =>
+): Promise<ResponseDataEntity<RechargeOrderItem[]>> =>
   customerFetch({
     url: '/dcxy/app/rechargeOrder/pageAllListRecharge',
     data,

src/hooks/useRechargePay.ts

@@ -8,8 +8,8 @@ enum FirstRechargeState {
 }
 
 type RechargePayState = {
-  paywayList: PayConfig[];
-  payConfigList: PayTypeVo[];
+  paywayList: PayTypeVo[];
+  payConfigList: PayConfig[];
   isFirstRecharge: FirstRechargeState;
 };
 
@@ -22,7 +22,10 @@ const reducer = (state: RechargePayState, action: Actions) => {
   }
 };
 
-const usePaywayList = (areaId: number, customerId: number) => {
+const usePaywayList = (
+  areaId: number,
+  customerId: number,
+): RechargePayState => {
   const [state, dispatch] = useReducer(reducer, {
     paywayList: [],
     payConfigList: [],

src/pages/Order/OrderDetail/OrderDetail.tsx

-import { ComponentClass } from 'react';
-import Taro, { Component, Config } from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 import { View, Text } from '@tarojs/components';
 
 import OrderTitle from '../components/OrderTitle/OrderTitle';
 import OrderInfo from '../components/OrderInfo/OrderInfo';
 
 import './OrderDetail.scss';
-import { fetchOrderDetailAndPay } from '../../../api/order';
-import { PayType, getPayType } from '../../../utils/payType';
+import { getPayType } from '../../../utils/payType';
 import { shareHandle } from '@/common/shareMethod';
+import { useSelector } from '@tarojs/redux';
+import { OrderStoreState } from '../OrderList/store';
 
-type pageProps = {};
-type PageState = {
-  actualMoney: number;
-  areaId: number;
-  areaName: string;
-  consumeType: string;
-  createAt: string;
-  customerCellphone: string;
-  customerId: number;
-  customerName: string;
-  deductionBean: number;
-  deductionMoney: number;
-  equipmentNum: string;
-  equipmentPosition: string;
-  id: number;
-  operateId: number;
-  operateName: string;
-  operationMode: string;
-  orderName: string;
-  orderNumber: string;
-  orderState: string;
-  outTradeNo: string;
-  payType: PayType;
-  payableMoney: number;
-  serviceId: number;
-  serviceName: string;
-  thirdDiscountMoney: number;
-  thirdTradeNumber: string;
-  updateDate: string;
-};
-
-interface OrderDetail {
-  props: pageProps;
-  state: PageState;
-}
-class OrderDetail extends Component {
-  config: Config = {
-    navigationBarTitleText: '订单详情',
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      actualMoney: 0,
-      areaId: 0,
-      areaName: '',
-      consumeType: '',
-      createAt: '',
-      customerCellphone: '',
-      customerId: 0,
-      customerName: '',
-      deductionBean: 0,
-      deductionMoney: 0,
-      equipmentNum: '',
-      equipmentPosition: '',
-      id: 0,
-      operateId: 0,
-      operateName: '',
-      operationMode: '',
-      orderName: '',
-      orderNumber: '',
-      orderState: '',
-      outTradeNo: '',
-      payType: '',
-      payableMoney: 0,
-      serviceId: 0,
-      serviceName: '',
-      thirdDiscountMoney: 0,
-      thirdTradeNumber: '',
-      updateDate: '',
-    };
-  }
-  onShareAppMessage = shareHandle;
-
-  componentWillMount() {
-    console.log('preload: ', this.$router.preload);
-    const data = this.$router.preload;
-    this.setState({
-      ...data,
-    });
-    // this.getDetailInfo(id);
-  }
-
-  getDetailInfo(id: number) {
-    return fetchOrderDetailAndPay({
-      id: id,
-    })
-      .then(res => {
-        this.setState({
-          ...res.data,
-        });
-        console.log(res);
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  render() {
+const OrderDetail = () => {
   const {
     actualMoney,
     payableMoney,
@@ -121,8 +25,12 @@ class OrderDetail extends Component {
     equipmentPosition,
     deductionMoney,
     thirdDiscountMoney,
-    } = this.state;
+  } = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.selectedOrder,
+  );
+
   const payTypeName = getPayType(payType);
+
   return (
     <View className='OrderDetail'>
       <OrderTitle price={payableMoney} />
@@ -176,7 +84,10 @@ class OrderDetail extends Component {
       ) : null}
     </View>
   );
-  }
-}
+};
+OrderDetail.config = {
+  navigationBarTitleText: '订单详情',
+};
+OrderDetail.onShareAppMessage = shareHandle;
 
-export default OrderDetail as ComponentClass<pageProps, PageState>;
+export default OrderDetail;

src/pages/Order/OrderList/OrderList.tsx

 import { ComponentClass } from 'react';
-import Taro, { Component, Config, useState } from '@tarojs/taro';
+import Taro, { Component, Config, useState, useEffect } from '@tarojs/taro';
 import { View, Text, ScrollView } from '@tarojs/components';
-import { connect, useSelector } from '@tarojs/redux';
+import { connect, useSelector, useDispatch } from '@tarojs/redux';
 
 import OrderItem from '../components/OrderItem/OrderItem';
 
 import './OrderList.scss';
 
-import { fetchAllOrder } from '../../../api/order';
+import { fetchAllOrder, RechargeOrderItem } 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 } from './actions';
 
 type PageOwnProps = {};
 
@@ -45,62 +47,54 @@ const OrderList = () => {
   //   }
   // }
 
-  const onPullDownRefresh = () => {
-    console.log('in onPullDownRefresh');
-    this.getAllOrderHandle().then(() => {
-      Taro.stopPullDownRefresh();
-    });
-  };
-
-  const goPayPage = data => {
-    // this.setState({
-    //   needRefresh: true,
+  // const onPullDownRefresh = () => {
+  //   console.log('in onPullDownRefresh');
+  //   this.getAllOrderHandle().then(() => {
+  //     Taro.stopPullDownRefresh();
   //   });
-    this.$preload({ id: data.id });
+  // };
+  const dispatch = useDispatch();
+  const userinfo = useSelector(
+    (state: { userinfo: Customer }) => state.userinfo,
+  );
+  const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const [
+    consumeOrders,
+    fetchMoreConsumeOrders,
+    resetConsumeOrders,
+  ] = useConsumeOrders(userinfo.customerId, 10);
+
+  const [
+    rechargeOrders,
+    fetchMoreRechargeOrders,
+    resetRechargeOrders,
+  ] = useRechargeOrders(userinfo.customerId, 10);
+  console.log(consumeOrders, rechargeOrders);
+  const goPayPage = (data: Order) => {
+    dispatch(selectOrder(data));
+    setNeedRefresh(true);
+    // this.$preload({ id: data.id });
     Taro.navigateTo({
-      url: '/pages/Order/OrderPay/OrderPay',
+      url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
     });
   };
-  const goDetail = data => {
+  const goDetail = (data: Order) => {
+    dispatch(selectOrder(data));
+    setNeedRefresh(false);
     // this.setState({
     //   needRefresh: false,
     // });
-    this.$preload(data);
+    // this.$preload(data);
     Taro.navigateTo({
       url: '/pages/Order/OrderDetail/OrderDetail',
     });
   };
-
-  // const { allList } = useSelector(
-  //   (state: { OrderList: OrderStoreState }) => state.OrderList,
-  // );
-  const userinfo = useSelector(
-    (state: { userinfo: Customer }) => state.userinfo,
-  );
-  const [orderType, setOrderType] = useState(0); // 0 消费,1 充值
-  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);
-  };
+  useEffect(() => {
+    if (needRefresh) {
+      console.log('刷新');
+    }
+  }, [needRefresh]);
 
   return (
     <View className='OrderList'>
@@ -120,8 +114,8 @@ const OrderList = () => {
         <ScrollView
           className='OrderList-Content'
           scrollY
-          onScrollToUpper={() => setConsumenLastId(0)}
-          onScrollToLower={fetchMoreConsumeOrders}
+          onScrollToUpper={() => resetConsumeOrders()}
+          onScrollToLower={() => fetchMoreConsumeOrders()}
           upperThreshold={-100}
           lowerThreshold={70}
           scrollWithAnimation
@@ -147,8 +141,8 @@ const OrderList = () => {
         <ScrollView
           className='OrderList-Content'
           scrollY
-          onScrollToUpper={() => setRechargeLastId(0)}
-          onScrollToLower={fetchMoreRechargeOrders}
+          onScrollToUpper={() => resetRechargeOrders()}
+          onScrollToLower={() => fetchMoreRechargeOrders()}
           upperThreshold={-100}
           lowerThreshold={70}
           scrollWithAnimation

src/pages/Order/OrderList/actions.ts

 import Actions from '../../../types/Store/Actions';
 import Order, { AllOrderItem } from '../../../types/Order/Order';
-export const TOGGLE_ORDER_STATE = 'TOGGLE_ORDER_STATE';
-export const UPDATE_PAY_LIST = 'UPDATE_PAY_LIST';
-export const UPDATE_ALL_LIST = 'UPDATE_ALL_LIST';
+import { RechargeOrderItem } from '@/api/order';
+export const SELECT_ORDER = 'SELECT_ORDER';
+export const UPDATE_CONSUME_ORDERS = 'UPDATE_CONSUME_ORDERS';
+export const APPEND_CONSUME_ORDERS = 'APPEND_CONSUME_ORDERS';
+export const UPDATE_CONSUME_LASTID = 'UPDATE_CONSUME_LASTID';
+export const UPDATE_RECHARGE_ORDERS = 'UPDATE_RECHARGE_ORDERS';
+export const APPEND_RECHARGE_ORDERS = 'APPEND_RECHARGE_ORDERS';
+export const UPDATE_RECHARGE_LASTID = 'UPDATE_RECHARGE_LASTID';
 
 export type UpdateOrderParams<T> = {
   lastOrderId?: number;
   list: T[];
 };
 
-export const toggleOrderState = (state: String): Actions => ({
-  type: TOGGLE_ORDER_STATE,
+export const selectOrder = (state: Order): Actions => ({
+  type: SELECT_ORDER,
   payload: state,
 });
 
-export const updatePayOrderList = (
-  state: UpdateOrderParams<Order>
-): Actions => ({
-  type: UPDATE_PAY_LIST,
+export const updateConsumeOrders = (state: AllOrderItem[]): Actions => ({
+  type: UPDATE_CONSUME_ORDERS,
   payload: state,
 });
-export const updateAllOrderList = (
-  state: UpdateOrderParams<AllOrderItem>
-): Actions => ({
-  type: UPDATE_ALL_LIST,
+export const appendConsumeOrders = (state: AllOrderItem[]): Actions => ({
+  type: APPEND_CONSUME_ORDERS,
   payload: state,
 });
+export const updateConsumeLastId = (data: number): Actions => ({
+  type: UPDATE_CONSUME_LASTID,
+  payload: data,
+});
+export const updateRechargeOrders = (state: RechargeOrderItem[]): Actions => ({
+  type: UPDATE_RECHARGE_ORDERS,
+  payload: state,
+});
+export const appendRechargeOrders = (state: RechargeOrderItem[]): Actions => ({
+  type: APPEND_RECHARGE_ORDERS,
+  payload: state,
+});
+export const updateRechargeLastId = (data: number): Actions => ({
+  type: UPDATE_RECHARGE_LASTID,
+  payload: data,
+});

src/pages/Order/OrderList/store.ts

 import Actions from '../../../types/Store/Actions';
 import Order, { AllOrderItem } from '../../../types/Order/Order';
 import {
-  TOGGLE_ORDER_STATE,
-  UPDATE_PAY_LIST,
-  UPDATE_ALL_LIST,
+  SELECT_ORDER,
+  UPDATE_CONSUME_ORDERS,
+  APPEND_CONSUME_ORDERS,
+  UPDATE_RECHARGE_ORDERS,
+  APPEND_RECHARGE_ORDERS,
+  UPDATE_CONSUME_LASTID,
+  UPDATE_RECHARGE_LASTID,
 } from './actions';
+import { RechargeOrderItem } from '@/api/order';
 
 export interface OrderStoreState {
-  orderState: String;
-  payList: Order[];
-  allList: AllOrderItem[];
+  selectedOrder: Order;
+  consume: {
+    consumeOrders: AllOrderItem[];
+    lastOrderId: number;
+  };
+  recharge: {
+    rechargeOrders: RechargeOrderItem[];
+    lastOrderId: number;
+  };
 }
+const initOrder = () => ({
+  actualMoney: 0,
+  areaId: 0,
+  areaName: '',
+  consumeType: '',
+  createAt: '',
+  customerCellphone: '',
+  customerId: 0,
+  customerName: '',
+  deductionBean: 0,
+  deductionMoney: 0,
+  equipmentNum: '',
+  equipmentPosition: '',
+  id: 0,
+  operateId: 0,
+  operateName: '',
+  operationMode: '',
+  orderName: '',
+  orderNumber: '',
+  orderState: '',
+  outTradeNo: '',
+  payType: '',
+  payableMoney: 0,
+  serviceId: 0,
+  serviceName: '',
+  thirdDiscountMoney: 0,
+  thirdTradeNumber: '',
+  updateDate: '',
+});
 
 const INITIAL_STATE = {
-  orderState: 'all',
-  payList: [],
-  allList: [],
+  selectedOrder: initOrder(),
+  consume: {
+    consumeOrders: [],
+    lastOrderId: 0,
+  },
+  recharge: {
+    rechargeOrders: [],
+    lastOrderId: 0,
+  },
 };
 
 export default function OrderList(
@@ -23,55 +69,61 @@ export default function OrderList(
   actions: Actions,
 ) {
   switch (actions.type) {
-    case TOGGLE_ORDER_STATE:
+    case SELECT_ORDER:
       return {
         ...state,
-        orderState: actions.payload,
+        selectedOrder: actions.payload,
       };
-    case UPDATE_PAY_LIST:
-      if (actions.payload.lastOrderId) {
+    case UPDATE_CONSUME_ORDERS:
       return {
         ...state,
-          payList: [...state.payList, ...actions.payload.list],
+        consume: {
+          ...state.consume,
+          consumeOrders: actions.payload,
+        },
       };
-      } else {
+    case APPEND_CONSUME_ORDERS:
       return {
         ...state,
-          payList: actions.payload.list,
+        consume: {
+          ...state.consume,
+          consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
+        },
       };
-      }
-    case UPDATE_ALL_LIST:
-      if (actions.payload.lastOrderId) {
-        if (actions.payload.list.length) {
-          let key = actions.payload.list[0].groupName;
-          let index = state.allList.findIndex(item => item.groupName == key);
-          if (index > -1) {
+    case UPDATE_CONSUME_LASTID:
       return {
         ...state,
-              allList: [
-                ...state.allList.slice(0, index),
-                {
-                  groupName: state.allList[index].groupName,
-                  data: [
-                    ...state.allList[index].data,
-                    ...actions.payload.list[0].data,
-                  ],
+        consume: {
+          ...state.consume,
+          lastOrderId: actions.payload,
         },
-                ...actions.payload.list.slice(1),
-              ],
       };
-          }
-
+    case UPDATE_RECHARGE_ORDERS:
       return {
         ...state,
-            allList: [...state.allList, ...actions.payload.list],
+        recharge: {
+          ...state.recharge,
+          rechargeOrders: actions.payload,
+        },
       };
-        }
-        return state;
-      }
+    case APPEND_RECHARGE_ORDERS:
+      return {
+        ...state,
+        recharge: {
+          ...state.recharge,
+          rechargeOrders: [
+            ...state.recharge.rechargeOrders,
+            ...actions.payload,
+          ],
+        },
+      };
+    case UPDATE_RECHARGE_LASTID:
       return {
         ...state,
-        allList: actions.payload.list,
+        recharge: {
+          ...state.recharge,
+          lastOrderId: actions.payload,
+        },
       };
     default:
       return state;

src/pages/Order/OrderList/useConsumeOrders.ts

-import { useEffect, useReducer } from '@tarojs/taro';
+import { useEffect } from '@tarojs/taro';
 import { fetchAllOrder } from '@/api/order';
-import Actions from '@/types/Store/Actions';
 import { AllOrderItem } from '@/types/Order/Order';
+import { useSelector, useDispatch } from '@tarojs/redux';
+import { OrderStoreState } from './store';
+import {
+  appendConsumeOrders,
+  updateConsumeOrders,
+  updateConsumeLastId,
+} from './actions';
 
-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, []);
+): [AllOrderItem[], () => void, () => void] => {
+  const state = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.consume,
+  );
+  const dispatch = useDispatch();
+
   const fetchData = (
     customerId: number,
     lastOrderId: number,
@@ -31,21 +30,34 @@ const useConsumeOrders = (
     })
       .then(res => {
         lastOrderId
-          ? dispatch({ type: 'appendConsumeOrders', payload: res.data })
-          : dispatch({ type: 'updateConsumeOrders', payload: res.data });
+          ? dispatch(appendConsumeOrders(res.data))
+          : dispatch(updateConsumeOrders(res.data));
         return res.data;
       })
       .catch(err => {
         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;
+      }
+    }
+    dispatch(updateConsumeLastId(0));
+  };
+  const resetOrders = () => {
+    dispatch(updateConsumeLastId(0));
+  };
 
   useEffect(() => {
-    console.log('in fetch');
-
-    fetchData(customerId, lastOrderId, pageSize);
-  }, [customerId, lastOrderId, pageSize]);
+    fetchData(customerId, state.lastOrderId, pageSize);
+  }, [customerId, state.lastOrderId, pageSize]);
 
-  return state;
+  return [state.consumeOrders, fetchMore, resetOrders];
 };
 
 export default useConsumeOrders;

src/pages/Order/OrderList/useRechargeOrders.ts

 import { useEffect, useReducer } from '@tarojs/taro';
 import { fetchRechargeOrders, RechargeOrderItem } from '@/api/order';
-import Actions from '@/types/Store/Actions';
+import { useSelector, useDispatch } from '@tarojs/redux';
+import { OrderStoreState } from './store';
+import {
+  updateRechargeLastId,
+  appendRechargeOrders,
+  updateRechargeOrders,
+} from './actions';
 
-const reducer = (state: RechargeOrderItem[], action: Actions) => {
-  switch (action.type) {
-    case 'updateRechargeOrders':
-      return action.payload;
-    case 'appendRechargeOrders':
-      return [...state, ...action.payload];
-    default:
-      return state;
-  }
-};
 const useRechargeOrders = (
   customerId: number,
-  lastOrderId: number,
   pageSize: number,
-): RechargeOrderItem[] => {
-  const [state, dispatch] = useReducer(reducer, []);
+): [RechargeOrderItem[], () => void, () => void] => {
+  const state = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
+  );
+  const dispatch = useDispatch();
   const fetchData = (
     customerId: number,
     lastOrderId: number,
@@ -30,19 +28,34 @@ const useRechargeOrders = (
     })
       .then(res => {
         lastOrderId
-          ? dispatch({ type: 'appendRechargeOrders', payload: res.data })
-          : dispatch({ type: 'updateRechargeOrders', payload: res.data });
+          ? dispatch(appendRechargeOrders(res.data))
+          : dispatch(updateRechargeOrders(res.data));
         return res.data;
       })
       .catch(err => {
         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;
+      }
+    }
+    dispatch(updateRechargeLastId(0));
+  };
+  const resetOrders = () => {
+    dispatch(updateRechargeLastId(0));
+  };
 
   useEffect(() => {
-    fetchData(customerId, lastOrderId, pageSize);
-  }, [customerId, lastOrderId, pageSize]);
+    fetchData(customerId, state.lastOrderId, pageSize);
+  }, [customerId, state.lastOrderId, pageSize]);
 
-  return state;
+  return [state.rechargeOrders, fetchMore, resetOrders];
 };
 
 export default useRechargeOrders;

src/pages/Order/OrderPay/OrderPay.tsx

@@ -86,8 +86,8 @@ class OrderPay extends Component {
   onShareAppMessage = shareHandle;
 
   componentWillMount() {
-    const data = this.$router.preload;
-    if (data) {
+    const data = this.$router.params;
+    if (data && data.id) {
       this.fetchOrder(data.id);
     }
   }