1.完成 物流追踪详情的逻辑

src/api/myOrder.js

@@ -54,3 +54,21 @@ export function getOrderClearanceList(params) {
     loading: true
   })
 }
+// 获取运单信息
+export function getShippingInfo(params) {
+  return fetch({
+    url: '/OrderLife/ShIppOrder',
+    method: 'post',
+    data: params,
+    loading: true
+  })
+}
+// 地图点
+export function getGpsMapPoint(params) {
+  return fetch({
+    url: '/OrderLife/GisMapInfo',
+    method: 'post',
+    data: params,
+    loading: true
+  })
+}

src/views/myOrder/components/stepItem.vue

@@ -2,11 +2,13 @@
   <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 class="step-hours">{{stepInfo.time}}</div>
     </div>
     <div class="step-tips">
-      <van-icon class="state-icon" name="smile" />
-      <div class="state-line" ></div>
+      <div >
+        <van-icon class="state-icon" name="smile" />
+      </div>
+      <div class="state-line" v-show="stepInfo.showLine"></div>
     </div>
     <div class="step-content ">
       <div class="step-type">{{stepInfo.type}}</div>
@@ -29,9 +31,10 @@ export default {
       default: () => {
         return {
           date: '2020-03-10',
-          hours: '10:08:08',
+          time: '10:08:08',
           type: '状态名称',
-          text: '内容信息'
+          text: '内容信息',
+          showLine: true
         }
       }
     }

src/views/myOrder/detail/logisticsDetail.vue

 <template>
   <div class="logistics-content">
     <map-view/>
-    <div class="logistics-header">
+    <div class="logistics-header" v-if="shippingInfo">
       <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-header-layout">
+          <div class="header-order-info main-info">
+            <span class="logistic-name">承运商:</span>
+            <span class="logistic-values">{{ shippingInfo.carrier }}</span>
+          </div>
+          <div class="header-order-info" style="margin-top: 8px">
+            <span class="logistic-name">运单号:</span>
+            <span class="logistic-values">{{ shippingInfo.shippingNo }}</span>
+          </div>
+          <div class="header-order-info" style="margin-top: 2px;" v-if="shippingInfo.deliveryMan">
+            <span class="logistic-name">配送人:</span>
+            <span class="logistic-values">{{ shippingInfo.deliveryMan }} {{ shippingInfo.deliveryManPhone }}</span>
+          </div>
+          <div class="header-order-info" style="margin-top:2px;margin-bottom:8px"
+               v-if="shippingInfo.estimatedArrivalTime">
+            <span class="logistic-name">预计到达时间:</span>
+            <span class="logistic-values">{{ shippingInfo.estimatedArrivalTime }}</span>
+          </div>
+        </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">
+    <div id="stepLine" class="logistics-step-line">
       <logistics-step>
-        <step-item v-for="(item, index) in stepList" :stepInfo = item :key="index"/>
+        <step-item v-for="(item, index) in stepList" :stepInfo=item :key="index"/>
       </logistics-step>
+      <div class="show-more" @click="showStepLine">
+        点击查看更多物流详情
+        <van-icon name="arrow-down"/>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import {getShippingInfo, getTrackInfo, getGpsMapPoint} from '@/api/myOrder'
 import MapView from '../../../components/MapView'
 import LogisticsStep from '../components/logisticsStep'
 import StepItem from '../components/stepItem'
+
 export default {
   name: 'logisticsDetail',
   components: {StepItem, LogisticsStep, MapView},
-  data () {
+  data() {
     return {
+      orderInfo: this.$route.query,
       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: '正在为您积极打包'
-        }
-      ]
+      shippingInfo: {},
+      stepList: []
     }
   },
   mounted() {
@@ -76,6 +69,9 @@ export default {
       rightClick: null
     })
     window.addEventListener('popstate', this.onBrowserBack, false)
