OrderInfoCell.js 3.71 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 OrderInfoCell extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let {orderCode, orderStatus, orderTime, payWay, expressExisted, showDeliveryOffline} = this.props.data;
        let containerSeparator = expressExisted || showDeliveryOffline ? {borderBottomWidth:0}:{};
        let rightSeparator = expressExisted || showDeliveryOffline ?{borderBottomWidth:0.5}:{};
        let timeInt = parseInt(orderTime) * 1000;
        let date = new Date(timeInt);
        let timeStr = date.getFullYear() + '.' + ((date.getMonth() + 1) > 9
            ? (date.getMonth() + 1)
            : '0' + (date.getMonth() + 1)) + '.' + (date.getDate() > 9
            ? date.getDate()
            : '0' + date.getDate()) + ' ' + (date.getHours() > 9
            ? date.getHours()
            : '0' + date.getHours()) + ':' + (date.getMinutes() > 9
            ? date.getMinutes()
            : '0' + date.getMinutes()) + ':' + (date.getSeconds() > 9
            ? date.getSeconds()
            : '0' + date.getSeconds());
        return (
            <View style={[styles.container, containerSeparator]}>
                <View style={styles.leftPart}>
                    <Image style={{
                        width: 22,
                        height: 22
                    }} source={require('../../image/icon_dingdan.png')}/>
                </View>
                <View style={[styles.rightPart, rightSeparator]}>
                    <View style={styles.topPart}>
                        <Text style={styles.codeText}>订单编号:{orderCode}</Text>
                        <TouchableOpacity style={styles.copyButton} onPress={
                            () => {
                                this.props.onPressCopy&&this.props.onPressCopy(orderCode)
                            }
                        }>
                            <Text style={{
                                fontSize: 12,
                                color: '#444444'
                            }}>复制</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.otherText}>订单状态:{orderStatus}</Text>
                    <Text style={styles.otherText}>下单时间:{timeStr}</Text>
                    <Text style={styles.otherText}>支付方式:{payWay}</Text>
                </View>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: '#f0f0f0',
        borderBottomWidth: 10
    },

    topPart: {
        width: width - 45,
        height: 20,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 13,
        marginBottom: 2
    },

    codeText: {
        fontSize: 14,
        marginBottom: 0,
        color: '#444444'
    },

    copyButton: {
        marginLeft: 10,
        width: 44,
        height: 18,
        borderColor: '#444444',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },

    leftPart: {
        width: 45,
        justifyContent: 'center',
        alignItems: 'center'
    },

    rightPart: {
        width: width - 45,
        flexDirection: 'column',
        borderColor: '#ededed',
        paddingBottom: 10
    },

    otherText: {
        fontSize: 12,
        marginBottom: 3,
        color: '#b0b0b0'
    }
});