jiangping
2024-09-02 843d0abd014ec20424844546fc57a9f976f366ba
h5/pages/driver/taskDetail.vue
@@ -11,48 +11,73 @@
      <view class="name" v-if="param.status == 5">月台作业中</view>
      <view class="name" v-if="param.status == 6">作业已完成</view>
      <view class="id_card">{{ param.carCodeFront }}</view>
      <view class="status" v-if="param.status == 1">等待签到</view>
      <view class="status" v-if="param.status == 2">等待叫号</view>
      <view class="status" v-if="param.status == 5">作业中</view>
      <view class="status" v-if="param.status == 6">作业完成</view>
      <view class="status">{{statusMap[param.status]}}</view>
    </view>
    <!--  -->
    <view class="main_content">
      <view class="line">
        <view class="label">司机姓名</view>
        <view class="value">{{param.lineUpNum}}</view>
        <view class="value">{{param.driverName}}</view>
      </view>
      <view class="line">
        <view class="label">手机号</view>
        <view class="value">{{param.lineUpNum}}</view>
        <view class="value">{{param.drivierPhone}}</view>
      </view>
         <template v-if="param.type != 4">
      <view class="line">
        <view class="label">运输单号</view>
        <view class="value" @click="showDetail = true">
          <text class="waybill_num">{{param.lineUpNum}}</text>
                <text class="waybill_num">{{param.code}}</text>
          <text class="btn">运单详情</text>
        </view>
      </view>
      <view class="line">
        <view class="label">作业类型</view>
        <view class="value">{{param.lineUpNum}}</view>
              <view class="value">市公司外协车卸货</view>
      </view>
         </template>
         <template v-else>
            <view class="line">
              <view class="label">合同编号</view>
              <view class="value">{{param.contractNum}}</view>
            </view>
            <view class="line">
              <view class="label">入库类型</view>
              <view class="value">{{param.inType == 0 ? '整托盘' : '件烟'}}</view>
            </view>
            <view class="line">
              <view class="label">作业量</view>
              <view class="value">{{param.totalNum}}万支</view>
            </view>
         </template>
      <view class="line">
        <view class="label">车牌照</view>
        <view class="value">{{param.lineUpNum}}</view>
        <view class="value">前:{{param.carCodeFront}} | 后:{{param.carCodeBack}}</view>
      </view>
      <!--  -->
      <view class="line">
      <view class="line" v-if="param.status == 1">
        <view class="label">距离园区</view>
        <view class="value">
          <view class="">0 公里</view>
          <view class="">{{param.getDistance}}公里</view>
          <view class="btn" @click="getLocation">
                  <image class="icon mr6" src="../../static/driver/position.png"></image>
            重新定位
          </view>
        </view>
      </view>
      <view class="warnning">
         <view class="line" v-if="param.signDate">
           <view class="label">签到时间</view>
           <view class="value">{{param.signDate}}</view>
         </view>
         <view class="line" v-if="param.startDate">
           <view class="label">开始作业</view>
           <view class="value">{{param.startDate}}</view>
         </view>
         <view class="line" v-if="param.doneDate">
           <view class="label">作业完成</view>
           <view class="value">{{param.doneDate}}</view>
         </view>
      <view v-if="param.status == 1" class="warnning">
        <u-icon name="info-circle" color="#ED4545" class="mr12"></u-icon>
        如无法获取定位,请用微信扫描园区大屏二维
      </view>
@@ -68,25 +93,24 @@
            <view class="label">作业完成</view>
            <view class="value">2022</view>
         </view> -->
      <view class="signIn_wrap" @click="handleSignIn">
      <view v-if="param.status == 1" class="signIn_wrap" @click="handleSignIn">
        <image
          :src="
            param.status == '0'
            param.getDistance < signDistance
              ? require('@/static/driver/btn_qiandao@2x.png')
              : require('@/static/driver/btn_qiandao_fail@2x.png')
          "
          class="img"
          mode="widthFix"
        ></image>
        <view class="handle">签到</view>
        <view class="time">09:10</view>
        <view class="handle">{{ param.getDistance > signDistance ? '无法签到' : '签到' }}</view>
        <view class="time">{{nowTime}}</view>
      </view>
    </view>
    <view class="space"></view>
    <!-- 等待叫号 -->
    <view class="padding_wrap">
      <view class="btn cancel">取消签到</view>
      <view class="btn check">查看排队情况</view>
    <view v-if="param.status == 2" class="padding_wrap">
      <view class="btn check" @click="handleQueue">查看排队情况</view>
    </view>
    <!-- modal -->
@@ -153,42 +177,81 @@
</template>
<script>
   import { driverTaskJobDetail } from '@/api'
   import { driverTaskJobDetail, driverSignInTask } from '@/api';
   import { statusMap } from '@/utils/config.js';
   import dayjs from 'dayjs';
export default {
  data() {
    return {
         statusMap,
      param: {
        status: '0'
      },
         jobId: '',
         lat: '',
         lnt: '',
         nowTime: '',
         signDistance: uni.getStorageSync('driverGuide').signDistance,
      showDetail: false,
    }
  },
   onLoad(option) {
      this.getLocation(option.id)
      this.jobId = option.id
      if(option.status && option.status == '1'){
         this.getLocation()
      }else{
         this.getDetail()
      }
      // this.getDetail({
      //    jobId: option.id,
      //    lat: 31.769137,
      //    lnt: 117.232241,
      // })
      setInterval(() => {
         this.nowTime = dayjs().format('HH:mm:ss')
      })
   },
  methods: {
    handleSignIn() {
      const { param } = this
      this.param.status = param.status == '0' ? '1' : '0'
         const { param, signDistance, lat, lnt, jobId } = this
         if(param.getDistance > signDistance) return
         driverSignInTask({
            jobId, lat, lnt,signType: 0
         }).then(res => {
            this.showToast('签到成功')
            this.getDetail()
         })
    },
    getLocation(jobId) {
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
      getDetail() {
         const { jobId, lat, lnt } = this
               driverTaskJobDetail({
                  jobId,
                  lat: res.latitude,
                  lnt: res.longitude,
            jobId: this.jobId,
            lat,
            lnt
               }).then(ress => {
                  this.param = { ...ress.data }
               })
               console.log(res);
          console.log('当前位置的经度:' + res.longitude)
          console.log('当前位置的纬度:' + res.latitude)
      },
    getLocation() {
         const { jobId } = this
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
               this.lat = res.latitude
               this.lnt = res.longitude
               this.getDetail()
        },
            fail:(err) => {
               console.log('err', err);
        }
      })
    }
    },
      handleQueue() {
         uni.navigateTo({
            url:'/pages/driver/queueUp?jobId=' + this.jobId
         })
      },
  }
}
</script>
@@ -202,6 +265,7 @@
    padding: 16rpx 30rpx;
    position: relative;
    bottom: 32rpx;
      z-index: 999;
    .line {
      padding: 24rpx 0 28rpx;
      border-bottom: 1rpx solid #e5e5e5;
@@ -308,6 +372,7 @@
  }
  .padding_wrap {
    position: fixed;
      z-index: 999;
    padding: 0 30rpx 64rpx;
    bottom: 0;
    left: 0;
@@ -318,7 +383,7 @@
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      width: 336rpx;
      width: 100%;
      font-size: 36rpx;
      color: #333333;
      background: #ffffff;