样式修改,引入字体，修改逻辑

qingyiay

2023-05-10 14df401b50272890dc910bbd95d98a8b6caf48d3

 pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue

@@ -1,38 +1,71 @@
<template>
   <view class="bill-of-lading-details">
      <view class="bangDanMessage">
         <view class="">
            <text>客户：{{ coalDetailsData.customerName || '' }}</text>
            <text>矿厂：{{ coalDetailsData.deptName || '' }}</text>
      <view class="top-banner" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/loadingbanner.png') no-repeat;background-size: cover;">
         <view class="top-information">
            <view class="cutomer-name">客户:{{ coalDetailsData.customerName || '' }}</view>
            <view class="fild-name">
               <view class="">矿场:{{ coalDetailsData.deptName || '暂无' }}</view>
               <view class="">煤场:{{ coalDetailsData.filedName || '暂无' }}</view>
            </view>
         </view>
         <view class="">
            <text>皮重：{{ coalDetailsData.skin || '' }}</text>
            <text>毛重：{{ coalDetailsData.hair || '' }}</text>
            <text>净重：{{ coalDetailsData.clean || '' }}</text>
         </view>
         <view class="">
            <text>磅单类型：{{ coalDetailsData.orderTye || '' }}</text>
            <text>状态：{{ coalStatus[coalDetailsData.status] }}</text>
         </view>
         <view class="">
            <text>煤场：{{ coalDetailsData.filedName || '' }}</text>
            <text>发运时间：{{ coalDetailsData.sendDate || '' }}</text>
            <text>提煤单编号：{{ coalDetailsData.code || '' }}</text>
            <text>订单编号：{{ coalDetailsData.orderCode || '' }}</text>
         <view class="block-information">
            <view class="block-main">
               <view class="basic">
                  <view class="coalName">{{ coalDetailsData.coalName }}</view>
                  <!-- <view class="black-block"></view>
                  <view class="order-type">{{ coalDetailsData.orderType }}</view> -->
                  <view
                     class="status-button"
                     style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/statusbutton.png') no-repeat;
                              background-size: cover;"
                  >
                     {{ coalStatus[coalDetailsData.status] }}
                  </view>
               </view>
               <view class="time">
                  <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                  <view class="send-date">{{ coalDetailsData.sendDate }}</view>
               </view>
               <view class="coal-code">提煤单编号:&nbsp;&nbsp;{{ coalDetailsData.code || '' }}</view>
               <view class="order-code">订单编号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ coalDetailsData.orderCode || '' }}</view>
               <view class="weigh-item">
                  <view class="item">
                     <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/skin.png') no-repeat;background-size: cover;">皮</view>
                     <view class="num">{{ coalDetailsData.skin }}</view>
                  </view>
                  <view class="item">
                     <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/hair.png') no-repeat;background-size: cover;">毛</view>
                     <view class="num">{{ coalDetailsData.hair }}</view>
                  </view>
                  <view class="item">
                     <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clean.png') no-repeat;background-size: cover;">净</view>
                     <view class="num">{{ coalDetailsData.clean }}</view>
                  </view>
               </view>
            </view>
         </view>
      </view>
      <view class="timeLine" style="font-size: 16rpx;">
         <u--text type="primary" size="30" plain v-for="(item, index) in dayRZ" :key="index" :text="item.taskStatusDes"></u--text>

      <view class="timeLine">
         <u-steps :current="dayRZ.length - 1" direction="column" dot>
            <u-steps-item :title="item.taskStatusDes" v-for="(item, index) in dayRZ" :key="index"></u-steps-item>
         </u-steps>
      </view>
      <view class="utilsBox">
         <view class="utils_chil utils_chilTop">
            <u-button text="签到" type="primary" plain @click="arriveClick"></u-button>
            <u-button text="入场申请" type="primary" plain @click="rcsqClick"></u-button>
            <u-button text="放空" type="primary" plain @click="evacuation" throttleTime="500"></u-button>
            <u-button text="呼叫客服" type="primary" plain @click="callCustomerService"></u-button>
            <view class="top-button">
               <u-button text="签到" type="primary" plain @click="arriveClick" shape="circle"></u-button>
               <u-button text="入场申请" type="primary" plain @click="rcsqClick" shape="circle"></u-button>
            </view>
            <view class="bottom-button">
               <u-button text="放空" type="primary" plain @click="evacuation" throttleTime="500" shape="circle"></u-button>
               <u-button text="呼叫客服" type="primary" plain @click="callCustomerService" shape="circle"></u-button>
            </view>
         </view>
         <view class="utils_chil"><u-button text="展示提煤单" @click="showCaolPickUpBill" type="primary"></u-button></view>
         <view class="utils_chil"><u-button text="上磅计量" @click="cengZhongClick" type="primary"></u-button></view>
      </view>
      <view class="weigh-ability">
         <view class="weigh-button"><u-button text="展示提煤单" @click="showCaolPickUpBill" type="primary" shape="circle"></u-button></view>
         <view class="weigh-button"><u-button text="上磅计量" @click="cengZhongClick" type="primary" shape="circle"></u-button></view>
      </view>
      <view class="evacuationModal">
         <u-modal
