ll

liukangdong

2025-02-12 4c9d218bf8742f22276245e7d623ff823d13758d

 h5/pages/driver/taskConfirm.vue

@@ -2,163 +2,210 @@
   <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="line" v-if="param.billCode">
            <view class="label">运输单号</view>
            <view class="value" @click="showDetail = true">
               <text class="waybill_num">Y111</text>
            <view class="value" @click="wmsDetail">
               <text class="waybill_num">{{ param.billCode }}</text>
               <text class="btn">运单详情</text>
            </view>
         </view>
         <view class="line">
         <view class="line" v-else>
            <view class="label">合同编号</view>
            <view class="value">{{param.contractNum}}</view>
         </view>
         <view class="line" v-if="type != 4">
            <view class="label">作业类型</view>
            <view class="value">入园装货</view>
            <view class="value" v-if="param.type == 0">自有车卸货</view>
            <view class="value" v-if="param.type == 1">自有车装货</view>
            <view class="value" v-if="param.type == 2">外协车卸货</view>
            <view class="value" v-if="param.type == 3">外协车装货</view>
         </view>
         <view class="line" v-if="type == 4">
            <view class="label">入库类型</view>
            <view class="value" v-if="param.inType == 0">整托盘</view>
            <view class="value" v-if="param.inType == 1">件烟</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">
               <view class="last">皖</view>
               <view class="name">AD1111</view>
            <view v-if="wmsInfo.plateNumber" class="id_card">
               <text>{{ wmsInfo.plateNumber.slice(0, 1) }}</text>
               <text>{{ wmsInfo.plateNumber.slice(1, 2) }}</text>
               <text>·</text>
               <text>{{ wmsInfo.plateNumber.slice(2) }}</text>
            </view>
            <!--  -->
            <view class="info">
               <view class="line">
                  <view class="label">运输单号</view>
                  <view class="value">2222</view>
                  <view class="value">{{ wmsInfo.carryBillCode }}</view>
               </view>
               <view class="line">
                  <view class="label">驾驶员</view>
                  <view class="value">2222</view>
                  <view class="value">{{ wmsInfo.driverName }} {{ wmsInfo.driverPhone }}</view>
               </view>
               <view class="line">
                  <view class="label">总运输量</view>
                  <view class="value">2222</view>
                  <view class="value">{{ wmsInfo.ioQty }}万支</view>
               </view>
               <view class="line">
                  <view class="label">运输公司</view>
                  <view class="value">2222</view>
                  <view class="value">{{ wmsInfo.carrierName }}</view>
               </view>
            </view>
            <view class="separate"></view>
            <view class="contract_list">
               <view class="title">合同号：111</view>
               <view class="address">aadd</view>
               <view class="list">
                  <view class="line">
                     <view class="label">物料：</view>
                     <view class="value">黄山黑马</view>
                  </view>
                  <view class="line">
                     <view class="label">数量：</view>
                     <view class="value">黄山黑马</view>
                  </view>
                  <view class="line">
                     <view class="label">物料：</view>
                     <view class="value">黄山黑马</view>
                  </view>
                  <view class="line">
                     <view class="label">数量：</view>
                     <view class="value">黄山黑马</view>
            <view class="contract_wrap">
               <view class="contract_list" v-for="item in wmsInfo.wmsJobContractVOList">
                  <view class="title">合同号：{{ item.contractCode }}</view>
                  <view class="address">收货地：{{ item.address }}</view>
                  <view class="list">
                     <view class="item" v-for="line in item.platformWmsDetailList">
                        <view class="line">
                           <view class="label">物料：</view>
                           <view class="value">{{ line.materialName }}</view>
                        </view>
                        <view class="line">
                           <view class="label">数量：</view>
                           <view class="value">{{ line.ioQty }}万支</view>
                        </view>
                     </view>
                  </view>
               </view>
            </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, wmsJobDetail } from '@/api';
