优化连接策略

src/pages/pay/pay.tsx

@@ -84,7 +84,6 @@ class Pay extends Component {
         readId: '',
       },
     };
-    this.checkBluetoothAndWs();
   }
 
   componentWillMount() {
@@ -95,6 +94,7 @@ class Pay extends Component {
         payId: prepayConfig[0].id,
       });
     }
+    this.checkBluetoothAndWs();
   }
 
   componentWillUnmount() {
@@ -103,7 +103,11 @@ class Pay extends Component {
   }
 
   connectDeviceSocket() {
-    Taro.connectSocket({ url: SOCKET_URL }).then(task => {
+    let connectHandle;
+    if (socketTask) {
+      connectHandle = new Promise(resolve => resolve(socketTask));
+    } else {
+      connectHandle = Taro.connectSocket({ url: SOCKET_URL }).then(task => {
         socketTask = task;
         task.onOpen(() => {
           console.log('onOpen');
@@ -128,7 +132,11 @@ class Pay extends Component {
             if (msg.length > 100) {
               this.sendMessageToDevice('[]');
             } else if (msg.length > 20) {
-            for (let index = 0; index <= Math.floor(msg.length / 20); index++) {
+              for (
+                let index = 0;
+                index <= Math.floor(msg.length / 20);
+                index++
+              ) {
                 let str = msg.substring(index * 20, (index + 1) * 20);
                 this.sendMessageToDevice(str);
               }
@@ -154,6 +162,10 @@ class Pay extends Component {
         });
       });
     }
+    connectHandle.then(() => {
+      console.log('socket done');
+    });
+  }
 
   reConnectDeviceSocket(cancel: boolean) {
     if (cancel) {
@@ -220,6 +232,7 @@ class Pay extends Component {
     }
   }
   checkIsShower(): boolean {
+    return true;
     const { device } = this.props;
     return device.serviceId === 5;
   }
@@ -250,7 +263,7 @@ class Pay extends Component {
           },
           () => {
             this.startConnectDevice();
-          },
+          }
         );
       })
       .catch(err => {
@@ -390,7 +403,7 @@ class Pay extends Component {
       let abStr = '';
       Taro.onBLECharacteristicValueChange(res => {
         console.log(
-          `characteristic ${res.characteristicId} has changed, now is ${res.value}`,
+          `characteristic ${res.characteristicId} has changed, now is ${res.value}`
         );
         console.log(res.value);
         let datastr = ab2str(res.value);
@@ -445,7 +458,7 @@ class Pay extends Component {
       Taro.onBLEConnectionStateChange(res => {
         // const { showerState } = this.state;
         console.log(
-          `device ${res.deviceId} state has changed, connected: ${res.connected}`,
+          `device ${res.deviceId} state has changed, connected: ${res.connected}`
         );
         if (res.connected) {
           this.setState({
@@ -640,7 +653,7 @@ class Pay extends Component {
         let service = services.find(
           item =>
             item.uuid.toLocaleLowerCase() ===
-            '6e401103-b5a3-f393-e0a9-e50e24dcca9e',
+            '6e401103-b5a3-f393-e0a9-e50e24dcca9e'
         );
         if (!service) {
           service = services[0];
@@ -763,7 +776,7 @@ class Pay extends Component {
             AES.decrypt(payStr, Utf8.parse(key), {
               mode: ECBmode,
               padding: PaddingPkcs7,
-            }).toString(Utf8),
+            }).toString(Utf8)
           );
           console.log('payData:', payData);
           Taro.requestPayment({
@@ -838,28 +851,28 @@ class Pay extends Component {
     const { device, prepayConfig, userinfo } = this.props;
     const { payId } = this.state;
     return (
-      <View className='Pay'>
-        <View className='Pay-info'>
-          <View className='Pay-info-item'>
+      <View className="Pay">
+        <View className="Pay-info">
+          <View className="Pay-info-item">
             <Text>服务类型</Text>
             <Text>{device.serviceName ? device.serviceName : ''}</Text>
           </View>
-          <View className='Pay-info-item'>
+          <View className="Pay-info-item">
             <Text>设备编号</Text>
             <Text>{device.code ? device.code : ''}</Text>
           </View>
-          <View className='Pay-info-item'>
+          <View className="Pay-info-item">
             <Text>设备位置</Text>
-            <Text className='Pay-info-position'>{device.position}</Text>
+            <Text className="Pay-info-position">{device.position}</Text>
           </View>
           {device.rates.length && (
-            <View className='Pay-info-item'>
+            <View className="Pay-info-item">
               <Text>适用费率</Text>
-              <View className='Pay-info-rate'>
+              <View className="Pay-info-rate">
                 {device.rates.map(item => (
-                  <View key='name' className='Pay-info-rate-item'>
-                    <Text className='Pay-info-rate-name'>{item.name}</Text>
-                    <Text className='Pay-info-rate-mark'>{item.mark}</Text>
+                  <View key="name" className="Pay-info-rate-item">
+                    <Text className="Pay-info-rate-name">{item.name}</Text>
+                    <Text className="Pay-info-rate-mark">{item.mark}</Text>
                   </View>
                 ))}
                 {/* <View className='Pay-info-rate-item'>
@@ -874,17 +887,17 @@ class Pay extends Component {
             </View>
           )}
         </View>
-        <View className='Pay-tip'>
+        <View className="Pay-tip">
           {device.refundMode === DeviceRefundMode.notRefund
             ? '温馨提示：设备成功开启后，未使用金额将不会退换！'
             : '温馨提示：如本次预付款未全部使用，系统将在使用结束后半小时内自动退还剩余金额，请留意查收！'}
         </View>
-        <View className='Pay-money'>
+        <View className="Pay-money">
           {prepayConfig &&
             prepayConfig.length &&
             prepayConfig.map(payConfig => (
               <View
-                key='id'
+                key="id"
                 className={`Pay-money-item ${
                   payConfig.id == payId ? 'seleted' : ''
                 }`}
@@ -898,13 +911,13 @@ class Pay extends Component {
           <Input className='Pay-money-item' placeholder='输入>0.5数额' /> */}
         </View>
         {userinfo.isAuth ? (
-          <Button className='Pay-btn' onClick={this.payHandle}>
+          <Button className="Pay-btn" onClick={this.payHandle}>
             确定支付
           </Button>
         ) : (
           <Button
-            className='Pay-btn'
-            open-type='getPhoneNumber'
+            className="Pay-btn"
+            open-type="getPhoneNumber"
             onGetphonenumber={this.getPhoneHandle}>
             确定支付
           </Button>