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

/**
 * 扫描二维码
 * @邠心vbe on 2021/03/24
 * 升级到 react-native-vision-camera
 */
/* eslint-disable no-undef */
import React, { Component, useEffect, useState } from 'react'
import { Pressable, StyleSheet, View, Vibration } from 'react-native'
import { Camera, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';
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';
import utils from '../../utils/utils';

// 函数组件：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 || "");
      }
    },
  });

  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 {

  constructor(props) {
    super(props);
    this.state={
      isResult: true,
      stationId: "",
      params: this.props.route.params,
      showInputStation: false
    }
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      setTimeout(() => {
        this.setState({
          isResult: false
        });
      }, 200);
    });
    this.props.navigation.addListener('beforeRemove', (e) => {
      if (!this.state.isResult) {
        e.preventDefault();
        this.setState({
          isResult: true
        }, () => {
          setTimeout(() => {
            goBack();
          }, 300);
        });
      }
    });
    utils.logEventTracking("scan_qr_click")
  }

  scanResult = (msg) => {
    this.setState({
      isResult: true
    });
    Vibration.vibrate(100);
    utils.logEventTracking("scan_qr_result: " + msg)
    if (msg.indexOf('::') > 0) {
      const arr = msg.split('::');
      if (arr.length == 2) {
        const qr = {
          chargeBoxId: arr[0],
          connectorId: arr[1]
        }
        if (this.state.params.id) {
          qr.sitePk = this.state.params.id
        }
        this.getChargeDetail(qr);
        return;
      }
    } else {
      const qr = {
        qrContent: msg
      }
      if (this.state.params.id) {
        qr.sitePk = this.state.params.id
      }
      this.getChargeDetail(qr);
      return;
    }
    Dialog.showDialog({
      title: 'Error',
      message: 'It\'s not a legal QR code',
      showCancel: false,
      callback: (e) => {
      this.setState({
        isResult: false
      });
    }});
  }

  getChargeDetail(qr) {
    console.log('===============SCAN QR===============');
    console.log(qr);
    console.log('===============SCAN QR===============');
    apiCharge.checkQRStatus(qr).then(res => {
      if (res.data && res.data.chargeBoxId) {
        QRResult.setResult(res.data);
        if (res.data.sitePk) {
          if (this.state.params.actionDetail) {
            startPage(PageList.chargeDetailPage, {stationInfo: {id: res.data.sitePk}, action: 'qr', from: PageList.home});
          } else {
            goBack();
          }
          //startPage(PageList.chargeDetail, {stationInfo: {id: res.data.sitePk}, action: 'qr'});
        }
      }
    }).catch(({err, code}) => {
      Dialog.showDialog({
        title: 'Error',
        message: err,
        showCancel: false,
        callback: (btn) => {
          this.setState({
            isResult: false
          });
          if (code == 5194 && btn == Dialog.BUTTON_OK && app.vehicle.enable) {
            startPage(app.vehicle.newVersionPage ? PageList.vehiclesListV2 : PageList.myVehicles)
          }
        }
      });
    })
  }

  switchFlash() {
    this.setState({
      flashLight: !this.state.flashLight
    })
  }

  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)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
    ...StyleSheet.absoluteFillObject
  },
  tipsScreen: {
    flex: 1,
    padding: 48,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: '#444',
  },
  tipsText: {
    color: textLight,
    fontSize: 14,
    textAlign: "center"
  },
  flashLight: {
    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)"
  },
})