rk
2025-09-24 f3c59a17062fb0a89b5f89b7845341386952a6b1
h5/pages/waybill/waybillDetail.vue
@@ -6,6 +6,10 @@
      </map>
      <view class="main_content">
         <view class="info">
            <view class="stock_status" v-if="info.overStock && info.overStock == 1">
               <image src="@/static/ic_tip@2x.png" mode=""></image>
               <view class="">因库存不足,订单暂时无法配载</view>
            </view>
            <view class="head">
               <view class="code">{{info.contractNumber}}</view>
               <view class="status">{{info.orderStatusDesc}}</view>
@@ -30,12 +34,28 @@
               </view>
               <view class="line">
                  <view class="la">车辆位置</view>
                  <view class="val">{{'-'}}</view>
                  <view class="val">{{ info.address || '-'}}</view>
               </view>
               <view class="line">
                  <view class="la">预计到达</view>
                  <view class="val primaryColor" v-if="info.plannedArrivedDate">{{info.plannedArrivedDate.slice(0,11)}}</view>
               </view>
               <view v-if="showRecord" class="table">
                  <view class="ite header">
                     <view class="name">品规名称</view>
                     <view class="num">数量<text>(万支)</text></view>
                  </view>
                  <view class="ite" v-for="ite in info.orderDetailVOList">
                     <view class="name">{{ite.productName}}</view>
                     <view class="num">{{ite.pnumber}}</view>
                  </view>
               </view>
               <view class="line switch" @click="showRecord = !showRecord">
                  <view class="">{{  showRecord ? '收起品规明细' : '查看品规明细'}}</view>
                  <u-icon v-if="!showRecord" name="arrow-down" size="12" class="ml6" color='#666666'></u-icon>
                  <u-icon v-if="showRecord" name="arrow-up" size="12" class="ml6" color='#666666'></u-icon>
               </view>
            </view>
         </view>
         <view class="drive_info">
@@ -52,7 +72,8 @@
                     <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 == 4 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
                     <image v-if="dri.key == 4 && k == 0" 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="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
@@ -64,9 +85,12 @@
                     </view>
                     <view v-else class="icon_wrap"></view>
                     <view class="text" :class="{placeholder3: k==0 && i== 0}">
                        {{item.orderStatusDes}}
                        <text :style="{ color: item.orderStatus === 9 ? 'red' : '#666666'}">{{item.orderStatusDes}}</text>
                        <text v-if="item.tel">,发货仓库电话:</text>
                        <text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
                        <template v-if="item.tel">
                           <text v-for="phone,p in item.tel.split(',')" @click="callPhone(phone)" class="primaryColor">{{phone}}<text v-if="p < item.tel.split(',').length - 1">,</text></text>
                        </template>
                     </view>
                  </view>
                  <view class="time">{{item.recordDate}}</view>
