订单物流信息

+<template>
+  <ul class="time-line-wrapper">
+    <li
+      :class="i === 0 ? 'time-line-item active' : 'time-line-item'"
+      v-for="(lineInfo, i) in lineList"
+      :key="i"
+    >
+      <i class="circle"></i>
+      <span class="content">{{ lineInfo }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      lineList: [
+        "已签收",
+        "南京市正在派送中，请准备签收（派件人：小明 电话：18323458818）",
+        "快件到达【江宁区秣周东路】集散处",
+        "南京市快件在【南京江宁集散中心】已装车，准备发往【南京浦口集散处】"
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.time-line-wrapper {
+  padding: 50px;
+
+  .time-line-item {
+    position: relative;
+    padding: 0 40px 40px 40px;
+    width: 50%;
+    border-left: 1px solid #eee;
+    font-size: 28px;
+    color: #999;
+    display: flex;
+    align-items: flex-start;
+
+    &:last-child {
+      border-left: none;
+    }
+
+    .content {
+      margin-top: -6px;
+    }
+
+    .circle {
+      width: 20px;
+      height: 20px;
+      background: #eee;
+      border-radius: 50%;
+      display: block;
+      position: absolute;
+      left: -10px;
+    }
+
+    &.active {
+      font-size: 32px;
+      color: #000;
+
+      .content {
+        margin-top: 0;
+      }
+
+      & > i {
+        width: 40px;
+        height: 40px;
+        left: -20px;
+        display: block;
+        position: absolute;
+        border-radius: 50%;
+        background-image: url("~statics/image/order/time-icon@3x.png");
+        background-size: contain;
+      }
+    }
+  }
+}
+</style>

+<template>
+  <div class="delivery-wrapper">
+    <ul>
+      <li></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from "vuex";
+
+export default {
+  computed: {}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file

 <template>
   <div class="logistics-wrapper">
-    物流信息
+    <div class="header">
+      <p class="title">{{ logisticInfo.expressSender }}</p>
+      <img class="step" alt="" :src="stageImgUrl" />
+    </div>
+    <div class="platform-delivery-info">
+      <time-line />
+    </div>
+    <div class="platform-identification-info"></div>
+    <div class="seller-delivery-info"></div>
   </div>
 </template>
 
 <script>
 import { createNamespacedHelpers } from "vuex";
-const { mapActions } = createNamespacedHelpers("order/logisticsInfo");
+import TimeLine from "./components/time-line";
+
+const { mapActions, mapState, mapGetters } = createNamespacedHelpers(
+  "order/logisticsInfo"
+);
 
 export default {
-  computed: {},
+  components: {
+    TimeLine
+  },
+  computed: {
+    ...mapState(["logisticInfo"]),
+    ...mapGetters(["stageImgUrl"])
+  },
   mounted() {
     this.fetchLogisticInfo(this.$route.params);
   },
@@ -23,5 +41,11 @@ export default {
 .logistics-wrapper {
   height: 100vh;
   -webkit-box-orient: vertical;
+
+  .step {
+    display: block;
+    margin: 0 auto;
+    height: 100px;
+  }
 }
 </style>
\ No newline at end of file

+/* eslint-disable operator-linebreak */
 export default function() {
   return {
     namespaced: true,
@@ -9,6 +10,13 @@ export default function() {
         state.logisticInfo = data;
       },
     },
+    getters: {
+      stageImgUrl: ({ logisticInfo: { stage } }) => {
+        return stage
+          ? require(`../../statics/image/order/logistics_progress_${stage}@3x.png`)
+          : '';
+      },
+    },
     actions: {
       // 获取物流信息
       async fetchLogisticInfo({ commit }, { owner, code } = {}) {

+// 平台类型
+export const expressType = {
+  1: '卖家',
+  2: 'UFO平台',
+};