import dayjs from 'dayjs'
export default {
   components: {
      keyboardInput
   },
   data() {
      return {
         param: {
            status: '0'
         },
         param: {},
         wmsInfo: {},
         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 =>{
            if(res && res.code == 200){
               this.showToast('确认成功')
               this.$goBack()
            }
         })
      },
      getDetail(jobId) {
         driverTaskJobDetail({
            jobId
         }).then(ress => {
            this.param = { ...ress.data, carCodeBack: '' };
         });
      },
      wmsDetail() {
         const { param } = this
         wmsJobDetail({ id: param.id }).then(res => {
            this.wmsInfo = res.data
            this.showDetail = true
         })
      },
      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 +217,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 +255,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 +281,7 @@
         align-items: center;

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

      .name {
         font-weight: 500;
         font-weight: 600;
         font-size: 40rpx;
         line-height: 56rpx;
         margin-bottom: 12rpx;
@@ -285,12 +332,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 +362,7 @@
         width: 690rpx;
         font-size: 36rpx;
         color: #333333;
         background: #FFFFFF;
         background: #ffffff;
         border-radius: 48rpx;
         border: 1rpx solid #999999;
      }
@@ -330,106 +376,127 @@
}

.detail_modal {
   padding: 36rpx 30rpx;
      height: calc( 100vh - 88rpx );
      padding: 36rpx 30rpx;
      border-radius: 12rpx;
      box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.5);
      .modal_title {
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         line-height: 44rpx;
         text-align: center;
         margin-bottom: 36rpx;
      }
      .contract_wrap{
         height: calc( 100% - 400rpx );
         overflow-y: auto;
      }
      .contract_list {
         border-top: 1rpx solid #E5E5E5;
         margin-bottom: 30rpx;
         padding-top: 30rpx;
         &:nth-last-child(1){
            margin-bottom: 0;
         }
         .list {
            background: #f7f7f7;
            border-radius: 8rpx;
            padding: 20rpx;
            .item{
               border-bottom: 1rpx solid #e5e5e5;
               padding-bottom: 20rpx;
               margin-bottom: 20rpx;
               &:nth-last-child(1){
                  border: none;
                  padding-bottom: 0;
                  margin-bottom: 0;
               }
            }
            .line {
               display: flex;
               margin-bottom: 20rpx;
               &:nth-last-child(1){
                  margin-bottom: 0rpx;
               }
               .label {
                  color: #666666;
                  width: 92rpx;
               }

   .modal_title {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      line-height: 44rpx;
      text-align: center;
      margin-bottom: 36rpx;
   }
               .value {
                  flex: 1;
                  color: #222222;
               }
            }
         }

   .contract_list {
      .list {
         background: #F7F7F7;
         border-radius: 8rpx;
         padding: 20rpx;
         .title {
            font-weight: 600;
            font-size: 30rpx;
            color: $uni-color-primary;
            margin-bottom: 12rpx;
         }

         .address {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
         }
      }

      .info {
         .line {
            display: flex;
            margin-bottom: 20rpx;

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

            .label {
               font-size: 30rpx;
               color: #666666;
               width: 86rpx;
               width: 150rpx;
            }

            .value {
               flex: 1;
               font-size: 30rpx;
               color: #222222;
            }
         }
      }

      .title {
         font-weight: 500;
         font-size: 30rpx;
         color: $uni-color-primary;
         margin-bottom: 12rpx;
      .separate {
         width: 750rpx;
         height: 2rpx;
         margin: 30rpx -30rpx;
         border: 1rpx solid #e5e5e5;
      }

      .address {
         font-size: 26rpx;
         color: #666666;
         margin-bottom: 20rpx;
      }
   }

   .info {
      .line {
      .id_card {
         display: flex;
         margin-bottom: 20rpx;
         font-weight: 600;
         height: 60rpx;
         line-height: 60rpx;
         font-size: 32rpx;
         color: #111111;
         border-radius: 8rpx;
         border: 1rpx solid #dfdede;
         width: 220rpx;
         margin-bottom: 15rpx;

         .label {
            font-size: 30rpx;
            color: #666666;
            width: 150rpx;
         }
         text {
            &:nth-of-type(1) {
               background: #e9f5f6;
               padding: 0 12rpx;
            }

         .value {
            flex: 1;
            font-size: 30rpx;
            color: #222222;
            &:nth-of-type(2) {
               padding-left: 10rpx;
            }

            &:nth-of-type(4) {
               padding-right: 6rpx;
            }
         }
      }
   }

   .separate {
      width: 750rpx;
      height: 2rpx;
      margin: 30rpx -30rpx;
      border: 1rpx solid #E5E5E5;
   }

   .id_card {
      border-radius: 8rpx;
      display: flex;
      height: 60rpx;
      line-height: 60rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #111111;
      text-align: center;
      margin-bottom: 30rpx;

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

      .name {
         width: 186rpx;
         border: 1rpx solid #DFDEDE;
      }
   }
}
</style>