ll

liukangdong

2024-12-10 a8c03746e6bd8ac1d46dc48c1b10bceff543664f

 h5/pages/driver/index.vue

@@ -1,358 +1,402 @@
<template>
   <view class="main_app">
      <view class="title_wrap">
         <view class="name">{{ driverInfo.realname }}，欢迎登录～</view>
         <view class="btn" @click="loginOut">退出登录</view>
      </view>
      <!--  -->
      <view class="banner_wrap">
         <view class="h1">安泰物流智慧园区</view>
         <view class="h2">物流车专区</view>
         <image class="banner" src="../../static/driver/wuliuche_banner@2x.png" mode="widthFix"></image>
      </view>
      <!--  -->
      <view v-if="taskList && taskList.length > 0" class="task_list">
         <swiper circular class="task_swiper">
            <swiper-item v-for="item in taskList" :key="item.id" @click="taskClick(item)">
               <view class="item">
                  <view class="head">
                     <view class="name">{{ item.contractNum ? '合同单' : '运输单' }}{{ item.billCode || item.contractNum}}</view>
                     <view class="status">
                        <view class="text" v-if="item.status == 0">请确认任务</view>
                        <view class="text" v-if="item.status == 1">请于{{item.arriveDate.slice(5,11)}}现场签到</view>
                        <view class="text" v-if="item.status == 2">前方排队：{{item.lineUpNum}}辆</view>
                        <view class="text" v-if="item.status == 3">请入园进入等待区</view>
                        <view class="text" v-if="item.status == 4">请入园停靠{{item.platformName}}作业</view>
                        <view class="text" v-if="item.status == 5">{{item.platformName}}作业中</view>
                        <view class="text" v-if="item.status == 6">作业已完成</view>
                        <view class="text" v-if="item.status == 7">转移中</view>
                        <view class="text red" v-if="item.status == 8">异常挂起</view>
                        <view class="time" v-if="item.waitTime && item.status == 2">{{ item.waitTime }}</view>
                        <view class="time" v-if="item.finishTimeStr && item.status == 5">预计完成时间：{{ item.finishTimeStr }}</view>
                     </view>
                  </view>
                  <view class="content">
                     <view class="info">
                        <view class="plate">
                           <image src="@/static/driver/wuliu_ic_car@2x.png" class="icon" mode=""></image>
                           <text>{{ item.carCodeFront }}</text>
                        </view>
                        <view class="plate">
                           <image src="@/static/driver/wuliu_ic_huowu@2x.png" class="icon" mode=""></image>
                           <text>{{ item.totalNum }}万支</text>
                        </view>
                     </view>
                     <view class="sub">
                        <view class="time" v-if="item.arriveDate && item.contractNum">{{ item.arriveDate.slice(5) }}</view>
                        <view class="time" v-if="item.type != 4 && item.platformWmsJob && item.platformWmsJob.ioCreatedate">{{ item.platformWmsJob.ioCreatedate.slice(5, 19) }}</view>
                        <view v-if="item.status == 0" class="sub_btn">确认任务</view>
                        <view v-if="item.status == 1" class="sub_btn">立即签到</view>
                        <view v-if="item.status == 2" class="sub_btn" @click.stop="handleQueue(item)">查看排队</view>
                     </view>
                  </view>
               </view>
            </swiper-item>
         </swiper>
      </view>
      <!--  -->
      <view class="title_wrap"><view class="name">业务办理</view></view>
      <view class="container1">
         <view class="left">
            <view class="img_wrap img1" @click="$jump('/pages/driver/notice')">
               <image src="@/static/driver/wuliu_ic_ruyuanyuyue@2x.png" class="img"></image>
               <view class="h1">入园须知</view>
               <view class="h2">RESERVATION</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedGuide?str=bookingTips')">
               <image src="@/static/driver/wuliu_ic_zhinan@2x.png" class="img"></image>
               <view class="h1">预约指南</view>
               <view class="h2">APPOINTMENT GUIDE</view>
            </view>
         </view>
         <view class="right">
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedRecord')">
               <image src="@/static/driver/wuliu_ic_yuyuejilu@2x.png" class="img"></image>
               <view class="h1">预约记录</view>
               <view class="h2">APPOINTMENT RECORD</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/queueUp')">
               <image src="@/static/driver/wuliu_ic_paidui@2x.png" class="img"></image>
               <view class="h1">月台排队情况</view>
               <view class="h2">HIDDEN DANGER</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedGuide?str=reservationMap')">
               <image src="@/static/driver/wuliu_ic_daolan@2x.png" class="img"></image>
               <view class="h1">园区导览图</view>
               <view class="h2">GUIDE MAP</view>
            </view>
         </view>
      </view>
      <!--  -->
      <view class="copyright">
         <image src="@/static/logo_s@2x.png" class="mr6" mode="widthFix" />
         <text>安徽安泰物流有限责任公司版权所有</text>
      </view>
   </view>
