Merge remote-tracking branch 'origin/master'

jiangping

2024-12-16 214e6fe7a754ddf4900e07033a2fda6200f4d7a1

 h5/pages/waybill/waybillDetail.vue

@@ -1,27 +1,31 @@
<template>

   <view class="main_app">

      <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image>
      <!-- <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image> -->

      <map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="4">



      </map>

      <view class="main_content">
      <view class="info">
         <view class="head">
            <view class="code">{{info.contractNumber}}</view>
            <view class="status">{{info.orderStatus}}</view>
               <view class="status">{{info.orderStatusDesc}}</view>
         </view>
         <view class="content">
            <view class="line">
               <view class="la">发货地</view>
               <view class="val">{{info.fromRepertoty || '-'}}</view>
                  <view class="val">{{info.deliveryEnterprise || '-'}}</view>
            </view>
            <view class="line">
               <view class="la">到货地</view>
               <view class="val">{{info.toRepertoty || '-'}}</view>
                  <view class="val">{{info.receiveEnterprise || '-'}}</view>
            </view>
            <view class="line">
               <view class="la">车牌号</view>
               <view class="val">{{info.plateNumber || '-'}}</view>
                  <view class="val">{{info.plateName || '-'}}</view>
            </view>
            <view class="line">
               <view class="la">司机信息</view>
               <view class="val">{{ '-'}}</view>
                  <view class="val" @click="callPhone(info.driverTel)">{{ info.driverName  }} <text class="primaryColor ml12">{{info.driverTel}}</text> </view>
            </view>
            <view class="line">
               <view class="la">车辆位置</view>
@@ -29,48 +33,80 @@
            </view>
            <view class="line">
               <view class="la">预计到达</view>
               <view class="val">{{'-'}}</view>
                  <view class="val">{{info.plannedArrivedDate}}</view>
            </view>
         </view>
      </view>
      <view class="drive_info">
         <view class="title">物流信息</view>
<!--          <view class="item">
            <view class="h2">
               <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
               <view class="text">到达卸货地</view>
            </view>
            <view class="time">202422222222</view>
            <view class="drive_list" v-for="dri,k in info.cicleStatusList">
            <view class="separate"></view>
               <view class="item_title">
                  <view class="icon_wrap">
                     <image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
                     <image v-if="dri.key == 0 && k == 0" src="@/static/waybill/ic_dingdan_sel@2x.png" class="icon"></image>
                     <image v-if="dri.key == 1 && k != 0" src="@/static/waybill/ic_peizai@2x.png" class="icon"></image>
                     <image v-if="dri.key == 1 && k == 0" src="@/static/waybill/ic_peizai_sel@2x.png" class="icon"></image>
                     <image v-if="dri.key == 2 && k != 0" src="@/static/waybill/ic_cangku@2x.png" class="icon"></image>
                     <image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
                     <image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
                     <image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
                     <image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
                     <image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
         </view>
         <view class="item">
            <view class="h2 h1">
               <view class="icon_wrap"><image src="@/static/driver/ic_dangqian.png" class="icon"></image></view>
               <view class="text">到达卸货地</view>
                  <view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
            </view>
            <view class="time">202422222222</view>
            <view class="separate separate_ac"></view>
               <view class="item" v-for="item,i in dri.secondList">
                  <view class="h2" v-if="item.orderStatusDes">
                     <view class="icon_wrap"  v-if="i != 0">
                        <image src="@/static/driver/ic_mostarted.png" class="icon"></image>
         </view>
         <view class="item">
            <view class="h2">
               <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
               <view class="text">到达卸货地</view>
                     <view v-else class="icon_wrap"></view>
                     <view class="text" :class="{placeholder3: k==0 && i== 0}" >
                        {{item.orderStatusDes}}
                        <text v-if="item.tel">，发货仓库电话：</text>
                        <text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
            </view>
            <view class="time">202422222222</view>
            <view class="separate"></view>
         </view> -->
                  </view>
                  <view class="time">{{item.recordDate}}</view>
               </view>
            </view>
         </view>
      </view>
   </view>

</template>



