PaymentInfoCell.js 2.84 KB
'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform
} from 'react-native';

export default class PaymentInfoCell extends Component {

    constructor(props) {
        super(props);
        this.renderCell = this.renderCell.bind(this);
    }

    renderCell(left, right, last = false) {
        let color = last
            ? '#d0021b'
            : 'black';
        return (
            <View style={styles.cellContainer}>
                <View style={styles.leftPart}>
                    <Text style={styles.text}>{left}</Text>
                </View>
                <View style={styles.rightPart}>
                    <Text style={[styles.text, {
                            color
                        }]}>{right}</Text>
                </View>
            </View>
        )
    }

    render() {
        let {promotionAry, total, type} = this.props.data;
        let payment_desc = type == '2' ? '应付金额' : '实付金额' ;
        return (
            <View style={styles.container}>
                {promotionAry.toJS().map((item, i) => {
                    let {promotion, promotion_amount} = item;
                    return (
                        <View style={styles.cellContainer} key={i}>
                            <View style={styles.leftPart}>
                                <Text style={styles.text}>{promotion}</Text>
                            </View>
                            <View style={styles.rightPart}>
                                <Text style={[
                                    styles.text, {
                                        color: 'black'
                                    }
                                ]}>{promotion_amount}</Text>
                            </View>
                        </View>
                    )
                })}
                {this.renderCell(payment_desc, '¥' + total, true)}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'column',
        backgroundColor: 'white',
        alignItems: 'center',
        borderColor: '#f0f0f0',
        borderBottomWidth: 10,
        paddingTop: 9,
        paddingBottom: 9
    },

    cellContainer: {
        width: width - 30,
        height: 20,
        flexDirection: 'row'
    },

    leftPart: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'row'
    },

    rightPart: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        flexDirection: 'row'
    },

    text: {
        fontSize: 14,
        color: '#444444'
    }
});