qingyiay
2023-05-17 05273ace3da665cb10c36ca0dac4413a8284302a
pages/driver-page/driver-index/driver-index.vue
@@ -6,18 +6,15 @@
            <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="main-divider"></view>
                  <view class="first-line">
                     <view class="main-information">
                        <view class="sign">装</view>
                        <view class="filedname">
                           <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName.slice(0, 16) }}</text>
                           <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">
                              {{ item.customerNameCopy.slice(0, 16) }}
                           </text>
                           <text v-show="item.deptName.length >= 15 || item.customerNameCopy.length >= 15">...</text>
                        <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>
@@ -26,19 +23,23 @@
                  <view class="first-extra">
                     <view class="main-information">
                        <view class="sign">卸</view>
                        <view class="filedname">
                           <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerNameCopy.slice(0, 16) }}</text>
                           <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName.slice(0, 16) }}</text>
                           <text v-show="item.customerNameCopy.length >= 15 || item.deptName.length >= 15">...</text>
                        <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="second-line">
                     <view class="coal-name">{{ item.coalName }}</view>
                  </view>
                  </view> -->
                  <view class="third-line">
                     <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                     <view class="send-date">{{ item.sendDate }}</view>
                     <view class="type">
                        <view class="coal-name">{{ item.coalName }}</view>
                     </view>
                  </view>
                  <view class="fourth-line" @click="qiangDanBtn(item)" v-if="item.carNum - item.taskNum !== 0"><view class="button-img">立即抢单</view></view>
               </view>
@@ -61,29 +62,25 @@
               <view class="appointment-form">
                  <view class="appointment-form-item" v-for="(item, index) in driverBillOfLoadingData.list3" :key="index">
                     <view class="main-divider"></view>
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName.slice(0, 16) }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">
                                 {{ item.customerName.slice(0, 16) }}
                              </text>
                              <text v-show="item.deptName.length >= 15 || item.customerName.length >= 15">...</text>
                           <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.customerName }}</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
                        <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="first-extra">
                        <view class="main-information">
                           <view class="sign">卸</view>
                           <view class="filedname">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerName.slice(0, 16) }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName.slice(0, 16) }}</text>
                              <text v-show="item.deptName.length >= 15 || item.customerName.length >= 15">...</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" @click.stop="skipMap(item)">
@@ -117,18 +114,15 @@
               ></u-empty>
               <view class="appointment-form">
                  <view class="appointment-form-item" v-for="(item, index) in driverBillOfLoadingData.list2" :key="index" @click="list3CardIconClick(item)">
                     <view class="main-divider"></view>
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
                           <view class="filedname">
                              <text v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName.slice(0, 16) }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">
                                 {{ item.customerName.slice(0, 16) }}
                              </text>
                              <text v-show="item.deptName.length >= 15 || item.customerName.length >= 15">...</text>
                           <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.customerName }}</text>
                           </view>
                        </view>
                        <view class="main-divider"></view>
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view>
                        </view>
@@ -136,10 +130,9 @@
                     <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.customerName.slice(0, 16) }}</text>
                              <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName.slice(0, 16) }}</text>
                              <text v-show="item.deptName.length >= 15 || item.customerName.length >= 15">...</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" @click.stop="skipMap(item)">
@@ -158,7 +151,7 @@
                     </view>
                  </view>
               </view>
               <view class="white-block" v-if="driverBillOfLoadingData.list2.length !== 0">没有数据了...</view>
               <view class="white-block"></view>
            </view>
         </view>
      </view>
