Merge remote-tracking branch 'origin/master'

jiangping

2024-12-11 fd4b065fc5a3f73dbe6ceb8f2ed66612b10a3c00

 h5/pages/waybill/waybillDetail.vue

@@ -1,47 +1,41 @@
<template>

   <view class="main_app">

      <image src="@/static/driver/wuliuche_bg@2x.png" class="main_bg"></image>

      <view class="form_wrap">

         <view class="item">

            <view class="label">合同编号</view>

            <view class="line">

               <view class="input_wrap"><input v-model="param.aa" placeholder="请输入合同编号" placeholder-class="place" type="text" /></view>

            </view>

      <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image>
      <view class="info">
         <view class="head">
            <view class="code">{{info.contractNumber}}</view>
            <view class="status">{{info.orderStatus}}</view>
         </view>
         <view class="item">
            <view class="label">需方编号</view>
         <view class="content">
            <view class="line">
               <view class="input_wrap"><input v-model="param.aa" placeholder="请输入合同中需方编号" placeholder-class="place" type="text" /></view>
               <view class="la">发货地</view>
               <view class="val">{{info.fromRepertoty || '-'}}</view>
            </view>
         </view>
         <view class="item">
            <view class="label">验证码</view>
            <view class="line">
               <view class="input_wrap"><input v-model="param.aa" placeholder="请输入验证码" placeholder-class="place" type="text" /></view>
               <image src="" class="auth_code" mode=""></image>
               <view class="la">到货地</view>
               <view class="val">{{info.toRepertoty || '-'}}</view>
            </view>
         </view>
         <view class="query">查询</view>

      </view>

      <view class="title">查询结果</view>
      <view class="drive_info">
         <view class="title">合同编号</view>
         <view class="line">
            <view class="label">运输车辆</view>
            <view class="val">11</view>
         </view>
         <view class="line">
            <view class="label">司机信息</view>
            <view class="val">11</view>
         </view>
         <view class="line">
            <view class="label">车辆位置</view>
            <view class="val">11</view>
            <view class="line">
               <view class="la">车牌号</view>
               <view class="val">{{info.plateNumber || '-'}}</view>
            </view>
            <view class="line">
               <view class="la">司机信息</view>
               <view class="val">{{ '-'}}</view>
            </view>
            <view class="line">
               <view class="la">车辆位置</view>
               <view class="val">{{ '-'}}</view>
            </view>
            <view class="line">
               <view class="la">预计到达</view>
               <view class="val">{{'-'}}</view>
            </view>
         </view>
      </view>
      <view class="drive_info">
         <view class="title">物流信息</view>
         <view class="item">
<!--          <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>
@@ -64,77 +58,58 @@
            </view>
            <view class="time">202422222222</view>
            <view class="separate"></view>
         </view>
         </view> -->
      </view>
   </view>

</template>



<script>

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

   export default {

      data() {

         return {

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

         };

      },
      onLoad(options) {
         this.id = options.id
         this.getDetail()
      },
      methods: {
         getDetail() {
            orderInfoTms({ contractNumber: this.id }).then(res => {
               this.info = res.data
            })
         },
      }

   }

</script>



<style lang="scss" scoped>

   .form_wrap {
      width: 690rpx;
      height: 646rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39,155,170,0.16);
      border-radius: 16rpx;
      padding: 10rpx 30rpx;
      margin-bottom: 40rpx;
      .item{
         height: 154rpx;
         padding: 30rpx 0 8rpx;
         border-bottom: 1rpx solid #E5E5E5;
         .label{}
         .line{
            display: flex;
            .input_wrap{
               padding: 18rpx 0;
               flex: 1;
               .place{
                  color: #999999;
                  font-size: 28rpx;
               }
            }
            .auth_code{
               width: 160rpx;
               height: 64rpx;
               border: 2px solid;
            }
         }
      }
      .query{
         width: 630rpx;
         height: 88rpx;
         background: $uni-color-primary;
         border-radius: 44rpx;
         margin-top: 40rpx;
         color: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 30rpx;
      }
<style lang="scss" scoped>
   page{
      background-color: #f7f7f7;
   }

   .main_app{
      padding-top: 218rpx;
      .title{
         font-weight: 500;
         font-size: 32rpx;
         margin-bottom: 30rpx;
      padding-top: 120rpx;
      .bg{
         width: 750rpx;
         position: absolute;
         left: 0;
         top: 0;
      }
      .drive_info{
         background: #F7F7F7;
         background: #fff;
         border-radius: 16rpx;
         padding: 30rpx;
         margin-bottom: 20rpx;
         .title{
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 20rpx;
         }
         .line{
            display: flex;
            margin-bottom: 24rpx;
@@ -183,8 +158,8 @@
            }
            .separate{
               height: calc( 100% );
               width: 2rpx;
               border: 2rpx dashed red;
               width: 1rpx;
               border: 1rpx dashed #666666;
               position: absolute;
               left: 22rpx;
               top: 24rpx;
@@ -195,6 +170,59 @@
            }
         }
      }

      .info {
         border-radius: 12rpx;
         margin-bottom: 20rpx;
         padding: 0 30rpx;
         background-color: #fff;
         overflow: hidden;
         position: relative;
         z-index: 1;
         .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;
            width: 690rpx;
            height: 84rpx;
            margin: 0 -30rpx;
            background: linear-gradient( 270deg, #FEFEFF 0%, #E1F7FE 100%);
		
            .code {
               font-weight: 500;
               font-size: 32rpx;
               color: #222222;
            }
		
            .status {
               color: $uni-color-primary;
            }
         }
		
         .content {
            padding: 20rpx 0rpx;
            margin-bottom: 20rpx;
		
            .line {
               display: flex;
               margin-bottom: 16rpx;
               font-size: 26rpx;
		
               .la {
                  color: #666666;
                  width: 140rpx;
               }
		
               .val {}
		
               &:nth-last-child(1) {
                  margin-bottom: 0;
               }
            }
         }
		
      }
   }

   .main_bg {
      position: absolute;