qingyiay
2023-05-17 ae1aad66a165ee7253bed2127a3b53baa40c2361
pages/driver-page/driver-index/driver-index.vue
@@ -2,41 +2,37 @@
   <view class="">
      <view class="driver-index">
         <view class="driver-index-body">
            <!-- <combined-title title="待领取"></combined-title> -->
            <!-- <u-empty
               mode="data"
               icon="http://cdn.uviewui.com/uview/empty/data.png"
               textSize="30"
               iconSize="1000"
               v-if="driverBillOfLoadingData.list1 ? (driverBillOfLoadingData.list1.length == 0 ? true : false) : true"
            ></u-empty> -->
            <!-- 待领取提煤单 -->
            <view class="wait-collection" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png') no-repeat;background-size:contain"></view>
            <view class="collection-form">
               <view class="collection-form-item" v-for="(item, index) in driverBillOfLoadingData.list1" :key="index">
                  <view class="first-line">
                     <view class="dispatch-receive">
                        <view v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'" class="container">
                           <view class="dispatch">{{ item.deptName }}</view>
                           <view class="receive-icon"></view>
                           <view class="receive">{{ item.customerNameCopy }}</view>
                        </view>
                        <view v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'" class="container">
                           <view class="dispatch">{{ item.customerNameCopy }}</view>
                           <view class="receive-icon"></view>
                           <view class="receive">{{ item.deptName }}</view>
                     <view class="main-information">
                        <view class="sign">装</view>
                        <view class="filedname exceedHide">
                           <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName }}</text>
                           <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerNameCopy }}</text>
                        </view>
                     </view>
                     <view class="main-divider"></view>
                     <view class="point-number">
                        <text class="residue">{{ item.carNum - item.taskNum }}</text>
                        <text>/{{ item.carNum }}</text>
                     </view>
                  </view>
                  <view class="first-extra">
                     <view class="main-information">
                        <view class="sign">卸</view>
                        <view class="filedname exceedHide">
                           <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">
                              {{ item.customerNameCopy ? item.customerNameCopy : item.customerName }}
                           </text>
                           <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName }}</text>
                        </view>
                     </view>
                  </view>
                  <view class="second-line">
                     <view class="coal-name">{{ item.coalName }}</view>
                     <view class="black-block"></view>
                     <view class="coal-type">{{ item.orderType }}</view>
                  </view>
                  <view class="third-line">
                     <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
@@ -66,25 +62,25 @@
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                           <view class="filedname exceedHide">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerNameCopy }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerName }}</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
                        <view class="map-icon">
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view>
                        </view>
                     </view>
                     <view class="second-line">
                        <view class="main-information">
                           <view class="sign">卸</view>
                           <view class="filedname">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerNameCopy }}</text>
                           <view class="filedname exceedHide">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerName }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName }}</text>
                           </view>
                        </view>
                        <view class="map-icon">
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view>
                        </view>
                     </view>
@@ -95,7 +91,7 @@
                        </view>
                        <view class="type">
                           <view class="coal-name">{{ item.coalName }}</view>
                           <view class="order-type">{{ item.orderType }}</view>
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
                     <view class="fourth-line" @click="toAppointmentClick(item)"><view class="button-img">立即预约</view></view>
@@ -118,25 +114,25 @@
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                           <view class="filedname exceedHide">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerNameCopy }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerName }}</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
                        <view class="map-icon">
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view>
                        </view>
                     </view>
                     <view class="second-line">
                        <view class="main-information">
                           <view class="sign">卸</view>
                           <view class="filedname">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerNameCopy }}</text>
                           <view class="filedname exceedHide">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerName }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName }}</text>
                           </view>
                        </view>
                        <view class="map-icon">
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view>
                        </view>
                     </view>
@@ -147,12 +143,12 @@
                        </view>
                        <view class="type">
                           <view class="coal-name">{{ item.coalName }}</view>
                           <view class="order-type">{{ item.orderType }}</view>
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
                  </view>
               </view>
               <view class="white-block" v-if="driverBillOfLoadingData.list2.length !== 0">没有数据了...</view>
               <view class="white-block"></view>
            </view>
         </view>
      </view>
