合并冲突

package.json

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

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/components/MenuIcon/big/MenuIconBig.scss

@@ -16,13 +16,13 @@
   }
   &.left {
     .text-box {
-      margin-left: 114px;
+      margin-left: 50px;
     }
   }
   &.right {
     .text-box {
       position: absolute;
-      right: 114px;
+      right: 50px;
     }
   }
   .text {

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

@@ -223,8 +223,18 @@ class BarCode extends Component {
   }
   drawBarCode() {
     const { userinfo } = this.props;
+    const routeParams = this.$router.params;
+    let serviceId = '';
+    if (routeParams && routeParams.serviceId) {
+      serviceId =
+        routeParams.serviceId.length === 1
+          ? '0' + routeParams.serviceId
+          : routeParams.serviceId;
+    }
+    console.log('serviceId: ', serviceId);
     if (userinfo.idBar && userinfo.idBar.length > 2) {
-      let idBar = userinfo.idBar.substring(0, userinfo.idBar.length - 2) + '04';
+      let idBar =
+        userinfo.idBar.substring(0, userinfo.idBar.length - 2) + serviceId;
       wxbarcode.barcode('BarCode', idBar, 646, 188);
       wxbarcode.barcode('BarCodeBig', idBar, 700, 364);
     } else {
@@ -269,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} />
@@ -289,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}
@@ -318,11 +324,11 @@ class BarCode extends Component {
               />
             </View>
           </View>
-
           <View className='warnning'>
             如扫描条码终端无响应，请刷新条码后重试！
           </View>
         </View>
+      </View>
     );
   }
 }

src/pages/Home/Home.scss

@@ -30,12 +30,15 @@
 
   .Home-UserBox {
     position: relative;
-    height: 390px;
+    // height: 390px;
     padding: 0 0 40px;
     margin: 0 32px;
     box-sizing: content-box;
     .bg {
       height: 390px;
+      &.big {
+        height: 428px;
+      }
     }
     .Home-UserBox-Setting {
       position: absolute;
@@ -73,12 +76,14 @@
       margin: 0 auto;
     }
     .Home-UserBox-Bean {
-      padding: 32px 40px 0;
+      padding: 32px 40px 70px;
       display: flex;
       justify-content: space-around;
+      flex-flow: wrap;
       font-size: 24px;
       color: #666;
       .Home-UserBox-BeanItem {
+        width: 40%;
         display: flex;
         align-items: center;
       }

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({
@@ -113,7 +202,7 @@ class WaterDispenser extends Component {
 
   toggleCodeState() {
     Taro.redirectTo({
-      url: `/pages/BarCode/BarCode?backPage=${encodeURIComponent(
+      url: `/pages/BarCode/BarCode?serviceId=9&backPage=${encodeURIComponent(
         '/pages/WaterDispenser/WaterDispenser',
       )}`,
     });
@@ -225,7 +314,6 @@ class WaterDispenser extends Component {
         );
       })
       .catch(err => {
-        Taro.hideLoading();
         console.error('开启失败： ', err);
       });
   }
@@ -251,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} />
@@ -292,6 +400,7 @@ class WaterDispenser extends Component {
             ))}
           </View>
         </View>
+      </View>
     );
   }
 }