Merge branch 'develop' into test

src/app.scss

@@ -100,3 +100,16 @@ button[disabled]:not([type]) {
   background-color: rgba(25, 25, 25, 0.2);
   z-index: 99;
 }
+.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,11 +292,14 @@ class BarCode extends Component {
             />
           </View>
         )}
-
-        <View
-          className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
-            showBig ? 'BarCodeBoxBig' : ''
-          }`}>
+        <View className={showPayOrder ? 'blur' : ''}>
+          {showBackTag && (
+            <View className='BackTag' onClick={this.goBackPage}>
+              <Image className='icon' src={CodeIcon} />
+              <Text className='text'>隐藏条码</Text>
+            </View>
+          )}
+          <View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
             <Image
               className='BarCodeBox-refresh'
               src={RefreshIcon}
@@ -328,11 +324,11 @@ class BarCode extends Component {
               />
             </View>
           </View>
-
           <View className='warnning'>
             如扫描条码终端无响应，请刷新条码后重试！
           </View>
         </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,10 +790,31 @@ 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'>
+        {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 ? (
@@ -750,6 +859,7 @@ class Shower extends Component {
             )}
           </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,9 +339,29 @@ class WaterDispenser extends Component {
       deviceInfo: { code, position },
       useList,
       showToggleTag,
+      showPayOrder,
+      orderInfo,
+      accounts,
+      payInfos,
     } = this.state;
+    const { userinfo } = this.props;
+
     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' : ''}>
           {showToggleTag && (
             <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
               <Image className='icon' src={CodeIcon} />
@@ -291,6 +400,7 @@ class WaterDispenser extends Component {
             ))}
           </View>
         </View>
+      </View>
     );
   }
 }