ll

liukangdong

2025-02-06 68b9deaca3da75f1ea0da8943065a2016c9ead2d

 h5/pages/waybill/waybillDetail.vue

@@ -4,12 +4,12 @@
      <map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="scale">



      </map>

      <view class="main_content">
         <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="info">

      <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>

@@ -34,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>
               <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">

@@ -116,7 +132,8 @@
               //    color: '#FF0000',

               //    width: 3

               // }, 

            ]

            ],
            showRecord: false

         };

      },

      onLoad(options) {

@@ -177,7 +194,17 @@
               }

               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) {

                  if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) {
                     const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0';
                     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',

@@ -191,7 +218,8 @@
                     }

                     this.polyline.push(temp)

                  }

               }

               }
					
            })

         },

         distance() {

@@ -354,24 +382,6 @@
            }

         }

      }

      .stock_status{
         background: #FFEEEE;
         font-size: 26rpx;
         color: #ED4545;
         display: flex;
         align-items: center;
         border-radius: 8rpx 8rpx 0rpx 0rpx;
         height: 80rpx;
         position: relative;
         z-index: 1;
         padding: 0 30rpx 4rpx;
         top: 8rpx;
         image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
         }
      }

      .info {

         border-radius: 12rpx;

         margin-bottom: 20rpx;

@@ -379,17 +389,37 @@
         background-color: #fff;

         overflow: hidden;

         position: relative;

         z-index: 1;

         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;

            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;

@@ -415,12 +445,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;
            }
         }



      }