</template>

<script>
import { logoutPost, driverHomeData } from '@/api';
export default {
   data() {
      return {
         taskList: [],
         driverInfo: uni.getStorageSync('driverInfo'),
			
      };
   },
   onShow() {
      this.initData();
   },
   methods: {
      initData() {
         driverHomeData().then(res => {
            if (res.code == 200) {
               uni.setStorageSync('driverGuide', {
                  bookingTips: res.data.bookingTips,
                  reservationMap: res.data.reservationMap,
                  signDistance: res.data.signDistance
               });
               this.taskList = res.data.platformJobList || []
            }
         });
      },
<template>

   <view class="main_app">

      <view class="title_wrap">

         <view class="name">{{ driverInfo.realname }}，欢迎登录～</view>

         <view class="btn" @click="loginOut">退出登录</view>

      </view>

      <!--  -->

      <view class="banner_wrap">

         <view class="h1">安泰物流智慧园区</view>

         <view class="h2">物流车专区</view>

         <image class="banner" src="../../static/driver/wuliuche_banner@2x.png" mode="widthFix"></image>

      </view>

      <!--  -->

      <view v-if="taskList && taskList.length > 0" class="task_list">

         <swiper circular class="task_swiper">

            <swiper-item v-for="item in taskList" :key="item.id" @click="taskClick(item)">

               <view class="item">

                  <view class="head">

                     <view class="name">{{ item.contractNum ? '合同单' : '运输单' }}{{ item.billCode || item.contractNum }}</view>

                     <view class="status">

                        <view class="text" v-if="item.status == 0">请确认任务</view>

                        <view class="text" v-if="item.status == 1">请于{{ item.arriveDate.slice(5, 11) }}现场签到</view>

                        <view class="text" v-if="item.status == 2">前方排队：{{ item.lineUpNum }}辆</view>

                        <view class="text" v-if="item.status == 3">请入园进入等待区</view>

                        <view class="text" v-if="item.status == 4">请入园停靠{{ item.platformName }}作业</view>

                        <view class="text" v-if="item.status == 5">{{ item.platformName }}作业中</view>

                        <view class="text" v-if="item.status == 6">作业已完成</view>

                        <view class="text" v-if="item.status == 7">转移中</view>

                        <view class="text red" v-if="item.status == 8">异常挂起</view>

                        <view class="time" v-if="item.waitTime && item.status == 2">{{ item.waitTime }}</view>

                        <view class="time" v-if="item.finishTimeStr && item.status == 5">预计完成时间：{{ item.finishTimeStr }}</view>

                     </view>

                  </view>

                  <view class="content">

                     <view class="info">

                        <view class="plate">

                           <image src="@/static/driver/wuliu_ic_car@2x.png" class="icon" mode=""></image>

                           <text>{{ item.carCodeFront }}</text>

                        </view>

                        <view class="plate">

                           <image src="@/static/driver/wuliu_ic_huowu@2x.png" class="icon" mode=""></image>

                           <text>{{ item.totalNum }}万支</text>

                        </view>

                     </view>

                     <view class="sub">

                        <view class="time" v-if="item.arriveDate && item.contractNum">{{ item.arriveDate.slice(5) }}</view>

                        <view class="time" v-if="item.type != 4 && item.platformWmsJob && item.platformWmsJob.ioCreatedate">

                           {{ item.platformWmsJob.ioCreatedate.slice(5, 19) }}</view>

                        <view v-if="item.status == 0" class="sub_btn">确认任务</view>

                        <view v-if="item.status == 1" class="sub_btn">立即签到</view>

                        <view v-if="item.status == 2" class="sub_btn" @click.stop="handleQueue(item)">查看排队</view>

                     </view>

                  </view>

               </view>

            </swiper-item>

         </swiper>

      </view>

      <!--  -->

      <view class="title_wrap">

         <view class="name">业务办理</view>

      </view>

      <view class="container1">

         <view class="left">

            <view class="img_wrap img1" @click="jump('/pages/driver/notice')">

               <image src="@/static/driver/wuliu_ic_ruyuanyuyue@2x.png" class="img"></image>

               <view class="h1">入园须知</view>

               <view class="h2">RESERVATION</view>

            </view>

            <view class="img_wrap img2" @click="jump('/pages/driver/reservedGuide?str=bookingTips')">

               <image src="@/static/driver/wuliu_ic_zhinan@2x.png" class="img"></image>

               <view class="h1">预约指南</view>

               <view class="h2">APPOINTMENT GUIDE</view>

            </view>

         </view>

         <view class="right">

            <view class="img_wrap img2" @click="jump('/pages/driver/reservedRecord')">

               <image src="@/static/driver/wuliu_ic_yuyuejilu@2x.png" class="img"></image>

               <view class="h1">预约记录</view>

               <view class="h2">APPOINTMENT RECORD</view>

            </view>

            <view class="img_wrap img2" @click="jump('/pages/driver/queueUp')">

               <image src="@/static/driver/wuliu_ic_paidui@2x.png" class="img"></image>

               <view class="h1">月台排队情况</view>

               <view class="h2">HIDDEN DANGER</view>

            </view>

            <view class="img_wrap img2" @click="jump('/pages/driver/reservedGuide?str=reservationMap')">

               <image src="@/static/driver/wuliu_ic_daolan@2x.png" class="img"></image>

               <view class="h1">园区导览图</view>

               <view class="h2">GUIDE MAP</view>

            </view>

         </view>

      </view>

      <!--  -->

      <view class="copyright">

         <image src="@/static/logo_s@2x.png" class="mr6" mode="widthFix" />

         <text>安徽安泰物流有限责任公司版权所有</text>

      </view>

   </view>

</template>



<script>

import {

   logoutPost,

   driverHomeData,

   app_url

} from '@/api'

export default {

   data() {

      return {

         taskList: [],

         driverInfo: uni.getStorageSync('driverInfo'),



      }

   },

   onShow() {

      this.initData()

   },



   methods: {

      jump(path) {

         this.$jump(path)

      },

      initData() {

         driverHomeData().then(res => {

            if (res.code == 200) {

               uni.setStorageSync('driverGuide', {

                  bookingTips: res.data.bookingTips,

                  reservationMap: res.data.reservationMap,

                  signDistance: res.data.signDistance

               })

               this.taskList = res.data.platformJobList || []

            }

         })

      },

      loginOut() {
         this.$store.commit('empty');
         logoutPost();
         uni.redirectTo({
            url: '/pages/driver/login'
         });
      },
      taskClick(item) {
         const status = item.status
         console.log(item);
         if(status == 0){
            uni.navigateTo({url: '/pages/driver/taskConfirm?id=' + item.id});
         }
         // else if(status == 2){
         //    uni.navigateTo({url:'/pages/driver/queueUp?jobId=' + item.id})
         // }
         else{
            uni.navigateTo({url: `/pages/driver/taskDetail?id=${item.id}&status=${item.status}`});
         }
      },
      handleTask(item) {
         uni.navigateTo({
            url: '/pages/driver/taskConfirm?id=' + item.id
         });
      },
      handleSign(item) {
         uni.navigateTo({
            url: `/pages/driver/taskDetail?id=${item.id}&status=${item.status}`
         });
      },
      handleQueue(item) {
         uni.navigateTo({
            url:'/pages/driver/queueUp?jobId=' + item.id	
         })
      },
   }
};
</script>

<style lang="scss">
.title_wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24rpx;
   padding-top: 10rpx;
   .name {
      font-weight: 600;
      font-size: 34rpx;
      color: #222222;
   }
   .btn {
      width: 144rpx;
      height: 56rpx;
      border-radius: 36rpx;
      border: 1rpx solid $uni-color-primary;
      font-size: 26rpx;
      color: $uni-color-primary;
      display: flex;
      justify-content: center;
      align-items: center;
   }
}
.main_app {
   padding-top: 12rpx;
}
.banner_wrap {
   padding: 54rpx 44rpx;
   color: #fff;
   position: relative;
   width: 688rpx;
   height: 270rpx;
   margin-bottom: 28rpx;
   .h1 {
      font-weight: bold;
      line-height: 66rpx;
      font-size: 44rpx;
      margin-bottom: 14rpx;
   }
   .h2 {
      font-weight: 600;
      font-size: 28rpx;
      width: 192rpx;
      color: $uni-color-primary;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39, 155, 170, 0.31);
      border-radius: 24rpx;
   }
   .banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
   }
}
.container1 {
   display: flex;
   flex-wrap: wrap;
   view {
      width: 336rpx;
   }
   .left {
      margin-right: 18rpx;
   }
   .img_wrap {
      position: relative;
      padding: 24rpx 0rpx 0 28rpx;
      border-radius: 8rpx;
      overflow: hidden;
      .h1 {
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
         margin-bottom: 4rpx;
      }
      .h2 {
         font-size: 22rpx;
         color: #7b9da1;
         line-height: 34rpx;
      }
      .img {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: -1;
      }
   }
   .img1 {
      width: 336rpx;
      height: 296rpx;
      margin-bottom: 16rpx;
   }
   .img2 {
      width: 336rpx;
      height: 140rpx;
      margin-bottom: 16rpx;
   }
}
.task_list {
   margin-bottom: 0rpx;
   .task_swiper {
      padding: 12rpx 10rpx;
      height: 340rpx;
      width: 730rpx;
      margin-left: -20rpx;
      box-sizing: border-box;
   }
   .item {
      background: #ffffff;
      box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(39, 155, 170, 0.32);
      border-radius: 16rpx;
      height: 280rpx;
      width: 98%;
      margin-left: 1%;
      .head {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
         padding: 0rpx 30rpx;
         height: 92rpx;
         .name {
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
         }
         .status {
            color: $uni-color-primary;
            font-weight: 600;
            text-align: right;
            .time {
               font-size: 24rpx;
               font-weight: 360;
            }
         }
      }
      .content {
         height: 180rpx;
         .info {
            display: flex;
            padding: 24rpx 30rpx;
            .plate {
               flex: 1;
               display: flex;
               align-items: center;
               .icon {
                  width: 26rpx;
                  height: 26rpx;
                  margin-right: 10rpx;
               }
            }
         }
         .sub {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 68rpx;
            padding: 0 30rpx 0;
            .time {
               font-size: 26rpx;
               color: #999999;
            }
            .sub_btn {
               height: 68rpx;
               line-height: 68rpx;
               padding: 0 34rpx;
               color: #ffffff;
               background: $uni-color-primary;
               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39, 155, 170, 0.4);
               border-radius: 40rpx;
            }
         }
      }
   }
}
.copyright {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 44rpx;
   font-size: 24rpx;
   color: #666666;
   image {
      width: 40rpx;
      height: 40rpx;
   }
}
</style>
         logoutPost()

         this.$store.commit('empty')

         window.location.href = app_url

      },

      taskClick(item) {

         const status = item.status

         if (status == 0) {

            uni.navigateTo({

               url: '/pages/driver/taskConfirm?id=' + item.id

            })

         }

         // else if(status == 2){

         //    uni.navigateTo({url:'/pages/driver/queueUp?jobId=' + item.id})

         // }

         else {

            uni.navigateTo({

               url: `/pages/driver/taskDetail?id=${item.id}&status=${item.status}`

            })

         }

      },

      handleTask(item) {

         uni.navigateTo({

            url: '/pages/driver/taskConfirm?id=' + item.id

         })

      },

      handleSign(item) {

         uni.navigateTo({

            url: `/pages/driver/taskDetail?id=${item.id}&status=${item.status}`

         })

      },

      handleQueue(item) {

         uni.navigateTo({

            url: '/pages/driver/queueUp?jobId=' + item.id

         })

      },

   }

}

