ll

liukangdong

2024-08-29 1382a7990e9b13f60c6416ada5477673a934dd16

 h5/pages/driver/taskConfirm.vue

@@ -2,60 +2,61 @@
   <view class="main_app">
      <view class="status_wrap">
         <image class="bg" src="../../static/driver/bg_renwu@2x.png" mode=""></image>
         <view class="name">作业已完成</view>
         <view class="id_card">皖AD1212</view>
         <view class="status">作业完成</view>
         <view class="name">请确认任务</view>
         <view class="id_card">{{ param.carCodeFront }}</view>
         <view class="status">任务待确认</view>
      </view>
      <!--  -->
      <view class="main_content">
         <view class="line">
            <view class="label">司机姓名</view>
            <view class="value">刘某</view>
            <view class="value">{{ param.driverName }}</view>
         </view>
         <view class="line">
            <view class="label">手机号</view>
            <view class="value">188</view>
            <view class="value">{{ param.drivierPhone }}</view>
         </view>
         <view class="line">
            <view class="label">运输单号</view>
            <view class="value" @click="showDetail = true">
               <text class="waybill_num">Y111</text>
               <text class="waybill_num">{{ param.contractNum }}</text>
               <text class="btn">运单详情</text>
            </view>
         </view>
         <view class="line">
            <view class="label">作业类型</view>
            <view class="value">入园装货</view>
            <view class="value">{{ param.inType == 0 ? '整托盘' : '件烟' }}</view>
         </view>
         <view class="empty"></view>
         <!--  -->
         <view class="line">
            <view class="label">车前牌照号</view>
            <view class="value" @click="openInput(1)">
               <text :style="{ color: param.carNos ? '#000000' : '#999999' }">{{ param.carNos ? param.carNos : '请输入车前牌照号'
                  }}</text>
            <view class="label">到场日期<text class="red ml6">*</text></view>
            <view class="value" @click="showDate = true">
               <view :class="param.date ? '' : 'placeholder9'">{{ param.date ? param.date : '请选择' }}</view>
               <u-icon color="#999999" name="arrow-right"></u-icon>
            </view>
         </view>
         <view class="line">
            <view class="label">车后牌照号</view>
            <view class="label">车前牌照号</view>
            <view class="value" @click="openInput(1)">
               <text :style="{ color: param.carCodeFront ? '#000000' : '#999999' }">{{ param.carCodeFront ? param.carCodeFront : '请输入车前牌照号' }}</text>
            </view>
         </view>
         <view class="line">
            <view class="label">车后牌照号<text class="red ml6">*</text></view>
            <view class="value">
               <text @click="openInput(1)" :style="{ color: param.carNos ? '#000000' : '#999999' }">{{ param.carNos ?
               param.carNos : '请输入车后牌照号' }}</text>
               <text class="copy">复制车前牌照号</text>
               <text @click="openInput(2)" :style="{ color: param.carCodeBack ? '#000000' : '#999999' }">{{ param.carCodeBack ? param.carCodeBack : '请输入车后牌照号' }}</text>
               <text class="copy" @click="copy">复制车前牌照号</text>
            </view>
         </view>
         <!--  -->

      </view>
      <view class="space"></view>
      <!-- 等待叫号 -->
      <view class="sub_wrap">
         <view class="btn check">确认任务</view>
      </view>
      <view class="sub_wrap"><view class="btn check" @click="onSubmit">确认任务</view></view>

      <!-- modal -->
      <u-popup :show="showDetail" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true"
         mode="bottom" @close="showDetail = false">
      <u-popup :show="showDetail" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true" mode="bottom" @close="showDetail = false">
         <view class="detail_modal">
            <view class="modal_title">运单详情</view>
            <view class="id_card">
@@ -106,59 +107,85 @@
            </view>
         </view>
      </u-popup>
      <u-datetime-picker :show="showDate" v-model="param.date" :minDate="minDate" @confirm="dateEnter" @cancel="showDate = false" mode="datetime"></u-datetime-picker>
      <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
   </view>
   <!--  -->
</template>

