更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/wdata/detail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,467 @@
<template>

   <view class="main_app">

      <view class="head_bg"></view>

      <view class="info">

         <view class="head">

            <view class="title">运输单号：{{info.transportCode}}</view>

            <view class="status">{{info.logisticsStatus == 0 ? '待执行' : info.logisticsStatus == 1 ? '执行中(在途)' : '完成(到货)'}}

            </view>

         </view>

         <view class="content">

            <view class="line">

               <view class="la">物资类型</view>

               <view class="val">{{ info.materialType == '1' ? '成品' : '托盘' }}</view>

            </view>

            <view class="line">

               <view class="la">业务类型</view>

               <view class="val" v-if="info.businessType == 1">成品销售</view>

               <view class="val" v-if="info.businessType == 2">成品移库</view>

               <view class="val" v-if="info.businessType == 3">空托盘-工业调剂</view>

               <view class="val" v-if="info.businessType == 4">空托盘-商业回收</view>

               <view class="val" v-if="info.businessType == 5">空托盘-托盘带回</view>

            </view>

            <view class="line">

               <view class="la">是否托盘联运</view>

               <view class="val">{{ info.isPalletTransport == 1 ? '是' : '否' }}</view>

            </view>

            <view class="line">

               <view class="la">发货点</view>

               <view class="val">{{ info.startCity }}</view>

            </view>

            <view class="line">

               <view class="la">卸货点</view>

               <view class="val">{{ info.endCity }}</view>

            </view>

            <view class="line">

               <view class="la">车牌号</view>

               <view class="val">{{ info.plateNumber }}</view>

            </view>

            <view class="line">

               <view class="la">司机</view>

               <view class="val">{{ info.driverName }}</view>

            </view>

            <view class="line">

               <view class="la">任务下达时间</view>

               <view class="val">{{ info.receiveDate }}</view>

            </view>

         </view>

      </view>

      <!--  -->

      <view class="record">

         <view class="title">品规明细</view>

         <view class="table_scroll">

            <view class="table">

               <view class="head line">

                  <view class="ite con">合同号</view>

                  <view class="ite name">品规名称</view>

                  <view class="ite num">数量</view>

                  <view class="ite time">最早到货时间</view>

                  <view class="ite time">最迟到货时间</view>

               </view>

               <view class="line" v-for="item in info.productDetails">

                  <view class="ite con">{{item.contractNumber}}</view>

                  <view class="ite name">{{item.productName}}</view>

                  <view class="ite num">{{item.packageSize}}</view>

                  <view class="ite time">{{item.earliestReachDate}}</view>

                  <view class="ite time">{{item.latestReachDate}}</view>

               </view>

            </view>

         </view>

      </view>

      <!--  -->

      <view class="flow_wrap">

         <view class="title">任务流程</view>

         <view class="list">

            <view class="item" v-for="item,i in info.transportStops">

               <view v-if="i < info.transportStops.length - 1" class="dian"></view>

               <view class="top1">

                  <view class="left_icon">

                     <image v-if="(info.logisticsStatus == 1 && item.actualArrivedDate) || info.logisticsStatus == 2"

                        src="@/static/waybill/ic_daohuo_sel@2x.png" mode=""></image>

                     <image v-else src="@/static/waybill/ic_dingdan@2x.png" mode=""></image>

                  </view>

                  <view class="content">

                     <view class="name" :class="{primaryColor: (info.logisticsStatus == 1 && item.actualArrivedDate) || info.logisticsStatus == 2}">{{item.receiveLocation}}</view>

                     <view class="status">

                        <view v-if="info.logisticsStatus == 0" class="btn">到货</view>

                        <view v-else-if="info.logisticsStatus == 1 && !item.actualArrivedDate" @click="startAri(item.stopNumber)"

                           class="btn pri">到货</view>

                        <template v-else>

                           <image src="@/static/checkbox_sel@2x.png" mode="" class="icon"></image>

                           <text class="primaryColor">已到货</text>

                        </template>

                     </view>

                  </view>

               </view>

               <view class="top1">

                  <view class="left_icon"></view>

                  <view class="time" v-if="item.actualArrivedDate">到货时间：{{ item.actualArrivedDate}}</view>
                  <view class="time" style="margin-top: -10rpx;" v-else>-</view>

               </view>

            </view>

         </view>

      </view>

      <view v-if="info.logisticsStatus == 0" @click="startTrans" class="start_btn">启运</view>

      <!--  -->
      <view v-if="showTip" class="tip_wrap">
         <view class="title">提示</view>
         <view class="text">车辆刚启运，暂无法进行到</view>
         <view class="text">货操作，请5分钟后再试</view>
         <view class="btn" @click="showTip = false">我知道了</view>
      </view>
      <view  v-if="showTip" class="shade"></view>
   </view>

</template>



<script>

   import {

      putTaskDetail,

      putDriverArrival,

      putDriverStart,

   } from '@/api'

   export default {

      data() {

         return {

            info: {

               productDetails: [],

               transportStop: []

            },
            showTip: false

         };

      },

      onLoad(options) {

         this.id = options.id

         this.getDetail()

      },

      methods: {

         getDetail() {

            putTaskDetail({

               id: this.id

            }).then(res => {

               this.info = res.data

            })

         },

         startTrans() {

            uni.showModal({

               title: '提示',

               content: '确认启运么？',

               success: (res) => {

                  if (res.confirm) {

                     putDriverStart({

                        id: this.id,

                        optType: 0

                     }).then((ress) => {

                        if (ress.code == 200) {
                           const transportList = uni.getStorageSync('transportList') || []
                           transportList.push({ id: this.id, time: new Date().getTime() })
                           uni.setStorageSync('transportList', transportList)

                           this.showToast('启运成功')
                           this.getDetail()

                        }

                     })

                  }

               }

            });

         },

         startAri(stopNumber) {

            uni.showModal({

               title: '提示',

               content: '确认到货么？',

               success: (res) => {

                  if (res.confirm) {
                     const transportList = uni.getStorageSync('transportList') || []
                     const item = transportList.find(i => i.id == this.id)
                     if(item && item.id){
                        const timeN = new Date().getTime() - item.time
                        if(timeN < 5 * 60 * 1000){
                           this.showTip = true
                           return
                        }
                     }

                     putDriverArrival({

                        stopNumber,

                        optType: 1,

                        id: this.id

                     }).then(ress => {

                        if (ress.code == 200) {

                           this.showToast('到货成功')
                           this.getDetail()

                        }

                     })

                  }

               }

            });

         }

      }

   }

