339 lines
9.1 KiB
Vue
339 lines
9.1 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" type="route"></RouteCont>
|
||
</CardCont>
|
||
<CardCont title="物品信息" :label="`共计: ${amount}单`">
|
||
<OrderCont
|
||
:itemData="orders"
|
||
@searchHandle="searchHandle"
|
||
></OrderCont>
|
||
</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="delayedHandle()">延迟提货</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 setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
onUpdated,
|
||
watch,
|
||
watchEffect,
|
||
computed,
|
||
inject,
|
||
} from 'vue';
|
||
import { useStore } from 'vuex';
|
||
import { positionUploadHandle } from '@/utils/index.js';
|
||
// 导入接口
|
||
import {
|
||
GetTaskDetails,
|
||
GetTaskDetailsOrders,
|
||
TakeDelivery,
|
||
} 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 CardCont from '@/components/CardCont/index.vue';
|
||
// 接口调用
|
||
import { upload } from '@/pages/api/index.js';
|
||
|
||
// ------定义变量------
|
||
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(true); // 是否可提货
|
||
const taskId = ref('');
|
||
|
||
// ------生命周期------
|
||
onMounted(() => {
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1].$page.options;
|
||
id.value = currentPage.id;
|
||
getDetailsInfo();
|
||
});
|
||
|
||
// 监听是否可以提货
|
||
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 delayedHandle() {
|
||
const data = itemData.value;
|
||
uni.navigateTo({
|
||
url: `/pages/index/delayed?id=${data.id}&time=${data.planDepartureTime}`,
|
||
});
|
||
}
|
||
|
||
// 提货
|
||
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,
|
||
cargoPickUpPicture: cargoPickUpPictureStr,
|
||
cargoPicture: cargoPictureStr,
|
||
};
|
||
// 网络慢的时候添加按钮loading
|
||
let times = setTimeout(() => {
|
||
uni.showLoading({
|
||
title: 'loading',
|
||
mask:true
|
||
});
|
||
}, 500);
|
||
await TakeDelivery(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) => {});
|
||
}
|
||
// 文件上传
|
||
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 - 210rpx);
|
||
padding-bottom: 26rpx;
|
||
}
|
||
}
|
||
</style>
|