add app/pages/wallet/TopupPaythod.js

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

@@ -0,0 +1,133 @@
+/**
+ * 钱包充值的支付方式列表
+ * @邠心vbe on 2023/02/02
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import apiWallet from '../../api/apiWallet';
+import BadgeSelectItem from '../../components/BadgeSelectItem';
+import { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import { PaymentIcon } from '../payment/PaymentConfig';
+
+export default class TopupPaythod extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cIndex: 0,
+      payTypeList: []
+    };
+  }
+
+  componentDidMount() {
+    this.getPayType();
+  }
+
+  getPayType() {
+    apiWallet.getPayTypeList().then(res => {
+      if (res.data) {
+        this.setState({
+          payTypeList: res.data
+        });
+        this.onChange(0);
+      }
+    }).catch(err => {
+
+    });
+  }
+
+  changePayType(index) {
+    this.setState({
+      cIndex: index
+    });
+    this.onChange(index);
+  }
+
+  onChange(index) {
+    if (this.props.onChange) {
+      this.props.onChange(this.state.payTypeList[index]);
+    }
+  }
+
+  getSecuryNumber(number, pk) {
+    if (pk) {
+      const last = number.substring(number.length - 8);
+      var x = ''
+      for (let i = 0; i < number.length - 8; i++) {
+        x += 'X';
+      }
+      return x + last;
+    } else {
+      return " ";
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.listView}>
+        { this.state.payTypeList.map((item, index) => {
+            return (
+              <BadgeSelectItem
+                key={index}
+                style={[
+                  styles.paytypeView,
+                  index > 0 && styles.next
+                ]}
+                checked={index == this.state.cIndex}
+                onPress={() => this.changePayType(index)}>
+                { this.props.showIcon &&
+                  <View style={$padding(12, 8, 8)}>
+                    <PaymentIcon method={item.fomoPayType} checked={index == this.state.cIndex}/>
+                  </View>
+                }
+                <TextView style={[styles.paytypeText, (index == this.state.cIndex && {color: colorAccent})]}>{item.payName}</TextView>
+                {/* <TextView style={styles.cardText}>{this.getSecuryNumber(item.payName, item.cardPk)}</TextView> */}
+              </BadgeSelectItem>
+            );
+          })
+        }
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  listView: {
+    /*flexWrap: 'wrap',
+    flexDirection: 'row'*/
+  },
+  paytypeView: {
+    //flex: 1,
+    alignItems: 'center',
+    backgroundColor: colorLight,
+    ...ElevationObject(5)
+  },
+  selected: {
+    borderColor: colorPrimary
+  },
+  next: {
+    marginTop: 16,
+  },
+  paytypeText: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold',
+    padding: 18
+  },
+  cardText: {
+    color: "#666",
+    fontSize: 8,
+    marginTop: -18,
+    paddingBottom: 4
+  },
+  selectIcon: {
+    width: 18,
+    height: 18,
+  },
+  accountLogo: {
+    width: 36,
+    height: 18,
+    marginRight: 32
+  },
+});
+