ChargEco/Strides-APP/app/pages/wallet/TopupPaythod.js

/**
 * 钱包充值的支付方式列表
 * @邠心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)}>
                <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: {
    marginLeft: 16,
  },
  paytypeText: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold',
    paddingBottom: 14
  },
  cardText: {
    color: "#666",
    fontSize: 8,
    marginTop: -18,
    paddingBottom: 4
  },
  selectIcon: {
    width: 18,
    height: 18,
  },
  accountLogo: {
    width: 36,
    height: 18,
    marginRight: 32
  },
});