司机增加退单功能 增加积分功能 其他页面修改

qingyiay

2023-10-19 5071cbf55bd73b6d7bb61421fe618666c537a4e2

 pages/driver-page/driver-index/driver-index.vue

@@ -3,18 +3,29 @@
      <view class="driver-index">
         <view class="driver-index-body">
            <!-- 待领取提煤单 -->
            <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="wait-collection"
               style="background: url('https://mx.jzeg.cn:9096/appimg/image/banner/diverbanner.png') no-repeat;background-size:contain">
            </view>
            <!-- 引导页 -->
            <noob-tour></noob-tour>
            <view class="collection-form">
               <view class="collection-form-item" v-for="(item, index) in driverBillOfLoadingData.list1" :key="index">
               <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 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-if="item.orderType == '外销' || item.orderType == '内销'  ">{{ item.deptName|| ''  }}</text>
                           <text
                              v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerId?item.customerName:item.customerNameCopy|| ''  }}</text>
                           <text v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}

                           </text>
                        </view>
                     </view>
                     <view class="main-divider"></view>
                     <view class="point-number">
                        <text class="residue">{{ item.carNum - item.taskNum }}</text>
                        <text>/{{ item.carNum }}</text>
@@ -24,10 +35,15 @@
                     <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 v-if="item.orderType == '外销' || item.orderType == '内销' ">
                              {{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| ''  }}
                           </text>
                           <text v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName }}</text>
                           <text
                              v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName|| ''  }}</text>
                           <text
                              v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}

                           </text>
                        </view>
                     </view>
                  </view>
@@ -35,61 +51,90 @@
                     <view class="coal-name">{{ item.coalName }}</view>
                  </view> -->
                  <view class="third-line">
                     <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                     <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 class="fourth-line"
                     @click="qiangDanBtn(item)"
                     v-if="item.carNum - item.taskNum !== 0">
                     <view class="button-img">立即接单</view>
                  </view>
               </view>
            </view>
            <!-- 抢单提示模态框 -->
            <!-- 接单提示模态框 -->
            <view class="qianDanModel">
               <u-modal :show="qiangDanShow" :title="qiangDanTitle" showCancelButton :content="qiangDanContent" @confirm="qiangDanConfirm" @cancel="qiangDanCancel"></u-modal>
               <u-modal :show="qiangDanShow"
                  :title="qiangDanTitle"
                  showCancelButton
                  :content="qiangDanContent"
                  @confirm="qiangDanConfirm"
                  @cancel="qiangDanCancel"></u-modal>
            </view>

            <!-- 待预约提煤单 -->
            <view class="wait-appointment">
               <combined-title title="待预约提煤单"></combined-title>
               <u-empty
                  mode="data"
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  text="暂无数据"
                  textSize="30"
                  iconSize="1000"
                  v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true"
               ></u-empty>
                  v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true"></u-empty>

               <view class="appointment-form">
                  <view class="appointment-form-item" v-for="(item, index) in driverBillOfLoadingData.list3" :key="index">
                  <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 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>
                              <text
                                 v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName }}</text>
                              <text
                                 v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerName }}</text>
                              <text
                                 v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}
                              </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 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 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>
                              <text
                                 v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.customerName }}</text>
                              <text
                                 v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName }}</text>
                              <text
                                 v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}</text>
                           </view>
                        </view>
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></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="third-line">
                        <view class="clock">
                           <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                           <view class="time-icon"><u-icon name="clock"
                                 color="#515151"
                                 size="40"></u-icon></view>
                           <view class="send-date">{{ item.sendDate }}</view>
                        </view>
                        <view class="type">
