ChargEco/Strides-APP/app/pages/payment/PayPerUse.js

/**
 * PayPerUse PayNow支付页面
 * @邠心vbe on 2022/01/10
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
import {CameraRoll} from "@react-native-camera-roll/camera-roll";
import ViewShot from "react-native-view-shot";
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import {check, request, openSettings, PERMISSIONS, RESULTS} from 'react-native-permissions';

export default class PayPerUse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: 0,
      base64: ''
    };
    this.denied = true;
    this.viewShot = React.createRef();
  }

  componentDidMount() {
    if (this.props.route.params.amount) {
      this.setState({
        amount: this.props.route.params.amount,
        base64: 'data:image/png;base64,' + this.props.route.params.base64
      });
    }
  }

  savePhoto() {
    Dialog.showProgressDialog();
    this.viewShot.current.capture().then(uri => {
      Dialog.dismissLoading();
      CameraRoll.save(uri, { type: 'photo' });
      console.log("Save Photo with ", uri);
      toastShort($t('payment.successSave2gallery'));
    }).catch(errs => {
      toastShort(errs)
      Dialog.dismissLoading();
    });
  }

  getPermission() {
    request(
      isIOS 
    ? PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
    : PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
    .then(res => {
      console.log('getPermission', res)
      this.checkPermission();
    }).catch(errs => {
      console.info('getPermission', errs)
    });
  }

  checkPermission() {
    check(
      isIOS 
    ? PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
    : PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE)
    .then(res => {
      switch (res) {
        case RESULTS.UNAVAILABLE:
          console.log('此功能不可用（在此设备上/在此上下文中）');
          if (isIOS) {
            this.savePhoto();
          } else {
            toastShort($t('payment.errSave2gallery'));
          }
          break;
        case RESULTS.DENIED:
          console.log('权限未被请求/被拒绝，但可以请求');
          if (this.denied) {
            this.denied = false;
            this.getPermission();
          } else {
            this.denied = true;
            toastShort($t('payment.errSave2gallery'));
          }
          break;
        case RESULTS.LIMITED:
          console.log('权限是有限的：有些操作是可能的');
          this.savePhoto();
          break;
        case RESULTS.GRANTED:
          console.log('许可被授予');
          this.savePhoto();
          break;
        case RESULTS.BLOCKED:
          console.log('权限被拒绝，不再可请求');
          Dialog.showDialog({
            title: $t('common.error'),
            message: $t('payment.errSave2galleryPermission'),
            ok: $t('payment.btnSetting'),
            callback: btn => {
              if (btn == Dialog.BUTTON_OK) {
                console.log('ok');
                openSettings().catch(() => console.warn('cannot open settings'));
              }
            }
          });
          //toastShort('Save to gallery failed');
          break;
      }
    }).catch(err1 => {

    })
  }

  render() {
    return (
      <ScrollView
        style={styles.container}>
        <View style={styles.headerView}>
          <Text></Text>
        </View>
        <ViewShot
          ref={this.viewShot}
          style={styles.contentView}
          options={{
            format: "jpg",
            quality: 1
          }}>
          { this.state.base64
          ? <Image
              style={styles.qrCode}
              source={{uri: this.state.base64}}/>
          : <View style={styles.qrCode}></View>
          }
        </ViewShot>
        <Text style={styles.title}>{$t('payment.labelAmount')} {currency + ' ' + this.state.amount}</Text>
        <Text style={styles.tips}>{$t('payment.tipsPayPerUseSave')}</Text>
        <Text style={styles.tips}>{$t('payment.tipsPayPerUseCharge')}</Text>
        <Text style={styles.tips}>{$t('payment.tipsPayPerUse')}</Text>
        <View style={styles.button}>
          <Button
            text={$t('payment.btnSave2gallery')}
            elevation={1.5}
            onClick={() => {
              this.checkPermission();
            }}/>
        </View>
        <View style={styles.button2}>
          <Button
            text={$t('payment.paymentCompleted')}
            elevation={1.5}
            onClick={() => {
              goBack();goBack();
            }}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  headerView: {
    paddingBottom: 76,
    //backgroundColor: colorAccent
  },
  contentView: {
    marginTop: -88
  },
  qrCode: {
    margin: 16,
    width: $vw(100) - 32,
    height: $vw(100) - 32,
    borderRadius: 4,
    backgroundColor: '#F0F0F0'
  },
  title: {
    color: textPrimary,
    fontSize: 18,
    paddingBottom: 16,
    textAlign: 'center'
  },
  tips: {
    color: textPrimary,
    ...$padding(0, 16, 16),
  },
  button: {
    margin: 16,
    //paddingBottom: 16
  },
  button2: {
    marginLeft: 16,
    marginRight: 16,
  }
})