add app/pages/wallet/TopupV2.js

Strides-SPAPP/app/pages/wallet/TopupV2.js

@@ -0,0 +1,170 @@
+/**
+ * 2C2P钱包充值页面
+ * @邠心vbe on 2022/12/27
+ */
+import React, { Component } from 'react';
+import { View, Text, ScrollView, StyleSheet, Switch } from 'react-native';
+import apiWallet from '../../api/apiWallet';
+import Button from '../../components/Button';
+import Dialog from '../../components/Dialog';
+import { PageList } from '../Router';
+import { Balance } from './Payment';
+import { TopupStyle, WalletTitle } from './Topup';
+
+export default class TopupV2 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isAuto: false,
+      topupList: [],
+      selectIndex: 0,
+      payType: {},
+      balance: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.props.navigation.addListener('focus', () => {
+      getUserInfo(info => {
+        this.setState({
+          balance: info.credit
+        })
+      })
+    });
+    this.getTopupList();
+  }
+
+  getTopupList() {
+    Dialog.showProgressDialog();
+    apiWallet.getTopUpAmountList().then(res => {
+      Dialog.dismissLoading();
+      if (res.data.length > 0) {
+        this.setState({
+          topupList: res.data
+        });
+      }
+    }).catch(err => {
+      Dialog.dismissLoading();
+    })
+  }
+
+  topup2() {
+    const params = {
+      payAmount: this.state.topupList[this.state.selectIndex]?.key,
+    }
+    apiWallet.doPaymentV2(params).then(res => {
+      Dialog.dismissLoading();
+      if (res.data.webPaymentUrl) {
+        startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.webPaymentUrl, type: 'Topup' });
+      } else {
+        toastShort('Error 0')
+      }
+    }).catch(err => {
+      Dialog.dismissLoading();
+      toastShort(err);
+    });
+  }
+
+  topup() {
+    const params = {
+      payAmount: this.state.topupList[this.state.selectIndex]?.key,
+      fomoPayType: this.state.payType.fomoPayType
+    }
+    console.log('params',params);
+    if (params.payAmount) {
+      if (params.fomoPayType == 'PAYNOW') {
+        //PAYNOW支付
+        Dialog.showProgressDialog();
+        apiWallet.doPayment(params).then(res => {
+          Dialog.dismissLoading();
+          if (res.data.fomoId && res.data.qrCodeInBase64) {
+            startPage(PageList.paynow, { amount: params.payAmount, base64: res.data.qrCodeInBase64 });
+          } else {
+            toastShort('Error 0')
+          }
+        }).catch(err => {
+          Dialog.dismissLoading();
+          toastShort(err);
+        });
+      } else {
+        //信用卡支付
+        startPage(PageList.formCard, { amount: params.payAmount, payType: params.fomoPayType });
+      }
+    } else {
+      toastShort('Error 1')
+    }
+  }
+
+  render() {
+    return (
+      <ScrollView style={styles.container}>
+        <View style={styles.headerView}>
+          <Balance balance={this.state.balance}/>
+        </View>
+        <View style={styles.contentView}>
+          <View style={styles.topupView}>
+            <WalletTitle>Top Up</WalletTitle>
+            <Text style={styles.subTitle}>Choose Top Up Value: </Text>
+            <View style={styles.topupItems}>
+              { this.state.topupList.map((item, index) => {
+                  return (
+                    <Text
+                      key={index}
+                      style={[
+                        styles.topupItem,
+                        index > 0 && styles.right,
+                        index == this.state.selectIndex && styles.selected]}
+                      onPress={() => {
+                        this.setState({
+                          selectIndex: index
+                        })
+                      }}
+                    >{currency}{item.key}</Text>
+                  );
+                })
+              }
+            </View>
+          </View>
+          {/* <View style={styles.topupView}>
+            <WalletTitle>Payment</WalletTitle>
+            <Text style={styles.subTitle}>Pay with: </Text>
+            <PaythodList
+              onChange={type => {
+                this.setState({
+                  payType: type
+                });
+              }}/>
+          </View> */}
+          {/* <View style={ui.flexc}>
+            <Text
+              style={styles.autoView}
+              onPress={() => {
+                this.setState({
+                  isAuto: !this.state.isAuto
+                });
+              }}>Automatically top up S$20 when wallet balance is below S$5</Text>
+            <Switch
+              value={this.state.isAuto}
+              trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
+              onValueChange={v => {
+                this.setState({
+                  isAuto: v
+                });
+              }}/>
+          </View> */}
+        </View>
+        <View style={styles.buttonView}>
+          <Button
+            text='TOP UP'
+            elevation={1.5}
+            onClick={() => {
+              //startPage(PageList.paycard)
+              this.topup2();
+            }}/>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = TopupStyle;