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

/**
 * 扫描二维码
 * @邠心vbe on 2021/03/24
 */
import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';
import { Styles } from '../../components/Toolbar';
import apiCharge from '../../api/apiCharge';
import { PageList } from '../Router';
import Dialog from '../../components/Dialog';

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++) {
          if (i == (arr.length-1)) {
            cid = arr[i];
          } else {
            if (i > 0) {
              bid += '-';
            }
            bid += arr[i];
          }
        }
        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 => {
          Dialog.dismissLoading();
          back(false, '')
          Dialog.showDialog({
            title: 'Error',
            message: err,
            showCancel: false
          });
        })
      } else {
        back(false, 'Station ID is incorrect')
      }
    } else {
      back(false, 'Station ID is incorrect')
    }
  }
}

export default class QRScan extends Component {

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

  componentDidMount() {
    //console.log(this.state.params);
    setTimeout(() => {
      this.setState({
        isResult: false
      });
    }, 300);
  }

  scanResult = (msg) => {
    this.setState({
      isResult: true
    });
    console.log("result2", msg);
    if (msg.data.indexOf('::') > 0) {
      const arr = msg.data.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;
      }
    }
    Dialog.showDialog({
      title: 'Error',
      message: 'It\'s not a legal QR code',
      showCancel: false,
      callback: (e) => {
      this.setState({
        isResult: false
      });
    }});
  }

  getChargeDetail(qr) {
    apiCharge.checkQRStatus(qr).then(res => {
      if (res.data && res.data.chargeBoxId) {
        QRResult.setResult(res.data);
        if (res.data.sitePk) {
          goBack();
          startPage(PageList.chargeDetail, {stationInfo: {id: res.data.sitePk}, action: 'qr'});
        }
      }
    }).catch(err => {
      Dialog.showDialog({
        title: 'Error',
        message: err,
        showCancel: false,
        callback: (e) => {
        this.setState({
          isResult: false
        });
      }});
    })
  }

  render() {
    return (
      <View style={styles.container}>
        { !this.state.isResult
          ? <QRCodeScanner
              fadeIn={false}
              onRead={this.scanResult}
              reactivate={false}
              reactivateTimeout={1000}
              cameraStyle={{ width: $width, height: $vht(100)}}
              containerStyle={{ width: $width, height: $vht(100)}}
              flashMode={RNCamera.Constants.FlashMode.off}
              checkAndroid6Permissions={true} />
          : <Image
              style={Styles.logo}
              source={require('../../images/tool-logo.png')}/>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#242B32',
    ...StyleSheet.absoluteFillObject
  }
})