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

/**
 * 扫描二维码
 * @邠心vbe on 2021/03/24
 */
import React, { Component } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';
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++) {
          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')
    }
  }
}

export default class QRScan extends Component {

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

  componentDidMount() {
    //console.log(this.state.params);
    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);
        });
      }
    });
  }

  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;
      }
    } else {
      const qr = {
        qrContent: msg.data
      }
      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) {
            startPage(PageList.myVehicles)
          }
        }
      });
    })
  }

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

  render() {
    return (
      <View style={styles.container}>
        { !this.state.isResult
          ? <QRCodeScanner
              fadeIn={true}
              onRead={this.scanResult}
              reactivate={false}
              reactivateTimeout={1000}
              cameraStyle={{ width: $width, height: $vh(100)}}
              containerStyle={{ width: $width, height: $vh(100)}}
              flashMode={this.state.flashLight ? RNCamera.Constants.FlashMode.torch : RNCamera.Constants.FlashMode.off}
              checkAndroid6Permissions={true} />
          : <View style={ui.flex1}></View>
          /*<Image
              style={Styles.logo}
              source={require('../../images/app-logo.png')}/> */
        }
        { !this.state.isResult &&
          <Pressable
            style={styles.flashLight}
            onPress={() => this.switchFlash()}>
            <MaterialIcons
              name={this.state.flashLight ? "flashlight-on" : "flashlight-off"}
              size={36}
              color="#fff"/>
          </Pressable>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
    ...StyleSheet.absoluteFillObject
  },
  flashLight: {
    bottom: 90,
    zIndex: 2,
    opacity: 0.7,
    padding: 8,
    position: 'absolute'
  }
})