ll

liukangdong

2024-08-29 1382a7990e9b13f60c6416ada5477673a934dd16

 h5/pages/driver/index.vue

@@ -1,7 +1,7 @@
<template>
   <view class="main_app">
      <view class="title_wrap">
         <view class="name">某某某，欢迎登录～</view>
         <view class="name">{{ driverInfo.realname }}，欢迎登录～</view>
         <view class="btn" @click="loginOut">退出登录</view>
      </view>
      <!--  -->
@@ -12,31 +12,43 @@
      </view>
      <!--  -->
      <view class="task_list">
         <view class="item">
            <view class="head">
               <view class="name">运输单222</view>
               <view class="status">
                  <view class="text">请确认任务</view>
                  <view class="time">预计等待：12小时</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>皖AD</text>
         <swiper circular class="task_swiper">
            <swiper-item v-for="item in taskList" :key="item.id">
               <view class="item">
                  <view class="head">
                     <view class="name">运输单{{ 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">请入园停靠1号月台作业</view>
                        <view class="text" v-if="item.status == 5">1号月台作业中</view>
                        <view class="text" v-if="item.status == 6">作业已完成</view>
                        <view class="time" v-if="item.waitTime">{{ item.waitTime }}</view>
                     </view>
                  </view>
                  <view class="plate">
                     <image src="@/static/driver/wuliu_ic_huowu@2x.png" class="icon" mode=""></image>
                     <text>3000万</text>
                  <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.arriveDate.slice(5) }}</view>
                        <view v-if="item.status == 0" class="sub_btn" @click="handleTask(item)">确认任务</view>
                        <view v-if="item.status == 1" class="sub_btn" @click="handleSign(item)">立即签到</view>
                        <view v-if="item.status == 2" class="sub_btn" @click="handleQueue(item)">查看排队</view>
                     </view>
                  </view>
               </view>
               <view class="sub">
                  <view class="time">02-01 08:11:11</view>
                  <view class="sub_btn" @click="handleTask()">确认任务</view>
               </view>
            </view>
         </view>
            </swiper-item>
         </swiper>
      </view>
      <!--  -->
      <view class="title_wrap"><view class="name">业务办理</view></view>
@@ -47,7 +59,7 @@
               <view class="h1">入园须知</view>
               <view class="h2">RESERVATION</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedGuide')">
            <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>
@@ -64,7 +76,7 @@
               <view class="h1">月台排队情况</view>
               <view class="h2">HIDDEN DANGER</view>
            </view>
            <view class="img_wrap img2">
            <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>
@@ -80,20 +92,55 @@
</template>

<script>
   export default {
      data() {
         return {
				
         };
import { logoutPost, driverHomeData } from '@/api';
export default {
   data() {
      return {
         taskList: [],
         driverInfo: uni.getStorageSync('driverInfo'),
			
      };
   },
   created() {
      this.initData();
   },
   methods: {
      handleSign(item) {
         uni.navigateTo({
            url: '/pages/driver/taskDetail?id=' + item.id
         });
      },
      methods: {
         handleTask(){
            uni.navigateTo({
               url: '/pages/driver/taskConfirm'
            })
         }
      handleQueue(item) {
         uni.navigateTo({
            url:'/pages/driver/queueUp?jobId=' + item.id	
         })
      },
      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'
         });
      },
      handleTask(item) {
         uni.navigateTo({
            url: '/pages/driver/taskConfirm?id=' + item.id
         });
      }
   }
};
</script>

<style lang="scss">
@@ -103,7 +150,7 @@
   align-items: center;
   margin-bottom: 24rpx;
   .name {
      font-weight: 500;
      font-weight: 600;
      font-size: 34rpx;
      color: #222222;
   }
@@ -135,16 +182,16 @@
      font-size: 44rpx;
      margin-bottom: 14rpx;
   }
   .h2{
      font-weight: 500;
   .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);
      background: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39, 155, 170, 0.31);
      border-radius: 24rpx;
   }
   .banner {
@@ -170,7 +217,7 @@
      border-radius: 8rpx;
      overflow: hidden;
      .h1 {
         font-weight: 500;
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
@@ -201,63 +248,76 @@
      margin-bottom: 16rpx;
   }
}
.task_list{
.task_list {
   margin-bottom: 48rpx;
   .item{
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(39,155,170,0.18);
   .task_swiper {
      padding: 16rpx 10rpx;
      height: 320rpx;
      width: 730rpx;
      margin-left: -20rpx;
      box-sizing: border-box;
   }
   .item {
      background: #ffffff;
      box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(39, 155, 170, 0.32);
      border-radius: 16rpx;
      .head{
      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: 20rpx 30rpx;
         .name{
         background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
         padding: 0rpx 30rpx;
         height: 92rpx;
         .name {
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
         }
         .status{
         .status {
            color: $uni-color-primary;
            font-weight: 500;
            .time{
            font-weight: 600;
            text-align: right;
            .time {
               font-size: 24rpx;
               font-weight: 360;
            }
         }
      }
      .content{
         .info{
      .content {
         height: 180rpx;
         .info {
            display: flex;
            padding: 24rpx 30rpx;
            .plate{
            .plate {
               flex: 1;
               display: flex;
               align-items: center;
               .icon{
               .icon {
                  width: 26rpx;
                  height: 26rpx;
                  margin-right: 10rpx;
               }
            }
         }
         .sub{
         .sub {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx 24rpx;
            .time{
            .time {
               font-size: 26rpx;
               color: #999999;
            }
            .sub_btn{
            .sub_btn {
               height: 68rpx;
               line-height: 68rpx;
               padding: 0 34rpx;
               color: #FFFFFF;
               color: #ffffff;
               background: $uni-color-primary;
               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39,155,170,0.4);
               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39, 155, 170, 0.4);
               border-radius: 40rpx;
            }
         }