Merge remote-tracking branch 'origin/master'

jiangping

2025-02-18 754f0eea0b16985a4dc8e8448e1bde7a8aec6f26

 h5/pages/driver/index.vue

@@ -1,312 +1,430 @@
<template>
  <view class="main_app">
    <view class="title_wrap">
      <view class="name">某某某，欢迎登录～</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 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>
            </view>
            <view class="plate">
              <image
                src="@/static/driver/wuliu_ic_huowu@2x.png"
                class="icon"
                mode=""
              ></image>
              <text>3000万</text>
            </view>
          </view>
          <view class="sub">
            <view class="time">02-01 08:11:11</view>
            <view class="sub_btn" @click="handleTask()">确认任务</view>
          </view>
        </view>
      </view>
    </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/reserved')">
          <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')"
        >
          <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">
          <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>
export default {
  data() {
    return {

    }
  },
  methods: {
    handleTask() {
      uni.navigateTo({
        url: '/pages/driver/taskConfirm'
      })
    }
  }
}
</script>

<style lang="scss">
.title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  .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: 40rpx;
  .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: 48rpx;
  .item {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(39, 155, 170, 0.18);
    border-radius: 16rpx;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
      padding: 20rpx 30rpx;
      .name {
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
      }
      .status {
        color: $uni-color-primary;
        font-weight: 600;
        .time {
          font-size: 24rpx;
          font-weight: 360;
        }
      }
    }
    .content {
      .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;
        padding: 0 30rpx 24rpx;
        .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>
<template>

   <view class="main_app">

      <view class="title_wrap">

         <view class="name">{{ driverInfo.realname || driverInfo.username }}，欢迎登录～</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,

      getLastWaitJob

   } from '@/api'

   export default {

      data() {

         return {

            taskList: [],

            driverInfo: uni.getStorageSync('driverInfo'),

         }

      },

      onLoad() {

         const ywinfo = uni.getStorageSync('ywinfo') || {}

         if (ywinfo.ywid && ywinfo.type == 0) {

            uni.setStorageSync('ywinfo',{})

            const yw = ywinfo.yw

            setTimeout(() => {

               if (yw == 7) {

                  this.jump('/pages/driver/reservedDetail?id=' + ywinfo.ywid)

               } else if (yw == 8) {

                  this.jump('/pages/driver/taskDetail?id=' + ywinfo.ywid)

               } else if (yw == 0) {

                  getLastWaitJob({

                     uuid: ywinfo.ywid

                  }).then(res => {

                     if (res.data && res.data.id) {

                        this.taskClick(res.data)

                     }

                  })

               }

            }, 100)

         }

      },

      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() {

            logoutPost({

               isH5: 1

            }).then(res => {

               this.$store.commit('empty')

               setTimeout(() => {

                  window.location.href = app_url

               }, 300)

            })

         },

         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 #B2B2B2;
         font-size: 26rpx;
         color: #666666;

         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: 260rpx;

         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>