+
+    this.getShippingData()
+    this.getTrackInfoDetail()
   },
   destroyed() {
     // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
@@ -84,45 +80,166 @@ export default {
   methods: {
     onBrowserBack() {
       this.$router.go(-1)
+    },
+    showStepLine() {
+      let stepEle = document.getElementById('stepLine')
+      stepEle.className = 'logistics-step-line_show'
+    },
+    getShippingData() {
+      console.log(this.orderInfo)
+      let data = {
+        'orderId': '',
+        'orderNo': this.orderInfo.orderNo, // '879202103190016',
+        'orderType': this.orderInfo.orderType, // 'SALE',
+        'sourceDb': this.orderInfo.sourceDb, // 'SHYY',
+        'pageSize': 10,
+        'pageNum': 1,
+        'sort': '',
+        'order': ''
+      }
+      getShippingInfo(data).then(rt => {
+        if (rt.code === 200 && rt.data && rt.data.code === '00000' &&
+          rt.data.entity && rt.data.entity.shippingList && rt.data.entity.shippingList.length > 0) {
+          this.shippingInfo = rt.data.entity.shippingList[0]
+
+          this.getGpsPoint()
+        } else {
+          console.log('运单信息', '请求无数据')
+        }
+      }).catch(err => {
+        console.log('运单信息', err)
+      })
+    },
+    /* 物流追踪 */
+    getTrackInfoDetail() {
+      let data = {
+        'sourceDb': this.orderInfo.sourceDb,
+        'supplierId': [this.orderInfo.supplierId],
+        'clientID': [this.orderInfo.clientId],
+        'orderId': '',
+        'orderNo': this.orderInfo.orderNo,
+        'orderType': this.orderInfo.orderType,
+        'supplierCode': [
+          this.orderInfo.supplierCode
+        ],
+        'clientCode': [this.orderInfo.clientCode]
+      }
+      getTrackInfo(data).then(res => {
+        if (res.code === 200 && res.data && res.data.code === '00000' &&
+          res.data.entity && res.data.entity.logisticsTrackingInfoList) {
+          let trackData = res.data.entity.logisticsTrackingInfoList
+          let tempStep = []
+          trackData.orderStatusInfoVoList.forEach((item, index) => {
+            tempStep.push({
+              date: item.opDate.split(' ')[0],
+              time: item.opDate.split(' ')[1],
+              type: item.orderStatus,
+              text: item.statusMsg,
+              showLine: index !== (trackData.orderStatusInfoVoList.length - 1)
+            })
+          })
+          this.stepList = tempStep
+        }
+      }).catch(err => {
+        console.log('物流跟踪', err)
+      })
+    },
+    /* GPS 定位信息 */
+    getGpsPoint() {
+      let data = {
+        'orderType': this.orderInfo.orderType, // 'SALE',
+        'shippingNo': this.shippingInfo.shippingNo, // '3S1255202103190010',
+        'sourceDb': this.orderInfo.sourceDb, // 'SHYY',
+        'gisTime': '',
+        'orderNo': this.orderInfo.orderNo // '879202103190016'
+      }
+      getGpsMapPoint(data).then(res => {
+
+      }).catch(err => {
+        console.log('GPS信息', err)
+      })
     }
   }
 }
 </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;
+.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-header-layout {
+        flex: 1;
+        //margin-left: 10px;
+        margin-top: 3px;
+
+        .main-info {
+          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;
+
+      .logistic-type {
+        border: 1px solid $orderJm;
+        color: $orderJm;
+        padding: 0 8px;
+        transform: scale(0.8);
+        height: 100%;
+        margin-top: 3px;
       }
     }
+
+    .header-order-info {
+      font-size: 13px;
+      //margin-left: 28px;
+      display: flex;
+    }
+
+    .logistic-name {
+      flex: 4;
+    }
+
+    .logistic-values {
+      //margin-left: 10px;
+      flex: 8;
+    }
   }
+
+  .logistics-step-line {
+    height: 150px;
+    overflow: hidden;
+    position: relative;
+
+    .show-more {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      height: 30px;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      z-index: 999;
+    }
+  }
+
+  .logistics-step-line_show {
+    .show-more {
+      display: none;
+    }
+  }
+}
 </style>

src/views/myOrder/detail/orderDetail.vue

@@ -173,7 +173,7 @@ export default {
     openLogistics() {
       this.$router.push({
         path: 'logisticsDetail',
-        query: this.$store.state.linkInfo
+        query: this.orderItem
       })
     },
     /* 打开商品列表页面 */
@@ -289,6 +289,7 @@ export default {
         console.log('订单详情', err)
       })
     },
+    /* 物流追踪 */
     getTrackInfoDetail() {
       let data = {
         'sourceDb': this.orderItem.sourceDb,