@@ -162,6 +158,7 @@
<script>
import { customerId } from '@/utils/status';
import combinedTitle from '@/components/combined-title/combined-title.vue';
export default {
   components: {
      combinedTitle
@@ -183,7 +180,11 @@
   },
   data() {
      return {
         driverBillOfLoadingData: {},
         driverBillOfLoadingData: {
            list1: [],
            list2: [],
            list3: []
         },
         // 抢单模态框
         qiangDanShow: false,
         qiangDanTitle: '抢单提示',
@@ -198,6 +199,14 @@
      this.init();
   },
   methods: {
      // 跳转地图
      skipMap(val) {
         uni.navigateTo({
            url: `/pages/public-page/mapRoute/mapRoute?customerId=${val.customerId}&filedId=${val.filedId}&orderType=${val.orderType}${
               val.toFiledId ? `&toFiledId=${val.toFiledId}&filedId=${val.filedId}` : ''
            }`
         });
      },
      init() {
         this.qiangDanList();
      },
@@ -302,12 +311,12 @@
      height: 24rpx;
      line-height: 24rpx;
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #515151;
   }
   .havedclock {
      width: 58% !important;
      margin-right: 0 !important;
      .send-date {
         width: 100%;
         margin-left: vww(12);
@@ -330,22 +339,26 @@
   .button-img {
      width: 100%;
      height: 100%;
      background: url('../../../static/image/banner/button.png') no-repeat;
      background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat;
      background-size: cover;
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #ffffff;
      text-align: center;
      line-height: vww(40);
   }
}
.exceedHide {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
::v-deep.driver-index {
   width: 100%;
   margin: 0 auto;
   // 主体
   .driver-index-body {
      margin-bottom: vww(56);
      // margin-bottom: vww(56);
      // 待领取提煤单
      .wait-collection {
         width: 100%;
@@ -358,7 +371,7 @@
         top: vww(-120);
         .collection-form-item {
            width: vww(345);
            height: vww(150);
            height: vww(185);
            margin-top: vww(5);
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
@@ -373,97 +386,127 @@
               margin: vww(18) vww(16) 0 vww(16);
               display: flex;
               justify-content: space-between;
               .dispatch-receive {
                  width: 70%;
               .main-information {
                  width: 88%;
                  height: vww(28);
                  display: flex;
                  justify-content: space-between;
                  justify-content: flex-start;
                  align-items: center;
                  .container {
                     width: 100%;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                  }
                  .receive-icon {
                     width: 62rpx;
                     height: 14rpx;
                     border-bottom: 3px solid #275fa5;
                     position: relative;
                     &:after {
                        content: '';
                        position: absolute;
                        width: 3px;
                        height: 10px;
                        background-color: #275fa5;
                        right: 0;
                        transform: rotate(-45deg);
                     }
                  .sign {
                     width: vww(28);
                     height: vww(28);
                     line-height: vww(28);
                     text-align: center;
                     background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                     background-size: contain;
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #ffffff;
                     margin-right: vww(20);
                  }
               }
               .main-divider {
                  width: 548rpx;
                  height: 1rpx;
                  background: #e3e3e3;
                  position: absolute;
                  top: 115rpx;
                  left: vww(50);
               }
               .point-number {
                  position: absolute;
                  right: 0;
                  width: 15%;
                  text {
                     font-size: 24rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     color: #c78a64;
                  }
                  .residue {
                     font-size: 40rpx;
                     font-family: CTCuHeiSJ;
                     font-weight: 400;
                     color: #f81414;
                  }
               }
            }
            .first-extra {
               @include firstLine;
               .main-information {
                  width: 100%;
                  height: vww(28);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .sign {
                     width: vww(28);
                     height: vww(28);
                     line-height: vww(28);
                     text-align: center;
                     background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                     background-size: contain;
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #ffffff;
                     margin-right: vww(20);
                  }
               }
            }
            .second-line {
               width: 60%;
               width: 100%;
               height: vww(68);
               margin-left: vww(21);
               display: flex;
               justify-content: space-evenly;
               justify-content: flex-start;
               align-items: center;
               .coal-name {
                  width: 30%;
                  height: 30rpx;
                  min-width: vww(50);
                  height: 35rpx;
                  font-size: 30rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 300;
                  color: #515151;
                  position: relative;
                  display: flex;
                  justify-content: space-between;
                  padding: vww(2) vww(4);
                  text-align: center;
                  justify-content: flex-start;
               }
               .black-block {
                  width: 2rpx;
                  height: 30rpx;
                  background: #515151;
               }
               .coal-type {
                  width: 24%;
                  min-width: vww(50);
                  height: 30rpx;
                  font-size: 30rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 300;
                  color: #515151;
                  padding: vww(2) vww(4);
                  position: relative;
                  top: vww(2);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .black-bar {
                     width: 2rpx;
                     height: 30rpx;
                     background: #515151;
                  }
               }
               .coal-type {
                  min-width: vww(50);
                  height: 30rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  text-align: center;
               }
            }
            .third-line {
               width: 30%;
               width: 100%;
               height: vww(68);
               margin-left: vww(15);
               margin-left: vww(21);
               display: flex;
               justify-content: space-between;
               justify-content: flex-start;
               align-items: center;
               .send-date {
                  width: 148rpx;
                  height: 24rpx;
                  margin-left: vww(14);
                  line-height: 24rpx;
                  font-size: 28rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 300;
                  color: #515151;
               }
@@ -480,10 +523,9 @@
               .button-img {
                  width: 100%;
                  height: 100%;
                  background: url('../../../static/image/banner/button.png') no-repeat;
                  background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat;
                  background-size: cover;
                  font-size: 28rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 300;
                  color: #ffffff;
                  text-align: center;
@@ -506,11 +548,12 @@
            justify-content: space-between;
            .first-line {
               position: relative;
               @include firstLine .main-information {
                  width: 40%;
               @include firstLine;
               .main-information {
                  width: 100%;
                  height: vww(28);
                  display: flex;
                  justify-content: space-between;
                  justify-content: flex-start;
                  align-items: center;
                  .sign {
@@ -518,12 +561,12 @@
                     height: vww(28);
                     line-height: vww(28);
                     text-align: center;
                     background: url('../../../static/image/banner/blueblock.png') no-repeat;
                     background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat;
                     background-size: contain;
                     font-size: 30rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     color: #ffffff;
                     margin-right: vww(20);
                  }
               }
               .main-divider {
@@ -536,41 +579,50 @@
               }
            }
            .second-line {
               @include firstLine margin: 0;
               @include firstLine;
               margin: 0;
               margin-left: vww(16);
               .main-information {
                  width: 40%;
                  width: 100%;
                  height: vww(28);
                  display: flex;
                  justify-content: space-between;
                  justify-content: flex-start;
                  align-items: center;
                  .sign {
                     width: vww(28);
                     height: vww(28);
                     line-height: vww(28);
                     text-align: center;
                     background: url('../../../static/image/banner/redblock.png') no-repeat;
                     background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat;
                     background-size: contain;
                     font-size: 30rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     color: #ffffff;
                     margin-right: vww(20);
                  }
               }
            }
            .third-line {
               @include thirdLine width: 94%;
               @include thirdLine;
               width: 94%;
               justify-content: flex-start;
               margin-left: vww(18);
               .clock {
                  width: 33%;
                  height: vww(21);
                  margin-right: vww(70);
                  line-height: vww(21);
                  @include flex;
                  justify-content: flex-start;
                  .send-date {
                     margin-left: vww(14);
                  }
               }
               .type {
                  width: 40%;
                  margin-right: vww(6);
                  flex: 1;
                  margin-right: vww(10);
                  display: flex;
                  justify-content: space-between;
                  justify-content: center;
                  align-items: center;
                  .order-type,
                  .coal-name {
@@ -580,10 +632,13 @@
                     border: 2px solid #035cfb;
                     border-radius: 4rpx;
                     font-size: 28rpx;
                     font-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #035cfb;
                     text-align: center;
                     padding: vww(3) vww(11);
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }
               }
            }