@@ -97,55 +142,92 @@
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
                     <view class="fourth-line" @click="toAppointmentClick(item)"><view class="button-img">立即预约</view></view>
                     <view class="fourth-line">
                        <view class="button-img"
                           @click.stop="cancelAppoint(item)">
                           请求退单
                        </view>
                        <view class="button-img"
                           @click.stop="toAppointmentClick(item)">立即预约</view>
                     </view>
                  </view>
               </view>
            </view>

            <!-- 请求退单弹窗 -->
            <view class="">
               <u-modal :show="cancelAppointShow"
                  title="退单确认"
                  showCancelButton
                  content="是否确认退单"
                  @confirm="cancelAppointConfirm"
                  @cancel="cancelAppointCancel"></u-modal>
            </view>
            <!-- 已预约提煤单 -->
            <view class="Reserved">
               <combined-title title="已预约提煤单"></combined-title>
               <u-empty
                  mode="data"
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
                  iconSize="1000"
                  v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true"
               ></u-empty>
                  text="暂无数据"
                  v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true"></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="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 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>
                              <text
                                 v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName }}</text>
                              <text
                                 v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerName }}</text>
                              <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                                 {{item.filedName}}

                              </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 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 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>
                              <text
                                 v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.customerName }}</text>
                              <text
                                 v-else-if="item.orderType == '外购' || item.orderType == '内购'">{{ item.deptName }}</text>
                              <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                                 {{item.toFiledName}}

                              </text>
                           </view>
                        </view>
                        <view class="map-icon" @click.stop="skipMap(item)">
                           <view><u-icon name="map" color="#4978F0" size="40"></u-icon></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="third-line">
                        <view class="clock havedclock">
                           <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                           <view class="send-date">{{ item.yuYueSection }}</view>
                           <view class="time-icon"><u-icon name="clock"
                                 color="#515151"
                                 size="40"></u-icon></view>
                           <view class="send-date">{{ item.yuYueSection|| ''  }}</view>
                        </view>
                        <view class="type">
                           <view class="coal-name">{{ item.coalName }}</view>
                           <view class="coal-name">{{ item.coalName || '' }}</view>
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
@@ -159,530 +241,706 @@
</template>

<script>
import { customerId } from '@/utils/status';
import combinedTitle from '@/components/combined-title/combined-title.vue';

