修改条码渲染根据传入服务改变

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/constants/index.js

@@ -11,6 +11,6 @@ export const CUSTOMER_SERVER_URL =
 export const SCHOOL_MAIN_URL = 'https://internal-dev-school-main.168cad.top';
 export const ANN_LINK_URL = 'https://ex-dev-wx.168cad.top/announcement/';
 export const SHOWER_APP_URL = 'http://ex-shower-app-server.168cad.top';
-export const SOCKET_URL = 'ws://192.168.1.35:22153/ws';
+export const SOCKET_URL = 'ws://dev-shower-wss1.168cad.top:9443/ws';
 export const SMPRO_URL = 'https://ex-dev-dcxy-smapro-app.168cad.top';
 export const GX_URL = 'http://ex-dev-gx-app-server.168cad.top';

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 {

src/pages/Home/Home.tsx

@@ -43,6 +43,12 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
 import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
 import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
 
+enum BeanType {
+  shower = 'shower',
+  hairDryer = 'hairDryer',
+  water = 'water',
+}
+
 type PageStateProps = {
   userinfo: Customer;
 };
@@ -50,11 +56,17 @@ type PageDispatchProps = {
   updateUserInfo: (e: UserState) => void;
 };
 
+type BeanAccount = {
+  money: number;
+  serviceId: string;
+};
+
 type PageState = {
   barMenuVisiable: boolean;
-  beanAccount: { money: number; serviceId: string }[];
+  beanAccount: BeanAccount[];
   annItem: SectionItem;
   serviceList: Service[];
+  filterBeanList: BeanAccount[];
 };
 type IProps = PageStateProps & PageDispatchProps;
 
@@ -78,12 +90,8 @@ class Home extends Component {
     this.state = {
       barMenuVisiable: false,
       beanAccount: [],
-      serviceList: [
-        // { serviceId: 3, serviceName: '饮水' },
-        // { serviceId: 4, serviceName: '吹风' },
-        // { serviceId: 5, serviceName: '洗浴' },
-        // { serviceId: 9, serviceName: '壁挂饮水' },
-      ],
+      serviceList: [],
+      filterBeanList: [],
       annItem: {
         id: 0,
         styleType: '',
@@ -138,6 +146,10 @@ class Home extends Component {
         this.setState({
           serviceList: res.data,
         });
+        const { beanAccount } = this.state;
+        if (beanAccount && beanAccount.length) {
+          this.getFilterBeanList();
+        }
       });
     }
   }
@@ -152,17 +164,59 @@ class Home extends Component {
     })
       .then(res => {
         const data = res.data;
-        // let commBeanItem = data.find(item => item.serviceId === '1');
-        // let hairDryerBeanItem = data.find(item => item.serviceId === '4');
-        // let commBean = commBeanItem ? commBeanItem.money : 0.0;
-        // let hairDryerBean = hairDryerBeanItem ? hairDryerBeanItem.money : 0.0;
         this.setState({
           beanAccount: data,
         });
+        const { serviceList } = this.state;
+        if (serviceList && serviceList.length) {
+          this.getFilterBeanList();
+        }
       })
       .catch(console.error);
   }
 
