1.修改部分细节

2.添加物流详情加载时，骨架显示

src/components/EchartsView.vue

 <template>
-  <div id="chartView" style="height: 300px;width:100%;background-color:#fff"></div>
+  <div id="chartView" style="height: 330px;width:100%;background-color:#fff"></div>
 </template>
 
 <script>
@@ -81,8 +81,8 @@ export default {
         },
         grid: {
           left: '12%',
-          top: '10%',
-          height: '80%',
+          top: '14%',
+          height: '78%',
           width: '86%'
         },
         xAxis: {
@@ -103,8 +103,6 @@ export default {
         yAxis: {
           name: '温度',
           type: 'value',
-          // minInterval: 0.5,
-          // splitNumber: 7,
           axisLine: {
             lineStyle: {
               color: '#eeeeee'
@@ -121,7 +119,8 @@ export default {
             }
           },
           nameTextStyle: {
-            color: '#000'
+            color: '#000',
+            fontSize: 15
           }
         },
         series: [{

src/main.js

@@ -11,17 +11,60 @@ import 'font-awesome/css/font-awesome.min.css'
 
 // import './assets/styles/variable.scss'
 
-import { Button, Toast, Field, Row, Col, NavBar, Search, Uploader, Empty,
-  List, PullRefresh, Popup, Cell, CellGroup, Tab, Tabs, Collapse, Divider, IndexBar, IndexAnchor,
-  CollapseItem, Icon, Image, RadioGroup, Radio, DatetimePicker, Step, Steps, Card, Swipe, SwipeItem,
-  Slider, DropdownMenu, DropdownItem, Grid, GridItem, Tag, ImagePreview, Loading, Checkbox, CheckboxGroup, SwipeCell, Dialog, Stepper } from 'vant'
+import {
+  Button,
+  Toast,
+  Field,
+  Row,
+  Col,
+  NavBar,
+  Search,
+  Uploader,
+  Empty,
+  List,
+  PullRefresh,
+  Popup,
+  Cell,
+  CellGroup,
+  Tab,
+  Tabs,
+  Collapse,
+  Divider,
+  IndexBar,
+  IndexAnchor,
+  CollapseItem,
+  Icon,
+  Image,
+  RadioGroup,
+  Radio,
+  DatetimePicker,
+  Step,
+  Steps,
+  Card,
+  Swipe,
+  SwipeItem,
+  Slider,
+  DropdownMenu,
+  DropdownItem,
+  Grid,
+  GridItem,
+  Tag,
+  ImagePreview,
+  Loading,
+  Checkbox,
+  CheckboxGroup,
+  SwipeCell,
+  Dialog,
+  Stepper,
+  Skeleton
+} from 'vant'
 Vue.use(Button).use(Icon).use(Field).use(Row).use(Col).use(NavBar).use(CellGroup).use(Empty)
   .use(Toast).use(Search).use(List).use(PullRefresh).use(Popup).use(Cell).use(Tab).use(Tabs)
   .use(Collapse).use(CollapseItem).use(Image).use(RadioGroup).use(Radio).use(DatetimePicker)
   .use(Steps).use(Step).use(Card).use(Swipe).use(SwipeItem).use(Slider).use(DropdownMenu)
   .use(DropdownItem).use(Grid).use(GridItem).use(Tag).use(ImagePreview).use(Divider).use(Loading)
   .use(Checkbox).use(CheckboxGroup).use(SwipeCell).use(IndexBar).use(IndexAnchor).use(Uploader).use(Dialog)
-  .use(Stepper)
+  .use(Stepper).use(Skeleton)
 
 Vue.use(Container)
 Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))

src/views/myOrder/components/HighSearchNew.vue

@@ -41,7 +41,7 @@
                 </template>
                 <div @click="showPost('consignor')" v-if="moreSearchInfo.consignor.length === 0" style="background-color: #EFF5F9;" contenteditable="false" placeholder="请选择货主" class="inputInfo">{{consignor}}</div>
                 <div v-for="(item,index) in moreSearchInfo.consignor" :key="index" @click="showPost('consignor')"
-                style="background-color: #EFF5F9;" contenteditable="false" placeholder="请选择货主" class="inputInfo">
+                style="background-color: #EFF5F9;overflow-y:hidden" contenteditable="false" placeholder="请选择货主" class="inputInfo">
                 {{consignorInfoStitching(item)}}</div>
               </van-collapse-item>
             </van-collapse>
@@ -63,7 +63,7 @@
             <div class="title font-bold font-16">商品</div>
             <div :class="isSelectClient === true ? 'nom inputInfo': 'select inputInfo'" contenteditable="false" placeholder="请选择商品">{{goods}}</div>
           </div>
-          
+
         </div>
         <div class="action-bottom">
           <van-button type="default" @click="onCleanClick">重置</van-button>
@@ -616,7 +616,7 @@ export default {
         font-size: 14PX;
         /deep/ .van-cell{
           padding: 5px 0px;
-          
+
         }
         /deep/ .van-cell::after{
           position: fixed;

src/views/myOrder/detail/logisticsDetail.vue

 <template>
   <div class="logistics-content">
     <van-empty description="暂无数据"
-               v-if="!((mapPointList&&mapPointList.length > 0)||(shippingInfo&&shippingInfo.shippingNo)||(stepList&&stepList.length > 0))"/>
+               v-if="!((mapPointList&&mapPointList.length > 0)||
+               (shippingInfo&&shippingInfo.shippingNo)||
+               (stepList&&stepList.length > 0)||
+               (orderInfo.isCold && coldInfo && coldInfo.length > 0)) && !shoppingLoading"/>
     <!--  高德地图  -->
     <a-map-view :transport="sendType" :point-list="mapPointList" :drive-point="driveLine"
                 v-if="mapPointList&&mapPointList.length > 0"/>
     <!--  物流主信息  -->
-    <div class="logistics-header" v-if="shippingInfo&&shippingInfo.shippingNo">
-      <div class="header-title">
-        <van-icon class="logistic-logo" :name="icons.logo"/>
-        <span class="logistic-header-layout">
+    <div class="logistics-header">
+      <van-skeleton avatar :row="3" :loading="shoppingLoading"
+                    style="background-color:#fff;padding-top:10px;padding-bottom:10px">
+        <div class="header-title" v-if="shippingInfo&&shippingInfo.shippingNo">
+          <van-icon class="logistic-logo" :name="icons.logo"/>
+          <span class="logistic-header-layout">
           <div class="header-order-info main-info">
             <span class="logistic-name">承运商:</span>
             <span class="logistic-values">{{ shippingInfo.carrier }}</span>
@@ -20,7 +25,10 @@
           </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>
+            <span class="logistic-values" style="display:flex;">
+              <span style="flex:1">{{ shippingInfo.deliveryMan }} {{ shippingInfo.deliveryManPhone }}</span>
+            <img class="logistic-func-icon" :src="icons.call" @click="callDriver(shippingInfo.deliveryManPhone)"/>
+            </span>
           </div>
           <div class="header-order-info" style="margin-top:2px;margin-bottom:8px"
                v-if="shippingInfo.estimatedArrivalTime && stepInfo && stepInfo.currentOrderStatusCode < 400">
@@ -28,9 +36,11 @@
             <span class="logistic-values">{{ shippingInfo.estimatedArrivalTime }}</span>
           </div>
         </span>
-        <span class="logistic-type">{{ shippingInfo.roadType === 'D' ? '市内' : '市外' }}</span>
-      </div>
+          <span class="logistic-type">{{ shippingInfo.roadType === 'D' ? '市内' : '市外' }}</span>
+        </div>
+      </van-skeleton>
     </div>
+
     <!--  物流追踪信息  -->
     <div id="stepLine" :class="stepList.length>2?'logistics-step-line':'logistics-step-line_show'"
          v-if="stepList&&stepList.length > 0">
@@ -43,7 +53,10 @@
       </div>
     </div>
     <!--  冷链温度趋势  -->
-    <van-tabs v-model="temperatureActive" style="margin-top:18px;">
+    <van-tabs v-if="orderInfo.isCold && coldInfo && coldInfo.length > 0"
+              v-model="temperatureActive"
+              title-active-color="#1989FA"
+              class="tabs">
       <van-tab :title="item.deviceNumber" v-for="(item,index) in coldInfo" :key="index">
         <echarts-view :line-array="item.temperatureInfoList" :car-no="item.deviceNumber"/>
       </van-tab>
@@ -58,6 +71,7 @@ import LogisticsStep from '../components/logisticsStep'
 import StepItem from '../components/stepItem'
 import AMapView from '../../../components/AMapView'
 import EchartsView from '../../../components/EchartsView'
+import {bridge} from '../../../utils'
 
 export default {
   name: 'logisticsDetail',
@@ -66,8 +80,10 @@ export default {
     return {
       orderInfo: this.$route.query,
       temperatureActive: 0,
+      shoppingLoading: true,
       icons: {
-        logo: require('@/assets/img/u48.png')
+        logo: require('@/assets/img/u48.png'),
+        call: require('@/assets/img/ic_call.png')
       },
       shippingInfo: {},
       mapPointList: [],
@@ -102,19 +118,29 @@ export default {
       }
     })
     window.addEventListener('popstate', this.onBrowserBack, false)
-
+    // 获取运单信息
     this.getShippingData()
+    // 获取物流追踪信息
     this.getTrackInfoDetail()
-    this.getTemperatureData()
+    // 获取冷链信息
+    if (this.orderInfo.isCold) {
+      this.getTemperatureData()
+    }
   },
   destroyed() {
     // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
     window.removeEventListener('popstate', this.onBrowserBack, false)
   },
   methods: {
+    /* 返回 */
     onBrowserBack() {
       this.$router.go(-1)
     },
+    /* 拨打配送员电话 */
+    callDriver(str) {
+      bridge.callPhone(str)
+    },
+    /* 全部显示物流追踪详情 */
     showStepLine() {
       let stepEle = document.getElementById('stepLine')
       stepEle.className = 'logistics-step-line_show'
@@ -144,7 +170,6 @@ export default {
           this.driveLine.endPoint.longitude = parseFloat(this.shippingInfo.longitude)
           this.driveLine.endPoint.latitude = parseFloat(this.shippingInfo.latitude)
 
-          // console.log('--->', this.orderInfo.orderStatusCode)
           if (this.orderInfo.orderStatusCode > 300) {
             this.sendType = this.orderInfo.orderStatusCode === '310'
             this.getGpsPoint()
@@ -153,8 +178,8 @@ export default {
           if (rt.code === 500) {
             this.$toast(rt.msg)
           }
-          // console.log('运单信息', '请求无数据')
         }
+        this.shoppingLoading = false
       }).catch(err => {
         console.log('运单信息', err)
         this.$toast('运单信息获取失败')
@@ -223,6 +248,7 @@ export default {
         this.$toast('GIS信息获取失败')
       })
     },
+    /* 获取温度变化趋势数据 */
     getTemperatureData() {
       let data = {
         'order': 'desc',
@@ -253,13 +279,11 @@ export default {
   overflow: scroll;
 
   .logistics-header {
-    border-bottom: 1px solid $line;
-    padding: 10px;
     background-color: #fff;
-
+    border-bottom: 1px solid $line;
     .header-title {
+      padding: 10px;
       display: flex;
-      //align-items: center;
 
       .logistic-logo {
         font-size: 22px;
@@ -268,7 +292,6 @@ export default {
 
       .logistic-header-layout {
         flex: 1;
-        //margin-left: 10px;
         margin-top: 3px;
 
         .main-info {
@@ -303,6 +326,15 @@ export default {
       //margin-left: 10px;
       flex: 8;
     }
+
+    .logistic-func-icon {
+      margin-top: -3px;
+      margin-right: -24px;
+      width: 20px;
+      height: 20px;
+      border: 0.5px solid $orderCold;
+      border-radius: 10px;
+    }
   }
 
   .logistics-step-line {
@@ -334,4 +366,23 @@ export default {
     }
   }
 }
+
+.tabs {
+  margin-top: 16px;
+  padding-bottom: 5px;
+  background-color: #fff;
+
+  /deep/ .van-tab {
+    max-width: 25%;
+  }
+
+  /deep/ .van-tabs__wrap {
+    border-bottom: 1px solid #eeeeee
+  }
+
+  /deep/ .van-tabs__line {
+    width: 23px;
+    border-radius: 5px !important;
+  }
+}
 </style>

src/views/myOrder/detail/orderDetail.vue

@@ -287,7 +287,6 @@ export default {
           res.data.entity && res.data.entity.orderList && res.data.entity.orderList.length > 0) {
           this.detailData = res.data.entity.orderList[0]
           this.detailData.goodsInfos.forEach(item => {
-            // console.log(111, item)
             let mode = item.storageMode
             if (mode.indexOf('冷链') !== -1) {
               // 插入到
@@ -308,6 +307,7 @@ export default {
           this.detailData.goodsInfos = this.detailData.goodsInfos.slice(0, 3)
           // 刷新传参中的订单状态
           this.orderItem.orderStatusCode = this.detailData.orderStatusCode
+          this.orderItem.isCold = this.storageModel.cold
         } else {
           console.log('订单详情', '请求失败')
           if (res.code === 500) {