@@ -48,8 +81,8 @@
</template>

<script>
let socket = null;
import { webSocketUrl } from '@/api/request.js';
import { mapState, mapMutations } from 'vuex';
export default {
   onLoad(value) {
      if (value.orderPlanId && value.yyId) {
@@ -89,7 +122,7 @@
            openId: null,
            openName: ''
         },
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤场', '出煤仓', '放空'], // 状态
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院'], // 状态
         weighHouseCode: '',
         // 放空弹窗控制变量
         evacuationModalShow: false,
@@ -100,19 +133,36 @@
            sceneId: '',
            gateCameraId: '',
            equipmentCode: '',
            weigh: 0
         }
            weigh: 0,
            sceneInOut: ''
         },
         // 原发信息
         primarySkin: null,
         primaryHair: null,
         primaryClean: null,
         scrollTop: 0
      };
   },
   onShow() {
      this.init();
   },
   computed: {
      ...mapState(['globalweigh', 'globalinfraredStatus']),
      name() {
         return uni.getStorageSync('name');
      },
      openid() {
         return uni.getStorageSync('openid');
      },
      // 获取今天日期
      currentDate() {
         let time = new Date();
         let year = time.getFullYear();
         let month = time.getMonth() + 1;
         month = month < 10 ? '0' + month : month;
         let date = time.getDate();
         date = date < 10 ? '0' + date : date;
         return `${year}-${month}-${date}`;
      }
   },
   methods: {
@@ -141,7 +191,8 @@
      getTakeCoal() {
         this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
            if (res.code == 0) {
               this.coalDetailsData = res.data[0];
               console.log(res, '提煤单详情');
               this.coalDetailsData = res.data;
               // 获取所在磅房参数赋值
               this.getWeightHouseObj.deptId = this.coalDetailsData.deptId;
               this.getWeightHouseObj.filedId = this.coalDetailsData.filedId;
@@ -157,6 +208,10 @@
               this.getServiceOpenid.filedId = this.coalDetailsData.filedId;
               // 获取提煤单状态
               this.currentPageCoalStatus = this.coalDetailsData.status;
               // 获取原发信息
               this.primarySkin = this.coalDetailsData.skinTwo;
               this.primaryHair = this.coalDetailsData.hairTwo;
               this.primaryClean = this.coalDetailsData.cleanTwo;
            }
         });
      },
@@ -165,6 +220,15 @@
         this.$reqGet('coalDayPage', { id: this.orderPlanId }).then(res => {
            if (res.code == 0) {
               this.dayRZ = res.data;
               this.dayRZ = this.dayRZ.map(v => {
                  let slicedate = v.taskStatusDes.slice(0, 10);
                  if (slicedate == this.currentDate) {
                     return {
                        ...v,
                        taskStatusDes: v.taskStatusDes.slice(10)
                     };
                  }
               });
            }
         });
      },
