add

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

@@ -10,73 +10,65 @@ import apiCharge from '../../api/apiCharge';
 import { PageList } from '../Router';
 import Dialog from '../../components/Dialog';
 import app from '../../../app.json';
+import Button from '../../components/Button';
+import TextView from '../../components/TextView';
+import { EnterStationDialog } from '../chargeV2/Charging';
+import QRResult from './QRResult';
 
-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')
+// 函数组件：QR码扫描器
+const QRScanner = ({ onCodeScanned, isActive }) => {
+  const [flashOn, switchFlash] = useState(false);
+  const [hasPermission, setHasPermission] = useState(false);
+  const device = useCameraDevice('back');
+  useEffect(() => {
+    (async () => {
+      const status = await Camera.requestCameraPermission();
+      setHasPermission(status == 'granted');
+    })();
+  }, []);
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: (codes) => {
+      if (codes?.length > 0 && isActive) {
+        const code = codes[0];
+        onCodeScanned(code.value || "");
       }
-    } else {
-      back(false, 'Station ID is incorrect')
-    }
-  }
-}
+    },
+  });
+
+  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={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>
+  );
+};
 
 export default class QRScan extends Component {
 
@@ -84,13 +76,13 @@ export default class QRScan extends Component {
     super(props);
     this.state={
       isResult: true,
+      stationId: "",
       params: this.props.route.params,
-      flashLight: false
+      showInputStation: false
     }
   }
 
   componentDidMount() {
-    //console.log(this.state.params);
     this.props.navigation.addListener('focus', () => {
       setTimeout(() => {
         this.setState({
@@ -190,9 +182,47 @@ 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}
+          isActive={!this.state.isResult}
+        />
+        <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)}
+        />
+
         { !this.state.isResult
           ? <QRCodeScanner
               fadeIn={true}
@@ -230,12 +260,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)"
+  },
 })
-