</script>



<style lang="scss">

.title_wrap {

   display: flex;

   justify-content: space-between;

   align-items: center;

   margin-bottom: 24rpx;

   padding-top: 10rpx;



   .name {

      font-weight: 600;

      font-size: 34rpx;

      color: #222222;

   }



   .btn {

      width: 144rpx;

      height: 56rpx;

      border-radius: 36rpx;

      border: 1rpx solid $uni-color-primary;

      font-size: 26rpx;

      color: $uni-color-primary;

      display: flex;

      justify-content: center;

      align-items: center;

   }

}



.main_app {

   padding-top: 12rpx;

}



.banner_wrap {

   padding: 54rpx 44rpx;

   color: #fff;

   position: relative;

   width: 688rpx;

   height: 270rpx;

   margin-bottom: 28rpx;



   .h1 {

      font-weight: bold;

      line-height: 66rpx;

      font-size: 44rpx;

      margin-bottom: 14rpx;

   }



   .h2 {

      font-weight: 600;

      font-size: 28rpx;

      width: 192rpx;

      color: $uni-color-primary;

      height: 48rpx;

      line-height: 48rpx;

      text-align: center;

      background: #ffffff;

      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39, 155, 170, 0.31);

      border-radius: 24rpx;

   }



   .banner {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      z-index: -1;

   }

}



