yangan
2023-10-24 a653bcff54e077ad83e31c8528aa174d7a7348f7
pages/driver-page/driver-index/bill-of-lading-details/coal-pick-up-bill/coal-pick-up-bill.vue
@@ -1,121 +1,141 @@
<template>
   <view class="coal-pick-up-bill">
      <view class="driver" style="background:url(https://mx.jzeg.cn:9095/appimg/image/coalBackgroud/coal-background.png) no-repeat;background-size:100% 100%;">
         <view class="driver-coalOne">电子提煤单</view>
      <view class="driver"
         :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/coal-background.png)`, backgroundSize: '100% 100%', }">
         <view class="driver-coalOne">电子通知单</view>
         <view class="driver-coalTwo">
            <view>{{ coalData.code || '暂无订单编号' }}</view>
            <view>{{ coalData.orderType || '暂无订单类型' }}</view>
            <view class="bigFont">{{ coalData.deptName || '暂无所属矿' }}</view>
            <view class="bigFont">{{ coalData.coalName || '暂无煤种' }}</view>
            <view class="bigFont">{{ coalData.carNo || '暂无车牌' }}</view>
         </view>
         <view class="driver-coalThree">
            <view>{{ coalData.customerName || '暂无单位' }}</view>
            <view>{{ coalData.yuYueTime ? coalData.yuYueTime.slice(0, 10) + ' ' + coalData.yuYueTime.slice(11, 22) : '暂无时间' }}</view>
            <view>
               {{ coalData.yuYueTime ? coalData.yuYueTime.slice(0, 10) + ' ' + coalData.yuYueTime.slice(11, 22) : '暂无时间' }}
            </view>
         </view>
         <view class="driver-coalFour"><image src="https://mx.jzeg.cn:9095/appimg/logo.gif" mode=""></image></view>
         <view class="driver-coalFour">
            <image :src="`${onlineurl}/appimg/logo.gif`"
               mode=""></image>
         </view>
      </view>
   </view>
</template>
<script>
export default {
   onLoad(value) {
      console.log('页面加载', value);
      if (value.orderPlanId) {
         this.orderPlanId = value.orderPlanId;
      }
   },
   data() {
      return {
         orderPlanId: null,
         coalData: {}
      };
   },
   onShow() {
      this.init();
   },
   methods: {
      init() {
         this.getTakeCoal();
   import { onlineurl } from '@/api/request.js'
   export default {
      onLoad(value) {
         console.log('页面加载', value);
         if (value.orderPlanId) {
            this.orderPlanId = value.orderPlanId;
         }
      },
      // 获取提煤单详情
      getTakeCoal() {
         this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
            console.log('获取提煤单详情', res);
            if (res.code == 0) {
               this.coalData = res.data;
            } else {
               this.$u.toast('加载失败');
            }
         });
      data() {
         return {
            orderPlanId: null,
            coalData: {},
            onlineurl,
         };
      },
      onShow() {
         this.init();
      },
      methods: {
         init() {
            this.getTakeCoal();
         },
         // 获取通知单详情
         getTakeCoal() {
            this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
               console.log('获取通知单详情', res);
               if (res.code == 0) {
                  this.coalData = res.data;
               } else {
                  this.$u.toast('加载失败');
               }
            });
         }
         /**
          * @desc 等待取煤单接口
          * */
      }
      /**
       * @desc 等待取煤单接口
       * */
   }
};
   };
</script>
<style lang="scss" scoped>
::v-deep.coal-pick-up-bill {
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   // 司机页面
   .driver {
<style lang="scss"
   scoped>
   ::v-deep.coal-pick-up-bill {
      width: 100%;
      height: 100vh;
      &-coalOne {
         margin-top: 19%;
         text-align: center;
         font-size: vww(40);
         font-family: Source Han Sans CN, Source Han Sans CN-Bold;
         font-weight: 700;
         color: #896227;
      }
      &-coalTwo {
         margin-top: 20%;
         font-size: vww(20);
         font-family: Source Han Sans CN, Source Han Sans CN-Bold;
         font-weight: 700;
         text-align: center;
         color: #2e363f;
         view:nth-child(2) {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      // 司机页面
      .driver {
         width: 100%;
         height: 100vh;
         &-coalOne {
            margin-top: 19%;
            text-align: center;
            font-size: vww(40);
            font-weight: 700;
            color: #896227;
         }
         &-coalTwo {
            width: 80%;
            margin-top: 20%;
            margin: 20% auto 0;
            font-size: vww(20);
            font-weight: 700;
            text-align: center;
            color: #2e363f;
            view:nth-child(2) {
               margin-top: vww(15);
               font-size: 30px;
            }
            view:nth-child(3) {
               margin-top: vww(15);
               font-size: 30px;
            }
            view:nth-child(4) {
               margin-top: vww(15);
               font-size: 30px;
            }
         }
         &-coalThree {
            margin-top: vww(15);
            font-size: 40px;
            font-size: vww(18);
            font-weight: 700;
            text-align: center;
            color: #2e363f;
            view:nth-child(2) {
               margin-top: vww(15);
            }
         }
         view:nth-child(3) {
            margin-top: vww(15);
            font-size: 40px;
         }
         view:nth-child(4) {
            margin-top: vww(15);
            font-size: 40px;
         }
      }
      &-coalThree {
         margin-top: vww(46);
         font-size: vww(18);
         font-family: Source Han Sans CN, Source Han Sans CN-Bold;
         font-weight: 700;
         text-align: center;
         color: #2e363f;
         view:nth-child(2) {
            margin-top: vww(8);
         }
      }
      &-coalFour {
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top: vww(78);
         image {
            width: vww(52);
            height: vww(52);
         &-coalFour {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            bottom: 161rpx;
            image {
               width: vww(52);
               height: vww(52);
            }
         }
      }
   }
}
</style>
</style>