Merge branch 'develop' into test

package.json

 {
 	"name": "wx-school-app",
-	"version": "1.0.6",
+	"version": "1.0.9",
 	"private": true,
 	"description": "",
 	"scripts": {

src/api/account.ts

@@ -57,3 +57,18 @@ export const rechargeOrder = (
     method: 'POST',
     data: params,
   });
+
+type CreditInfo = {
+  amount: number;
+  areaId: number;
+  operateId: number;
+  showType: string;
+};
+
+export const fetchCreditDeposites = (params: {
+  areaId: number;
+}): Promise<ResponseDataEntity<CreditInfo>> =>
+  baseFetch({
+    url: '/dcxy/api/creditDeposits',
+    data: params,
+  });

src/api/order.ts

-import { customerFetch } from './index';
+import { customerFetch, ResponseDataEntity } from './index';
+import Order from '@/types/Order/Order';
 
 export class Params {
   /** 会员id */
@@ -66,3 +67,99 @@ export const confirmPay = (data: ConfirmpayParams) =>
     url: '/consumeOrder/confirmPay',
     data: data,
   });
+
+type RechargeParams = {
+  customerId: number;
+  lastOrderId?: number;
+  pageSize?: number;
+};
+
+export type RechargeOrder = {
+  /** 充值金额 */
+  actualAmount: number;
+
+  /** 充值后金额 */
+  afterAmount?: number;
+
+  /** 区域id */
+  areaId: number;
+
+  /** 区域名称 */
+  areaName: string;
+
+  /** 充值前金额 */
+  beforeAmount?: number;
+
+  /** 业务类型 APP充值=01  后台充值=02 后台退款=03 割接数据=04 后台平账记录=05 */
+  businessType?: string;
+
+  /** 订单完成时间 */
+  completeAt?: string;
+
+  /** 充值时间 */
+  createAt?: string;
+
+  /** 会员帐号 */
+  customerId: number;
+
+  /** 会员名称 */
+  customerName: string;
+
+  /** 会员手机 */
+  customerPhone: string;
+
+  /** 失败原因 */
+  failReason?: string;
+
+  /** 充值赠送豆数量 */
+  giveMoney?: number;
+
+  /** 操作人 */
+  handler?: string;
+
+  /** 主键id */
+  id: number;
+
+  /** 操作类型 1入账 2出账 */
+  operType?: string;
+
+  /** 运营商Id */
+  operateId: number;
+
+  /** 运营商名称 */
+  operateName: string;
+
+  /** 订单号 (xx：线下,wx：微信支付,zfb：支付宝)+年月日时分秒随机数5位 */
+  orderNum: string;
+
+  /** 订单状态(1:waitingPay待付款、2:paying支付中、3:success支付成功、4:failure支付失败 */
+  orderState?: string;
+
+  /** 支付类型(1:线下支付 2：微信支付 3 ：支付宝支付 4:京东支付 5:招行一网通支付 6:艾米币 7:专用豆 8通用豆) */
+  payType?: string;
+
+  rechargeRemark: string;
+
+  /** 充值赠送服务id */
+  serviceId?: number;
+
+  /** 充值赠送服务名称 */
+  serviceName?: string;
+
+  /** 更新时间 */
+  updateAt?: string;
+};
+
+export type RechargeOrderItem = {
+  data: RechargeOrder[];
+  groupName: string;
+  sortNum: number;
+};
+
+export const fetchRechargeOrders = (
+  data: RechargeParams,
+): Promise<ResponseDataEntity<RechargeOrderItem[]>> =>
+  customerFetch({
+    url: '/dcxy/app/rechargeOrder/pageAllListRecharge',
+    data,
+  });

src/api/shower.ts

-import { showerFetch } from './index';
+import { showerFetch, ResponseDataEntity } from './index';
+
+export enum OperationMode {
+  beanFirst = 1,
+  aimiFirst = 2,
+  onlyAimi = 3,
+}
 
 type ShowerParams = {
   deviceCode: string;
@@ -8,12 +14,15 @@ type ShowerParams = {
 export type DeviceInfoResponse = {
   code: string;
   isOnlyBluetooth: number;
+  operationMode: OperationMode;
   position: string;
 };
 /**
  * 通过设备码获取设备信息
  */
-export const fetchShowerInfo = (params: ShowerParams) =>
+export const fetchShowerInfo = (
+  params: ShowerParams,
+): Promise<ResponseDataEntity<DeviceInfoResponse>> =>
   showerFetch({
     url: `/dcxy/api/shower/devices/${params.deviceCode}`,
     data: params,
@@ -46,3 +55,21 @@ export const startShowerEquipment = (params: StartParams) =>
     method: 'POST',
     data: params,
   });
+type ControllerParams = {
+  customerId: number;
+  campusId: number;
+};
+type ControllerResponse = {
+  beanAmount: number;
+  money: number;
+  thresholdPrompt: string;
+  thresholdValue: number;
+};
+
+export const getShowerController = (
+  params: ControllerParams,
+): Promise<ResponseDataEntity<ControllerResponse>> =>
+  showerFetch({
+    url: '/dcxy/api/shower/controllerConfigs',
+    data: params,
+  });

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,14 @@ let initBeanList: BeanAccount[] = [];
 const useAllBeanCount = (
   userinfo: Customer,
   serviceList: Service[],
-): [BeanAccount[], (userinfo: Customer) => void] => {
+): [
+  BeanAccount[],
+  (
+    customerId: number,
+    areaId: number,
+    customerPhone: string,
+  ) => Promise<CustomerBeanAccountVo[]>
+] => {
   const [filterBeanList, setFilterBeanList] = useState(initBeanList);
 
   const getFilterBeanList = (
@@ -66,24 +73,31 @@ 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 => {
         const data = res.data;
         let list = getFilterBeanList(data);
         setFilterBeanList(list);
+        return data;
       })
-      .catch(console.error);
-  };
+      .catch(err => {
+        console.log(err);
+        throw err;
+      });
 
   useEffect(() => {
-    fetchDate(userinfo);
-  }, [userinfo]);
+    fetchDate(userinfo.customerId, userinfo.areaId, userinfo.customerPhone);
+  }, [userinfo.customerId, userinfo.areaId, userinfo.customerPhone]);
 
   return [filterBeanList, fetchDate];
 };

src/hooks/useCreditDeposits.ts

