Order detial presale order history cell. reviewed by redding.

“

@@ -9,6 +9,8 @@ import Footer from './Footer'
 import PaymentInfoCell from './PaymentInfoCell'
 import ExpressCell from './ExpressCell'
 import ProductListCell from './ProductListCell'
+import InvoiceCell from './InvoiceCell'
+import OrderHistoryCell from './OrderHistoryCell'
 
 import ReactNative, {
     View,
@@ -40,6 +42,9 @@ export default class Detail extends Component {
             case 'orderInfo':
                 return (<OrderInfoCell data={rowData}/>);
                 break;
+            case 'orderHistory':
+                return (<OrderHistoryCell data={rowData}/>);
+                break;
             case 'express':
                 return (<ExpressCell data={rowData}/>);
                 break;
@@ -49,6 +54,9 @@ export default class Detail extends Component {
             case 'paymentInfo':
                 return (<PaymentInfoCell data={rowData}/>);
                 break;
+            case 'invoice':
+                return (<InvoiceCell data={rowData}/>);
+                break;
         }
         return null;
     }
@@ -96,18 +104,37 @@ export default class Detail extends Component {
             isPresaleOrder = data.get('attribute') == '9';
         }
 
+        let orderHistoryBlob = null;
+        if (isPresaleOrder) {
+            orderHistoryBlob = {
+                orderCode: order_code,
+                orderStatus: data && data.get('status_str'),
+                tailPayPhone: data && data.get('tail_pay_notice_phone'),
+                historyList: data.get('order_history'),
+            }
+        }
+
         let productListBlob = {
             isVirtualOrder,
             isPresaleOrder,
             list: data && data.get('order_goods'),
         }
+
+        let invoiceBlob = null;
+        if (data && data.get('invoice')) {
+            invoiceBlob = data.get('invoice');
+        }
+
         let dataSource = {
             'address': data
                 ? [addressBlob]
                 : [],
-            'orderInfo': data
+            'orderInfo': data && !isPresaleOrder
                 ? [orderInfoBlob]
                 : [],
+            'orderHistory': isPresaleOrder
+                ? [orderHistoryBlob]
+                : [],
             'express': expressBlob
                 ? [expressBlob]
                 : [],
@@ -116,7 +143,10 @@ export default class Detail extends Component {
                 : [],
             'paymentInfo': data
                 ? [paymentInfoBlob]
-                : []
+                : [],
+            'invoice': invoiceBlob
+                ? [invoiceBlob]
+                : [],
         };
 
         let buttonArray = data
@@ -133,7 +163,7 @@ export default class Detail extends Component {
                             dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                             renderRow={this.renderRow}
                             />
-                            {buttonArray.length? <Footer buttonArray={buttonArray} onPressFooterAction={this.props.onPressFooterAction}/>: null}
+                            {buttonArray.length? <Footer buttonArray={buttonArray} data={data} onPressFooterAction={this.props.onPressFooterAction} refreshDetail={this.props.refreshDetail}/>: null}
                         </View>
                     : <LoadingIndicator isVisible={isFetching}/>}
             </View>

@@ -15,17 +15,68 @@ import ReactNative, {
     Platform
 } from 'react-native';
 
+function getTimerString(timeLeft) {
+    let timerString = '';
+    let minutes = Math.floor(timeLeft%3600/60);
+    if (minutes<10) {
+        minutes = '0' + minutes;
+    }
+    let seconds = Math.floor(timeLeft%60);
+    if (seconds < 10) {
+        seconds = '0' + seconds;
+    }
+    if (Math.floor(timeLeft/3600)) {
+        timerString = Math.floor(timeLeft/3600) + ':' + minutes + ':' +seconds;
+    } else {
+        timerString =  minutes + ':' +seconds;
+    }
+    return '剩余'+timerString;
+}
+
 export default class Detail extends Component {
 
     constructor(props) {
         super(props);
 
+        let {pay_lefttime, counter_flag, is_cancel} = this.props.data.toJS();
+        this.showTimer = counter_flag == 'Y' && is_cancel == 'N' && parseInt(pay_lefttime);
+        if (this.showTimer) {
+            this.state= {
+                timeLeft: parseInt(pay_lefttime),
+                timerString: getTimerString(parseInt(pay_lefttime)),
+            };
+            this.timer=setInterval(() =>{
+                let newTimeLeft = this.state.timeLeft - 1;
+                let newTimerString = getTimerString(newTimeLeft);
+                this.setState({
+                    timeLeft: newTimeLeft,
+                    timerString: newTimerString,
+                })
+                if (newTimeLeft <= 0) {
+                    this.timer&&clearInterval(this.timer);
+                    this.props.refreshDetail && this.props.refreshDetail();
+                }
+            },1000);
+        }
     }
 
-    render() {
+    componentWillUnmount() {
+        this.timer&&clearInterval(this.timer);
+    }
 
+    render() {
+        let {pay_lefttime, counter_flag, is_cancel} = this.props.data.toJS();
         return (
+            <View style={{backgroundColor: 'transparent'}}>
+            {this.showTimer && this.state.timeLeft
+                ? <View style={styles.timerContainer}>
+                    <Image style={styles.clockImage} source={require('../../image/countDown.png')}/>
+                    <Text style={[styles.whiteText, {width: 90}]}>{this.state.timerString}</Text>
+                </View>
+                : null
+            }
             <View style={styles.footer}>
+
                 {this.props.buttonArray.map((item, index) => {
                     let buttonText = '';
                     let buttonStyle = styles.commonButton;
@@ -81,6 +132,7 @@ export default class Detail extends Component {
                     );
                 })}
             </View>
+            </View>
         );
     }
 }
@@ -147,5 +199,18 @@ let styles = StyleSheet.create({
     redText: {
         fontSize: 14,
         color: '#d0021b'
+    },
+    clockImage: {
+        width: 13,
+        height: 13,
+        marginRight: 6,
+    },
+    timerContainer: {
+        width: width,
+        height: 30,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
     }
 });

@@ -15,7 +15,7 @@ import ReactNative, {
     Platform
 } from 'react-native';
 
-export default class PaymentInfoCell extends Component {
+export default class InvoiceCell extends Component {
 
     constructor(props) {
         super(props);
@@ -41,28 +41,15 @@ export default class PaymentInfoCell extends Component {
     }
 
     render() {
-        let {promotionAry, total, type} = this.props.data;
-        let payment_desc = type == '2' ? '应付金额' : '实付金额' ;
+        let {type, title, contentValue, showInvoice, pdfUrl} = this.props.data.toJS();
+        let invoiceType = type == '1' ? '纸质发票' : '电子发票' ;
+        let showLast = showInvoice && type == '2' && pdfUrl && pdfUrl.length;
         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)}
+                {this.renderCell('发票信息', invoiceType, false)}
+                {this.renderCell('发票抬头', title, false)}
+                {this.renderCell('发票内容', contentValue, false)}
+                {showLast ? this.renderCell('', '点击查看电子发票', true) : null}
             </View>
         );
     }

+'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 OrderHistoryCell extends Component {
+
+    constructor(props) {
+        super(props);
+        this.renderCell = this.renderCell.bind(this);
+    }
+    renderCell(item, index) {
+        let {
+            historyList,
+        } = this.props.data;
+        let ary = historyList.toJS();
+
+        //解析数据
+        console.log(item);
+        let {
+            node,
+            node_color,
+            node_time,
+        } = item;
+        node_color = '#' +node_color;
+        //构建颜色
+        let topLineColor = 'white';
+        if (index) {
+            let preIndex = index - 1;
+            let preItem = ary[preIndex];
+            topLineColor = preItem.node_time.length? '#444444' : '#b0b0b0';
+        }
+        let bottomLineColor = '#b0b0b0';
+        if (index == ary.length - 1) {
+            bottomLineColor = 'white';
+        } else if (node_time.length) {
+            bottomLineColor = '#444444';
+        }
+        let ballColor = '#444444';
+        if (node_color == '#b0b0b0') {
+            ballColor = node_color;
+        }
+
+        //构建视图样式
+        let topLineStyle = {
+            position: 'absolute',
+            left: 36,
+            top: 0,
+            width: 1,
+            height: 25,
+            backgroundColor: topLineColor,
+        };
+        let bottomLineStyle = {
+            position: 'absolute',
+            left: 36,
+            top: 25,
+            width: 1,
+            height: 25,
+            backgroundColor: bottomLineColor,
+        };
+        let ballStyle = {
+            position: 'absolute',
+            left: 32,
+            top: 20.5,
+            width: 9,
+            height: 9,
+            borderRadius: 4.5,
+            backgroundColor: ballColor,
+        };
+        let cellContainer = {
+            width: width,
+            height: 50,
+            flexDirection: 'row',
+            alignItems: 'center',
+        };
+        let cellRight = {
+            position: 'absolute',
+            top: 0,
+            left: 59,
+            width: width - 59,
+            height: 50,
+            flexDirection: 'row',
+            borderColor: '#ededed',
+            borderBottomWidth: index == ary.length -1 ? 0 : 0.5,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingRight: 15,
+        };
+        let rightText = {
+            fontSize: 11,
+            color: node_color,
+            fontFamily: 'STHeitiSC-Light',
+        };
+        let leftText = {
+            fontSize: 11,
+            color: '#b0b0b0',
+            fontFamily: 'STHeitiSC-Light',
+        };
+        return (
+            <View style={cellContainer} key={index}>
+                <View style={topLineStyle}/>
+                <View style={bottomLineStyle}/>
+                <View style={ballStyle}/>
+                <View style={cellRight}>
+                    <Text style={rightText}>{node}</Text>
+                    <Text style={leftText}>{node_time}</Text>
+                </View>
+            </View>
+        )
+    }
+    render() {
+        let {
+            orderCode,
+            orderStatus,
+            tailPayPhone,
+            historyList,
+        } = this.props.data;
+        let ary = historyList.toJS();
+        return (
+            <View style={styles.container}>
+                <View style={styles.topContainer}>
+                    <View style={styles.topLeft}>
+                        <Image style={{
+                            width: 22,
+                            height: 22
+                        }} source={require('../../image/icon_dingdan.png')}/>
+                    </View>
+                    <View style={styles.topRight}>
+                        <Text style={styles.codeText}>订单编号：{orderCode}</Text>
+                        <Text style={styles.codeText}>{orderStatus}</Text>
+                    </View>
+                </View>
+                {
+                    ary.map((item, index) => {
+                        return this.renderCell(item, index);
+                    })
+                }
+                <View style={styles.bottomContainer}>
+                    <Text style={styles.codeText}>尾款通知号码：{tailPayPhone}</Text>
+                </View>
+            </View>
+        );
+    }
+}
+
+let {width, height} = Dimensions.get('window');
+
+let styles = StyleSheet.create({
+    container: {
+        width: width,
+        flexDirection: 'column',
+        backgroundColor: 'white',
+        borderColor: '#f0f0f0',
+        borderBottomWidth: 10
+    },
+    topContainer: {
+        width: width,
+        height: 44,
+        borderColor: '#ededed',
+        borderBottomWidth: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    topLeft: {
+        width: 45,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    topRight: {
+        width: width - 45 - 15,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    codeText: {
+        fontSize: 14,
+        color: '#444444',
+        fontFamily: 'STHeitiSC-Light',
+    },
+    bottomContainer: {
+        width: width,
+        height: 44,
+        borderColor: '#ededed',
+        borderTopWidth: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 15,
+    }
+});

@@ -35,7 +35,7 @@ export default class ProductCell extends Component {
         let colorString = '';
         let sizeString = '';
         let refundExchangeImagePath = {uri:''};
-        if (this.props.isVritualOrder) {
+        if (this.props.isVirtualOrder) {
             if (goodsSKN == this.props.yohoodTicketsSkn) {
                 colorString = '日期:'+goodsColor;
                 sizeString = '区域:'+goodsSize;
@@ -132,7 +132,8 @@ let styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-between',
         height: 82,
-        backgroundColor: 'transparent',
+        width:width,
+        backgroundColor: 'white',
     },
     leftMiddleContainer:{
         flexDirection:'row',

@@ -47,6 +47,7 @@ class DetailContainer extends Component {
     constructor(props) {
         super(props);
         this.onPressFooterAction = this.onPressFooterAction.bind(this);
+        this.refreshDetail = this.refreshDetail.bind(this);
         this.subscription = NativeAppEventEmitter.addListener(
             'YHNotificationChangeOnLinePayToCodPay',
             (reminder) => {
@@ -55,6 +56,10 @@ class DetailContainer extends Component {
         );
     }
 
+    refreshDetail() {
+        this.props.actions.getDetail();
+    }
+
     componentDidMount() {
         this.props.actions.getDetail();
     }
@@ -74,6 +79,7 @@ class DetailContainer extends Component {
                 resource={detail}
                 channel={app.channel}
                 onPressFooterAction={this.onPressFooterAction}
+                refreshDetail={this.refreshDetail}
             />
         );
     }