使用 时间线timeline 显示物流信息

src/components/order/order.vue

@@ -55,7 +55,7 @@
             label="操作">
             <template slot-scope="scope">
               <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
-              <el-button size="mini" type="success" icon="el-icon-location" @click="edit(scope.row)"></el-button>
+              <el-button size="mini" type="success" icon="el-icon-location" @click="locate(scope.row)"></el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -72,6 +72,18 @@
 
       </el-card>
 
+      <el-dialog
+        title="物流进度"
+        :visible.sync="dialogLocationVisible"
+        width="50%">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(item,i) in progress" :key="i"
+            :timestamp="item.time"
+          >{{item.context}}</el-timeline-item>
+        </el-timeline>
+      </el-dialog>
+
       <el-dialog @close="close" title="修改收货地址" :visible.sync="dialogFormVisible">
         <el-form :model="form" ref="form" :rules="rules" label-width="100">
           <el-form-item label="活动区域" prop="region">
@@ -104,6 +116,7 @@ export default {
         pagesize: 10,
         pagenum: 1
       },
+      dialogLocationVisible: false,
       data: [],
       form: {
         address: '',
@@ -115,6 +128,7 @@ export default {
         children: 'children',
         expandTrigger: 'hover'
       },
+      progress: [],
       options: citydata,
       selectKey: [],
       total: 0,
@@ -130,6 +144,14 @@ export default {
     }
   },
   methods: {
+    async locate (row) {
+      this.dialogLocationVisible = true
+      const { data: res } = await this.$http.get('kuaidi/1106975712662')
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.progress = res.data
+    },
     close () {
       this.$refs.form.resetFields()
       this.selectKey = []

src/main.js

@@ -12,7 +12,11 @@ import vueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css' // import styles
 import 'quill/dist/quill.snow.css' // for snow theme
 import 'quill/dist/quill.bubble.css' // for bubble theme
+import timeline from 'element-ui/lib/timeline'
+import timelineItem from 'element-ui/lib/timeline-item'
 
+Vue.use(timeline)
+Vue.use(timelineItem)
 Vue.use(vueQuillEditor)
 Vue.component('table-tree', tableTree)
 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'