export default {
   components: {
      combinedTitle
   },
   props: {
      indexdriverBillOfLoadingData: {
         type: Object,
         default: {}
      }
   },
   watch: {
      indexdriverBillOfLoadingData: {
         handler(v) {
            this.driverBillOfLoadingData = v;
         },
         deep: true,
         immediate: true
      }
   },
   data() {
      return {
         driverBillOfLoadingData: {
            list1: [],
            list2: [],
            list3: []
         },
         // 抢单模态框
         qiangDanShow: false,
         qiangDanTitle: '抢单提示',
         qiangDanContent: '',
         qiangDanOrderPlanId: null,
         fleetId: '',
         xsUserId: '',
         customerId: ''
      };
   },
   onShow() {
      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}` : ''
            }`
         });
   import { customerId } from '@/utils/status';
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   import noobTour from '@/components/noobTour/noobTour.vue'
   import { mapState } from 'vuex'
   import { BaseUrl } from '@/api/publicInterface.js'
   export default {
      components: {
         combinedTitle,
         previewImage,
         noobTour
      },
      init() {
         this.qiangDanList();
      },
      // 司机首页列表
      qiangDanList() {
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqGet('qiangDanList').then(res => {
            uni.hideLoading();
            this.driverBillOfLoadingData = res.data;
         });
      },
      // 抢单按钮
      qiangDanBtn(value) {
         if (value.tmcCount == '0') {
            this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId, value.xsUserId === null ? '0' : value.xsUserId);
         } else {
            this.qiangDanOrderPlanId = value.orderPlanId;
            this.fleetId = value.fleetId;
            this.customerId = value.customerId === null ? '0' : value.customerId;
            this.xsUserId = value.xsUserId === null ? '0' : value.xsUserId;
            this.qiangDanShow = true;
            this.qiangDanContent = `已抢${value.tmcCount}单，确定抢单？`;
      props: {
         indexdriverBillOfLoadingData: {
            type: Object,
            default: {}
         }
      },
      // 抢单模态框
      qiangDanConfirm() {
         this.qiangDanContent = '';
         this.qiangDanShow = false;
         this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId);
      watch: {
         indexdriverBillOfLoadingData: {
            handler(v) {
               this.driverBillOfLoadingData = v;
            },
            deep: true,
            immediate: true
         }
      },
      qiangDanCancel() {
         this.qiangDanShow = false;
      computed: {
         ...mapState(['driverTourImgList']),
         roleType() {
            return uni.getStorageSync('roleType');
         },
      },
      // 抢单请求
      qiangDan(id, fleetId, customerId, xsUserId) {
         this.$reqPost('qiangDan', { orderPlanId: id, fleetId: fleetId, customerId: customerId, xsUserId: xsUserId }, 'params')
            .then(res => {
               if (res.code == 0) {
                  this.$u.toast('抢单成功');
               } else {
                  this.$u.toast(res.msg ? res.msg : '抢单失败');
               }
      data() {
         return {
            driverBillOfLoadingData: {
               list1: [],
               list2: [],
               list3: []
            },
            // 接单模态框
            qiangDanShow: false,
            qiangDanTitle: '接单提示',
            qiangDanContent: '',
            qiangDanOrderPlanId: null,
            fleetId: '',
            xsUserId: '',
            customerId: '',
            isFirstLogin: true, //是否是第一次登录
            phone: "",
            isFirstTime: false, //是否是登录进入首页，还是别的页面返回 false是登录 true是别的页面
            cancelAppointShow: false, //确认退单弹窗控制
            cancelAppointId: ''
         };
      },
      onShow() {
         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();
         },
         // 司机首页列表
         qiangDanList() {
            uni.showLoading({
               title: '加载中...'
            });
            this.$reqGet('qiangDanList').then(res => {
               uni.hideLoading();
               this.driverBillOfLoadingData = res.data;
            });
         },
         // 接单按钮
         qiangDanBtn(value) {
            if (value.tmcCount == '0') {
               this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId,
                  value.xsUserId === null ? '0' : value.xsUserId);
            } else {
               this.qiangDanOrderPlanId = value.orderPlanId;
               this.fleetId = value.fleetId;
               this.customerId = value.customerId === null ? '0' : value.customerId;
               this.xsUserId = value.xsUserId === null ? '0' : value.xsUserId;
               this.qiangDanShow = true;
               this.qiangDanContent = `已接${value.tmcCount}单，确定接单？`;
            }
         },
         // 接单模态框
         qiangDanConfirm() {
            this.qiangDanContent = '';
            this.qiangDanShow = false;
            this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId);
         },
         qiangDanCancel() {
            this.qiangDanShow = false;
         },
         // 接单请求
         qiangDan(id, fleetId, customerId, xsUserId) {
            uni.showLoading({
               title: '加载中'
            })
            .then(() => {
            this.$reqPost('qiangDan', {
                  orderPlanId: id,
                  fleetId: fleetId,
                  customerId: customerId,
                  xsUserId: xsUserId
               }, 'params')
               .then(res => {
                  uni.hideLoading()
                  if (res.code == 0) {
                     this.$u.toast('接单成功');
                  } else {
                     this.$u.toast(res.msg ? res.msg : '接单失败');
                  }
               })
               .then(() => {
                  setTimeout(() => {
                     this.qiangDanList();
                  }, 1000);
               }).catch(e => {
                  uni.hideLoading()
               })
         },
         list3CardIconClick(value) {
            uni.navigateTo({
               url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}&orderType=${value.orderType}`
            });
         },
         // 提煤单详情
         cardBodyClick(name) {
            uni.navigateTo({
               url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}`
            });
         },
         // 请求退单
         cancelAppoint(item) {
            this.cancelAppointShow = true
            this.cancelAppointId = item.id
         },
         // 退单弹窗确认
         cancelAppointConfirm() {
            this.cancelAppointShow = false
            uni.showLoading({
               title: '加载中'
            })
            this.$reqPost('cancelAppoint', { takeCoalId: this.cancelAppointId }, 'params').then(res => {
               uni.hideLoading()
               if (res.code == 0) {
                  this.$u.toast('退单成功');
               } else {
                  this.$u.toast(res.msg ? res.msg : '退单失败');
               }
            }).then(() => {
               setTimeout(() => {
                  this.qiangDanList();
               }, 1000);
            }).catch(e => {
               uni.hideLoading()
            })
         },
         // 退单弹窗取消
         cancelAppointCancel() {
            this.cancelAppointShow = false
         },
         // 去预约
         toAppointmentClick(value) {
            uni.navigateTo({
               url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}`
            });
      },
      list3CardIconClick(value) {
         uni.navigateTo({
            url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}`
         });
      },
      // 提煤单详情
      cardBodyClick(name) {
         uni.navigateTo({
            url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}`
         });
      },
      // 去预约
      toAppointmentClick(value) {
         uni.navigateTo({
            url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}`
         });
         },
      }
   }
};
   };
</script>

<style lang="scss" scoped>
@mixin formItem {
   width: vww(345);
   height: vww(150);
   margin-top: vww(5);
   background: #ffffff;
   box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
   border-radius: 20rpx;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}
