添加订单查询支付组件

src/app.scss

@@ -103,13 +103,3 @@ button[disabled]:not([type]) {
 .blur {
   filter: blur(10px);
 }
-.OrderBox {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0 32px;
-  z-index: 100;
-  background-color: rgba(255, 255, 255, 0.5);
-}

src/components/WaitPayOrder/WaitPayOrder.scss

+.OrderBox {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 32px;
+  z-index: 100;
+  background-color: rgba(255, 255, 255, 0.5);
+}

src/components/WaitPayOrder/WaitPayOrder.tsx

+import './WaitPayOrder.scss';
+import { View } from '@tarojs/components';
+import OrderTitle from '@/pages/Order/components/OrderTitle/OrderTitle';
+import OrderInfo from '@/pages/Order/components/OrderInfo/OrderInfo';
+import OrderPayway from '@/pages/Order/components/OrderPayway/OrderPayway';
+import useWaitPayOrderState from '@/hooks/useWaitPayOrderState';
+import { useSelector, useDispatch } from '@tarojs/redux';
+import { Customer } from '@/types/Customer/Customer';
+import { updateOrderState } from '@/store/rootReducers/orderState';
+import { PayOrderState } from '@/store/rootReducers/orderState';
+
+const WaitPayOrderComponent = () => {
+  const dispatch = useDispatch();
+  const userinfo = useSelector(
+    (state: { userinfo: Customer }) => state.userinfo,
+  );
+  const payOrderState = useSelector(
+    (state: { orderState: PayOrderState }) =>
+      state.orderState.waitPayOrderState,
+  );
+
+  const { payInfos, accountList, orderInfo } = useWaitPayOrderState(
+    userinfo.customerId,
+  );
+
+  const payDoneHandle = () => {
+    dispatch(updateOrderState(false));
+  };
+
+  return payOrderState ? (
+    <View className='OrderBox'>
+      <OrderTitle price={orderInfo.payableMoney} />
+      <OrderInfo orderInfo={orderInfo} />
+      <OrderPayway
+        onPayDoneCallback={payDoneHandle}
+        userinfo={userinfo}
+        accounts={accountList}
+        orderInfo={orderInfo}
+        payInfos={payInfos}
+      />
+    </View>
+  ) : null;
+};
+
+export default WaitPayOrderComponent;

src/hooks/useAllBeanCount.ts

@@ -21,7 +21,10 @@ let initBeanList: BeanAccount[] = [];
 const useAllBeanCount = (
   userinfo: Customer,
   serviceList: Service[],
-): [BeanAccount[], (userinfo: Customer) => void] => {
+): [
+  BeanAccount[],
+  (customerId: number, areaId: number, customerPhone: string) => void
+] => {
   const [filterBeanList, setFilterBeanList] = useState(initBeanList);
 
   const getFilterBeanList = (
@@ -66,11 +69,15 @@ const useAllBeanCount = (
     return arr;
   };
 
-  const fetchDate = (userinfo: Customer) => {
+  const fetchDate = (
+    customerId: number,
+    areaId: number,
+    customerPhone: string,
+  ) => {
     fetchBeanCount({
-      id: userinfo.customerId,
-      areaId: userinfo.areaId,
-      customerPhone: userinfo.customerPhone,
+      id: customerId,
+      areaId: areaId,
+      customerPhone: customerPhone,
       serviceIdList: [],
     })
       .then(res => {
@@ -82,8 +89,8 @@ const useAllBeanCount = (
   };
 
   useEffect(() => {
-    fetchDate(userinfo);
-  }, [userinfo]);
+    fetchDate(userinfo.customerId, userinfo.areaId, userinfo.customerPhone);
+  }, [userinfo.customerId, userinfo.areaId, userinfo.customerPhone]);
 
   return [filterBeanList, fetchDate];
 };

src/hooks/useRechargePay.ts

-import { useState, useEffect } from '@tarojs/taro';
+import { useEffect, useReducer } from '@tarojs/taro';
 import { fetchPayConfig, PayConfig, PayTypeVo } from '@/api/account';
+import Actions from '@/types/Store/Actions';
 
-let initPayConfigList: PayConfig[] = [];
-let initPaywayList: PayTypeVo[] = [];
+enum FirstRechargeState {
+  isFirstRecharge = 1,
+  notFirstRecharge = 0,
+}
+
+type RechargePayState = {
+  paywayList: PayConfig[];
+  payConfigList: PayTypeVo[];
+  isFirstRecharge: FirstRechargeState;
+};
+
+const reducer = (state: RechargePayState, action: Actions) => {
+  switch (action.type) {
+    case 'updateRechargeInfo':
+      return action.payload;
+    default:
+      return state;
+  }
+};
 
 const usePaywayList = (areaId: number, customerId: number) => {
-  const [paywayList, setPaywayList] = useState(initPaywayList);
-  const [payConfigList, setPayConfigList] = useState(initPayConfigList);
-  const [isFirstRecharge, setIsFirstRecharge] = useState(0);
+  const [state, dispatch] = useReducer(reducer, {
+    paywayList: [],
+    payConfigList: [],
+    isFirstRecharge: 0,
+  });
 
   const fetchDate = (areaId: number, customerId: number) => {
     fetchPayConfig({
@@ -21,9 +41,14 @@ const usePaywayList = (areaId: number, customerId: number) => {
           listPayList,
           listRechargeConfDetail,
         } = res.data;
-        setPayConfigList(listRechargeConfDetail);
-        setPaywayList(listPayList);
-        setIsFirstRecharge(isFirstRecharge);
+        dispatch({
+          type: 'updateRechargeInfo',
+          payload: {
+            isFirstRecharge,
+            payConfigList: listRechargeConfDetail,
+            paywayList: listPayList,
+          },
+        });
       })
       .catch(console.error);
   };
@@ -31,11 +56,7 @@ const usePaywayList = (areaId: number, customerId: number) => {
     fetchDate(areaId, customerId);
   }, [areaId, customerId]);
 
-  return {
-    isFirstRecharge,
-    paywayList,
-    payConfigList,
-  };
+  return state;
 };
 
 export default usePaywayList;

src/hooks/useWaitPayOrderState.ts

-import { Customer } from '@/types/Customer/Customer';
-import { useEffect, useState } from '@tarojs/taro';
+import { useEffect, useReducer } from '@tarojs/taro';
 import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
+import { PaymentAndActiveInfo, CustomerBeanAccountVo } from '@/api/baseClass';
+import Order from '@/types/Order/Order';
+import Actions from '@/types/Store/Actions';
+import { useDispatch } from '@tarojs/redux';
+import { updateOrderState } from '@/store/rootReducers/orderState';
 
-const useWaitPayOrderState = (userinfo: Customer) => {
-  const [payOrderState, setPayOrderState] = useState(false);
-  const [accountList, setAccountList] = useState([]);
-  const [orderInfo, setOrderInfo] = useState(null);
-  const [payInfos, setPayInfos] = useState(null);
+type PayOrderData = {
+  accountList: CustomerBeanAccountVo[];
+  orderInfo: Order;
+  payInfos: {
+    paymentAndActiveInfos: PaymentAndActiveInfo[];
+    paymentConfId: number;
+  };
+};
+const initPayOrderData = {
+  accountList: [],
+  orderInfo: {
+    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: '',
+  },
+  payInfos: {
+    paymentAndActiveInfos: [],
+    paymentConfId: 0,
+  },
+};
+const reducer = (state: PayOrderData, action: Actions) => {
+  switch (action.type) {
+    case 'updateOrderData':
+      return {
+        ...state,
+        ...action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+const useWaitPayOrderState = (customerId: number): PayOrderData => {
+  const [state, dispatch] = useReducer(reducer, initPayOrderData);
+  const dispatchAction = useDispatch();
 
   useEffect(() => {
     fetchPayOrder({
-      customerId: userinfo.customerId,
+      customerId: customerId,
     })
       .then(res => {
         if (res.data.length) {
+          dispatchAction(updateOrderState(true));
+
           fetchOrderDetailAndPay({ id: res.data[0].id })
             .then(({ accounts, orderInfo, payInfos }) => {
-              setAccountList(accounts);
-              setOrderInfo(orderInfo);
-              setPayInfos(payInfos);
+              dispatch({
+                type: 'updateOrderData',
+                payload: {
+                  accountList: accounts,
+                  orderInfo: orderInfo,
+                  payInfos: payInfos,
+                },
+              });
             })
             .catch(err => {
               console.log(err);
             });
-          setPayOrderState(true);
         }
       })
       .catch(err => {
         console.log(err);
       });
-  }, [userinfo]);
+  }, [customerId]);
 
-  return {
-    payOrderState,
-    accountList,
-    orderInfo,
-    payInfos,
-  };
+  return state;
 };
 
 export default useWaitPayOrderState;

src/pages/Account/Account.tsx

@@ -89,7 +89,11 @@ export const AccountComponent = () => {
             })
               .then(res => {
                 console.log(res);
-                fetchNewBeanList(userinfo);
+                fetchNewBeanList(
+                  userinfo.customerId,
+                  userinfo.areaId,
+                  userinfo.customerPhone,
+                );
               })
               .catch(err => {
                 Taro.showToast({

src/store/reducers.ts

@@ -3,10 +3,12 @@ import userinfo from './rootReducers/userinfo';
 import OrderList from '../pages/Order/OrderList/store';
 import ShowerReducer from '@/pages/Shower/store';
 import serviceList from './rootReducers/service';
+import orderState from './rootReducers/orderState';
 
 export default combineReducers({
   userinfo,
   OrderList,
   Shower: ShowerReducer,
   serviceList,
+  orderState,
 });

src/store/rootReducers/orderState.ts

+import Actions from '@/types/Store/Actions';
+
+export type PayOrderState = {
+  waitPayOrderState: boolean;
+};
+
+const INITIAL_STATE = {
+  waitPayOrderState: false,
+};
+
+export const updateOrderState = (state: boolean): Actions => ({
+  type: 'UPDATE_ORDER_STATE',
+  payload: state,
+});
+
+export default function orderState(
+  state: PayOrderState = INITIAL_STATE,
+  action: Actions,
+) {
+  switch (action.type) {
+    case 'UPDATE_ORDER_STATE':
+      return { ...state, waitPayOrderState: action.payload };
+
+    default:
+      return state;
+  }
+}