抽离页面中订单的支付逻辑

src/hooks/useAllBeanCount.ts

@@ -23,7 +23,11 @@ const useAllBeanCount = (
   serviceList: Service[],
 ): [
   BeanAccount[],
-  (customerId: number, areaId: number, customerPhone: string) => void
+  (
+    customerId: number,
+    areaId: number,
+    customerPhone: string,
+  ) => Promise<CustomerBeanAccountVo[]>
 ] => {
   const [filterBeanList, setFilterBeanList] = useState(initBeanList);
 
@@ -73,7 +77,7 @@ const useAllBeanCount = (
     customerId: number,
     areaId: number,
     customerPhone: string,
-  ) => {
+  ) =>
     fetchBeanCount({
       id: customerId,
       areaId: areaId,
@@ -84,9 +88,12 @@ const useAllBeanCount = (
         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.customerId, userinfo.areaId, userinfo.customerPhone);

src/pages/Account/Account.tsx

@@ -61,6 +61,7 @@ export const AccountComponent = () => {
       return;
     }
     console.log('in recharge');
+    let preAimiItem = filterBeanList.find(item => item.serviceId === '0');
     rechargeOrder({
       id: payConfigId,
       customerId: userinfo.customerId,
@@ -93,7 +94,27 @@ export const AccountComponent = () => {
                   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({

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

@@ -13,7 +13,7 @@ import {
   startShowerEquipment,
   fetchUsingShowerInfo,
 } 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';
@@ -22,12 +22,8 @@ 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',
@@ -58,14 +54,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 +62,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 +97,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 +116,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;
@@ -447,7 +361,7 @@ class Shower extends Component {
       return Taro.startBluetoothDevicesDiscovery()
         .then(() => {
           const { code, isOnlyBluetooth } = this.props.bluetoothDevice;
-          let timer: number | null = null;
+          let timer: NodeJS.Timeout | null = null;
           return new Promise(resolve => {
             if (isOnlyBluetooth) {
               timer = setTimeout(() => {
@@ -820,31 +734,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} />