add app/pages/wallet/Topup.js

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

@@ -0,0 +1,258 @@
+/**
+ * 钱包充值页面
+ * @邠心vbe on 2021/05/08
+ */
+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 PaythodList from './PaythodList';
+
+export default class Topup 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
+        })
+      }, true);
+    });
+    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' || params.fomoPayType == 'GRABPAY') {
+        //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 if (res.data.url) {
+            startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.url, type: 'Topup' });
+          } 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.topup();
+            }}/>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+export const WalletTitle = ({children}) => {
+  return (
+    <View style={styles.topupTitle}>
+      <Text style={styles.titleLeft}></Text>
+      <Text style={styles.titleText}>{children}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5F5F5'
+  },
+  headerView: {
+    paddingBottom: 76,
+    //backgroundColor: colorAccent
+  },
+  contentView: {
+    padding: 16,
+    marginTop: -88
+  },
+  topupView: {
+    padding: 16,
+    borderRadius: 10,
+    marginBottom: 16,
+    backgroundColor: colorLight
+  },
+  topupTitle: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  titleLeft: {
+    width: 4,
+    height: 15,
+    borderRadius: 16,
+    backgroundColor: colorPrimary
+  },
+  titleText: {
+    color: textPrimary,
+    fontSize: 16,
+    paddingLeft: 10
+  },
+  subTitle: {
+    color: textPrimary,
+    fontSize: 14,
+    marginTop: 16,
+    marginBottom: 16
+  },
+  topupItems: {
+    paddingBottom: 16,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  topupItem: {
+    flex: 1,
+    height: 60,
+    lineHeight: 60,
+    color: '#666',
+    fontSize: 24,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: '#999',
+    textAlign: 'center'
+  },
+  right: {
+    marginLeft: 20
+  },
+  selected: {
+    color: textLight,
+    borderColor: colorDark,
+    backgroundColor: colorPrimary
+  },
+  autoView: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 14,
+    paddingRight: 32
+  },
+  buttonView: {
+    padding: 16,
+    marginTop: 0,
+    marginBottom: 16
+  }
+})
+
+export const TopupStyle = styles;