+  getFilterBeanList() {
+    const { beanAccount, serviceList } = this.state;
+    let beanMap = {
+      [BeanType.water]: 0,
+      [BeanType.shower]: 0,
+      [BeanType.hairDryer]: 0,
+    };
+    let cfItem = beanAccount.find(
+      item => item.serviceId === '4' || item.serviceId === '12',
+    );
+    let xyItem = beanAccount.find(
+      item => item.serviceId === '5' || item.serviceId === '10',
+    );
+    let ysItem = beanAccount.find(
+      item =>
+        item.serviceId === '3' ||
+        item.serviceId === '11' ||
+        item.serviceId === '9',
+    );
+    for (let index = 0; index < serviceList.length; index++) {
+      const service = serviceList[index];
+      if (
+        service.serviceId === 3 ||
+        service.serviceId === 11 ||
+        service.serviceId === 9
+      ) {
+        beanMap[BeanType.water] = ysItem ? ysItem.money : 0;
+      } else if (service.serviceId === 4 || service.serviceId === 12) {
+        beanMap[BeanType.hairDryer] = cfItem ? cfItem.money : 0;
+      } else if (service.serviceId === 5 || service.serviceId === 10) {
+        beanMap[BeanType.hairDryer] = xyItem ? xyItem.money : 0;
+      }
+    }
+    let arr: BeanAccount[] = Object.keys(beanMap).map(k => ({
+      serviceId: k,
+      money: beanMap[k],
+    }));
+    this.setState({
+      filterBeanList: arr,
+    });
+  }
+
   goSetting() {
     Taro.navigateTo({
       url: '/pages/UserSetting/UserSetting',
@@ -186,9 +240,9 @@ class Home extends Component {
     });
   }
 
-  goBarCode() {
+  goBarCode(serviceId: number) {
     Taro.navigateTo({
-      url: '/pages/BarCode/BarCode',
+      url: `/pages/BarCode/BarCode?serviceId=${serviceId}`,
     });
   }
 
@@ -233,20 +287,14 @@ class Home extends Component {
 
   render() {
     const { userinfo } = this.props;
-    const { beanAccount, annItem, barMenuVisiable, serviceList } = this.state;
+    const {
+      beanAccount,
+      annItem,
+      barMenuVisiable,
+      serviceList,
+      filterBeanList,
+    } = this.state;
     let aimiItem = beanAccount.find(item => item.serviceId === '0');
-    let cfItem = beanAccount.find(
-      item => item.serviceId === '4' || item.serviceId === '12',
-    );
-    let xyItem = beanAccount.find(
-      item => item.serviceId === '5' || item.serviceId === '10',
-    );
-    let ysItem = beanAccount.find(
-      item =>
-        item.serviceId === '3' ||
-        item.serviceId === '11' ||
-        item.serviceId === '9',
-    );
     return (
       <View className='Home'>
         {barMenuVisiable ? (
@@ -303,41 +351,37 @@ class Home extends Component {
                 </Text>
               </View>
             )}
-            {serviceList &&
-              serviceList.length &&
-              beanAccount &&
-              beanAccount.length &&
-              serviceList.map(service =>
-                service.serviceId === 3 ||
-                service.serviceId === 11 ||
-                service.serviceId === 9 ? (
+            {filterBeanList &&
+              filterBeanList.length &&
+              filterBeanList.map(beanItem =>
+                beanItem.serviceId === BeanType.water ? (
                   <View
-                    key={service.serviceId}
+                    key={beanItem.serviceId}
                     className='Home-UserBox-BeanItem'>
                     <Image className='Home-UserBox-BeanIcon' src={WBeanIcon} />
                     <Text>饮水豆：</Text>
                     <Text className='Home-UserBox-BeanCount'>
-                      {ysItem ? ysItem.money.toFixed(2) : '0.00'}
+                      {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
                     </Text>
                   </View>
-                ) : service.serviceId === 4 || service.serviceId === 12 ? (
+                ) : beanItem.serviceId === BeanType.hairDryer ? (
                   <View
-                    key={service.serviceId}
+                    key={beanItem.serviceId}
                     className='Home-UserBox-BeanItem'>
                     <Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
                     <Text>吹风豆：</Text>
                     <Text className='Home-UserBox-BeanCount'>
-                      {cfItem ? cfItem.money.toFixed(2) : '0.00'}
+                      {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
                     </Text>
                   </View>
-                ) : service.serviceId === 5 || service.serviceId === 10 ? (
+                ) : beanItem.serviceId === BeanType.shower ? (
                   <View
-                    key={service.serviceId}
+                    key={beanItem.serviceId}
                     className='Home-UserBox-BeanItem'>
                     <Image className='Home-UserBox-BeanIcon' src={SBeanIcon} />
                     <Text>洗浴豆：</Text>
                     <Text className='Home-UserBox-BeanCount'>
-                      {xyItem ? xyItem.money.toFixed(2) : '0.00'}
+                      {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
                     </Text>
                   </View>
                 ) : null,
@@ -364,7 +408,7 @@ class Home extends Component {
                   icon={WaterIconBig}
                   text={''}
                   side='right'
-                  onClick={this.goBarCode}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 4 || service.serviceId === 12 ? (
                 <MenuIconBig
@@ -373,7 +417,7 @@ class Home extends Component {
                   icon={DryerIconBig}
                   text={service.serviceName}
                   side='right'
-                  onClick={this.goBarCode}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 5 || service.serviceId === 10 ? (
                 <MenuIconBig
@@ -402,14 +446,14 @@ class Home extends Component {
                   key={service.serviceId}
                   icon={WaterIconBlock}
                   text={service.serviceName}
-                  onClick={this.goBarCode}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 4 || service.serviceId === 12 ? (
                 <MenuIconBlock
                   key={service.serviceId}
                   icon={DryerIconBlock}
                   text={service.serviceName}
-                  onClick={this.goBarCode}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 5 || service.serviceId === 10 ? (
                 <MenuIconBlock
@@ -435,15 +479,15 @@ class Home extends Component {
                 <MenuIconNormal
                   key={service.serviceId}
                   icon={WaterIconNormal}
-                  text={'饮水'}
-                  onClick={this.goBarCode}
+                  text={service.serviceName}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 4 || service.serviceId === 12 ? (
                 <MenuIconNormal
                   key={service.serviceId}
                   icon={DryerIconNormal}
-                  text={'吹风'}
-                  onClick={this.goBarCode}
+                  text={service.serviceName}
+                  onClick={() => this.goBarCode(service.serviceId)}
                 />
               ) : service.serviceId === 5 || service.serviceId === 10 ? (
                 <MenuIconNormal
@@ -456,7 +500,7 @@ class Home extends Component {
                 <MenuIconNormal
                   key={service.serviceId}
                   icon={DispenserIconNormal}
-                  text={'饮水'}
+                  text={service.serviceName}
                   onClick={this.goDispenser}
                 />
               ) : null,

src/pages/Shower/Shower.tsx

@@ -44,7 +44,6 @@ type IProps = PageStateProps & PageDispatchProps;
 
 type PageState = {
   bluetoothState: boolean;
-  task: Taro.SocketTask | null;
   deviceInfo: DeviceInfo;
   sockedDone: boolean;
   deviceDone: boolean;
@@ -59,7 +58,7 @@ interface Shower {
 
 let timer: number | null = null;
 let reConnectting: boolean = false;
-
+let socketTask: Taro.SocketTask | null = null;
 @connect(
   ({ userinfo, Shower }) => ({
     userinfo,
@@ -80,7 +79,6 @@ class Shower extends Component {
     super(props);
     this.state = {
       bluetoothState: false,
-      task: null,
       sockedDone: false,
       deviceDone: false,
       showerState: false,
@@ -106,18 +104,21 @@ class Shower extends Component {
 
   componentWillUnmount() {
     this.closeBluetooth();
-    this.closeDeviceSocket();
+    Taro.closeSocket();
+    timer && clearTimeout(timer);
+    timer = null;
+    reConnectting = false;
   }
 
   connectDeviceSocket() {
     connectSocket(SOCKET_URL).then(task => {
+      socketTask = task;
       task.onOpen(() => {
         console.log('onOpen');
         if (reConnectting) {
           this.reConnectDeviceSocket(true);
         }
         this.setState({
-          task: task,
           sockedDone: true,
         });
         task.send({ data: str2ab('{}') });
@@ -149,16 +150,14 @@ class Shower extends Component {
       task.onClose(e => {
         console.log('socked关闭', e, reConnectting, timer);
         this.setState({
-          task: null,
           sockedDone: false,
         });
+        socketTask = null;
         if (e.code === StopCode) {
           console.log('正确结束socket连接');
-        } else if (!reConnectting) {
+        } else {
           console.log('开始重连socket');
           this.reConnectDeviceSocket(false);
-        } else {
-          console.log('断开socket', e);
         }
       });
     });
@@ -185,25 +184,24 @@ class Shower extends Component {
         content: '请保持网络畅通正常',
       });
     } else {
-      let newTimer = setTimeout(() => {
+      timer = setTimeout(() => {
         reConnectting = false;
       }, 10000);
       reConnectting = true;
-      timer = newTimer;
       console.log(reConnectting, timer);
       this.connectDeviceSocket();
     }
   }
 
   sendDeviceCode() {
-    const { task, sockedDone, deviceDone } = this.state;
+    const { sockedDone, deviceDone } = this.state;
     const { bluetoothDevice } = this.props;
     console.log('socket状态：', sockedDone, '蓝牙状态：', deviceDone);
 
-    if (sockedDone && task && deviceDone) {
+    if (sockedDone && socketTask && deviceDone) {
       let deviceData = '{<' + bluetoothDevice.code + '>}';
       console.log('<---发送设备编号:', deviceData);
-      task.send({
+      socketTask.send({
         data: str2ab(deviceData),
         success: msg => {
           console.log('发送设备编号:', msg, '--->');
@@ -216,15 +214,12 @@ class Shower extends Component {
   }
 
   closeDeviceSocket() {
-    const { task } = this.state;
-    console.log('in close', task, timer);
-    if (task) {
-      task.close({
+    console.log('in close', socketTask, timer);
+    if (socketTask) {
+      socketTask.close({
         code: StopCode,
         complete: () => {
-          this.setState({
-            task: null,
-          });
+          socketTask = null;
         },
       });
     }
@@ -422,14 +417,13 @@ class Shower extends Component {
           this.closeDeviceSocket();
           this.closeBluetoothConnection();
         } else {
-          const { task } = this.state;
           if (
             datastr.substring(0, 1) === '{' &&
             datastr.substring(datastr.length - 1, datastr.length) === '}'
           ) {
             console.log('<---发送完整数据： ', datastr);
-            if (task) {
-              task.send({
+            if (socketTask) {
+              socketTask.send({
                 data: str2ab(datastr),
                 success: msg => {
                   console.log('发送完整数据：', msg, '--->');
@@ -449,8 +443,8 @@ class Shower extends Component {
             abStr += datastr;
             console.log('接受尾部数据后： ', abStr);
             console.log('<---发送完整数据： ', abStr);
-            if (task) {
-              task.send({
+            if (socketTask) {
+              socketTask.send({
                 data: str2ab(abStr),
                 success: msg => {
                   console.log('发送完整数据：', msg, '--->');
@@ -586,10 +580,9 @@ class Shower extends Component {
             msg.substring(0, 1) === '{' &&
             msg.substring(msg.length - 1, msg.length) === '}'
           ) {
-            const { task } = this.state;
             console.log('<---发送给socket完整数据： ', msg);
-            task &&
-              task.send({
+            socketTask &&
+              socketTask.send({
                 data: str2ab(msg),
                 success: msg => {
                   console.log('发送给socket完整数据：', msg, '--->');
@@ -609,9 +602,8 @@ class Shower extends Component {
             console.log('接受尾部数据后： ', abStr);
             console.log('<---发送给socket完整数据： ', abStr);
 
-            const { task } = this.state;
-            task &&
-              task.send({
+            socketTask &&
+              socketTask.send({
                 data: str2ab(abStr),
                 success: msg => {
                   console.log('发送给socket完整数据：', msg, '--->');

src/pages/WaterDispenser/WaterDispenser.tsx

@@ -113,7 +113,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',
       )}`,
     });