进入服务前添加订单查询

src/app.scss

@@ -99,4 +99,17 @@ button[disabled]:not([type]) {
   height: 100%;
   background-color: rgba(25, 25, 25, 0.2);
   z-index: 99;
-}
+}
\ No newline at end of file
+.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/common/checkOrderHOC.js

+import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
+import { View } from '@tarojs/components';
+import { connect } from '@tarojs/redux';
+import { ComponentClass } from 'react';
+
+function wrapCheckOrder() {
+  return function wrapComponent(
+    Component: ComponentClass<T>,
+  ): ComponentClass<T> {
+    return class CheckOrder extends Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          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();
+        if (super.componentWillMount) {
+          super.componentWillMount();
+        }
+      }
+
+      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 });
+            } else {
+              this.drawBarCode();
+            }
+          })
+          .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);
+          });
+      }
+
+      render() {
+        const { showPayOrder, orderInfo, payInfos, accounts } = this.state;
+        console.log(showPayOrder);
+
+        return (
+          <View className=''>
+            {showPayOrder ? (
+              <View className='OrderBox'>
+                <OrderTitle price={orderInfo.payableMoney} />
+                <OrderInfo orderInfo={orderInfo} />
+                <OrderPayway
+                  onPayDoneCallback={this.payDoneHandle}
+                  userinfo={userinfo}
+                  accounts={accounts}
+                  orderInfo={orderInfo}
+                  payInfos={payInfos}
+                />
+              </View>
+            ) : (
+              super.render()
+            )}
+          </View>
+        );
+      }
+    };
+  };
+}
+export default wrapCheckOrder;

src/pages/BarCode/BarCode.scss

@@ -27,18 +27,6 @@ page {
       color: #fff;
     }
   }
