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,20 +145,27 @@ export const AccountComponent = () => {
       <View className='Account-Card-warp'>
         <View className='Account-Card'>
           <Image className='bg' src={AccountCardBg} />
+          <View className='Account-Card-money'>
             <View className='Account-Card-Aimi'>
-            <View className='Account-Card-Aimi-label'>艾米余额</View>
-
+              <View className='Account-Card-label'>艾米余额</View>
               {filterBeanList.length &&
                 filterBeanList.map(beanItem =>
                   beanItem.serviceId === BeanType.aimi ? (
-                  <View
-                    key={beanItem.serviceId}
-                    className='Account-Card-Aimi-num'>
+                    <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' />
 
           <View className='Account-Card-Bean'>
@@ -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);
-      });
     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,7 +180,6 @@ class BarCode extends Component {
               src={RefreshIcon}
               onClick={this.refreshCodeBar}
             />
-            {showPayOrder ? null : (
             <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
               <Canvas
                 className={`BarCodeCav ${showBig ? 'show' : ''}`}
@@ -316,7 +190,6 @@ class BarCode extends Component {
                 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;
-
-  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/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) {
+    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 } 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;
 };