@@ -190,7 +183,11 @@
   },
   data() {
      return {
         driverBillOfLoadingData: {},
         driverBillOfLoadingData: {
            list1: [],
            list2: [],
            list3: []
         },
         // 抢单模态框
         qiangDanShow: false,
         qiangDanTitle: '抢单提示',
@@ -209,7 +206,7 @@
      skipMap(val) {
         uni.navigateTo({
            url: `/pages/public-page/mapRoute/mapRoute?customerId=${val.customerId}&filedId=${val.filedId}&orderType=${val.orderType}${
               val.toFiledId ? `&toFiledId=${val.toFiledId}` : ''
               val.toFiledId ? `&toFiledId=${val.toFiledId}&filedId=${val.filedId}` : ''
            }`
         });
      },
@@ -354,6 +351,11 @@
      line-height: vww(40);
   }
}
.exceedHide {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
::v-deep.driver-index {
   width: 100%;
   margin: 0 auto;
@@ -381,6 +383,14 @@
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .main-divider {
               width: 560rpx;
               height: 2rpx;
               background: #e3e3e3;
               position: absolute;
               top: 122rpx;
               left: 128rpx;
            }
            .first-line {
               width: 94%;
               height: vww(68);
@@ -405,14 +415,6 @@
                     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;
@@ -455,20 +457,19 @@
            .second-line {
               width: 100%;
               height: vww(68);
               margin-left: vww(12);
               margin-left: vww(21);
               display: flex;
               justify-content: flex-start;
               align-items: center;
               .coal-name {
                  min-width: vww(50);
                  height: 30rpx;
                  height: 35rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  position: relative;
                  display: flex;
                  justify-content: center;
                  justify-content: flex-start;
               }
               .black-block {
                  min-width: vww(50);
@@ -499,7 +500,7 @@
            .third-line {
               width: 100%;
               height: vww(68);
               margin-left: vww(15);
               margin-left: vww(21);
               display: flex;
               justify-content: flex-start;
               align-items: center;
@@ -507,10 +508,33 @@
                  width: 148rpx;
                  height: 24rpx;
                  margin-left: vww(14);
                  margin-right: vww(56);
                  line-height: 24rpx;
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #515151;
               }
               .type {
                  flex: 1;
                  margin-right: vww(10);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .coal-name {
                     width: 120rpx;
                     height: 42rpx;
                     line-height: 42rpx;
                     border: 2px solid #035cfb;
                     border-radius: 4rpx;
                     font-size: 28rpx;
                     font-weight: 300;
                     color: #035cfb;
                     text-align: center;
                     padding: vww(3) vww(11);
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }
               }
            }
            .fourth-line {
@@ -520,8 +544,8 @@
               display: flex;
               justify-content: flex-end;
               position: relative;
               left: vww(190);
               bottom: vww(10);
               left: vww(203);
               bottom: vww(3);
               .button-img {
                  width: 100%;
                  height: 100%;
@@ -548,6 +572,15 @@
            @include formItem;
            height: vww(191);
            justify-content: space-between;
            overflow: hidden;
            .main-divider {
               width: 560rpx;
               height: 1rpx;
               background: #e3e3e3;
               position: absolute;
               top: 122rpx;
               left: 128rpx;
            }
            .first-line {
               position: relative;
               @include firstLine;
@@ -557,7 +590,6 @@
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .sign {
                     width: vww(28);
                     height: vww(28);
@@ -571,13 +603,27 @@
                     margin-right: vww(20);
                  }
               }
               .main-divider {
                  width: 548rpx;
                  height: 1rpx;
                  background: #e3e3e3;
                  position: absolute;
                  top: vww(40);
                  left: vww(50);
            }
            .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 {
@@ -608,10 +654,11 @@
               @include thirdLine;
               width: 94%;
               justify-content: flex-start;
               margin-left: vww(18);
               .clock {
                  width: 33%;
                  width: 40%;
                  height: vww(21);
                  margin-right: vww(70);
                  margin-right: vww(50);
                  line-height: vww(21);
                  @include flex;
                  justify-content: flex-start;
@@ -627,7 +674,7 @@
                  align-items: center;
                  .order-type,
                  .coal-name {
                     // min-width: 120rpx;
                     width: 120rpx;
                     height: 42rpx;
                     line-height: 42rpx;
                     border: 2px solid #035cfb;
@@ -637,6 +684,9 @@
                     color: #035cfb;
                     text-align: center;
                     padding: vww(3) vww(11);
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }
               }
            }