add app/pages/wallet/CardList.js

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

@@ -0,0 +1,134 @@
+/**
+ * 信用卡列表
+ * @邠心vbe on 2021/05/11
+ */
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import apiWallet from '../../api/apiWallet';
+import { ElevationObject } from '../../components/Button';
+
+export class CardList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      cardList: [],
+      refreshId: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.refreshCardList();
+  }
+
+  componentDidUpdate() {
+    if (this.state.refreshId != this.props.refreshId) {
+      this.setState({
+        refreshId: this.props.refreshId,
+      });
+      this.refreshCardList();
+    }
+  }
+
+  refreshCardList() {
+    apiWallet.getCardList().then(res => {
+      if (res.data) {
+        this.setState({
+          cardList: res.data
+        });
+      }
+    }).catch(err => {
+  
+    });
+  }
+
+  getSecuryNumber(number) {
+    const last = number.substring(number.length - 2);
+    var x = ''
+    for (let i = 0; i < number.length - 2; i++) {
+      x += 'X';
+    }
+    return x + last;
+  }
+
+  render() {
+    return (
+      this.state.cardList.length > 0
+      ? this.state.cardList.map((item, index) => {
+          return (
+            <View
+              key={index}
+              style={styles.accountView}>
+              <Image
+                style={styles.bgAccount}
+                source={require('../../images/user/bg-item-card.png')}/>
+              <View style={styles.accountRow}>
+                <View style={ui.flex1}>
+                  <View style={styles.accountRow}>
+                    <Image
+                      style={styles.accountLogo}
+                      source={require('../../images/user/account-visa.png')}/>
+                    <View>
+                      <Text
+                        ellipsizeMode='tail'
+                        numberOfLines={1}
+                        style={styles.accountName}>{item.nameOnCard}</Text>
+                      <Text style={styles.accountType}>({item.validTill})</Text>
+                    </View>
+                  </View>
+                  <Text style={styles.accountNumber}>{this.getSecuryNumber(item.cardNumber) + ' - ' + item.cardCvv}</Text>
+                </View>
+                <FontAwesome
+                  size={24}
+                  color={colorAccent}
+                  name='angle-right'/>
+              </View>
+            </View>
+          );
+        })
+      : <Text style={ui.noData}>No Cards</Text>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  accountView: {
+    padding: 16,
+    borderRadius: 10,
+    overflow: 'hidden',
+    marginBottom: 16, 
+    borderColor: '#f5f5f5',
+    borderWidth: 1,
+    backgroundColor: 'white',
+    ...ElevationObject(1.5)
+  },
+  bgAccount: {
+    left: 0,
+    bottom: 0,
+    width: 69.5,
+    height: 21,
+    position: 'absolute'
+  },
+  accountRow: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  accountLogo: {
+    width: 36,
+    height: 18,
+    marginRight: 12
+  },
+  accountName: {
+    color: '#000',
+    fontSize: 14
+  },
+  accountType: {
+    color: '#333',
+    fontSize: 12
+  },
+  accountNumber: {
+    color: '#000',
+    fontSize: 15,
+    paddingTop: 16
+  },
+})