订单物流vue

@@ -124,7 +124,18 @@ const order = {
             module: 'home',
             page: 'order'
         });
+    },
+
+    // 订单-物流
+    logistic: (req, res) => {
+        let orderCode = req.query.orderCode;
+
+        res.render('order-logistic', {
+            module: 'home',
+            page: 'order-logistic',
+            orderCode: orderCode
+        });
     }
 };
 
-module.exports = order;
\ No newline at end of file
+module.exports = order;

@@ -48,4 +48,6 @@ router.post('/save-logistics', refund.saveLogistics); // 退换货 - 添加寄
 router.get('/about-us', home.aboutUs); // 个人中心 - 关于我们
 
 
+router.get('/logistic', order.logistic); // 个人中心 - 订单物流详情
+
 module.exports = router;

+<div class="order-logistic" id="order-logistic">
+    <order-logistic></order-logistic>
+</div>
\ No newline at end of file

+const Vue = require('yoho-vue');
+const orderLogistic = require('home/refund/order-logistic.vue');
+
+new Vue({
+    el: '#order-logistic',
+    data: {
+        company_id: ''
+    },
+    components: {
+        'order-logistic': orderLogistic
+    }
+});

+<template>
+<div class="logistic-page yoho-page">
+    <div class="overview">
+        <div class="left" >
+            <a href="{{logisticUrl}}"><img class="icon" src="{{logisticImg}}" /></a>
+        </div>
+        <div class="right">
+            <div>
+                <span class='info'>物流公司:</span>
+                <span >{{logisticCompany}}</span>
+            </div>
+            <div>
+                <span class='info'>快递单号:</span>
+                <span>{{logisticNumber}}</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="title">
+        <span>物流详情</span>
+    </div>
+
+    <div class="detail">
+        {{# logisticDetail}}
+        <div class="timeline-box ">
+            <span class="timeline-node"></span>
+            <div class="timeline-info">
+                <div class="timeline-info-row">
+                    {{status}}
+                </div>
+                <div class="timeline-info-row">
+                    {{date}}
+                </div>
+            </div>
+        </div>
+        {{/ logisticDetail}}
+    </div>
+</div>
+</template>
+
+<style>
+$logistic_gray: #f0f0f0;
+$border_color_strong: #e5e5e5;
+$border_color_light: #eee;
+
+.logistic-page {
+    background-color: $logistic_gray;
+
+    .overview {
+        height: 120px;
+        line-height: 120px;
+        width: 100%;
+        margin-bottom: 40px;
+        background-color: #fff;
+        color: #464646;
+        border-bottom: 1px solid $border_color_strong;
+
+        .left {
+            width: 19%;
+            float: left;
+            text-align: center;
+            height: 100%;
+
+            .icon {
+                width: 88px;
+                height: 88px;
+                margin: 0 auto;
+                background-size: 100%;
+                background-repeat: no-repeat;
+                background-position: center;
+                margin-top: 16px;
+            }
+        }
+
+        .right {
+            width: 81%;
+            float: left;
+            padding-top: 20px;
+            padding-bottom: 20px;
+            height: 80px;
+
+            div {
+                height: 40px;
+                line-height: 44px;
+                color: #595959;
+                font-size: 24px;
+            }
+        }
+
+        .info {
+            padding-right: 4px;
+        }
+    }
+
+    .title {
+        height: 112px;
+        line-height: 112px;
+        background-color: #fff;
+        padding-left: 40px;
+        font-size: 40px;
+    }
+
+    .detail {
+        background-color: #fff;
+        padding-left: 80px;
+        margin-bottom: 40px;
+    }
+
+    .timeline-box {
+        border-left: 1px solid $border_color_strong;
+        position: relative;
+        padding-left: 52px;
+    }
+
+    .timeline-node {
+        position: absolute;
+        top: 32px;
+        left: -9.04444px;
+        display: inline-block;
+        width: 16.4px;
+        height: 16.4px;
+        background-color: $border_color_strong;
+        border-radius: 100%;
+    }
+
+    .timeline-box:first-child {
+        .timeline-node {
+            background-color: #989898;
+        }
+
+        .timeline-info-row {
+            color: #606060;
+        }
+    }
+
+    .timeline-info {
+        padding: 20px 0;
+        border-bottom: 1px solid $border_color_strong;
+    }
+
+    .timeline-box:last-child {
+        .timeline-info {
+            border: none;
+        }
+    }
+
+    .timeline-info-row {
+        min-height: 40px;
+        line-height: 40px;
+        font-size: 28px;
+        color: #bababa;
+        padding-right: 32px;
+    }
+}
+</style>
+
+
+<script>
+
+</script>
+
+