update app/pages/charge/QRResult.js

Strides-SPAPP/app/pages/charge/QRScan.js

@@ -11,76 +11,14 @@ import apiCharge from '../../api/apiCharge';
 import { PageList } from '../Router';
 import Dialog from '../../components/Dialog';
 import app from '../../../app.json';
-
-export const QRResult = {
-  haveResult: () => {
-    return global.QrCodeResult && global.QrCodeResult.connectorPk;
-  },
-  setResult: (info) => {
-    global.QrCodeResult = info;
-  },
-  getResult: () => {
-    return global.QrCodeResult;
-  },
-  clearResult: () => {
-    global.QrCodeResult = {};
-  },
-  applyInputStation: (text, sitePk, back) => {
-    if (text.indexOf('-') > 0) {
-      const arr = text.split('-');
-      if (arr.length >= 2) {
-        let bid = '', cid = '';
-        for (let i = 0; i < arr.length; i++) {
-          let sb = arr[i]?.trim();
-          if (i == (arr.length-1)) {
-            cid = sb;
-          } else {
-            if (i > 0) {
-              bid += '-';
-            }
-            bid += sb;
-          }
-        }
-        const qr = {
-          sitePk: sitePk,
-          chargeBoxId: bid,
-          connectorId: cid
-        }
-        console.log('====================================');
-        console.log(qr);
-        console.log('====================================');
-        Dialog.showProgressDialog();
-        apiCharge.checkQRStatus(qr).then(res => {
-          Dialog.dismissLoading();
-          if (res.data && res.data.chargeBoxId) {
-            QRResult.setResult(res.data);
-            back(true)
-          }
-        }).catch(({err, code}) => {
-          Dialog.dismissLoading();
-          back(false, '')
-          Dialog.showDialog({
-            title: 'Error',
-            message: err,
-            showCancel: false,
-            callback: btn => {
-              if (code == 5194 && btn == Dialog.BUTTON_OK) {
-                startPage(PageList.myVehicles);
-              }
-            }
-          });
-        })
-      } else {
-        back(false, 'Station ID is incorrect');
-      }
-    } else {
-      back(false, 'Station ID is incorrect');
-    }
-  }
-}
+import Button from '../../components/Button';
+import TextView from '../../components/TextView';
+import { EnterStationDialog } from '../chargeV2/Charging';
+import QRResult from './QRResult';
 
 // 函数组件：QR码扫描器
-const QRScanner = ({ onCodeScanned, flashLight, isActive }) => {
+const QRScanner = ({ onCodeScanned, isActive }) => {
+  const [flashOn, switchFlash] = useState(false);
   const [hasPermission, setHasPermission] = useState(false);
   const device = useCameraDevice('back');
   useEffect(() => {
@@ -100,20 +38,36 @@ const QRScanner = ({ onCodeScanned, flashLight, isActive }) => {
   });
 
   return (
-    (device && hasPermission) && (<>
-      <Camera
-        style={{width: $width, height: $vh(110)}}
-        device={device}
-        isActive={isActive}
-        codeScanner={codeScanner}
-        enableZoomGesture={true}
-        photo={false}
-        video={false}
-        audio={false}
-        resizeMode="cover"
-        torch={flashLight ? 'on' : 'off'}
-      />
-    </>)
+    (device && hasPermission)
+    ? <>
+        <Camera
+          style={{width: $width, height: $vh(110)}}
+          device={device}
+          isActive={isActive}
+          codeScanner={codeScanner}
+          enableZoomGesture={true}
+          photo={false}
+          video={false}
+          audio={false}
+          resizeMode="cover"
+          torch={flashOn ? 'on' : 'off'}
+        />
+        { isActive &&
+          <Pressable
+            style={styles.flashLight}
+            onPress={() => switchFlash(!flashOn)}>
+            <MaterialIcons
+              name={flashOn ? "flashlight-on" : "flashlight-off"}
+              size={36}
+              color="#fff"/>
+          </Pressable>
+        }
+      </>
+    : <View style={styles.tipsScreen}>
+        <TextView style={styles.tipsText}>
+          Camera access has been denied. Please enable it in your device settings.
+        </TextView>
+      </View>
   );
 };
 
@@ -123,8 +77,9 @@ export default class QRScan extends Component {
     super(props);
     this.state={
       isResult: true,
+      stationId: "",
       params: this.props.route.params,
-      flashLight: false
+      showInputStation: false
     }
   }
 
@@ -229,24 +184,46 @@ export default class QRScan extends Component {
     })
   }
 
+  onEnterStation(visible) {
+    this.setState({
+      stationId: "",
+      isResult: visible,
+      showInputStation: visible
+    })
+  }
+
+  enterStatioinId() {
+    if (QRResult.haveResult()) {
+      const result = QRResult.getResult()
+      if (result.sitePk) {
+        if (this.state.params.actionDetail) {
+          startPage(PageList.chargeDetailPage, {stationInfo: {id: result.sitePk}, action: 'qr', from: PageList.home});
+        } else {
+          goBack();
+        }
+        //startPage(PageList.chargeDetail, {stationInfo: {id: res.data.sitePk}, action: 'qr'});
+      }
+    }
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <QRScanner
           onCodeScanned={this.scanResult}
-          flashLight={this.state.flashLight}
           isActive={!this.state.isResult}
         />
-        { !this.state.isResult &&
-          <Pressable
-            style={styles.flashLight}
-            onPress={() => this.switchFlash()}>
-            <MaterialIcons
-              name={this.state.flashLight ? "flashlight-on" : "flashlight-off"}
-              size={36}
-              color="#fff"/>
-          </Pressable>
-        }
+        <Button
+          style={styles.btnStationInput}
+          text={$t('charging.enterStationId')}
+          textColor={"rgba(255,255,255,.8)"}
+          onClick={() => this.onEnterStation(true)}/>
+        <EnterStationDialog
+          visible={this.state.showInputStation}
+          stationId={this.state.params?.id}
+          onConfirm={() => this.enterStatioinId()}
+          onClose={() => this.onEnterStation(false)}
+        />
       </View>
     );
   }
@@ -259,11 +236,31 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     ...StyleSheet.absoluteFillObject
   },
+  tipsScreen: {
+    flex: 1,
+    padding: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: '#444',
+  },
+  tipsText: {
+    color: textLight,
+    fontSize: 14,
+    textAlign: "center"
+  },
   flashLight: {
-    bottom: 90,
+    bottom: 120,
     zIndex: 2,
     opacity: 0.7,
     padding: 8,
     position: 'absolute'
-  }
+  },
+  btnStationInput: {
+    left: 16,
+    right: 16,
+    bottom: 24,
+    zIndex: 2,
+    position: 'absolute',
+    backgroundColor: "rgba(0,0,0,.4)"
+  },
 })