@@ -244,53 +308,18 @@
               this.weighData.sceneId = res.data.id;
               this.weighData.gateCameraId = res.data.lastEquipmentId;
               this.weighData.equipmentCode = res.data.lastEquipmentCode;
               this.weighData.sceneInOut = res.data.sceneInOut;
               this.weighHouseCode = res.data.code;
               uni.navigateTo({
                  url: `/pages/driver-page/driver-index/bill-of-lading-details/weighingDevice/weighingDevice?takeCoalId=${this.orderPlanId}&sceneId=${
                     res.data.id
                  }&gateCameraId=${res.data.lastEquipmentId}&gateCameraCode=${res.data.lastEquipmentCode}&weighHouseCode=${res.data.code}`
                  }&gateCameraId=${res.data.lastEquipmentId}&gateCameraCode=${res.data.lastEquipmentCode}&weighHouseCode=${res.data.code}&primarySkin=${
                     this.primarySkin
                  }&primaryHair=${this.primaryHair}&psrimaryClean=${this.primaryClean}&sceneInOut=${res.data.sceneInOut}`
               });
            } else {
               this.$u.toast('未在磅房，请前往磅房后再试！！');
            }
         });
      },
      /**
       * 初始化 weoSocket
       */
      initWebSocket() {
         let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`;
         socket = uni.connectSocket({
            url: wsUrl,
            header: {
               CLIENT_TOC: 'Y'
            },
            complete: res => {
               console.log(res, 'socket结果');
            }
         });
         socket.onOpen(() => {
            console.log('onOpen');
         });
         // 获取服务器传来的数据，做相应处理
         socket.onMessage(res => {
            console.log('socketWeigh', res);
            let nowWeighObj = JSON.parse(res.data.slice(7));
            if (nowWeighObj.eqCode == this.weighHouseCode) {
               if (nowWeighObj.eqInfraredStatus) {
                  this.weighData.weigh = nowWeighObj.weigh;
               } else {
                  this.weighData.weigh = nowWeighObj.weigh;
               }
            }
         });
         socket.onClose(() => {
            console.log('webSocketClose');
            this.$u.toast('磅房接口终端');
         });
         socket.onError(err => {
            console.log('socket报错', err);
            this.$u.toast('磅房接口暂时不能使用，请重新进入该页面，重试！！');
         });
      },
      // 放空
@@ -299,10 +328,20 @@
      },
      // 放空弹窗确认
      evacuationConfirm() {
         this.weighData = {
            ...this.weighData,
            weigh: this.globalweigh
         };
         let mix = Object.assign(this.weighData, this.getWeightHouseObj);
         this.$reqPost('getOneEvacuation', mix, 'json').then(res => {
            console.log(res, '第一次放空');
            this.evacuationModalShow = false;
            if (res.code == 0) {
               this.$u.toast('操作成功');
               this.evacuationModalShow = false;
            } else {
               this.$u.toast('操作失败，请稍后重试');
               this.evacuationModalShow = false;
            }
         });
      },
      // 放空弹窗取消
@@ -314,86 +353,223 @@
</script>