<script>
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue'
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue';
import { driverTaskJobDetail, driverConfirmTask } from '@/api';
import dayjs from 'dayjs'
export default {
   components: {
      keyboardInput
   },
   data() {
      return {
         param: {
            status: '0'
         },
         param: {},
         showDate: false,
         showDetail: false,
         minDate: '',

         inputType: ''
      }
      };
   },
   onLoad(option) {
      this.getDetail(option.id);
      this.minDate = new Date().getTime()
   },
   methods: {
      handleSignIn() {
      onSubmit(){
         const { param } = this
         this.param.status = param.status == '0' ? '1' : '0'
      },
      getLocation() {
         uni.getLocation({
            type: 'wgs84',
            success: function (res) {
               console.log('当前位置的经度：' + res.longitude)
               console.log('当前位置的纬度：' + res.latitude)
            }
         if(!param.date) return this.showToast('请选择到场日期')
         if(!param.carCodeBack) return this.showToast('请输入车后牌照号')
         driverConfirmTask({
            id: param.id,
            carCodeBack: param.carCodeBack,
            arriveDate: param.date + ':59'
         }).then(res =>{
            this.showToast('确认成功')
            uni.navigateBack()
         })
      },
      getDetail(jobId) {
         driverTaskJobDetail({
            jobId
         }).then(ress => {
            this.param = { ...ress.data, carCodeBack: '' };
         });
      },
      dateEnter(e) {
         setTimeout(() => {
            this.$set(this.param, 'date', dayjs(e.value).format('YYYY-MM-DD HH:mm'))
         })
         this.showDate = false
      },
      openInput(type) {
         this.inputType = type
         this.$refs.keyboard.open()
         this.inputType = type;
         this.$refs.keyboard.open();
      },
      copy() {
         if (this.param.carCodeFront) {
            this.$set(this.param, 'carCodeBack', this.param.carCodeFront);
            this.showToast('复制成功');
         }
      },
      setPlate(e) {
         if (this.inputType === 1) {
            this.param.carNos = e
            this.$set(this.param, 'carCodeFront', e);
         } else if (this.inputType === 2) {
            this.param.carNos = e
            this.$set(this.param, 'carCodeBack', e);
         }
         this.$forceUpdate()
         this.closeInput()
         this.$forceUpdate();
         this.closeInput();
      },
      closeInput() {
         this.$refs.keyboard.close()
         this.$refs.keyboard.close();
      }
   }
}
};
</script>

<style lang="scss">
@@ -170,15 +197,15 @@
   padding: 0;

   .main_content {
      background: #FFFFFF;
      background: #ffffff;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      padding: 16rpx 30rpx;
      position: relative;
      bottom: 32rpx;

      z-index: 999;
      .line {
         padding: 24rpx 0 28rpx;
         border-bottom: 1rpx solid #E5E5E5;
         border-bottom: 1rpx solid #e5e5e5;

         .label {
            font-size: 26rpx;
@@ -208,15 +235,15 @@
            }
         }
      }
      .empty{
      .empty {
         width: 750rpx;
            height: 20rpx;
            background-color: #f7f7f7;
            margin: 0 -30rpx;
         height: 20rpx;
         background-color: #f7f7f7;
         margin: 0 -30rpx;
      }
      .warnning {
         display: flex;
         color: #ED4545;
         color: #ed4545;
         align-items: center;
         margin: 40rpx 0;
      }
@@ -234,7 +261,7 @@
         align-items: center;

         .handle {
            font-weight: 500;
            font-weight: 600;
            font-size: 40rpx;
            line-height: 56rpx;
         }
@@ -270,7 +297,7 @@
      }

      .name {
         font-weight: 500;
         font-weight: 600;
         font-size: 40rpx;
         line-height: 56rpx;
         margin-bottom: 12rpx;
@@ -285,12 +312,11 @@
         top: 30rpx;
         height: 68rpx;
         line-height: 68rpx;
         background: #FFFFFF;
         background: #ffffff;
         padding: 0 24rpx;
         border-radius: 34rpx 0rpx 0rpx 34rpx;
         font-size: 26rpx;
         color: $uni-color-primary;

      }
   }

@@ -316,7 +342,7 @@
         width: 690rpx;
         font-size: 36rpx;
         color: #333333;
         background: #FFFFFF;
         background: #ffffff;
         border-radius: 48rpx;
         border: 1rpx solid #999999;
      }
@@ -333,7 +359,7 @@
   padding: 36rpx 30rpx;

   .modal_title {
      font-weight: 500;
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      line-height: 44rpx;
@@ -343,7 +369,7 @@

   .contract_list {
      .list {
         background: #F7F7F7;
         background: #f7f7f7;
         border-radius: 8rpx;
         padding: 20rpx;

@@ -352,7 +378,7 @@
            margin-bottom: 20rpx;

            &:nth-of-type(3n) {
               border-top: 1rpx solid #E5E5E5;
               border-top: 1rpx solid #e5e5e5;
               padding-top: 20rpx;
            }

@@ -369,7 +395,7 @@
      }

      .title {
         font-weight: 500;
         font-weight: 600;
         font-size: 30rpx;
         color: $uni-color-primary;
         margin-bottom: 12rpx;
@@ -405,7 +431,7 @@
      width: 750rpx;
      height: 2rpx;
      margin: 30rpx -30rpx;
      border: 1rpx solid #E5E5E5;
      border: 1rpx solid #e5e5e5;
   }

   .id_card {
@@ -420,15 +446,15 @@
      margin-bottom: 30rpx;

      .last {
         background: #E9F5F6;
         background: #e9f5f6;
         width: 60rpx;
         border-radius: 8rpx 0rpx 0rpx 8rpx;
         border: 1rpx solid #DFDEDE;
         border: 1rpx solid #dfdede;
      }

      .name {
         width: 186rpx;
         border: 1rpx solid #DFDEDE;
         border: 1rpx solid #dfdede;
      }
   }
}