.container1 {

   display: flex;

   flex-wrap: wrap;



   view {

      width: 336rpx;

   }



   .left {

      margin-right: 18rpx;

   }



   .img_wrap {

      position: relative;

      padding: 24rpx 0rpx 0 28rpx;

      border-radius: 8rpx;

      overflow: hidden;



      .h1 {

         font-weight: 600;

         font-size: 32rpx;

         color: #222222;

         line-height: 48rpx;

         margin-bottom: 4rpx;

      }



      .h2 {

         font-size: 22rpx;

         color: #7b9da1;

         line-height: 34rpx;

      }



      .img {

         width: 100%;

         height: 100%;

         position: absolute;

         top: 0;

         left: 0;

         z-index: -1;

      }

   }



   .img1 {

      width: 336rpx;

      height: 296rpx;

      margin-bottom: 16rpx;

   }



   .img2 {

      width: 336rpx;

      height: 140rpx;

      margin-bottom: 16rpx;

   }

}



.task_list {

   margin-bottom: 0rpx;



   .task_swiper {

      padding: 12rpx 10rpx;

      height: 340rpx;

      width: 730rpx;

      margin-left: -20rpx;

      box-sizing: border-box;

   }



   .item {

      background: #ffffff;

      box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(39, 155, 170, 0.32);

      border-radius: 16rpx;

      height: 280rpx;

      width: 98%;

      margin-left: 1%;



      .head {

         display: flex;

         justify-content: space-between;

         align-items: center;

         background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);

         padding: 0rpx 30rpx;

         height: 92rpx;



         .name {

            font-weight: 600;

            font-size: 36rpx;

            color: #222222;

         }



         .status {

            color: $uni-color-primary;

            font-weight: 600;

            text-align: right;



            .time {

               font-size: 24rpx;

               font-weight: 360;

            }

         }

      }



      .content {

         height: 180rpx;



         .info {

            display: flex;

            padding: 24rpx 30rpx;



            .plate {

               flex: 1;

               display: flex;

               align-items: center;



               .icon {

                  width: 26rpx;

                  height: 26rpx;

                  margin-right: 10rpx;

               }

            }

         }



         .sub {

            display: flex;

            justify-content: space-between;

            align-items: center;

            height: 68rpx;

            padding: 0 30rpx 0;



            .time {

               font-size: 26rpx;

               color: #999999;

            }



            .sub_btn {

               height: 68rpx;

               line-height: 68rpx;

               padding: 0 34rpx;

               color: #ffffff;

               background: $uni-color-primary;

               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39, 155, 170, 0.4);

               border-radius: 40rpx;

            }

         }

      }

   }

}



.copyright {

   display: flex;

   align-items: center;

   justify-content: center;

   margin-top: 44rpx;

   font-size: 24rpx;

   color: #666666;



   image {

      width: 40rpx;

      height: 40rpx;

   }

}

</style>