<style lang="scss" scoped>
/deep/.u-steps {
   .u-steps-item {
      .u-steps-item__content {
         .u-text {
            .u-text__value {
               font-size: 31rpx !important;
               font-weight: 300;
               color: #303030;
            }
         }
      }
   }
}
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
::v-deep.bill-of-lading-details {
   width: 100%;
   height: 100vh;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   .bangDanMessage {
      padding: vww(10);
      border: vww(2) solid #dddddd;
      border-radius: vww(20);
      margin: vww(20);
      margin-bottom: vww(10);
      height: 40%;
      font-size: vww(18);
      font-weight: 600;
      view {
         margin-bottom: vww(10);
      }
      view:nth-of-type(1) {
         display: flex;
         text {
            width: 50%;
            text-align: center;
         }
      }
      view:nth-of-type(2) {
         display: flex;
         text {
            width: 33%;
            text-align: center;
         }
      }
      view:nth-of-type(3) {
         display: flex;
         text {
            width: 50%;
            text-align: center;
         }
      }
      view:nth-of-type(4) {
         display: flex;
   .top-banner {
      width: 100%;
      height: 346rpx;
      .top-information {
         width: 94%;
         margin: 0 auto;
         height: vww(52);
         @include flex position: relative;
         flex-direction: column;
         text {
            margin-bottom: vww(10);
         justify-content: space-between;
         align-items: flex-start;
         top: vww(25);
         color: #ffffff;
         font-size: 31rpx;
         font-weight: 300;
         .fild-name {
            @include flex;
            justify-content: space-between;
            width: 100%;
            view {
               min-width: 296rpx;
            }
         }
      }
      .block-information {
         width: 690rpx;
         height: 396rpx;
         margin: vww(40) auto;
         background: #ffffff;
         box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
         border-radius: 20rpx;
         position: relative;
         font-size: 30rpx;
         font-weight: 300;
         color: #303030;
         overflow: hidden;
         .block-main {
            @include flex width: 94%;
            height: 336rpx;
            margin: vww(18) vww(7) vww(11) vww(17);
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
         }
         .status-button {
            width: vww(71);
            height: vww(36);
            text-align: center;
            line-height: vww(33);
            font-size: 28rpx;
            font-weight: 300;
            position: absolute;
            right: vww(10);
            color: #fff;
         }
         .basic {
            width: 100%;
            height: vww(15);
            @include flex;
            justify-content: flex-start;
            .coalName,
            .order-type {
               width: 45%;
               height: 30rpx;
               font-size: 30rpx;
               font-weight: 300;
               color: #515151;
               position: relative;
            }
            .black-block {
               width: 2rpx;
               height: 30rpx;
               background: #515151;
               position: relative;
               top: vww(2);
            }
         }
         .time {
            width: 35%;
            height: vww(12);
            display: flex;
            justify-content: flex-start;
            .send-date {
               width: 148rpx;
               height: 24rpx;
               margin-left: vww(14);
               font-size: 28rpx;
               font-weight: 300;
               color: #515151;
            }
         }
         .coal-code,
         .order-code {
            width: 100%;
            height: 24rpx;
            font-size: 28rpx;
            font-weight: 300;
            color: #7d7d7d;
         }
         .weigh-item {
            width: 100%;
            height: vww(36);
            @include flex;
            justify-content: space-around;
            .item {
               min-width: vww(50);
               height: vww(45);
               font-size: 21rpx;
               font-weight: 400;
               color: #ffffff;
               text-align: center;
               line-height: vww(30);
               @include flex;
               .concrete {
                  width: vww(36);
                  height: vww(36);
               }
               .num {
                  font-size: 40rpx;
                  font-weight: 300;
                  color: #303030;
               }
            }
         }
      }
   }
   .timeLine {
      height: 25%;
      height: 40%;
      margin: vww(20);
      margin-top: vww(10);
      margin-bottom: vww(10);
      border: vww(2) solid #dddddd;
      border-radius: vww(20);
      position: relative;
      top: vww(120);
      overflow-y: overlay;
      padding: vww(20);
      box-sizing: border-box;
      overflow-y: overlay; //行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。
      .u-text {
         margin-bottom: vww(5) !important;
      .u-steps {
         .u-steps-item {
            padding-bottom: vww(35);
            .u-steps-item__wrapper {
               .u-steps-item__wrapper__dot {
                  background: linear-gradient(-29deg, #426cff 0%, #7991ff 100%);
                  box-shadow: 2rpx 7rpx 10rpx 0rpx rgba(172, 172, 172, 0.64);
               }
            }
            .u-steps-item__line {
               height: vww(52) !important;
               background: #e9e6ea !important;
            }
         }
      }
   }
   .utilsBox {
      padding: vww(10) vww(20);
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 94%;
      margin: 0 auto;
      position: relative;
      top: vww(80);
      .utils_chil {
         flex: 1;
         display: flex;
         align-items: center;
      }
      .utils_chilTop {
         .u-button {
            margin-right: vww(4);
            &:nth-child(4) {
               margin-right: 0;
         width: 100%;
         margin: 0 auto;
         .top-button,
         .bottom-button {
            width: 100%;
            height: vww(47);
            @include flex;
            .u-button {
               width: 40%;
               height: 60rpx;
               font-size: 28rpx;
               font-weight: 300;
               color: #497bfb;
               border: 2px solid #3b56eb;
            }
         }
      }
   }
   .weigh-ability {
      width: 631rpx;
      height: vww(100);
      margin: vww(80) auto;
      margin-bottom: vww(10);
      @include flex;
      flex-direction: column;
      .weigh-button {
         width: 631rpx;
         height: vww(89);
         .u-button {
            font-size: 28rpx;
            font-weight: 300;
            color: #ffffff;
            background: #497bfb;
            letter-spacing: 4rpx;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
            box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29);
         }
      }
   }
}
</style>