@mixin firstLine {
   width: 94%;
   height: vww(68);
   margin: vww(18) vww(16) 0 vww(16);
   display: flex;
   justify-content: space-between;
}
@mixin thirdLine {
   width: 30%;
   height: vww(68);
   margin-left: vww(15);
   display: flex;
   justify-content: space-between;
   align-items: center;
   .send-date {
      width: 148rpx;
      height: 24rpx;
      line-height: 24rpx;
      font-size: 28rpx;
      font-weight: 300;
      color: #515151;
<style lang="scss"
   scoped>
   @mixin formItem {
      width: vww(345);
      height: vww(150);
      margin-top: vww(5);
      background: #ffffff;
      box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
      border-radius: 20rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
   }
   .havedclock {
      width: 58% !important;
      margin-right: 0 !important;

   @mixin firstLine {
      width: 94%;
      height: vww(68);
      margin: vww(18) vww(16) 0 vww(16);
      display: flex;
      justify-content: space-between;
   }

   @mixin thirdLine {
      width: 30%;
      height: vww(68);
      margin-left: vww(15);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .send-date {
         width: 100%;
         margin-left: vww(12);
         width: 148rpx;
         height: 24rpx;
         line-height: 24rpx;
         font-size: 28rpx;
         font-weight: 300;
         color: #515151;
      }
   }
}
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
@mixin fourthLine {
   width: 34%;
   height: vww(68);
   display: flex;
   align-items: center;
   position: relative;
   left: vww(203);
   bottom: vww(3);
   .button-img {
      width: 100%;
      height: 100%;
      background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat;
      background-size: cover;
      font-size: 28rpx;
      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);
      // 待领取提煤单
      .wait-collection {
         width: 100%;
         height: 600rpx;
      }
      .collection-form {
         width: vww(345);
         margin: 0 vww(15);
         position: relative;
         top: vww(-120);
         .collection-form-item {
            width: vww(345);
            height: vww(185);
            margin-top: vww(5);
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
            border-radius: 20rpx;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .first-line {
               width: 94%;
               height: vww(68);
               margin: vww(18) vww(16) 0 vww(16);
               display: flex;
               justify-content: space-between;
               .main-information {
                  width: 88%;
                  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/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-weight: 400;
                     color: #c78a64;
                  }
                  .residue {
                     font-size: 40rpx;
                     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: 100%;
               height: vww(68);
               margin-left: vww(21);
               display: flex;
               justify-content: flex-start;
               align-items: center;
               .coal-name {
                  min-width: vww(50);
                  height: 35rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  position: relative;
                  display: flex;
                  justify-content: flex-start;
               }
               .black-block {
                  min-width: vww(50);
                  height: 30rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  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: 100%;
               height: vww(68);
               margin-left: vww(21);
               display: flex;
               justify-content: flex-start;
               align-items: center;
               .send-date {
                  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 {
               width: 30%;
               height: vww(68);
               margin-left: vww(15);
               display: flex;
               justify-content: flex-end;
               position: relative;
               left: vww(203);
               bottom: vww(3);
               .button-img {
                  width: 100%;
                  height: 100%;
                  background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat;
                  background-size: cover;
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #ffffff;
                  text-align: center;
                  line-height: vww(33);
               }
            }

      .havedclock {
         width: 58% !important;
         margin-right: 0 !important;

         .send-date {
            width: 100%;
            margin-left: vww(12);
         }
      }
      .wait-appointment,
      .Reserved {
         position: relative;
         top: vww(-120);
   }

   @mixin flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   @mixin fourthLine {
      width: 64%;
      height: vww(68);
      display: flex;
      align-items: center;
      position: relative;
      left: vww(102);
      bottom: vww(3);

      .button-img {
         width: vww(122);
         height: vww(41);

         background: url('https://mx.jzeg.cn:9096/appimg/image/banner/button.png') no-repeat;
         background-size: cover;
         font-size: 28rpx;
         font-weight: 300;
         color: #ffffff;
         text-align: center;
         line-height: vww(40);

      }
      .appointment-form {
         width: vww(345);
         margin: 0 vww(15);
         .appointment-form-item {
            @include formItem;
            height: vww(191);
            justify-content: space-between;
            .first-line {
   }

   .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);
         // 待领取提煤单
         .wait-collection {
            width: 100%;
            height: 600rpx;
         }

         .collection-form {
            width: vww(345);
            margin: 0 vww(15);
            position: relative;
            top: vww(-120);

            .collection-form-item {
               width: vww(345);
               height: vww(185);
               margin-top: vww(5);
               background: #ffffff;
               box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
               border-radius: 20rpx;
               position: relative;
               @include firstLine;
               .main-information {
               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);
                  margin: vww(18) vww(16) 0 vww(16);
                  display: flex;
                  justify-content: space-between;

                  .main-information {
                     width: 88%;
                     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:9096/appimg/image/banner/blueblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }
                  }

                  .point-number {
                     position: absolute;
                     right: 0;
                     width: 15%;

                     text {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #c78a64;
                     }

                     .residue {
                        font-size: 40rpx;
                        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:9096/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: 100%;
                  height: vww(28);
                  height: vww(68);
                  margin-left: vww(21);
                  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/blueblock.png') no-repeat;
                     background-size: contain;
                  .coal-name {
                     min-width: vww(50);
                     height: 35rpx;
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #ffffff;
                     margin-right: vww(20);
                     font-weight: 300;
                     color: #515151;
                     position: relative;
                     display: flex;
                     justify-content: flex-start;
                  }

                  .black-block {
                     min-width: vww(50);
                     height: 30rpx;
                     font-size: 30rpx;
                     font-weight: 300;
                     color: #515151;
                     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: 100%;
                  height: vww(68);
                  margin-left: vww(21);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;

                  .send-date {
                     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 {
                  width: 30%;
                  height: vww(68);
                  margin-left: vww(15);
                  display: flex;
                  justify-content: flex-end;
                  position: relative;
                  left: vww(203);
                  bottom: vww(3);

                  .button-img {
                     width: 100%;
                     height: 100%;
                     background: url('https://mx.jzeg.cn:9096/appimg/image/banner/button.png') no-repeat;
                     background-size: cover;
                     font-size: 28rpx;
                     font-weight: 300;
                     color: #ffffff;
                     text-align: center;
                     line-height: vww(33);
                  }
               }
            }
         }

         .wait-appointment,
         .Reserved {
            position: relative;
            top: vww(-120);
         }

         .appointment-form {
            width: vww(345);
            margin: 0 vww(15);

            .appointment-form-item {
               @include formItem;
               height: vww(191);
               justify-content: space-between;
               overflow: hidden;

               .main-divider {
                  width: 548rpx;
                  width: 560rpx;
                  height: 1rpx;
                  background: #e3e3e3;
                  position: absolute;
                  top: vww(40);
                  left: vww(50);
                  top: 122rpx;
                  left: 128rpx;
               }
            }
            .second-line {
               @include firstLine;
               margin: 0;
               margin-left: vww(16);
               .main-information {
                  width: 100%;
                  height: vww(28);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .sign {
                     width: vww(28);

               .first-line {
                  position: relative;
                  @include firstLine;

                  .main-information {
                     width: 100%;
                     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);
                     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:9096/appimg/image/banner/blueblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }

                     .filedname {
                        width: 80%;
                     }
                  }

                  .map-icon {
                     position: absolute;
                     right: vww(-1);
                     top: vww(2)
                  }
               }
            }
            .third-line {
               @include thirdLine;
               width: 94%;
               justify-content: flex-start;
               margin-left: vww(18);
               .clock {
                  width: 40%;
                  height: vww(21);
                  margin-right: vww(50);
                  line-height: vww(21);
                  @include flex;

               .first-extra {
                  @include firstLine;
                  position: relative;

                  .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:9096/appimg/image/banner/redblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }

                     .filedname {
                        width: 80%;
                     }
                  }

                  .map-icon {
                     position: absolute;
                     right: vww(-1);
                     top: vww(2)
                  }
               }

               .second-line {
                  @include firstLine;
                  margin: 0;
                  margin-left: vww(16);
                  position: relative;

                  .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:9096/appimg/image/banner/redblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }

                     .filedname {
                        width: 80%;
                     }
                  }

                  .map-icon {
                     position: absolute;
                     right: vww(-1);
                     top: vww(2)
                  }
               }

               .third-line {
                  @include thirdLine;
                  width: 94%;
                  justify-content: flex-start;
                  .send-date {
                     margin-left: vww(14);
                  margin-left: vww(18);

                  .clock {
                     width: 40%;
                     height: vww(21);
                     margin-right: vww(50);
                     line-height: vww(21);
                     @include flex;
                     justify-content: flex-start;

                     .send-date {
                        margin-left: vww(14);
                     }
                  }

                  .type {
                     flex: 1;
                     margin-right: vww(10);
                     display: flex;
                     justify-content: center;
                     align-items: center;

                     .order-type,
                     .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;
                     }
                  }
               }
               .type {
                  flex: 1;
                  margin-right: vww(10);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .order-type,
                  .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 {
                  @include fourthLine;
               }
            }
            .fourth-line {
               @include fourthLine;
            }
         }
      }
      .Reserved {
         .white-block {
            width: 100%;
            height: vww(50);
            line-height: vww(50);
            text-align: center;
            color: #333;
            margin-top: vww(10);

         .Reserved {
            .white-block {
               width: 100%;
               height: vww(50);
               line-height: vww(50);
               text-align: center;
               color: #333;
               margin-top: vww(10);
            }
         }

         .noob-tour {
            margin-bottom: vww(10);
            position: relative;
            top: -240rpx;
         }
      }
   }
}
</style>
</style>