-  .OrderBox {
-    box-sizing: border-box;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 0 32px;
-    z-index: 100;
-    background-color: rgba(255, 255, 255, 0.5);
-  }
-  .blur {
-    filter: blur(10px);
-  }
   .BarCodeBox {
     position: relative;
     background-color: #fff;

src/pages/BarCode/BarCode.tsx

@@ -279,13 +279,6 @@ class BarCode extends Component {
     } = this.state;
     return (
       <View className='BarCode'>
-        {showBackTag && (
-          <View className='BackTag' onClick={this.goBackPage}>
-            <Image className='icon' src={CodeIcon} />
-            <Text className='text'>隐藏条码</Text>
-          </View>
-        )}
-
         {showPayOrder && (
           <View className='OrderBox'>
             <OrderTitle price={orderInfo.payableMoney} />
@@ -299,38 +292,41 @@ class BarCode extends Component {
             />
           </View>
         )}
-
-        <View
-          className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
-            showBig ? 'BarCodeBoxBig' : ''
-          }`}>
-          <Image
-            className='BarCodeBox-refresh'
-            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 className={showPayOrder ? 'blur' : ''}>
+          {showBackTag && (
+            <View className='BackTag' onClick={this.goBackPage}>
+              <Image className='icon' src={CodeIcon} />
+              <Text className='text'>隐藏条码</Text>
             </View>
           )}
-          <View className='toggleBtn' onClick={this.toggleBigBarCode}>
+          <View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
             <Image
-              className={`arricon ${showBig ? 'rever' : ''}`}
-              src={ArrIcon}
+              className='BarCodeBox-refresh'
+              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='toggleBtn' onClick={this.toggleBigBarCode}>
+              <Image
+                className={`arricon ${showBig ? 'rever' : ''}`}
+                src={ArrIcon}
+              />
+            </View>
+          </View>
+          <View className='warnning'>
+            如扫描条码终端无响应，请刷新条码后重试！
           </View>
-        </View>
-
-        <View className='warnning'>
-          如扫描条码终端无响应，请刷新条码后重试！
         </View>
       </View>
     );

src/pages/Shower/Shower.tsx

@@ -22,6 +22,12 @@ 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';
 
 type DeviceInfo = {
   deviceId: string;
@@ -48,6 +54,14 @@ type PageState = {
   sockedDone: boolean;
   deviceDone: boolean;
   showerState: boolean;
+
+  showPayOrder: boolean;
+  accounts: CustomerBeanAccountVo[];
+  orderInfo: Order;
+  payInfos: {
+    paymentAndActiveInfos: PaymentAndActiveInfo[];
+    paymentConfId: number;
+  };
 };
 const StopCode = 1000;
 
@@ -91,12 +105,49 @@ 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();
@@ -110,6 +161,43 @@ 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;
@@ -702,52 +790,74 @@ class Shower extends Component {
   render() {
     const {
       bluetoothDevice: { code, position },
+      userinfo,
     } = this.props;
-    const { showerState } = this.state;
+    const {
+      showerState,
+      showPayOrder,
+      orderInfo,
+      accounts,
+      payInfos,
+    } = this.state;
     return (
       <View className='Shower'>
-        <View className='equipment-info-box'>
-          <View className='equipment-info'>
-            {code ? (
-              <View className='equipment-title matched'>已匹配设备</View>
-            ) : (
-              <View className='equipment-title'>未匹配设备</View>
-            )}
-
-            <Image className='equipment-line' src={LineImg} />
-            {code ? (
-              <View className='equipment-list'>
-                <View className='equipment-item'>
-                  <Text className='equipment-label'>设备编号：</Text>
-                  <Text className='equipment-value'>{code}</Text>
+        {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' : ''}>
+          <View className='equipment-info-box'>
+            <View className='equipment-info'>
+              {code ? (
+                <View className='equipment-title matched'>已匹配设备</View>
+              ) : (
+                <View className='equipment-title'>未匹配设备</View>
+              )}
+
+              <Image className='equipment-line' src={LineImg} />
+              {code ? (
+                <View className='equipment-list'>
+                  <View className='equipment-item'>
+                    <Text className='equipment-label'>设备编号：</Text>
+                    <Text className='equipment-value'>{code}</Text>
+                  </View>
+                  <View className='equipment-item'>
+                    <Text className='equipment-label'>设备位置：</Text>
+                    <Text className='equipment-value'>{position}</Text>
+                  </View>
                 </View>
-                <View className='equipment-item'>
-                  <Text className='equipment-label'>设备位置：</Text>
-                  <Text className='equipment-value'>{position}</Text>
+              ) : (
+                <View v-loading='loading' className='equipment-noCode'>
+                  点击左下角扫一扫完成匹配
                 </View>
-              </View>
-            ) : (
-              <View v-loading='loading' className='equipment-noCode'>
-                点击左下角扫一扫完成匹配
-              </View>
-            )}
+              )}
+            </View>
           </View>
-        </View>
-        <View className='btn-box'>
-          <Image
-            className='shower-scan-btn'
-            src={ScanIcon}
-            onClick={this.scanEquipment}
-          />
-          {code && !showerState ? (
+          <View className='btn-box'>
             <Image
-              className='shower-start-btn'
-              src={ShowerStart}
-              onClick={() => this.startUseShower(false)}
+              className='shower-scan-btn'
+              src={ScanIcon}
+              onClick={this.scanEquipment}
             />
-          ) : (
-            <Image className='shower-start-btn' src={ShowerCantStart} />
-          )}
+            {code && !showerState ? (
+              <Image
+                className='shower-start-btn'
+                src={ShowerStart}
+                onClick={() => this.startUseShower(false)}
+              />
+            ) : (
+              <Image className='shower-start-btn' src={ShowerCantStart} />
+            )}
+          </View>
         </View>
       </View>
     );

src/pages/WaterDispenser/WaterDispenser.tsx

@@ -21,6 +21,12 @@ import { Customer } from '@/types/Customer/Customer';
 import { connect } 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';
 
 export type DeviceInfo = {
   code: string;
@@ -36,6 +42,14 @@ type PageState = {
   useList: DeviceInfo[];
   timer: number | null;
   showToggleTag: boolean;
+
+  showPayOrder: boolean;
+  accounts: CustomerBeanAccountVo[];
+  orderInfo: Order;
+  payInfos: {
+    paymentAndActiveInfos: PaymentAndActiveInfo[];
+    paymentConfId: number;
+  };
 };
 
 type IProps = PageStateProps;
@@ -44,6 +58,7 @@ interface WaterDispenser {
   props: IProps;
   state: PageState;
 }
+
 @connect(({ userinfo }) => ({
   userinfo,
 }))
@@ -59,10 +74,47 @@ 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();
   }
@@ -71,6 +123,43 @@ 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({
@@ -250,45 +339,66 @@ class WaterDispenser extends Component {
       deviceInfo: { code, position },
       useList,
       showToggleTag,
+      showPayOrder,
+      orderInfo,
+      accounts,
+      payInfos,
     } = this.state;
+    const { userinfo } = this.props;
+
     return (
       <View className='WaterDispenser'>
-        {showToggleTag && (
-          <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
-            <Image className='icon' src={CodeIcon} />
-            <Text className='text'>显示条码</Text>
+        {showPayOrder && (
+          <View className='OrderBox'>
+            <OrderTitle price={orderInfo.payableMoney} />
+            <OrderInfo orderInfo={orderInfo} />
+            <OrderPayway
+              onPayDoneCallback={this.payDoneHandle}
+              userinfo={userinfo}
+              accounts={accounts}
+              orderInfo={orderInfo}
+              payInfos={payInfos}
+            />
           </View>
         )}
-        <DeviceInfo size='small' code={code} position={position} />
+        <View className={showPayOrder ? 'blur' : ''}>
+          {showToggleTag && (
+            <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
+              <Image className='icon' src={CodeIcon} />
+              <Text className='text'>显示条码</Text>
+            </View>
+          )}
+          <DeviceInfo size='small' code={code} position={position} />
 
-        <View className='btn-box'>
-          <Image
-            className='shower-scan-btn'
-            src={ScanIcon}
-            onClick={this.scanEquipment}
-          />
-          {code && !waterUsingState ? (
+          <View className='btn-box'>
             <Image
-              className='shower-start-btn'
-              src={StartIcon}
-              onClick={this.waterBeginning}
+              className='shower-scan-btn'
+              src={ScanIcon}
+              onClick={this.scanEquipment}
             />
-          ) : (
-            <Image className='shower-start-btn' src={CantStartIcon} />
-          )}
-        </View>
+            {code && !waterUsingState ? (
+              <Image
+                className='shower-start-btn'
+                src={StartIcon}
+                onClick={this.waterBeginning}
+              />
+            ) : (
+              <Image className='shower-start-btn' src={CantStartIcon} />
+            )}
+          </View>
 
-        <View className='LastUseList'>
-          <View className='LastUseList-title bb'>最近使用</View>
-          {useList.map(device => (
-            <EquipmentItem
-              key={device.code}
-              ex-class='bb'
-              code={device.code}
-              position={device.position}
-              onClick={this.getSelectedEquipment}
-            />
-          ))}
+          <View className='LastUseList'>
+            <View className='LastUseList-title bb'>最近使用</View>
+            {useList.map(device => (
+              <EquipmentItem
+                key={device.code}
+                ex-class='bb'
+                code={device.code}
+                position={device.position}
+                onClick={this.getSelectedEquipment}
+              />
+            ))}
+          </View>
         </View>
       </View>
     );