<script>
   import { orderInfoTms } from '@/api'

   import {

      orderInfoTms

   } from '@/api'

   export default {

      data() {

         return {

            id: '',
            info: {},
            param: {}

            param: {},



            latitude: 31.783205,

            longitude: 117.262635,

            markers: [],

            includePoints: [

               // {latitude: 31.783205, longitude: 117.262635}, {latitude: 36.783205, longitude: 118.10},

            ],



            polyline: [

               // {

               //    points: [{

               //       latitude: 31.783205,

               //       longitude: 117.262635

               //    }, {

               //       latitude: 36.783205,

               //       longitude: 118.10

               //    }],

               //    color: '#FF0000',

               //    width: 3

               // }, 
            ]

         };

      },
      onLoad(options) {
@@ -79,10 +115,57 @@
      },
      methods: {
         getDetail() {
            orderInfoTms({ contractNumber: this.id }).then(res => {
            orderInfoTms({

               contractNumber: this.id

            }).then(res => {

               this.info = res.data
               if (res.data.deliveryLat && res.data.receiveLat) {

                  this.markers = []

                  this.markers.push({

                     id: 1,

                     latitude: res.data.deliveryLat,

                     longitude: res.data.deliveryLon,

                     width: 36,

                     iconPath: '/static/driver/ic_fahuodi@2x.png',

                     label: {

                        content: ' ',

                        padding: 3,

                        borderWidth: 2,

                        borderRadius: '50%',

                        borderColor: '#fff',

                        borderRadius: 32,

                        bgColor: '#FF0000'

                     }

                  })

                  this.markers.push({

                     id: 2,

                     latitude: res.data.receiveLat,

                     longitude: res.data.receiveLon,

                     width: 36,

                     iconPath: '/static/driver/ic_huowu@2x.png',

                     label: {

                        content: ' ',

                        padding: 3,

                        borderWidth: 2,

                        borderRadius: '50%',

                        borderColor: '#fff',

                        borderRadius: 32,

                        bgColor: '#FF0000'

                     }

                  })

                  this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 8

                  this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2

               }

               if (res.data && res.data.gisList && res.data.gisList.length > 0) {

                  this.gisInfo = res.data.gisList[0]

               }

            })
         },
         callPhone(phone){
            uni.makePhoneCall({
               phoneNumber: phone
            });
         }

      }

   }

</script>

@@ -91,44 +174,73 @@
   page{
      background-color: #f7f7f7;
   }



   .main_app{
      padding-top: 120rpx;
      .bg{
      padding: 0;

      padding-top: 45vh;

      .main_content{
         height: 55vh ;
         overflow: auto;
         padding: 20rpx 30rpx 0;
         position: relative;
         z-index: 999;
      }

      #map {

         width: 750rpx;
         position: absolute;
         left: 0;
         top: 0;
         height: 105vh;



         ::v-deep .amap-marker-label {

            top: 36px !important;

            left: 12px !important;

            border: 3px solid #fff !important;

            border-radius: 50%;

            box-shadow: #222222 0px 0px 1px;

      }
      }



      .drive_info{
         background: #fff;
         border-radius: 16rpx;
         padding: 30rpx;
         margin-bottom: 20rpx;
         position: relative;

         z-index: 999;

         .separate {
            height: calc( 100% - 250rpx );
            width: 1rpx;
            border: 1rpx dashed #CCCCCC;
            position: absolute;
            left: 53rpx;
            top: 102rpx;
            z-index: -1;
         }

         .title{
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 20rpx;
         }


         .line{
            display: flex;
            margin-bottom: 24rpx;


            .label{
               color: #666666;
               margin-right: 40rpx;
            }
            .val{
               
            .val {}

            }
         }
         .item{
            position: relative;
            color: #999999;
            margin-bottom: 30rpx;
            .h2{
         .item_title{
            font-weight: 600;
            font-size: 32rpx;
               display: flex;
               align-items: center;
               height: 48rpx;
         }
               .icon_wrap{
                  width: 48rpx;
                  margin-right: 30rpx;
@@ -136,37 +248,38 @@
                  align-items: center;
                  justify-content: center;
                  .icon{
                     width: 24rpx;
                     height: 24rpx;
               width: 48rpx;
               height: 48rpx;
                     position: relative;
                     z-index: 2;
                  }
               }
         .item {

            position: relative;

            color: #999999;

            margin-bottom: 30rpx;
            .text{
               color: #666666;
            }
            .h1{
               .icon_wrap{
                  .icon{
                     width: 48rpx;
               width: 20rpx;
               height: 20rpx;
               position: relative;
               z-index: 2;
            }

            .h2 {

               display: flex;

               align-items: center;

                     height: 48rpx;
                  }


            .h1 {

               }
            }


            .time{
               padding-left: 78rpx;
               font-size: 24rpx;
               margin-top: 6rpx;
            }
            .separate{
               height: calc( 100% );
               width: 1rpx;
               border: 1rpx dashed #666666;
               position: absolute;
               left: 22rpx;
               top: 24rpx;
               z-index: 1;
            }
            .separate_ac{
               top: 48rpx;
            }
         }
      }
@@ -179,6 +292,7 @@
         overflow: hidden;
         position: relative;
         z-index: 1;


         .head {
            display: flex;
            justify-content: space-between;
@@ -207,7 +321,7 @@
            .line {
               display: flex;
               margin-bottom: 16rpx;
               font-size: 26rpx;
               font-size: 28rpx;

      
               .la {
                  color: #666666;
@@ -224,6 +338,7 @@
      
      }
   }



   .main_bg {
      position: absolute;
      left: 0;