<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>
|