@@ -89,7 +113,7 @@
            param: {},
            latitude: 31.783205,
            longitude: 117.262635,
            longitude: 117.262635,
            scale: 5,
            markers: [],
            includePoints: [
@@ -108,7 +132,8 @@
               //    color: '#FF0000',
               //    width: 3
               // }, 
            ]
            ],
            showRecord: false
         };
      },
      onLoad(options) {
@@ -156,20 +181,31 @@
                     }
                  })
                  this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 4
                  this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
                  const distance = this.distance()
                  console.log('distance', distance);
                  if(distance > 1500000){
                     this.scale = 4
                  }else if(distance < 600000){
                     this.scale = 6
                  }else{
                     this.scale = 5
                  this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
                  const distance = this.distance()
                  console.log('distance', distance);
                  if(distance > 1500000){
                     this.scale = 4
                  }else if(distance < 600000){
                     this.scale = 6
                  }else{
                     this.scale = 5
                  }
               }
               if (res.data && res.data.gisList && res.data.gisList.length > 0) {
                  this.gisInfo = res.data.gisList[0]
                  if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) {
                     // const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0';
                     const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3';
                     let adsInfo = this.gisInfo.gisList[this.gisInfo.gisList.length - 1]
                     const location = adsInfo.lon1 + ',' + adsInfo.lat1;
                     uni.request({
                        url: `https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`,
                        method: 'GET',
                        success: (res) => {
                           this.$set(this.info, 'address', res.data.regeocode.formatted_address)
                        },
                     })
                     this.polyline = []
                     let temp = {
                        color: '#ff0000',
@@ -184,6 +220,7 @@
                     this.polyline.push(temp)
                  }
               }
            })
         },
         distance() {
@@ -251,21 +288,21 @@
         background: #fff;
         border-radius: 16rpx;
         padding: 30rpx;
         margin-bottom: 20rpx;
         position: relative;
         margin-bottom: 20rpx;
         position: relative;
         z-index: 999;
         .drive_list{
            position: relative;
            z-index: 999;
            .separate {
               height: calc(100% - 48rpx);
               width: 1rpx;
               border: 1rpx dashed #CCCCCC;
               position: absolute;
               left: 24rpx;
               top: 48rpx;
               z-index: -1;
            }
         .drive_list{
            position: relative;
            z-index: 999;
            .separate {
               height: calc(100% - 48rpx);
               width: 1rpx;
               border: 1rpx dashed #CCCCCC;
               position: absolute;
               left: 24rpx;
               top: 48rpx;
               z-index: -1;
            }
         }
         
@@ -314,12 +351,12 @@
            position: relative;
            color: #999999;
            margin-bottom: 30rpx;
            &:nth-last-child(1){
               margin-bottom: 0;
               padding-bottom: 30rpx;
            &:nth-last-child(1){
               margin-bottom: 0;
               padding-bottom: 30rpx;
            }
            .text {
               color: #666666;
               color: #666666;
               flex: 1;
            }
@@ -327,7 +364,7 @@
               width: 20rpx;
               height: 20rpx;
               position: relative;
               z-index: 2;
               z-index: 2;
               margin-top: 12rpx;
            }
@@ -346,7 +383,6 @@
            }
         }
      }
      .info {
         border-radius: 12rpx;
         margin-bottom: 20rpx;
@@ -355,17 +391,36 @@
         overflow: hidden;
         position: relative;
         z-index: 1;
         .stock_status{
            background: #FFEEEE;
            font-size: 26rpx;
            color: #ED4545;
            display: flex;
            align-items: center;
            border-radius: 8rpx 8rpx 0rpx 0rpx;
            height: 80rpx;
            margin: 0rpx -30rpx 0;
            position: relative;
            z-index: 1;
            padding: 0 30rpx;
            image{
               width: 28rpx;
               height: 28rpx;
               margin-right: 10rpx;
            }
         }
         .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;
            width: 690rpx;
            border-radius: 8rpx 8rpx 0rpx 0rpx;
            height: 84rpx;
            margin: 0 -30rpx;
            background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
            position: relative;
            z-index: 11;
            .code {
               font-weight: 500;
               font-size: 32rpx;
@@ -391,12 +446,47 @@
                  width: 140rpx;
               }
               .val {}
               .val {
                  flex: 1;
               }
               &:nth-last-child(1) {
                  margin-bottom: 0;
               }
            }
            .table{
               margin: 0 auto 20rpx;
               .ite{
                  width: 100%;
                  height: 68rpx;
                  background: #FFFFFF;
                  border-bottom: 1rpx solid #E5E5E5;
                  display: flex;
                  align-items: center;
                  font-size: 28rpx;
                  padding-left: 30rpx;
                  .name{
                     flex: 8;
                     // padding-left: 20rpx;
                  }
                  .num{
                     flex: 3;
                  }
               }
               .header{
                  background: #F4F7FC;
                  font-weight: 500;
                  text{
                     font-size: 22rpx;
                  }
               }
            }
            .switch{
               display: flex;
               align-items: center;
               justify-content: center;
               color: #666666;
            }
         }
      }