add app/pages/payment/PayNow.js

Strides-SPAPP/app/pages/payment/PayNow.js

@@ -0,0 +1,312 @@
+/**
+ * PayNow支付页面
+ * @邠心vbe on 2021/05/12
+ */
+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 { Balance } from '../wallet/Payment';
+import {check, request, openSettings, PERMISSIONS, RESULTS} from 'react-native-permissions';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+
+export default class PayNow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      amount: 0,
+      base64: '',
+      qrInfo: {
+        merchantUEN: "",
+        merchantName: "",
+        paymentAmount: "",
+        expirationTime: "",
+        imageBase64Code: ""
+      },
+      isNewVersion: false
+    };
+    this.denied = true;
+    this.viewShot = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.props.route.params.info) {
+      this.setState({
+        qrInfo: this.props.route.params.info,
+        isNewVersion: true
+      })
+      console.log("新版ANZ支付");
+    } else if (this.props.route.params.amount) {
+      this.setState({
+        isNewVersion: false,
+        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
+    : utils.getFilePermissionString())
+    .then(res => {
+      console.log('getPermission', res)
+      this.checkPermission();
+    }).catch(errs => {
+      console.info('getPermission', errs)
+    });
+  }
+
+  checkPermission() {
+    check(
+      isIOS 
+    ? PERMISSIONS.IOS.PHOTO_LIBRARY_ADD_ONLY
+    : utils.getFilePermissionString())
+    .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() {
+    if (this.state.isNewVersion) {
+      return (
+        <ScrollView
+          style={styles.container}
+          contentContainerStyle={ui.center}>
+          {/* <View style={styles.headerInfo}>
+            <TextView style={styles.paymentTitle}>PAYMENT TO:</TextView>
+            <TextView style={styles.paymentText}>{this.state.qrInfo.merchantName}</TextView>
+            <TextView style={styles.paymentText}>({this.state.qrInfo.merchantUEN})</TextView>
+          </View> */}
+          <EndView/>
+          <ViewShot
+            ref={this.viewShot}
+            style={styles.contentView2}
+            options={{
+              format: "png",
+              quality: 1,
+              fileName: "PayNow"
+            }}>
+            <View style={ui.center}>
+              <EndView/>
+              <Image
+                source={require('../../images/tool-logo.png')}
+                style={{width: $vw(50), height: $vw(11)}}
+                resizeMode="contain"
+              />
+            </View>
+            { this.state.qrInfo.imageBase64Code
+            ? <Image
+                style={styles.qrCode2}
+                source={{uri: this.state.qrInfo.imageBase64Code}}/>
+            : <View style={styles.qrCode2}></View>
+            }
+            <View style={$padding(0, 16, 16)}>
+              <View style={ui.flexc}>
+                <TextView style={styles.qrTextLabel}>PAYMENT AMOUNT:</TextView>
+                <TextView style={styles.qrTextMsg}>{this.state.qrInfo.paymentAmount}</TextView>
+              </View>
+              <View style={ui.flexc}>
+                <TextView style={styles.qrTextLabel}>EXPIRATION TIME:</TextView>
+                <TextView style={styles.qrTextMsg}>{this.state.qrInfo.expirationTime}</TextView>
+              </View>
+            </View>
+          </ViewShot>
+          <View style={styles.button3}>
+            <Button
+              style={ui.flex1}
+              text={$t('payment.btnSave2gallery')}
+              elevation={1.5}
+              onClick={() => {
+                this.checkPermission();
+              }}/>
+          </View>
+        </ScrollView>
+      )
+    } else {
+      return (
+        <ScrollView
+          style={styles.container}>
+          <View style={styles.headerView}>
+            <Balance/>
+          </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.labelTopUpAmount')} {currency + ' ' + this.state.amount}</Text>
+          <Text style={styles.tips}>{$t('payment.tipsQrPaymentSave')}</Text>
+          <Text style={styles.tips}>{$t('payment.tipsQrPayment')}</Text>
+          <View style={styles.button2}>
+            <Button
+              text={$t('payment.btnSave2gallery')}
+              elevation={1.5}
+              onClick={() => {
+                this.checkPermission();
+              }}/>
+          </View>
+          <View style={styles.button}>
+            <Button
+              text={$t('payment.paymentCompleted')}
+              elevation={1.5}
+              onClick={() => {
+                goBack();
+              }}/>
+          </View>
+          
+        </ScrollView>
+      );
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5F5F5'
+  },
+  headerView: {
+    paddingBottom: 76,
+    //backgroundColor: colorAccent
+  },
+  headerInfo: {
+    ...$padding(32, 16),
+    alignItems: 'center'
+  },
+  contentView: {
+    marginTop: -88
+  },
+  contentView2: {
+    padding: 8,
+    marginTop: 8,
+    borderRadius: 4,
+    backgroundColor: colorLight
+  },
+  qrCode: {
+    margin: 16,
+    width: $vw(100) - 32,
+    height: $vw(100) - 32,
+    borderRadius: 4,
+    backgroundColor: '#efefef'
+  },
+  qrCode2: {
+    width: $vw(85) - 32,
+    height: $vw(85) - 32,
+    borderRadius: 4,
+    backgroundColor: '#efefef'
+  },
+  title: {
+    color: textPrimary,
+    fontSize: 18,
+    paddingBottom: 16,
+    textAlign: 'center'
+  },
+  tips: {
+    color: textPrimary,
+    padding: 16,
+  },
+  button: {
+    margin: 16,
+    paddingBottom: 16
+  },
+  button2: {
+    marginLeft: 16,
+    marginRight: 16
+  },
+  button3: {
+    ...$margin(56, 16, 40),
+    flexDirection: 'row'
+  },
+  paymentTitle: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  paymentText: {
+    color: textPrimary,
+    fontSize: 15,
+    paddingTop: 2
+  },
+  qrTextLabel: {
+    color: textPrimary,
+    padding: 2,
+    fontSize: 11,
+    fontWeight: 'bold'
+  },
+  qrTextMsg: {
+    color: textPrimary,
+    fontSize: 11,
+    paddingLeft: 2
+  }
+})