1.添加物流step组件

2.修改了高德地图版本号
3.新增了3个公共颜色

src/assets/styles/variable.scss

@@ -29,8 +29,14 @@ $arrowC:#747782;
 $txtBlack:#23262A;
 $txtGray:#8792A4;
 
+// 线颜色
+$line: #eeeeee;
+// 文字色
+$txtGray9: #999999;
+$txtGrayL: #D3D3D3;
 //订单状态颜色
 $orderReturn:#D9001B;
 $orderJm:#02a7f0;
 $orderCold:#4b7902;
 
+

src/components/MapView.vue

 <template>
-  <div id="mapView">
-    <!-- <div id="container" style="width:100%;height:400px"></div> -->
+  <div class="amap-container">
     <el-amap
-      :plugin="plugin"
-      :amap-manager="amapManager"
-      :zoom="zoom"
-      :center="center"
-      vid="amapDemo"
-      ref="reds"
-      style="width:100vw;height:80vh"
-      :events="events"
+      vid="amap-order"
+      class = "amap-box"
+      :resizeEnable="mapInfo.resizeEnable"
+      :amap-manager="mapInfo.amapManager"
+      :zoom="mapInfo.zoom"
+      :center="mapInfo.center"
+      :events="mapInfo.events"
     ></el-amap>
   </div>
 </template>
 
 <script>
-import {AMapManager} from 'vue-amap'
-import VueAMap from 'vue-amap'
-// var map = amapManager.getMap();
-import AMap from 'AMap'
 // 引入高德地图ui组件
-import {lazyAMapApiLoaderInstance} from 'vue-amap'
-
+// eslint-disable-next-line import/no-duplicates
+// import {lazyAMapApiLoaderInstance} from 'vue-amap'
+// eslint-disable-next-line import/no-duplicates
+import VueAMap from 'vue-amap'
+//
 let amapManager = new VueAMap.AMapManager()
 
 export default {
@@ -33,52 +30,25 @@ export default {
     }
   },
   data() {
-    let _obj = this
     return {
-      status: this.value,
-      amapManager,
-      center: [116.379028, 39.865042],
-      plugin: [
-        {
-          pName: 'Scale',
-          events: {
-            init(instance) {
-              console.log(instance)
-            }
-          }
-        }
-      ],
-      zoom: 13,
-      events: {
-        init(o) {
-          // _obj.createMap();
-          o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-          let marker = new AMap.Marker({ // 点图标
-            position: [116.379028, 39.865042]
-          })
-          // o.setZoomAndCenter(16, [116.379028, 39.865042])
-          marker.setMap(o)
-          o.plugin(['AMap.Driving'], function () {
-            var driving = new AMap.Driving({
-              map: o,
-              showTraffic: false // 是否显示拥堵状态
+      mapInfo: {
+        resizeEnable: true, // 是否监控地图容器尺寸变化
+        zoom: 13, // 地图缩放
+        amapManager,
+        center: [116.379028, 39.865042],
+        events: {
+          init(o) {
+            // lazyAMapApiLoaderInstance.load().then(() => {
+            //
+            // })
+            // eslint-disable-next-line no-undef
+            let marker = new AMap.Marker({ // 点图标
+              position: [116.379028, 39.865042]
             })
-            // 地点关键字+ 驾车路线规划
-            driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
-              // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
-              if (status === 'complete') {
-                console.log('绘制驾车路线完成')
-              } else {
-                console.log('获取驾车数据失败：' + result)
-              }
-            }
-            )
-            o.addControl(driving)
-          })
+            marker.setMap(o)
+          }
         }
-      },
-      marker: {},
-      map: {} // 保存地图对象
+      }
     }
   },
   watch: {
@@ -87,19 +57,8 @@ export default {
     }
   },
   mounted() {
-    this.createMapOne()
   },
   methods: {
-    // 创建地图
-    createMapOne() {
-
-    },
-    createMap() {
-      o.setMapStyle('amap://styles/macaron') // 自定义的高德地图的样式，我选的是马卡龙
-      let marker = new AMap.Marker({ // 点图标
-        position: [116.379028, 39.865042]
-      })
-    },
     action() {
       this.$emit('action', '')
     }
@@ -107,7 +66,8 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-#MapView {
-  // height: 44px;
+.amap-container {
+   height: 300px;
+  width: 100%;
 }
 </style>

src/main.js

@@ -14,7 +14,7 @@ Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: '061c2a328572b71e2b26d9dc1a0cc703',
   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
-  v: '1.4.4',
+  v: '2.0',
   uiVersion: '1.0'
 })
 // import './assets/styles/variable.scss'

src/views/myOrder/components/logisticsStep.vue