+import { fetchCreditDeposites } from '@/api/account';
+import { useEffect, useReducer } from '@tarojs/taro';
+import Actions from '@/types/Store/Actions';
+
+type CreditDepositsState = {
+  amount: number; // 金额
+
+  areaId: number; // 区域id
+
+  operateId: number; // 运营商id
+
+  showType: string; //展示类型 1授信额度 2保证金
+};
+
+const reducer = (state: CreditDepositsState, action: Actions) => {
+  switch (action.type) {
+    case 'updateCreditInfo':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+const initState = {
+  amount: 0,
+  areaId: 0,
+  operateId: 0,
+  showType: '',
+};
+
+const useCreditDeposits = (areaId: number): CreditDepositsState => {
+  const [state, dispatch] = useReducer(reducer, initState);
+
+  useEffect(() => {
+    fetchCreditDeposites({
+      areaId: areaId,
+    }).then(res => {
+      if (res.data) {
+        dispatch({ type: 'updateCreditInfo', payload: res.data });
+      }
+    });
+  }, [areaId]);
+
+  return state;
+};
+
+export default useCreditDeposits;

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,
+}
 
-const usePaywayList = (areaId: number, customerId: number) => {
-  const [paywayList, setPaywayList] = useState(initPaywayList);
-  const [payConfigList, setPayConfigList] = useState(initPayConfigList);
-  const [isFirstRecharge, setIsFirstRecharge] = useState(0);
+type RechargePayState = {
+  paywayList: PayTypeVo[];
+  payConfigList: PayConfig[];
+  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,
+): RechargePayState => {
+  const [state, dispatch] = useReducer(reducer, {
+    paywayList: [],
+    payConfigList: [],
+    isFirstRecharge: 0,
+  });
 
   const fetchDate = (areaId: number, customerId: number) => {
     fetchPayConfig({
@@ -21,9 +44,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 +59,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.scss

@@ -5,21 +5,36 @@
     .Account-Card {
       position: relative;
       height: 360px;
-      .Account-Card-Aimi {
+      .Account-Card-money {
         padding: 60px 80px 36px;
         color: #fff;
-        .Account-Card-Aimi-label {
+        display: flex;
+        .Account-Card-label {
           font-size: 24px;
           margin-bottom: 16px;
         }
-        .Account-Card-Aimi-num {
+        .Account-Card-num {
           font-size: 44px;
         }
+        .Account-Card-Aimi {
+          width: 248px;
+        }
+        .Account-Card-credit {
+          position: relative;
+          padding-left: 66px;
+          &::after {
+            content: ' ';
+            position: absolute;
+            top: 46px;
+            left: 0;
+            height: 40px;
+            border-right: 1px solid #b5bffa;
+          }
+        }
       }
       .Account-line {
-        width: 252px;
         border-bottom: 1px solid #b5bffa;
-        margin-left: 40px;
+        margin: 0 40px;
       }
       .Account-Card-Bean {
         padding: 30px 40px 0;
@@ -51,15 +66,18 @@
     // justify-content: space-between;
     flex-wrap: wrap;
     .Account-Money-Item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       box-sizing: border-box;
       width: 218px;
       height: 160px;
-      line-height: 160px;
       text-align: center;
       border: 4px solid #e6ebfd;
       border-radius: 24px;
       margin-bottom: 20px;
       margin-right: 15px;
+      font-size: 32px;
       &:nth-child(3n + 3) {
         margin-right: 0;
       }
@@ -68,6 +86,9 @@
         border-color: #6180f4;
         color: #fff;
       }
+      .giveText {
+        font-size: 24px;
+      }
     }
   }
   .Account-Payway {

src/pages/Account/Account.tsx

@@ -21,6 +21,7 @@ import AES from 'crypto-js/aes';
 import Utf8 from 'crypto-js/enc-utf8';
 import ECBmode from 'crypto-js/mode-ecb';
 import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
+import useCreditDeposits from '@/hooks/useCreditDeposits';
 
 enum PaywayCode {
   wx = 2,
@@ -44,6 +45,7 @@ export const AccountComponent = () => {
     userinfo,
     serviceList,
   );
+  const creditInfo = useCreditDeposits(userinfo.areaId);
 
   const clickPayBtn = () => {
     if (!payConfigId) {
@@ -61,6 +63,7 @@ export const AccountComponent = () => {
       return;
     }
     console.log('in recharge');
+    let preAimiItem = filterBeanList.find(item => item.serviceId === '0');
     rechargeOrder({
       id: payConfigId,
       customerId: userinfo.customerId,
@@ -89,7 +92,31 @@ export const AccountComponent = () => {
             })
               .then(res => {
                 console.log(res);
-                fetchNewBeanList(userinfo);
+                fetchNewBeanList(
+                  userinfo.customerId,
+                  userinfo.areaId,
+                  userinfo.customerPhone,
+                )
+                  .then(beanAccount => {
+                    console.log(beanAccount);
+                    let aimiItem = beanAccount.find(
+                      item => item.serviceId === '0',
+                    );
+                    if (
+                      aimiItem &&
+                      aimiItem.money &&
+                      preAimiItem &&
+                      preAimiItem.money &&
+                      aimiItem.money === preAimiItem.money
+                    ) {
+                      Taro.showModal({
+                        title: '提示',
+                        content:
+                          '由于网络原因，本次充值可能延迟到账，请稍后查看余额',
+                      });
+                    }
+                  })
+                  .catch(console.error);
               })
               .catch(err => {
                 Taro.showToast({
@@ -118,19 +145,26 @@ export const AccountComponent = () => {
       <View className='Account-Card-warp'>
         <View className='Account-Card'>
           <Image className='bg' src={AccountCardBg} />
-          <View className='Account-Card-Aimi'>
-            <View className='Account-Card-Aimi-label'>艾米余额</View>
-
-            {filterBeanList.length &&
-              filterBeanList.map(beanItem =>
-                beanItem.serviceId === BeanType.aimi ? (
-                  <View
-                    key={beanItem.serviceId}
-                    className='Account-Card-Aimi-num'>
-                    {beanItem.money.toFixed(2)}
-                  </View>
-                ) : null,
-              )}
+          <View className='Account-Card-money'>
+            <View className='Account-Card-Aimi'>
+              <View className='Account-Card-label'>艾米余额</View>
+              {filterBeanList.length &&
+                filterBeanList.map(beanItem =>
+                  beanItem.serviceId === BeanType.aimi ? (
+                    <View key={beanItem.serviceId} className='Account-Card-num'>
+                      {beanItem.money.toFixed(2)}
+                    </View>
+                  ) : null,
+                )}
+            </View>
+            {creditInfo.showType && (
+              <View className='Account-Card-credit'>
+                <View className='Account-Card-label'>
+                  {creditInfo.showType == '1' ? '我的授信' : '我的保证金'}
+                </View>
+                <View className='Account-Card-num'>{creditInfo.amount}</View>
+              </View>
+            )}
           </View>
           <View className='Account-line' />
 
@@ -191,7 +225,13 @@ export const AccountComponent = () => {
               payConfigId === item.id ? 'selected' : ''
             }`}
             onClick={() => setPayConfigId(item.id)}>
-            {item.rechargeMoney.toFixed(2)}元
+            <View>{item.rechargeMoney.toFixed(2)}元</View>
+            {item.giveId && (
+              <View className='giveText'>
+                送{item.giveName}
+                {item.giveMoney}个
+              </View>
+            )}
           </View>
         ))}
       </View>

src/pages/BarCode/BarCode.tsx

@@ -10,19 +10,13 @@ import wxbarcode from 'wxbarcode';
 
 import './BarCode.scss';
 import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
-import { connect } from '@tarojs/redux';
-import { fetchPayOrder, fetchOrderDetailAndPay } from '../../api/order';
-import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
-import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
-import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
-import {
-  PaymentAndActiveInfo,
-  CustomerBeanAccountVo,
-} from '../../api/baseClass';
+import { connect, useSelector } from '@tarojs/redux';
 import { Customer } from '../../types/Customer/Customer';
 import { refreshCodeBar } from '../../api/customer';
-import Order from '@/types/Order/Order';
 import { shareHandle } from '@/common/shareMethod';
+import { PayOrderState } from '@/store/rootReducers/orderState';
+import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
+import widthWaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
 
 type PageStateProps = {
   userinfo: Customer;
@@ -34,25 +28,7 @@ type PageDispatchProps = {
 type PageOwnProps = {};
 type PageState = {
   ScreenBrightness: number;
-  showPayOrder: boolean;
   showBig: boolean;
-  accounts: CustomerBeanAccountVo[];
-  orderInfo: Order;
-  payInfos: {
-    paymentAndActiveInfos: PaymentAndActiveInfo[];
-    paymentConfId: number;
-  };
-  deductionInfos: {
-    amiAccount: number;
-    beanAccount: number;
-    deductionMoney: number;
-    deductionType: string;
-    orderMoney: number;
-    payMoney: number;
-    payType: string;
-    remainAccount: number;
-    titlePerfix: string;
-  };
   showBackTag: boolean;
 };
 
@@ -77,74 +53,14 @@ class BarCode extends Component {
     super(props);
     this.state = {
       ScreenBrightness: 1,
-      showPayOrder: false,
       showBig: false,
-      accounts: [],
-      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,
-      },
-      deductionInfos: {
-        amiAccount: 0,
-        beanAccount: 0,
-        deductionMoney: 0,
-        deductionType: '',
-        orderMoney: 0,
-        payMoney: 0,
-        payType: '',
-        remainAccount: 0,
-        titlePerfix: '',
-      },
       showBackTag: false,
     };
   }
   onShareAppMessage = shareHandle;
 
   componentWillMount() {
-    const { userinfo } = this.props;
-    fetchPayOrder({
-      customerId: userinfo.customerId,
-    })
-      .then(res => {
-        if (res.data.length) {
-          this.fetchOrder(res.data[0].id);
-          this.setState({ showPayOrder: true });
-        } else {
-          this.drawBarCode();
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
+    this.drawBarCode();
     console.log('调整亮度');
     Taro.getScreenBrightness()
       .then(({ value }) => {
@@ -194,33 +110,6 @@ class BarCode extends Component {
     }
   }
 
-  fetchOrder(id: number) {
-    return fetchOrderDetailAndPay({
-      id,
-    })
-      .then(res => {
-        const { accounts, orderInfo, payInfos } = res;
-        this.setState({
-          accounts: accounts,
-          orderInfo: orderInfo,
-          payInfos: payInfos,
-        });
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-
-  payDoneHandle() {
-    this.setState(
-      {
-        showPayOrder: false,
-      },
-      () => {
-        this.drawBarCode();
-      },
-    );
-  }
   drawBarCode() {
     const { userinfo } = this.props;
     const routeParams = this.$router.params;
@@ -248,6 +137,7 @@ class BarCode extends Component {
       showBig: !showBig,
     });
   }
+
   refreshCodeBar() {
     const { updateUserInfo } = this.props;
     refreshCodeBar()
@@ -268,31 +158,16 @@ class BarCode extends Component {
   }
 
   render() {
-    const { userinfo } = this.props;
-    const {
-      showPayOrder,
-      showBig,
-      orderInfo,
-      payInfos,
-      accounts,
-      showBackTag,
-    } = this.state;
+    const { showBig, showBackTag } = this.state;
+    const payOrderState = useSelector(
+      (state: { orderState: PayOrderState }) =>
+        state.orderState.waitPayOrderState,
+    );
+
     return (
       <View className='BarCode'>
-        {showPayOrder && (
-          <View className='OrderBox'>
-            <OrderTitle price={orderInfo.payableMoney} />
-            <OrderInfo orderInfo={orderInfo} />
-            <OrderPayway
-              onPayDoneCallback={this.payDoneHandle}
-              userinfo={userinfo}
-              accounts={accounts}
-              orderInfo={orderInfo}
-              payInfos={payInfos}
-            />
-          </View>
-        )}
-        <View className={showPayOrder ? 'blur' : ''}>
+        <WaitPayOrderComponent />
+        <View className={payOrderState ? 'blur' : ''}>
           {showBackTag && (
             <View className='BackTag' onClick={this.goBackPage}>
               <Image className='icon' src={CodeIcon} />
@@ -305,18 +180,16 @@ class BarCode extends Component {
               src={RefreshIcon}
               onClick={this.refreshCodeBar}
             />
-            {showPayOrder ? null : (
-              <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
-                <Canvas
-                  className={`BarCodeCav ${showBig ? 'show' : ''}`}
-                  canvasId='BarCodeBig'
-                />
-                <Canvas
-                  className={`BarCodeCav ${showBig ? '' : 'show'}`}
-                  canvasId='BarCode'
-                />
-              </View>
-            )}
+            <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
+              <Canvas
+                className={`BarCodeCav ${showBig ? 'show' : ''}`}
+                canvasId='BarCodeBig'
+              />
+              <Canvas
+                className={`BarCodeCav ${showBig ? '' : 'show'}`}
+                canvasId='BarCode'
+              />
+            </View>
             <View className='toggleBtn' onClick={this.toggleBigBarCode}>
               <Image
                 className={`arricon ${showBig ? 'rever' : ''}`}
@@ -333,4 +206,4 @@ class BarCode extends Component {
   }
 }
 
-export default BarCode as ComponentClass<PageOwnProps, PageState>;
+export default BarCode;

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;
+const OrderDetail = () => {
+  const {
+    actualMoney,
+    payableMoney,
+    deductionBean,
+    payType,
+    createAt,
+    thirdTradeNumber,
+    serviceName,
+    orderNumber,
+    areaName,
+    equipmentNum,
+    equipmentPosition,
+    deductionMoney,
+    thirdDiscountMoney,
+  } = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.selectedOrder,
+  );
 
-  componentWillMount() {
-    console.log('preload: ', this.$router.preload);
-    const data = this.$router.preload;
-    this.setState({
-      ...data,
-    });
-    // this.getDetailInfo(id);
-  }
+  const payTypeName = getPayType(payType);
 
-  getDetailInfo(id: number) {
-    return fetchOrderDetailAndPay({
-      id: id,
-    })
-      .then(res => {
-        this.setState({
-          ...res.data,
-        });
-        console.log(res);
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  render() {
-    const {
-      actualMoney,
-      payableMoney,
-      deductionBean,
-      payType,
-      createAt,
-      thirdTradeNumber,
-      serviceName,
-      orderNumber,
-      areaName,
-      equipmentNum,
-      equipmentPosition,
-      deductionMoney,
-      thirdDiscountMoney,
-    } = this.state;
-    const payTypeName = getPayType(payType);
-    return (
-      <View className='OrderDetail'>
-        <OrderTitle price={payableMoney} />
-        <OrderInfo
-          orderInfo={{
-            serviceName,
-            createAt,
-            orderNumber,
-            areaName,
-            equipmentNum,
-            equipmentPosition,
-          }}
-        />
-        <View className='OrderDetail-line' />
+  return (
+    <View className='OrderDetail'>
+      <OrderTitle price={payableMoney} />
+      <OrderInfo
+        orderInfo={{
+          serviceName,
+          createAt,
+          orderNumber,
+          areaName,
+          equipmentNum,
+          equipmentPosition,
+        }}
+      />
+      <View className='OrderDetail-line' />
+      <View className='OrderDetail-payinfo'>
+        <Text>支付金额</Text>
+        <Text>{actualMoney.toFixed(2)}</Text>
+      </View>
+      {deductionBean ? (
         <View className='OrderDetail-payinfo'>
-          <Text>支付金额</Text>
-          <Text>{actualMoney.toFixed(2)}</Text>
+          <Text>{serviceName ? serviceName : ''}豆抵扣</Text>
+          <Text className='deduction'>{deductionBean.toFixed(2)}</Text>
         </View>
-        {deductionBean ? (
-          <View className='OrderDetail-payinfo'>
-            <Text>{serviceName ? serviceName : ''}豆抵扣</Text>
-            <Text className='deduction'>{deductionBean.toFixed(2)}</Text>
-          </View>
-        ) : null}
-        {deductionMoney ? (
-          <View className='OrderDetail-payinfo'>
-            <Text>艾米抵扣</Text>
-            <Text className='deduction'>{deductionMoney.toFixed(2)}</Text>
-          </View>
-        ) : null}
-        {thirdDiscountMoney ? (
-          <View className='OrderDetail-payinfo'>
-            <Text>三方抵扣</Text>
-            <Text className='deduction'>{thirdDiscountMoney.toFixed(2)}</Text>
-          </View>
-        ) : null}
-
+      ) : null}
+      {deductionMoney ? (
         <View className='OrderDetail-payinfo'>
-          <Text>支付方式</Text>
-          <Text>{payTypeName}</Text>
+          <Text>艾米抵扣</Text>
+          <Text className='deduction'>{deductionMoney.toFixed(2)}</Text>
         </View>
+      ) : null}
+      {thirdDiscountMoney ? (
         <View className='OrderDetail-payinfo'>
-          <Text>支付时间</Text>
-          <Text>{createAt}</Text>
+          <Text>三方抵扣</Text>
+          <Text className='deduction'>{thirdDiscountMoney.toFixed(2)}</Text>
         </View>
-        {thirdTradeNumber ? (
-          <View className='OrderDetail-payinfo'>
-            <Text>交易单号</Text>
-            <Text>{thirdTradeNumber}</Text>
-          </View>
-        ) : null}
+      ) : null}
+
+      <View className='OrderDetail-payinfo'>
+        <Text>支付方式</Text>
+        <Text>{payTypeName}</Text>
       </View>
-    );
-  }
-}
+      <View className='OrderDetail-payinfo'>
+        <Text>支付时间</Text>
+        <Text>{createAt}</Text>
+      </View>
+      {thirdTradeNumber ? (
+        <View className='OrderDetail-payinfo'>
+          <Text>交易单号</Text>
+          <Text>{thirdTradeNumber}</Text>
+        </View>
+      ) : 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 } from '@tarojs/taro';
+import Taro, { Component, Config, useState, useEffect } from '@tarojs/taro';
 import { View, Text, ScrollView } from '@tarojs/components';
-import { connect } from '@tarojs/redux';
+import { connect, useSelector, useDispatch } 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, 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, updateConsumeOrders } from './actions';
 
 type PageStateProps = {
-  orderList: StoreState;
   userinfo: Customer;
 };
 type PageDispatchProps = {
-  toggleOrderState: (state: String) => void;
-  updatePayOrder: (entity: UpdateOrderParams<Order>) => void;
-  updateAllOrder: (entity: UpdateOrderParams<AllOrderItem>) => void;
+  selectOrder: (entity: Order) => void;
+  updateConsumeOrders: (entity: AllOrderItem[]) => void;
 };
-
 type PageOwnProps = {};
 
 type PageProps = PageStateProps & PageDispatchProps & PageOwnProps;
@@ -41,21 +35,16 @@ interface OrderList {
   props: PageProps;
   state: PageState;
 }
-
 @connect(
-  ({ OrderList, userinfo }) => ({
-    orderList: OrderList,
-    userinfo,
+  state => ({
+    userinfo: state.userinfo,
   }),
   dispatch => ({
-    toggleOrderState(state: String) {
-      dispatch(toggleOrderState(state));
-    },
-    updatePayOrder(data) {
-      dispatch(updatePayOrderList(data));
+    selectOrder(data: Order) {
+      dispatch(selectOrder(data));
     },
-    updateAllOrder(data) {
-      dispatch(updateAllOrderList(data));
+    updateConsumeOrders(data: AllOrderItem[]) {
+      dispatch(updateConsumeOrders(data));
     },
   }),
 )
@@ -64,201 +53,199 @@ class OrderList extends Component {
     navigationBarTitleText: '订单',
     enablePullDownRefresh: true,
   };
+  onShareAppMessage = shareHandle;
+
   constructor(props: PageProps) {
     super(props);
     this.state = {
       needRefresh: false,
     };
   }
-  onShareAppMessage = shareHandle;
 
-  componentWillMount() {
-    this.getPayOrderHandle();
-    this.getAllOrderHandle();
-  }
+  // componentWillMount() {
+  //   this.getAllOrderHandle();
+  // }
   componentDidShow() {
     const { needRefresh } = this.state;
-    if (needRefresh) {
-      this.getPayOrderHandle();
-      this.getAllOrderHandle();
-    }
-  }
-
-  onPullDownRefresh() {
-    console.log('in onPullDownRefresh');
-    const {
-      orderList: { orderState },
-    } = this.props;
-    if (orderState === '1') {
-      this.getPayOrderHandle().then(() => {
-        Taro.stopPullDownRefresh();
-      });
-    } else {
-      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,
+      updateConsumeOrders,
     } = 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 });
+    if (needRefresh) {
+      fetchAllOrder({
+        customerId,
+        pageSize: 10,
       })
-      .catch(console.error);
+        .then(res => {
+          updateConsumeOrders(res.data);
+        })
+        .catch(err => {
+          Taro.showToast({
+            title: err.msg || '请求失败',
+            icon: 'none',
+          });
+        });
+      // this.getAllOrderHandle();
+    }
   }
 
-  goPayPage(data) {
+  // const onPullDownRefresh = () => {
+  //   console.log('in onPullDownRefresh');
+  //   this.getAllOrderHandle().then(() => {
+  //     Taro.stopPullDownRefresh();
+  //   });
+  // };
+  goPayPage = (data: Order) => {
+    const { selectOrder } = this.props;
+    // dispatch(selectOrder(data));
+    // setNeedRefresh(true);
+    selectOrder(data);
     this.setState({
       needRefresh: true,
     });
-    this.$preload({ id: data.id });
     Taro.navigateTo({
-      url: '/pages/Order/OrderPay/OrderPay',
+      url: `/pages/Order/OrderPay/OrderPay?id=${data.id}`,
     });
-  }
-  goDetail(data) {
+  };
+  goDetail = (data: Order) => {
+    const { selectOrder } = this.props;
+    // dispatch(selectOrder(data));
+    // setNeedRefresh(false);
+    selectOrder(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: { orderState, payList, allList },
-    } = this.props;
-    console.log('in moreList ' + orderState);
-    if (orderState === '1') {
-      this.getPayOrderHandle(payList[payList.length - 1].id);
-    } else {
-      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: { orderState, payList, allList },
+      userinfo: { customerId },
     } = 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 ${orderState === '1' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('1')}>
-            待付款
+            className={`Tab-item ${orderType === 0 ? 'active' : ''}`}
+            onClick={() => setOrderType(0)}>
+            消费
           </Text>
           <Text
-            className={`Tab-item ${orderState === 'all' ? 'active' : ''}`}
-            onClick={() => this.toggleStateHandle('all')}>
-            全部
+            className={`Tab-item ${orderType === 1 ? 'active' : ''}`}
+            onClick={() => setOrderType(1)}>
+            充值
           </Text>
         </View>
-        <ScrollView
-          className='OrderList-Content'
-          scrollY
-          onScrollToUpper={this.refreshList}
-          onScrollToLower={this.fetchMoreList}
-          upperThreshold={-100}
-          lowerThreshold={70}
-          scrollWithAnimation
-          scrollTop={0}>
-          {orderState === '1'
-            ? payList.map(order => (
-                <OrderItem
-                  key={order.id}
-                  data={order}
-                  onGoDetail={this.goDetail}
-                  onPayHandle={this.goPayPage}
-                />
-              ))
-            : allList.map((allItem, index) => (
-                <View key={allItem.groupName} className='OrderList-Group'>
-                  <View className='OrderList-GroupTitle'>
-                    <View className='OrderList-GroupName'>
-                      {allItem.groupName}
-                    </View>
-                    {index === 0 && <Text>只保留最近三个月消费订单数据</Text>}
+        {orderType === 0 ? (
+          <ScrollView
+            className='OrderList-Content'
+            scrollY
+            onScrollToUpper={() => resetConsumeOrders()}
+            onScrollToLower={onConsumeScrollToLower}
+            upperThreshold={-100}
+            lowerThreshold={70}
+            scrollWithAnimation
+            scrollTop={0}>
+            {consumeOrders.map((allItem, index) => (
+              <View key={allItem.groupName} className='OrderList-Group'>
+                <View className='OrderList-GroupTitle'>
+                  <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}
+                  />
+                ))}
+              </View>
+            ))}
+          </ScrollView>
+        ) : (
+          <ScrollView
+            className='OrderList-Content'
+            scrollY
+            onScrollToUpper={() => resetRechargeOrders()}
+            onScrollToLower={onRechargeScrollToLower}
+            upperThreshold={-100}
+            lowerThreshold={70}
+            scrollWithAnimation
+            scrollTop={0}>
+            {rechargeOrders.map(reChargeItem => (
+              <View key={reChargeItem.groupName} className='OrderList-Group'>
+                <View className='OrderList-GroupTitle'>
+                  <View className='OrderList-GroupName'>
+                    {reChargeItem.groupName}
                   </View>
-                  {allItem.data.map(order => (
-                    <OrderItem
-                      key={order.id}
-                      data={order}
-                      onGoDetail={this.goDetail}
-                      onPayHandle={this.goPayPage}
-                    />
-                  ))}
+                  {/* {index === 0 && <Text>只保留最近三个月充值订单数据</Text>} */}
                 </View>
-              ))}
-        </ScrollView>
+                {reChargeItem.data.map(order => (
+                  <RechargeItem key={order.id} data={order} />
+                ))}
+              </View>
+            ))}
+          </ScrollView>
+        )}
       </View>
     );
   }
 }
 
-export default OrderList as ComponentClass<PageOwnProps>;
+export default OrderList;

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 StoreState {
-  orderState: String;
-  payList: Order[];
-  allList: AllOrderItem[];
+export interface OrderStoreState {
+  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: '1',
-  payList: [],
-  allList: [],
+  selectedOrder: initOrder(),
+  consume: {
+    consumeOrders: [],
+    lastOrderId: 0,
+  },
+  recharge: {
+    rechargeOrders: [],
+    lastOrderId: 0,
+  },
 };
 
 export default function OrderList(
-  state: StoreState = INITIAL_STATE,
-  actions: Actions
+  state: OrderStoreState = INITIAL_STATE,
+  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) {
-        return {
-          ...state,
-          payList: [...state.payList, ...actions.payload.list],
-        };
-      } else {
-        return {
-          ...state,
-          payList: actions.payload.list,
-        };
-      }
-    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) {
-            return {
-              ...state,
-              allList: [
-                ...state.allList.slice(0, index),
-                {
-                  groupName: state.allList[index].groupName,
-                  data: [
-                    ...state.allList[index].data,
-                    ...actions.payload.list[0].data,
-                  ],
-                },
-                ...actions.payload.list.slice(1),
-              ],
-            };
-          }
-
-          return {
-            ...state,
-            allList: [...state.allList, ...actions.payload.list],
-          };
-        }
-        return state;
-      }
+    case UPDATE_CONSUME_ORDERS:
+      return {
+        ...state,
+        consume: {
+          ...state.consume,
+          consumeOrders: actions.payload,
+        },
+      };
+    case APPEND_CONSUME_ORDERS:
+      return {
+        ...state,
+        consume: {
+          ...state.consume,
+          consumeOrders: [...state.consume.consumeOrders, ...actions.payload],
+        },
+      };
+    case UPDATE_CONSUME_LASTID:
+      return {
+        ...state,
+        consume: {
+          ...state.consume,
+          lastOrderId: actions.payload,
+        },
+      };
+    case UPDATE_RECHARGE_ORDERS:
+      return {
+        ...state,
+        recharge: {
+          ...state.recharge,
+          rechargeOrders: actions.payload,
+        },
+      };
+    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 } from '@tarojs/taro';
+import { fetchAllOrder } from '@/api/order';
+import { AllOrderItem } from '@/types/Order/Order';
+import { useSelector, useDispatch } from '@tarojs/redux';
+import { OrderStoreState } from './store';
+import {
+  appendConsumeOrders,
+  updateConsumeOrders,
+  updateConsumeLastId,
+} from './actions';
+
+const useConsumeOrders = (
+  customerId: number,
+  pageSize: number,
+): [AllOrderItem[], () => Promise<any>, () => Promise<any>] => {
+  const state = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.consume,
+  );
+  const dispatch = useDispatch();
+
+  const fetchData = (customerId: number, pageSize: number) =>
+    fetchAllOrder({
+      customerId,
+      lastOrderId: state.lastOrderId,
+      pageSize,
+    })
+      .then(res => {
+        state.lastOrderId
+          ? 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 fetchData(customerId, pageSize);
+      }
+    }
+    dispatch(updateConsumeLastId(0));
+    return fetchData(customerId, pageSize);
+  };
+  const resetOrders = () => {
+    dispatch(updateConsumeLastId(0));
+    return fetchData(customerId, pageSize);
+  };
+
+  useEffect(() => {
+    fetchData(customerId, pageSize);
+  }, [customerId, pageSize]);
+
+  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 { useSelector, useDispatch } from '@tarojs/redux';
+import { OrderStoreState } from './store';
+import {
+  updateRechargeLastId,
+  appendRechargeOrders,
+  updateRechargeOrders,
+} from './actions';
+
+const useRechargeOrders = (
+  customerId: number,
+  pageSize: number,
+): [RechargeOrderItem[], () => Promise<any>, () => Promise<any>] => {
+  const state = useSelector(
+    (state: { OrderList: OrderStoreState }) => state.OrderList.recharge,
+  );
+  const dispatch = useDispatch();
+  const fetchData = (customerId: number, pageSize: number) =>
+    fetchRechargeOrders({
+      customerId,
+      lastOrderId: state.lastOrderId,
+      pageSize,
+    })
+      .then(res => {
+        state.lastOrderId
+          ? 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 fetchData(customerId, pageSize);
+      }
+    }
+    dispatch(updateRechargeLastId(0));
+    return fetchData(customerId, pageSize);
+  };
+  const resetOrders = () => {
+    dispatch(updateRechargeLastId(0));
+    return fetchData(customerId, pageSize);
+  };
+
+  useEffect(() => {
+    fetchData(customerId, pageSize);
+  }, [customerId, pageSize]);
+
+  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);
     }
   }

src/pages/Order/components/RechargeItem/RechargeItem.scss

+.RechargeItem {
+  position: relative;
+  box-sizing: border-box;
+  width: 702px;
+  margin: 20px auto;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 19px 26px 15px;
+  font-size: 26px;
+  .RechargeItem-text {
+    height: 54px;
+    line-height: 54px;
+  }
+  .RechargeItem-price {
+    position: absolute;
+    top: 18px;
+    right: 26px;
+    font-size: 36px;
+  }
+  .RechargeItem-price.topay {
+    color: #ff4e4e;
+  }
+  .RechargeItem-toPay {
+    position: absolute;
+    top: 66px;
+    right: 26px;
+    font-size: 24px;
+    color: #6180f4;
+  }
+  .RechargeItem-payDone {
+    position: absolute;
+    width: 102px;
+    height: 94px;
+    right: 10px;
+    bottom: 10px;
+  }
+}

src/pages/Order/components/RechargeItem/RechargeItem.tsx

+import Taro from '@tarojs/taro';
+import { View, Text, Image } from '@tarojs/components';
+import payDoneImg from '../../../../images/order/dingdan_yiwancheng_img@2x.png';
+import './RechargeItem.scss';
+import { RechargeOrder } from '@/api/order';
+
+const RechargeItem = (props: { data: RechargeOrder }) => {
+  const {
+    data: { createAt, rechargeRemark, actualAmount, orderNum },
+  } = props;
+
+  return (
+    <View className='RechargeItem'>
+      <View className='RechargeItem-text'>
+        <Text>充值说明：</Text>
+        <Text>{rechargeRemark}</Text>
+      </View>
+      <View className='RechargeItem-text'>
+        <Text>充值时间：</Text>
+        <Text>{createAt}</Text>
+        <Image className='RechargeItem-payDone' src={payDoneImg} />
+      </View>
+      <View className='RechargeItem-text'>
+        <Text>订单编号：</Text>
+        <Text>{orderNum}</Text>
+      </View>
+      <View
+        className={`RechargeItem-price ${actualAmount >= 0 ? 'topay' : ''}`}>
+        ￥ {actualAmount}
+      </View>
+    </View>
+  );
+};
+
+RechargeItem.defaultProps = {
+  data: {
+    actualAmount: 0,
+    afterAmount: 0,
+    areaId: 0,
+    areaName: '',
+    beforeAmount: 0,
+    businessType: '',
+    completeAt: '',
+    createAt: '',
+    customerId: 0,
+    customerName: '',
+    customerPhone: '',
+    failReason: '',
+    giveMoney: 0,
+    handler: '',
+    id: 0,
+    operType: '',
+    operateId: 0,
+    operateName: '',
+    orderNum: '',
+    orderState: '',
+    payType: '',
+    rechargeRemark: '',
+    serviceName: '',
+    updateAt: '',
+  },
+};
+
+export default RechargeItem;

src/pages/Shower/Shower.tsx

@@ -12,25 +12,23 @@ import {
   DeviceInfoResponse,
   startShowerEquipment,
   fetchUsingShowerInfo,
+  getShowerController,
+  OperationMode,
 } from '@/api/shower';
-import { connect } from '@tarojs/redux';
+import { connect, useSelector } from '@tarojs/redux';
 import { Customer } from '@/types/Customer/Customer';
 import { ComponentClass } from 'react';
-import { ResponseDataEntity } from '@/api';
 import { connectSocket } from '@/api/socket';
 import { SOCKET_URL } from '@/constants';
 import { BluetoothDevice } from '@/types/Shower/Shower';
 import { updateBluetoothDevice } from './actions';
 import { ab2str, str2ab } from '@/utils/arrayBuffer';
-import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
-import Order from '@/types/Order/Order';
-import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
-import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
-import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
-import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
+import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
+import { PayOrderState } from '@/store/rootReducers/orderState';
 
 enum BlueToothError {
   BlueToothNotOpen = 'BlueToothNotOpen',
+  DeviceNotFound = 'DeviceNotFound',
 }
 
 type DeviceInfo = {
@@ -58,14 +56,6 @@ type PageState = {
   sockedDone: boolean;
   deviceDone: boolean;
   showerState: boolean;
-
-  showPayOrder: boolean;
-  accounts: CustomerBeanAccountVo[];
-  orderInfo: Order;
-  payInfos: {
-    paymentAndActiveInfos: PaymentAndActiveInfo[];
-    paymentConfId: number;
-  };
 };
 const StopCode = 1000;
 
@@ -74,7 +64,7 @@ interface Shower {
   state: PageState;
 }
 
-let timer: number | null = null;
+let timer: NodeJS.Timeout | null = null;
 let reConnectting: boolean = false;
 let socketTask: Taro.SocketTask | null = null;
 @connect(
@@ -109,49 +99,12 @@ class Shower extends Component {
         writeId: '',
         readId: '',
       },
-
-      showPayOrder: false,
-      accounts: [],
-      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,
-      },
     };
   }
 
   onShareAppMessage = shareHandle;
 
   componentWillMount() {
-    this.getPayState();
     this.openBluetooth();
     this.connectDeviceSocket();
     this.checkUsingDevice();
@@ -165,43 +118,6 @@ class Shower extends Component {
     reConnectting = false;
   }
 
-  getPayState() {
-    const { userinfo } = this.props;
-    fetchPayOrder({
-      customerId: userinfo.customerId,
-    })
-      .then(res => {
-        if (res.data.length) {
-          this.fetchOrder(res.data[0].id);
-          this.setState({ showPayOrder: true });
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  fetchOrder(id: number) {
-    return fetchOrderDetailAndPay({
-      id,
-    })
-      .then(res => {
-        const { accounts, orderInfo, payInfos } = res;
-        this.setState({
-          accounts: accounts,
-          orderInfo: orderInfo,
-          payInfos: payInfos,
-        });
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  payDoneHandle() {
-    this.setState({
-      showPayOrder: false,
-    });
-  }
-
   connectDeviceSocket() {
     connectSocket(SOCKET_URL).then(task => {
       socketTask = task;
@@ -417,12 +333,13 @@ class Shower extends Component {
           customerId: userinfo.customerId.toString(),
           campusId: userinfo.areaId,
         })
-          .then((res: ResponseDataEntity<DeviceInfoResponse>) => {
+          .then(res => {
             const data = res.data;
             updateBluetoothDevice({
               code: data.code,
               isOnlyBluetooth: data.isOnlyBluetooth,
               position: data.position,
+              operationMode: data.operationMode,
             });
           })
           .catch(err => {
@@ -447,17 +364,15 @@ class Shower extends Component {
       return Taro.startBluetoothDevicesDiscovery()
         .then(() => {
           const { code, isOnlyBluetooth } = this.props.bluetoothDevice;
-          let timer: number | null = null;
-          return new Promise(resolve => {
+          let timer: NodeJS.Timeout | null = null;
+          return new Promise((resolve, reject) => {
             if (isOnlyBluetooth) {
               timer = setTimeout(() => {
-                Taro.stopBluetoothDevicesDiscovery();
-                this.sendStartShower();
+                reject({ msg: BlueToothError.DeviceNotFound });
               }, 10000);
             } else {
               timer = setTimeout(() => {
-                Taro.stopBluetoothDevicesDiscovery();
-                this.sendStartShower();
+                reject({ msg: BlueToothError.DeviceNotFound });
               }, 5000);
             }
             Taro.onBluetoothDeviceFound(res => {
@@ -478,9 +393,18 @@ class Shower extends Component {
         })
         .catch(err => {
           // Taro.stopBluetoothDevicesDiscovery();
+          if (timer) {
+            clearInterval(timer);
+          }
           Taro.hideLoading();
           console.error('startBluetoothDevicesDiscovery: ', err);
-          this.warnBluetoothOpen();
+          // if (err.msg === BlueToothError.DeviceNotFound) {
+          Taro.stopBluetoothDevicesDiscovery();
+          this.sendStartShower();
+          throw err;
+          // } else {
+          //   return this.warnBluetoothOpen();
+          // }
         });
     } else {
       Taro.hideLoading();
@@ -735,6 +659,63 @@ class Shower extends Component {
     });
   }
 
+  checkUserMonry() {
+    const { userinfo } = this.props;
+    return getShowerController({
+      customerId: userinfo.customerId,
+      campusId: userinfo.areaId,
+    })
+      .then(res => {
+        console.log(res);
+        const {
+          bluetoothDevice: { operationMode },
+        } = this.props;
+        const { thresholdValue, thresholdPrompt, money, beanAmount } = res.data;
+        if (thresholdValue) {
+          if (
+            operationMode === OperationMode.onlyAimi &&
+            money < thresholdValue
+          ) {
+            return this.userWarnningHandle(thresholdPrompt, money, beanAmount);
+          }
+          if (
+            (operationMode === OperationMode.aimiFirst ||
+              operationMode === OperationMode.beanFirst) &&
+            money + beanAmount < thresholdValue
+          ) {
+            return this.userWarnningHandle(thresholdPrompt, money, beanAmount);
+          }
+          return Promise.resolve();
+        }
+        return Promise.resolve();
+      })
+      .catch(console.error);
+  }
+
+  userWarnningHandle(thresholdPrompt, money, beanAmount) {
+    Taro.hideLoading();
+    console.log('in userWarnningHandle');
+    let arr = [money, beanAmount];
+    let i = -1;
+    return Taro.showModal({
+      title: '提示',
+      content: thresholdPrompt.replace(/(\{.*?\})/g, () => {
+        i++;
+        return arr[i];
+      }),
+    }).then(res => {
+      if (res.confirm) {
+        Taro.showLoading({
+          title: '开启中',
+          mask: true,
+        });
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    });
+  }
+
   startUseShower(reConnect: boolean) {
     if (!reConnect) {
       Taro.showLoading({
@@ -746,7 +727,8 @@ class Shower extends Component {
     if (!sockedDone) {
       this.connectDeviceSocket();
     }
-    this.startDevicesDiscovery()
+    this.checkUserMonry()
+      .then(() => this.startDevicesDiscovery())
       .then((deviceId: string) => this.createConnection(deviceId))
       .then(this.getDeviceServices)
       .then(res => {
@@ -820,31 +802,18 @@ class Shower extends Component {
   render() {
     const {
       bluetoothDevice: { code, position },
-      userinfo,
     } = this.props;
-    const {
-      showerState,
-      showPayOrder,
-      orderInfo,
-      accounts,
-      payInfos,
-    } = this.state;
+    const { showerState } = this.state;
+    const payOrderState = useSelector(
+      (state: { orderState: PayOrderState }) =>
+        state.orderState.waitPayOrderState,
+    );
+
     return (
       <View className='Shower'>
-        {showPayOrder && (
-          <View className='OrderBox'>
-            <OrderTitle price={orderInfo.payableMoney} />
-            <OrderInfo orderInfo={orderInfo} />
-            <OrderPayway
-              onPayDoneCallback={this.payDoneHandle}
-              userinfo={userinfo}
-              accounts={accounts}
-              orderInfo={orderInfo}
-              payInfos={payInfos}
-            />
-          </View>
-        )}
-        <View className={showPayOrder ? 'blur' : ''}>
+        <WaitPayOrderComponent />
+
+        <View className={payOrderState ? 'blur' : ''}>
           <View className='equipment-info-box'>
             <View className='equipment-info'>
               {code ? (

src/pages/WaterDispenser/WaterDispenser.tsx

@@ -18,15 +18,14 @@ import {
   PageConfigResponse,
 } from '@/api/waterDispenser';
 import { Customer } from '@/types/Customer/Customer';
-import { connect } from '@tarojs/redux';
+import { connect, useSelector } from '@tarojs/redux';
 import { ComponentClass } from 'react';
 import { ResponseDataEntity } from '@/api';
 import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
 import Order from '@/types/Order/Order';
 import { fetchOrderDetailAndPay, fetchPayOrder } from '@/api/order';
-import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
-import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
-import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
+import WaitPayOrderComponent from '@/components/WaitPayOrder/WaitPayOrder';
+import { PayOrderState } from '@/store/rootReducers/orderState';
 
 export type DeviceInfo = {
   code: string;
@@ -42,14 +41,6 @@ type PageState = {
   useList: DeviceInfo[];
   timer: number | null;
   showToggleTag: boolean;
-
-  showPayOrder: boolean;
-  accounts: CustomerBeanAccountVo[];
-  orderInfo: Order;
-  payInfos: {
-    paymentAndActiveInfos: PaymentAndActiveInfo[];
-    paymentConfId: number;
-  };
 };
 
 type IProps = PageStateProps;
@@ -74,47 +65,10 @@ class WaterDispenser extends Component {
       useList: [],
       timer: null,
       showToggleTag: false,
-
-      showPayOrder: false,
-      accounts: [],
-      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,
-      },
     };
   }
 
   componentWillMount() {
-    this.getPayState();
     this.getUsedEquipment();
     this.fetchPageConfig();
   }
@@ -123,43 +77,6 @@ class WaterDispenser extends Component {
     this.clearTimer();
   }
 
-  getPayState() {
-    const { userinfo } = this.props;
-    fetchPayOrder({
-      customerId: userinfo.customerId,
-    })
-      .then(res => {
-        if (res.data.length) {
-          this.fetchOrder(res.data[0].id);
-          this.setState({ showPayOrder: true });
-        }
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  fetchOrder(id: number) {
-    return fetchOrderDetailAndPay({
-      id,
-    })
-      .then(res => {
-        const { accounts, orderInfo, payInfos } = res;
-        this.setState({
-          accounts: accounts,
-          orderInfo: orderInfo,
-          payInfos: payInfos,
-        });
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-  payDoneHandle() {
-    this.setState({
-      showPayOrder: false,
-    });
-  }
-
   fetchPageConfig() {
     const { userinfo } = this.props;
     fetchPageConfig({
@@ -339,29 +256,16 @@ class WaterDispenser extends Component {
       deviceInfo: { code, position },
       useList,
       showToggleTag,
-      showPayOrder,
-      orderInfo,
-      accounts,
-      payInfos,
     } = this.state;
-    const { userinfo } = this.props;
+    const payOrderState = useSelector(
+      (state: { orderState: PayOrderState }) =>
+        state.orderState.waitPayOrderState,
+    );
 
     return (
       <View className='WaterDispenser'>
-        {showPayOrder && (
-          <View className='OrderBox'>
-            <OrderTitle price={orderInfo.payableMoney} />
-            <OrderInfo orderInfo={orderInfo} />
-            <OrderPayway
-              onPayDoneCallback={this.payDoneHandle}
-              userinfo={userinfo}
-              accounts={accounts}
-              orderInfo={orderInfo}
-              payInfos={payInfos}
-            />
-          </View>
-        )}
-        <View className={showPayOrder ? 'blur' : ''}>
+        <WaitPayOrderComponent />
+        <View className={payOrderState ? 'blur' : ''}>
           {showToggleTag && (
             <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
               <Image className='icon' src={CodeIcon} />

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;
+  }
+}

src/types/Shower/Shower.ts

+import { OperationMode } from '@/api/shower';
+
 export type BluetoothDevice = {
   code: string;
   isOnlyBluetooth: number;
+  operationMode: OperationMode;
   position: string;
 };