- 申请退货

- 和物流

mobile-web/src/page/user/aftersale/track.vue

@@ -1,32 +1,48 @@
 <template>
-    <div  style="background: #f7f7f7;">
-        <headerNav title="进度详情"/>
-        
-        <van-cell-group>
-            <van-cell title="服务单号" value="18081609422771742" />
-        </van-cell-group>
-        <van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
-            <van-step>
-                <h3>您的服务单435703816的商品已收到</h3>
-                <p>2016-07-12 12:40</p>
-            </van-step>
-            <van-step>
-                <h3>【城市】物流状态2</h3>
-                <p>2016-07-11 10:00</p>
-            </van-step>
-            <van-step>
-                <h3>快件已发货</h3>
-                <p>2016-07-10 09:30</p>
-            </van-step>
-        </van-steps>
-        
-    </div>
+  <div style="background: #f7f7f7;">
+    <headerNav title="进度详情"/>
+
+    <van-cell-group>
+      <van-cell title="服务单号" :value="serviceNumber"/>
+    </van-cell-group>
+    <van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
+      <van-step v-for="(item, itemIndex) in details" :key="detailIndex">
+        <h3>{{item.logisticsInformation}}</h3>
+        <p>{{item.logisticsTimeText}}</p>
+      </van-step>
+    </van-steps>
+
+  </div>
 </template>
 
 <script>
-export default {
 
-}
+  import moment from 'moment';
+  import { getLogisticsInfo } from '../../../api/order';
+
+  export default {
+    data() {
+      return {
+        serviceNumber: '',
+        details: [],
+      }
+    },
+    mounted() {
+      console.log(this.$route.params)
+      const { id, serviceNumber } = this.$route.params;
+      this.serviceNumber = serviceNumber
+      getLogisticsInfo(id).then(res => {
+        const { details } = res;
+
+        this.details = details.map(item => {
+          return {
+            ...item,
+            logisticsTimeText: moment(item.logisticsTime).format("YYYY-MM-DD HH:mm")
+          }
+        })
+      })
+    },
+  }
 </script>
 
 <style>