</script>



<style lang="scss">

   page {

      background-color: #f7f7f7;

   }
   .shade{
      width: 100vw;
      height: 100vh;
      background: #000000;
      opacity: 0.4;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;
   }

   .tip_wrap{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 560rpx;
      height: 328rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      text-align: center;
      z-index: 999;
      .title{
         font-weight: 500;
         font-size: 32rpx;
         color: #111111;
         margin: 40rpx 0 30rpx;
      }
      .text{
         font-weight: 400;
         font-size: 28rpx;
         color: #333333;
      }
      .btn{
         margin-top: 32rpx;
         height: 100rpx;
         display: flex;
         justify-content: center;
         align-items: center;
         border-top: 1rpx solid #E5E5E5;
         color: #279BAA;
         font-size: 32rpx;
      }
   }

   .head_bg {

      width: 750rpx;

      height: 240rpx;

      background: linear-gradient(180deg, #279BAA 0%, rgba(39, 155, 170, 0) 100%);

      position: absolute;

      top: 0;

      left: 0;

   }



   .info {

      border-radius: 8rpx;

      overflow: hidden;

      margin-top: 30rpx;

      background: #FFFFFF;

      position: relative;
      z-index: 1;

      .head {

         display: flex;

         justify-content: space-between;

         align-items: center;

         height: 84rpx;

         background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);

         padding: 0 30rpx;



         .title {

            font-weight: 500;

            font-size: 32rpx;

            color: #222222;

         }



         .status {

            font-size: 26rpx;

            color: $uni-color-primary;

         }

      }



      .content {

         padding: 30rpx 30rpx 10rpx;

         font-size: 30rpx;



         .line {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 20rpx;



            .la {

               color: #666666;

            }



            .val {}

         }

      }

   }



   .record {

      margin-top: 20rpx;

      width: 690rpx;

      background: #FFFFFF;

      border-radius: 16rpx;

      padding: 30rpx;



      .title {

         font-weight: 500;

         font-size: 32rpx;

         color: #222222;

         margin-bottom: 24rpx;

      }



      .table_scroll {

         width: 630rpx;

         overflow-x: auto;



         .table {

            width: 960rpx;

            color: #222222;



            .line {

               min-height: 68rpx;

               align-items: center;

               display: flex;

               border-bottom: 1px solid #E5E5E5;

               padding: 0 20rpx;



               .ite {

                  width: 280rpx;

                  flex-shrink: 0;

                  overflow: hidden;

               }



               .con {

                  width: 160rpx;

               }



               .time {

                  width: 195rpx;

               }



               .num {

                  width: 100rpx;

               }



            }



            .head {

               font-weight: 500;

               background: #F4F7FC;

               border: none;

            }



         }

      }

   }



   .flow_wrap {

      background: #FFFFFF;

      border-radius: 16rpx;

      padding: 30rpx;

      margin-top: 20rpx;

      margin-bottom: 20rpx;

      .title {

         font-weight: 500;

         font-size: 32rpx;

         color: #222222;

         margin-bottom: 24rpx;

      }



      .list {

         .item {

            position: relative;

            padding-bottom: 24rpx;
            &:nth-last-child(1){
               padding-bottom: 0;
            }

            .dian {

               border: 1rpx dashed #CCCCCC;

               height: calc(100% - 48rpx);

               width: 1rpx;

               position: absolute;

               top: 48rpx;

               left: 22rpx;

            }



            .top1 {

               display: flex;

               .left_icon {

                  width: 78rpx;



                  image {

                     width: 48rpx;

                     height: 48rpx;

                  }

               }



               .content {

                  flex: 1;

                  display: flex;

                  justify-content: space-between;

                  // align-items: center;

                  margin-bottom: 12rpx;



                  .name {

                     font-weight: 600;

                     font-size: 32rpx;

                     overflow: hidden;

                     flex: 1;

                  }



                  .status {

                     display: flex;

                     // align-items: center;

                     font-size: 26rpx;



                     .btn {

                        color: #999999;

                        border-radius: 30rpx;

                        border: 1rpx solid #999999;

                        width: 116rpx;

                        height: 60rpx;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                     }



                     .pri {

                        color: #fff;

                        background-color: $uni-color-primary;
                        border: 1rpx solid $uni-color-primary;

                     }



                     image {

                        width: 40rpx;

                        height: 40rpx;

                        margin-right: 10rpx;

                     }

                  }

               }



               .time {

                  font-size: 24rpx;

                  color: #999999;

               }

            }

         }

      }

   }



   .start_btn {

      width: 690rpx;

      height: 88rpx;

      background: $uni-color-primary;

      border-radius: 44rpx;

      font-size: 32rpx;

      color: #FFFFFF;

      display: flex;

      align-items: center;

      justify-content: center;

      margin: 30rpx auto;

   }

</style>