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

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

const showInputStationView = true;

export default class QRScan extends Component {
  constructor(props) {
    super(props);
    this.state={
      isResult: true,
      stationId: "",
      params: this.props.route.params,
      showInputStation: false
    }
    this.scaning = false;
    this.stateListener;
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.scaning = false;
      setTimeout(() => {
        this.setState({
          isResult: false
        });
      }, 200);
    });
    this.props.navigation.addListener('beforeRemove', (e) => {
      if (!isIOS && !this.state.isResult) {
        e.preventDefault();
        this.setState({
          isResult: true
        }, () => {
          setTimeout(() => {
            goBack();
          }, 300);
        });
      }
    });
    this.stateListener = AppState.addEventListener("change", state => {
      console.log("state change", state);
      if (state == 'active') {
        if (this.state.isResult) {
          this.setState({
            isResult: false
          });
        }
      } else {
        this.setState({
          isResult: true
        });
      }
    });
    utils.logEventTracking("scan_qr_click")
  }

  componentWillUnmount() {
    if (this.stateListener) {
      this.stateListener.remove();
    }
  }

  scanResult = (codes) => {
    console.log("scanResult", this.scaning);
    if (this.scaning) {
      return;
    }
    this.scaning = true;
    Vibration.vibrate(100);
    this.setState({
      isResult: true
    }, () => {
      const msg = codes[0]
      this.getQrMessage(msg?.value);
    });
  }

  getQrMessage(msg="") {
    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 if (msg.indexOf("http") == 0) {
      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.scaning = false;
        this.setState({
          isResult: false
        });
      },
      onBackPress: btn => {
        this.scaning = false;
        Dialog.dismissDialog();
        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)
          } else {
            this.scaning = false;
          }
        },
        onBackPress: () => {
          Dialog.dismissDialog();
          this.setState({
            isResult: false
          });
          this.scaning = false;
        }
      })
    });
  }

  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
          onResult={this.scanResult}
          isActive={!this.state.isResult}
        />
        { showInputStationView &&
          <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
  },
  btnStationInput: {
    left: 16,
    right: 16,
    bottom: 24,
    zIndex: 2,
    position: 'absolute',
    backgroundColor: "rgba(0,0,0,.4)"
  }
})