add app/pages/wallet/PaythodList.js

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

@@ -0,0 +1,125 @@
+/**
+ * 支付方式列表
+ * @邠心vbe on 2021/05/08
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import apiWallet from '../../api/apiWallet';
+import ChargeItemSelect from '../../icons/ChargeItemSelect';
+
+export default class PaythodList 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 number;
+    }
+  }
+
+  render() {
+    return (
+      <View>
+        { this.state.payTypeList.map((item, index) => {
+            return (
+              <Pressable
+                key={index}
+                style={[
+                  styles.paytypeView,
+                  index > 0 && styles.next,
+                  index == this.state.cIndex && styles.selected
+                ]}
+                onPress={() => {
+                  this.changePayType(index);
+                }}>
+                {/* item?.cardPk &&
+                  <Image
+                    style={styles.accountLogo}
+                    source={require('../../images/user/account-visa.png')}/>
+                */}
+                <Text style={styles.paytypeText}>{this.getSecuryNumber(item.payName, item.cardPk)}</Text>
+                <View style={styles.selectIcon}>
+                  <ChargeItemSelect size={18} selected={index == this.state.cIndex} tint={colorPrimary}/>
+                </View>
+              </Pressable>
+            );
+          })
+        }
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  paytypeView: {
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#eee',
+    borderRadius: 10,
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5'
+  },
+  selected: {
+    borderColor: colorPrimary
+  },
+  next: {
+    marginTop: 16,
+  },
+  paytypeText: {
+    flex: 1,
+    color: textPrimary,
+    fontSize: 14,
+  },
+  selectIcon: {
+    width: 18,
+    height: 18,
+  },
+  accountLogo: {
+    width: 36,
+    height: 18,
+    marginRight: 32
+  },
+});