+<template>
+  <div id="stepLayout">
+    <slot :state="'history'"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'logisticsStep',
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  mounted () {
+    this.calcStepLine()
+  },
+  methods: {
+    calcStepLine () {
+      let lineEle = document.getElementsByClassName('state-line')
+      if (lineEle.length > 0) {
+        lineEle[lineEle.length - 1].style.width = '0px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/myOrder/components/stepItem.vue

+<template>
+  <div class="step-container" :class="'type__'+stepState">
+    <div class="step-time ">
+      <div class="step-date">{{stepInfo.date}}</div>
+      <div class="step-hours">{{stepInfo.hours}}</div>
+    </div>
+    <div class="step-tips">
+      <van-icon class="state-icon" name="smile" />
+      <div class="state-line" ></div>
+    </div>
+    <div class="step-content ">
+      <div class="step-type">{{stepInfo.type}}</div>
+      <div class="step-text">{{stepInfo.text}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'stepItem',
+  data () {
+    return {
+      state: 'normal'
+    }
+  },
+  props: {
+    stepInfo: {
+      type: Object,
+      default: () => {
+        return {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '状态名称',
+          text: '内容信息'
+        }
+      }
+    }
+  },
+  computed: {
+    stepState: function () {
+      return this.$parent.$children[0]._uid === this._uid ? 'normal' : 'history'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .step-container {
+    display: flex;
+    align-items: center;
+    height:60px;
+    //border-bottom: 1px solid $line;
+    /*时间 选中*/
+    .step-time {
+      flex: 1.5;
+      text-align: center;
+      .step-date {
+        color: $txtGray9;
+      }
+      .step-hours {
+        font-size: 14px;
+        font-weight: bold;
+        color: $txtBlack;
+      }
+    }
+    /*图标 连接线*/
+    .step-tips {
+      flex: 0.5;
+      font-size: 18px;
+      position:relative;
+      text-align: center;
+      margin-top:-12px;
+
+      .state-icon{
+        z-index: 100;
+        color: $main1
+      }
+
+      .state-line {
+        position: absolute;
+        z-index:1;
+        left: 0;
+        right: 0;
+        top: 16px;
+        width: 2px;
+        height: 50px;
+        margin: 0 auto;
+        background-size: 2px 11px;
+        background-repeat: repeat-y;
+        background-image: linear-gradient(
+            0deg,
+            $txtGrayL 0%,
+            $txtGrayL 50%,
+            transparent 50%
+        );
+      }
+    }
+    /*内容 选中*/
+    .step-content {
+      flex: 5;
+      margin-left: 2px;
+      .step-type {
+        font-weight: bold;
+        font-size: 15px;
+      }
+      .step-text {
+        font-size: 12px;
+        color: $txtGray9;
+      }
+    }
+  }
+  /*非选中 文字颜色*/
+  .type__history {
+    .step-time {
+      .step-date {
+        color: $txtGrayL;
+      }
+      .step-hours {
+        color: $txtGrayL;
+      }
+    }
+    .step-tips {
+      .state-icon {
+        color: $txtGrayL
+      }
+    }
+    .step-content {
+      .step-type {
+        color: $txtGrayL;
+      }
+
+      .step-text {
+        color: $txtGrayL;
+      }
+    }
+  }
+</style>

src/views/myOrder/detail/logisticsDetail.vue

 <template>
   <div class="logistics-content">
     <map-view/>
-    <div class="logistics-head">
-      <van-icon :name="icons.logo"/>
-      <span>承运商: 绥德库</span>
-      <span>市内</span>
+    <div class="logistics-header">
+      <div class="header-title">
+        <van-icon class="logistic-logo" :name="icons.logo"/>
+        <span class="logistic-name">承运商: <span class="logistic-values">绥德库</span></span>
+        <span class="logistic-type">市内</span>
+      </div>
+      <div class="header-order-info" style="margin-top: 8px">运单号: <span class="logistic-values">3902202102250062</span></div>
+      <div class="header-order-info" style="margin-top:2px;margin-bottom:8px">配送人: <span class="logistic-values">罗平行 13300992222</span></div>
+    </div>
+    <div class="logistics-step-line">
+      <logistics-step>
+        <step-item v-for="(item, index) in stepList" :stepInfo = item :key="index"/>
+      </logistics-step>
     </div>
-    <div >运单号: 3902202102250062</div>
-    <div >配送人: 罗平行 13300992222</div>
-
   </div>
 </template>
 
 <script>
 import MapView from '../../../components/MapView'
+import LogisticsStep from '../components/logisticsStep'
+import StepItem from '../components/stepItem'
 export default {
   name: 'logisticsDetail',
-  components: {MapView},
+  components: {StepItem, LogisticsStep, MapView},
   data () {
     return {
       icons: {
         logo: require('@/assets/img/u48.png')
-      }
+      },
+      stepList: [
+        {
+          date: '2020-03-10',
+          hours: '10:08:12',
+          type: '已签收',
+          text: '您的订单已完成签收，期待再次为您服务。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:11',
+          type: '运输中',
+          text: '乘运商已提货，待运输。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:10',
+          type: '运输中',
+          text: '您的订单正在配送途中，请耐心等待。'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:09',
+          type: '已发货',
+          text: '正在出库中...'
+        },
+        {
+          date: '2020-03-10',
+          hours: '10:08:08',
+          type: '已下单',
+          text: '正在为您积极打包'
+        }
+      ]
     }
   },
   mounted() {
@@ -40,5 +80,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+  .logistics-content {
+    background-color: #fff;
+    height: calc(100vh - 46px);
+    overflow: scroll;
+    .logistics-header {
+      border-bottom: 1px solid $line;
+      padding: 10px;
+      .header-title{
+        display: flex;
+        align-items: center;
+        .logistic-logo {
+          font-size: 22px;
+          margin-right: 6px;
+        }
+        .logistic-name {
+          font-size:13px;
+          font-weight: bold;
+          flex: 1;
+        }
+        .logistic-type {
+          border: 1px solid $orderJm;
+          color: $orderJm;
+          padding: 0 8px;
+          transform: scale(0.8);
+        }
+      }
+      .header-order-info {
+        font-size: 13px;
+        margin-left: 28px;
+      }
+      .logistic-values {
+        margin-left:10px;
+      }
+    }
+  }
 </style>