379 lines
11 KiB
Vue
379 lines
11 KiB
Vue
<!-- 在途 - 详情 -->
|
||
<template>
|
||
<!-- 详情 -->
|
||
<view class="details">
|
||
<DetailsNav title="任务详情"></DetailsNav>
|
||
<!-- 取件状态列表 -->
|
||
<view class="container">
|
||
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
|
||
<scroll-view scroll-y="true" class="swiperH">
|
||
<view class="cont" v-if="Object.keys(itemData).length > 0">
|
||
<!-- 通用卡片组件 - 在途 - 带开关 -->
|
||
<CardCont title="基本信息" :open="true">
|
||
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
|
||
</CardCont>
|
||
<!-- 司机信息 -->
|
||
<CardCont title="车辆司机信息">
|
||
<view class="carInfo">
|
||
<view class="line">
|
||
<text class="tit">车牌号</text>
|
||
<text class="ritEl">{{ itemData.licensePlate }}</text>
|
||
</view>
|
||
<view class="line">
|
||
<text class="tit">司机姓名</text>
|
||
<text class="ritEl">{{ itemData.driverName }}</text>
|
||
</view>
|
||
</view>
|
||
</CardCont>
|
||
<CardCont title="运输路线">
|
||
<RouteCont :itemData="itemData"></RouteCont>
|
||
</CardCont>
|
||
<!-- 物品信息 -->
|
||
<CardCont title="物品信息" :label="`共计: ${amount}单`">
|
||
<OrderCont
|
||
:itemData="orders"
|
||
@searchHandle="searchHandle"
|
||
></OrderCont>
|
||
</CardCont>
|
||
<!-- 异常信息 -->
|
||
<CardCont title="异常信息">
|
||
<view v-for="(item, index) in itemData.exception" :key="index">
|
||
<view class="delay">
|
||
<view class="info">
|
||
<view class="line">
|
||
<text>上报时间 </text
|
||
><text class="desc"> {{ item.exceptionTime }} </text>
|
||
</view>
|
||
<view class="line">
|
||
<text>异常类型 </text
|
||
><text class="desc"> {{ item.exceptionType }} </text>
|
||
</view>
|
||
<view class="line">
|
||
<text>继续运输 </text
|
||
><text class="desc"> {{ item.processResults }} </text>
|
||
</view>
|
||
</view>
|
||
<image
|
||
@click="ExceptionHandle('?id=' + item.exceptionId)"
|
||
class="goInfoIcon"
|
||
src="../../static/sj_open_rit.png"
|
||
mode=""
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</CardCont>
|
||
<!-- 交货信息 -->
|
||
<CardCont title="交货信息">
|
||
<view class="upPicCont">
|
||
<view class="title">请拍照上传回单凭证</view>
|
||
<uni-file-picker
|
||
v-model="cargoPickUpPicture"
|
||
fileMediatype="image"
|
||
mode="grid"
|
||
limit="3"
|
||
@select="selectA"
|
||
/>
|
||
</view>
|
||
<view class="upPicCont">
|
||
<view class="title">请拍照上传货品照片</view>
|
||
<uni-file-picker
|
||
v-model="cargoPicture"
|
||
fileMediatype="image"
|
||
mode="grid"
|
||
limit="3"
|
||
@select="selectB"
|
||
/>
|
||
</view>
|
||
</CardCont>
|
||
</view>
|
||
<!-- 无数据显示 -->
|
||
<view v-if="Object.keys(itemData).length === 0">
|
||
<EmptyPage emptyInfo="暂无数据!" />
|
||
</view>
|
||
<!-- end -->
|
||
</scroll-view>
|
||
</view>
|
||
<!-- end -->
|
||
</view>
|
||
<!-- footer -->
|
||
<view class="footCont">
|
||
<view class="footButCan">
|
||
<text class="buttonCancel" @click="ExceptionHandle()">上报异常</text>
|
||
</view>
|
||
<view class="footBut">
|
||
<text v-show="isTake" class="button" @click="takeGoods()">交付</text>
|
||
<text v-show="!isTake" class="buttonDis1">交付</text>
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
</template>
|
||
<script>
|
||
export default {
|
||
mounted() {
|
||
// #ifdef APP-NVUE
|
||
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
|
||
// #endif
|
||
// #ifndef APP-NVUE
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
// #endif
|
||
eventChannel.emit('acceptDataFromOpenedPage', {
|
||
data: 'data from test page',
|
||
});
|
||
eventChannel.emit('someEvent', {
|
||
data: 'data from test page for someEvent',
|
||
});
|
||
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
|
||
eventChannel.on('acceptDataFromOpenerPage');
|
||
},
|
||
};
|
||
</script>
|
||
<script setup>
|
||
import { ref, reactive, onMounted, watchEffect } from 'vue';
|
||
import { useStore } from 'vuex';
|
||
import { positionUploadHandle } from '@/utils/index.js';
|
||
// 导入接口
|
||
import {
|
||
GetTaskDetails,
|
||
GetTaskDetailsOrders,
|
||
Deliver,
|
||
} from '@/pages/api/index.js';
|
||
// 导入组件
|
||
import DetailsNav from '@/components/DetailsNav/index.vue';
|
||
import EmptyPage from '@/components/EmptyPage/index.vue';
|
||
import DetailsBaseInfo from './components/DetailsBaseInfo.vue';
|
||
import OrderCont from './components/OrderCont.vue';
|
||
import RouteCont from './components/RouteCont.vue';
|
||
// 接口调用
|
||
import { upload } from '@/pages/api/index.js';
|
||
// 主体部分
|
||
import CardCont from '@/components/CardCont/index.vue';
|
||
|
||
// ------定义变量------
|
||
const store = useStore(); //vuex获取储存数据
|
||
const itemData = ref([]);
|
||
const orders = ref([]); // 货物信息列表
|
||
const amount = ref(0); // 货物信息总数
|
||
|
||
const id = ref(''); // 任务Id
|
||
const cargoPickUpPicture = ref([]); // 提货凭证
|
||
const cargoPicture = ref([]); // 货物照片
|
||
const isTake = ref(false);
|
||
|
||
// ------生命周期------
|
||
onMounted(() => {
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1].$page.options;
|
||
id.value = currentPage.id;
|
||
getDetailsInfo();
|
||
getOrders();
|
||
});
|
||
// 监听是否可以提货
|
||
watchEffect(
|
||
[
|
||
cargoPickUpPicture,
|
||
() => {
|
||
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
|
||
},
|
||
],
|
||
[
|
||
cargoPicture,
|
||
() => {
|
||
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
|
||
},
|
||
]
|
||
);
|
||
// ------定义方法------
|
||
// 获取任务详情的数据
|
||
const getDetailsInfo = async () => {
|
||
// 获取任务详情的数据
|
||
await GetTaskDetails(id.value)
|
||
.then((res) => {
|
||
const { data } = res;
|
||
if (res.code === 200) {
|
||
itemData.value = data;
|
||
getOrders(data.transportTaskId);
|
||
} else {
|
||
return uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
};
|
||
// 获取物品订单信息
|
||
const getOrders = async (orderId, transportOrderId = '') => {
|
||
const params = {
|
||
transportOrderId,
|
||
taskId: orderId,
|
||
page: 1,
|
||
pageSize: 100,
|
||
};
|
||
await GetTaskDetailsOrders(params)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
amount.value = res.data.counts ? res.data.counts : 0;
|
||
orders.value = res.data.items;
|
||
} else {
|
||
return uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
};
|
||
// 物品信息搜索
|
||
function searchHandle(transportOrderId) {
|
||
getOrders(itemData.value.transportTaskId, transportOrderId);
|
||
}
|
||
// 上报异常 、异常详情
|
||
function ExceptionHandle(src) {
|
||
uni.showToast({
|
||
title: '上报异常暂时接口还在实现中！',
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
return false;
|
||
const url = src ? `/pages/index/exception${src}` : '/pages/index/exception';
|
||
uni.navigateTo({ url });
|
||
}
|
||
|
||
// 交付
|
||
async function takeGoods() {
|
||
const cargoPickUpPictureStr = cargoPickUpPicture.value
|
||
.map((n) => n.path)
|
||
.join();
|
||
const cargoPictureStr = cargoPicture.value.map((n) => n.path).join();
|
||
const params = {
|
||
id: id.value,
|
||
transportCertificate: cargoPickUpPictureStr,
|
||
deliverPicture: cargoPictureStr,
|
||
};
|
||
// 网络慢的时候添加按钮loading
|
||
let times = setTimeout(() => {
|
||
uni.showLoading({
|
||
title: 'loading',
|
||
mask:true
|
||
});
|
||
}, 500);
|
||
await Deliver(params)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
// 交付之后 上报位置
|
||
positionUploadHandle(true);
|
||
// 操作成功后清除loading
|
||
setTimeout(function () {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
clearTimeout(times);
|
||
uni.showToast({
|
||
title: '提货完成',
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
uni.redirectTo({
|
||
url: '/pages/index/index',
|
||
});
|
||
} else {
|
||
return uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
}
|
||
// 图片上传
|
||
const imageValue = ref([]);
|
||
const upImg = ref(null);
|
||
// 文件上传
|
||
async function uploadHande(e, type) {
|
||
await upload(e)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
if (res.data) {
|
||
isTake.value = true;
|
||
const name = res.data.split('/')[res.data.split('/').length - 1]; // .at(-1) 新语法APP不支持
|
||
let data = {
|
||
url: res.data,
|
||
name,
|
||
extName: name.split('.')[name.split('.').length - 1],
|
||
};
|
||
if (type == 'cargoPickUpPicture') {
|
||
cargoPickUpPicture.value = [...cargoPickUpPicture.value, data];
|
||
} else {
|
||
cargoPicture.value = [...cargoPicture.value, data];
|
||
}
|
||
}
|
||
} else {
|
||
return uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: '图片上传失败！请联系管理员',
|
||
duration: 1000,
|
||
icon: 'none',
|
||
});
|
||
});
|
||
}
|
||
// 文件选择并上传 - 回单凭证上传
|
||
async function selectA(e) {
|
||
cargoPickUpPicture.value = [];
|
||
const tempFiles = e.tempFiles[0];
|
||
if (
|
||
tempFiles.size < 1024 * 5 * 1024 &&
|
||
(tempFiles.extname == 'png' ||
|
||
tempFiles.extname == 'jpg' ||
|
||
tempFiles.extname == 'jpeg' ||
|
||
tempFiles.extname == 'gif')
|
||
) {
|
||
uploadHande(e, 'cargoPickUpPicture');
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
|
||
duration: 2000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
}
|
||
// 文件选择并上传 - 货品照片上传
|
||
async function selectB(e) {
|
||
cargoPicture.value = [];
|
||
const tempFiles = e.tempFiles[0];
|
||
if (
|
||
tempFiles.size < 1024 * 5 * 1024 &&
|
||
(tempFiles.extname == 'png' ||
|
||
tempFiles.extname == 'jpg' ||
|
||
tempFiles.extname == 'jpeg' ||
|
||
tempFiles.extname == 'gif')
|
||
) {
|
||
uploadHande(e, 'cargoPicture');
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
|
||
duration: 2000,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
<style src="./index.scss" lang="scss"></style>
|
||
<style lang="scss" scoped>
|
||
.details {
|
||
height: calc(100vh - 120rpx);
|
||
.swiperH {
|
||
height: calc(100vh - 240rpx);
|
||
padding-bottom: 26rpx;
|
||
}
|
||
}
|
||
</style>
|