MyOrderListCell.js 3.25 KB
'use strict';
import React from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';

import Immutable, {Map} from 'immutable';

export default class MyOrderListCell extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let{cardNo, cardBank} = this.props.data;

        let bankImg = this.getBankImage(cardBank);
        let newCardNo = this.processBankCardNo(cardNo);

        return(
            <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressCard && this.props.onPressCard()}>
                <View style={styles.container} >
                    <Image style={styles.cardBg} source={bankImg} />
                    <Text style={styles.cardNo} numberOfLines={1}>
                        {newCardNo}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }


    //正则替换卡号,保留后4位
    processBankCardNo(cardNo){

        let newCardNo = cardNo.replace(/(\d+)(\d{4})$/, (a, b, c)=> {
            return b.replace(/\d/g, '*') + c;
        });

        return newCardNo;
    }


    getBankImage(bank){
        let bankImg;
        switch(bank){
            case "ABC":
                bankImg = require('../../image/bank/bank-ABC.png');
                break;
            case "BOC":
                bankImg = require('../../image/bank/bank-BOC.png');
                break;
            case "CCB":
                bankImg = require('../../image/bank/bank-CCB.png');
                break;
            case "CEB":
                bankImg = require('../../image/bank/bank-CEB.png');
                break;
            case "CGB":
                bankImg = require('../../image/bank/bank-CGB.png');
                break;
            case "CIB":
                bankImg = require('../../image/bank/bank-CIB.png');
                break;
            case "CITIC":
                bankImg = require('../../image/bank/bank-CITIC.png');
                break;
            case "CMBC":
                bankImg = require('../../image/bank/bank-CMBC.png');
                break;
            case "ICBC":
                bankImg = require('../../image/bank/bank-ICBC.png');
                break;
            case "PAYH":
                bankImg = require('../../image/bank/bank-PAYH.png');
                break;
            case "PSBC":
                bankImg = require('../../image/bank/bank-PSBC.png');
                break;
            default:
                bankImg = require('../../image/bank/bank-EMPTY.png');
                break;
        }
        return bankImg;
    }
};




let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 15 * DEVICE_WIDTH_RATIO,
        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
        paddingRight: 15 * DEVICE_WIDTH_RATIO,

    },
    cardBg:{
        width: 290 * DEVICE_WIDTH_RATIO,
        height: 100 * DEVICE_WIDTH_RATIO,
    },

    cardNo:{
        position: 'absolute',
        top: 85,
        left: 100,
        color: "white",
        fontSize: 22 * DEVICE_WIDTH_RATIO,

    }
});