451 lines
15 KiB
Vue
451 lines
15 KiB
Vue
<!-- 已取件、已签收、已取消详情页 -->
|
||
<template>
|
||
<!-- 自定义头部 -->
|
||
<UniNav :title="title" @goBack="goBack"></UniNav>
|
||
<!-- end -->
|
||
<view class="detailBox">
|
||
<!-- 运单号 -->
|
||
<view class="boxBg">
|
||
<view class="tit">
|
||
<text>
|
||
<!-- 当状态是去派送4\签收5的时候显示运单号 -->
|
||
<text v-if="taskStatus === 4 || taskStatus === 5">运单号：{{ detailsData.transportOrderId }}</text>
|
||
<text v-else>订单号：SD{{ detailsData.orderId }}</text>
|
||
<!-- end -->
|
||
<icon @click="handleCopy" class="copy"></icon>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
<!-- 取件信息 -->
|
||
<Address :detailsData="detailsData" class="pickupBox"></Address>
|
||
<!-- end -->
|
||
<!-- 物品信息 -->
|
||
<view class="boxBg">
|
||
<view class="wayCon">
|
||
<view class="item">
|
||
物品名称
|
||
<text>{{ detailsData.goodsType }}</text>
|
||
</view>
|
||
<view class="item">
|
||
物品重量
|
||
<text>{{ detailsData.weight }}kg</text>
|
||
</view>
|
||
<view class="item">
|
||
物品体积
|
||
<text>{{ detailsData.volume }}m³</text>
|
||
</view>
|
||
<view class="item">
|
||
总计金额
|
||
<text>{{ detailsData.freight }}元</text>
|
||
</view>
|
||
</view>
|
||
<view class="wayCon remark">
|
||
<view class="item">备注</view>
|
||
<view class="item">
|
||
<text>{{ detailsData.remark ? detailsData.remark : '暂无' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="wayCon">
|
||
<view class="item">
|
||
付款方式
|
||
<text>{{ detailsData.paymentMethod === 1 ? '寄付' : '到付' }}</text>
|
||
</view>
|
||
<!-- 当状态是已签收5,显示签收人 -->
|
||
<view class="item" v-if="taskStatus === 5">
|
||
签收人
|
||
<text>{{ detailsData.paymentMethod === 1 ? '本人' : '代收' }}</text>
|
||
</view>
|
||
<!-- end -->
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
<!-- 当状态是去派件4的时候显示签收人选择、拒收、签收按钮 -->
|
||
<view class="boxBg" v-if="detailsData.taskType === 2 && detailsData.status === 1">
|
||
<view class="tit">
|
||
<text>签收人</text>
|
||
<view class="goodsSelect" v-if="(isSign && detailsData.paymentMethod == 1) || (isPickUp && detailsData.paymentMethod === 2)">
|
||
<text class="textInfo">{{ detailsData.signRecipient === 1 ? '本人' : '代收' }}</text>
|
||
</view>
|
||
<view class="goodsSelect" @click="handleSignOpen" v-else>
|
||
<text class="textInfo">{{ detailsData.signRecipient === 1 ? '本人' : '代收' }}</text>
|
||
<icon class="nextIcon"></icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- {{detailsData.status}}--{{users.isNew}}--{{taskStatus}} -->
|
||
<!-- <view
|
||
class="btnBox subBtnBox"
|
||
v-if="(detailsData.status===1&&!users.isNew)||(taskStatus === 4&&!users.isNew) || (taskStatus === 0 && users.taskType === 2) || (users.detailType === 2 && taskStatus === 4) || (detailsData.status===1&&users.detailType === 2 && taskStatus === 6)"
|
||
>
|
||
<button v-if="(!isSign && !isPickUp) || (isSign && !isPickUp && detailsData.paymentMethod === 2)" class="btn-default uni-sub-btn" @click="handleRejection(detailsData.id)">
|
||
拒收
|
||
</button>
|
||
<button v-if="!isPickUp" class="btn-default" @click="handleSign(detailsData.id)">签收</button>
|
||
<button v-if="isPickUp && detailsData.paymentMethod === 2" class="btn-default uni-mini" @click="handleReceipt">去收款</button>
|
||
<button v-if="isSign && detailsData.paymentMethod == 1" class="btn-default uni-mini btn-forbid">已签收</button>
|
||
</view> -->
|
||
<!-- end -->
|
||
<!-- 当状态是已取件2或者已签收5显示跟踪按钮 ||(taskStatus === 6&&users.taskType===2)-->
|
||
<!-- <view class="btnBox" v-if="(detailsData.status===2&&users.isNew)||(taskStatus === 2&&users.isNew) || taskStatus === 5 || (users.detailType === 2 && taskStatus === 6 &&users.isNew) || (users.detailType === 1 && taskStatus === 6)">
|
||
<button class="btn-default uni-mini" @click="handleOrder">订单跟踪</button>
|
||
</view> -->
|
||
<!-- end -->
|
||
<!-- 付款方式paymentMethod：1寄付，2到付 -->
|
||
<!-- 付款状态paymentStatus：1未付，2已付 -->
|
||
<!-- 签收状态signStatus：1为已签收，2为拒收 -->
|
||
<!-- 任务类型taskType：1为取件任务，2为派件任务 -->
|
||
<!-- 任务状态status：1未取派，2完成，3取消 未派件的情况下显示的按钮 -->
|
||
<!-- 派件 -->
|
||
<view v-if="detailsData.taskType === 2">
|
||
<!-- 未派件未签收-->
|
||
<view class="btnBox subBtnBox" v-if="detailsData.status === 1">
|
||
<button class="btn-default uni-sub-btn" v-if="detailsData.signStatus !== 1" @click="handleRejection(detailsData.id)">拒收</button>
|
||
<button class="btn-default" v-if="detailsData.signStatus !== 1" @click="handleSign(detailsData.id)">签收</button>
|
||
</view>
|
||
<!-- end -->
|
||
|
||
<!-- 已经派件未付款或者已经签收 -->
|
||
|
||
<view class="btnBox subBtnBox" v-else>
|
||
<!-- 签收后未付款，isPickUp代表未收款进入收款页，返回时候的显示去收款按钮 -->
|
||
<!-- 已签收到的订单付但是未付款 应该显示去收款-->
|
||
<button
|
||
v-if="isPickUp && detailsData.paymentStatus === 1 && detailsData.paymentMethod === 2 && detailsData.signStatus === 1"
|
||
class="btn-default uni-mini"
|
||
@click="handleReceipt"
|
||
>
|
||
去收款
|
||
</button>
|
||
<!-- 签收状态是已签收，显示已签收按钮 -->
|
||
<!-- isSign代表已经点击了签收，进入到了派件成功页，返回的时候要显示已经签收 -->
|
||
<button v-if="isSign && detailsData.signStatus === 1" class="btn-default uni-mini btn-forbid">已签收</button>
|
||
<!-- 当状态是已签收显示跟踪按钮-->
|
||
<!-- 已派件 -->
|
||
|
||
<view v-if="detailsData.status === 2" class="btnBox">
|
||
<!-- 未付款、从消息签收提醒 -->
|
||
<button
|
||
v-if="
|
||
(!isPickUp && !isSign && detailsData.paymentMethod === 1) ||
|
||
users.isNew ||
|
||
(!isPickUp && !isSign && detailsData.paymentMethod === 2 && detailsData.paymentStatus === 1) ||
|
||
(!isPickUp && !isSign && detailsData.paymentMethod === 2 && detailsData.paymentStatus === 2 && detailsData.signStatus == 1)
|
||
"
|
||
class="btn-default uni-mini"
|
||
@click="handleOrder"
|
||
>
|
||
订单跟踪
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<!-- end -->
|
||
<!-- end -->
|
||
</view>
|
||
|
||
<!-- 取件 -->
|
||
<view v-else>
|
||
<!-- 当状态是已取件显示跟踪按钮-->
|
||
|
||
<view class="btnBox" v-if="detailsData.status === 2"><button class="btn-default uni-mini" @click="handleOrder">订单跟踪</button></view>
|
||
<!-- end -->
|
||
</view>
|
||
<!-- 物品名称、付款选择、备注弹层 -->
|
||
<Uppop ref="sign" @getSignType="getSignType" :type="type"></Uppop>
|
||
<!-- end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { useStore } from 'vuex';
|
||
// 接口
|
||
import { getDetail, rejection, tasksSign, PositionUpload } from '@/pages/api/index.js';
|
||
import { positionUploadHandle } from '@/utils/index.js';
|
||
// 导入组件
|
||
// 导航组件
|
||
import UniNav from '@/components/uni-nav/index.vue';
|
||
// 地址
|
||
import Address from './components/address.vue';
|
||
// 付款方式先择、物品名称弹层
|
||
import Uppop from './components/uppop.vue';
|
||
// ------定义变量------
|
||
const store = useStore(); //vuex获取、储存数据
|
||
const users = store.state.user; //vuex获取、储存数据
|
||
const taskStatus = users.taskStatus; //获取列表页传过来的取件类型 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
|
||
const emit = defineEmits(''); //子组件向父组件事件传递
|
||
const sign = ref(); // 定义ref 获取子组件方法或者值
|
||
const taskId = users.taskId;
|
||
const title = users.taskStatus === 4 || (taskStatus === 0 && users.taskType === 2) ? '去派件' : '运单详情'; //nav标题
|
||
let detailsData = ref({}); //详情数据
|
||
let type = ref(0); //物品名称、付款方式、签收人公用一个弹层，根据不同type值来做判断 物品:1,付款方式:2,备注:3,签收人:4
|
||
|
||
let isPickUp = ref(false); //是否去签收
|
||
let isCollect = ref(false); //到付的情况下，是否触发去取件后到，显示按钮为已取件
|
||
let isSign = ref(false); //是否已签收
|
||
const stopClick = ref(false); //防止连续提交
|
||
// ------生命周期------
|
||
onMounted(() => {
|
||
getDetails(taskId);
|
||
if (users.isPickUp) {
|
||
isPickUp.value = true;
|
||
} else {
|
||
isPickUp.value = false;
|
||
}
|
||
//
|
||
if (users.isSign) {
|
||
isSign.value = true;
|
||
} else {
|
||
isSign.value = false;
|
||
}
|
||
});
|
||
// ------定义方法------
|
||
// 获取详情
|
||
const getDetails = async id => {
|
||
await getDetail(id).then(res => {
|
||
detailsData.value = res.data;
|
||
// 设置当前是到付还是寄付
|
||
store.commit('user/setPaymentMethod', detailsData.value.paymentMethod);
|
||
store.commit('user/setDetailsData', res.data);
|
||
});
|
||
};
|
||
// 拒收
|
||
const handleRejection = async id => {
|
||
if (stopClick.value) {
|
||
return;
|
||
}
|
||
stopClick.value = true;
|
||
// 网络慢的时候添加按钮loading
|
||
let times =
|
||
setTimeout(()=>{
|
||
uni.showLoading({
|
||
title: 'loading',
|
||
});
|
||
},500)
|
||
await rejection(id)
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
// 拒收之后上报位置
|
||
positionUploadHandle(true);
|
||
// 操作成功后清除loading
|
||
setTimeout(function () {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
clearTimeout(times)
|
||
let timeId = setTimeout(() => {
|
||
// 如果是从全部派送进入到详情，拒收后要跳转到全部取派的 全部派件tab值为1
|
||
if (taskStatus === 6 && users.detailType === 2) {
|
||
store.commit('user/setTabIndex', 1);
|
||
uni.redirectTo({
|
||
url: '/pages/history/index'
|
||
});
|
||
} else {
|
||
// 如果是派件列表tab是0
|
||
store.commit('user/setTabIndex', 0);
|
||
uni.redirectTo({
|
||
url: '/pages/delivery/index'
|
||
});
|
||
}
|
||
}, 1000);
|
||
uni.showToast({
|
||
title: '用户拒收',
|
||
icon: 'none',
|
||
duration: '1000'
|
||
});
|
||
}
|
||
stopClick.value = false;
|
||
})
|
||
.catch(err => {
|
||
uni.showToast({
|
||
title: err.msg,
|
||
icon: 'none',
|
||
duration: '1000'
|
||
});
|
||
});
|
||
};
|
||
// 签收
|
||
const handleSign = async id => {
|
||
if (stopClick.value) {
|
||
return;
|
||
}
|
||
stopClick.value = true;
|
||
// 网络慢的时候添加按钮loading
|
||
let times =
|
||
setTimeout(()=>{
|
||
uni.showLoading({
|
||
title: 'loading',
|
||
});
|
||
},500)
|
||
const params = {
|
||
id: id,
|
||
signRecipient: detailsData.value.signRecipient
|
||
};
|
||
// 跳转到签收成功页
|
||
await tasksSign(params).then(res => {
|
||
if (res.code === 200) {
|
||
// 签收之后上报位置
|
||
positionUploadHandle(true);
|
||
// 操作成功后清除loading
|
||
setTimeout(function () {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
clearTimeout(times)
|
||
const type = detailsData.value.paymentMethod; //获取付款类型，根据付款类型来判断是否要进入付款页面
|
||
|
||
// 跳转到签收成功页
|
||
uni.redirectTo({
|
||
url: '/pages/pay/index?type=' + type
|
||
});
|
||
store.commit('user/setIsPickUp', true);
|
||
store.commit('user/setIsDelivery', true); //因为取件和派件用的是一个公用页面，所以用isDelivery来判断是不是从派件进到签收成功页面的
|
||
}
|
||
stopClick.value = false;
|
||
});
|
||
};
|
||
// 复制订单号
|
||
const handleCopy = () => {
|
||
uni.setClipboardData({
|
||
data: detailsData.value.orderId, // 要保存的内容
|
||
success: function() {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 获取签收人名称，获取子组件传的值
|
||
const getSignType = val => {
|
||
detailsData.value.signRecipient = val;
|
||
};
|
||
// 签收人
|
||
const handleSignOpen = () => {
|
||
type.value = 4;
|
||
sign.value.dialogOpen();
|
||
};
|
||
// 订单追踪
|
||
const handleOrder = () => {
|
||
uni.redirectTo({
|
||
url: '/pages/details/orderMap'
|
||
});
|
||
};
|
||
// 返回上一页
|
||
const goBack = () => {
|
||
store.commit('user/setIsPickUp', false);
|
||
store.commit('user/setIsSign', false);
|
||
store.commit('user/setIsDelivery', false);
|
||
// 根据不同的状态跳转到不同的页面
|
||
// 待取件、已取件、已取消
|
||
if (taskStatus === 1 || taskStatus === 2 || taskStatus === 3) {
|
||
if (taskStatus === 1) {
|
||
// 待取件
|
||
store.commit('user/setTabIndex', 0);
|
||
} else if (taskStatus === 2) {
|
||
// 已取件
|
||
store.commit('user/setTabIndex', 1);
|
||
} else {
|
||
// 已取消
|
||
store.commit('user/setTabIndex', 2);
|
||
}
|
||
// 如果是从搜索列表进来的，返回的时候要返回到搜索列表
|
||
if (users.isSearch) {
|
||
store.commit('user/setIsSearch', false);
|
||
uni.redirectTo({
|
||
url: '/pages/search/index'
|
||
});
|
||
} else {
|
||
// 如果是从待取件、已取件、已取消列表进来的，返回的时候要返回相对应的tab页
|
||
uni.redirectTo({
|
||
url: '/pages/pickup/index'
|
||
});
|
||
}
|
||
} else if ((taskStatus === 5 && users.newType !== 302 && !users.isNew) || (taskStatus === 4 && users.detailType !== 2 && users.newType !== 304)) {
|
||
if (taskStatus === 4) {
|
||
store.commit('user/setTabIndex', 0);
|
||
} else {
|
||
store.commit('user/setTabIndex', 1);
|
||
}
|
||
if (users.isSearch) {
|
||
store.commit('user/setIsSearch', false);
|
||
uni.redirectTo({
|
||
url: '/pages/search/index'
|
||
});
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/delivery/index'
|
||
});
|
||
}
|
||
} else if (
|
||
((taskStatus === 6 || taskStatus === 4) && users.detailType === 2) ||
|
||
(users.detailType === 1 && users.newType !== 302) ||
|
||
(taskStatus === 6 && users.detailType === 1)
|
||
) {
|
||
// 从历史记录派件进入到详情，返回的时候返回历史记录
|
||
if (taskStatus === 6 && users.detailType === 1) {
|
||
store.commit('user/setTabIndex', 0);
|
||
}
|
||
if (taskStatus === 6 && users.detailType === 2) {
|
||
store.commit('user/setTabIndex', 1);
|
||
}
|
||
uni.redirectTo({
|
||
url: '/pages/history/index'
|
||
});
|
||
// 从派件列表进入详情页
|
||
if (taskStatus === 4 && users.detailType === 2) {
|
||
store.commit('user/setTabIndex', 1);
|
||
if (users.isSearch) {
|
||
store.commit('user/setIsSearch', false);
|
||
uni.redirectTo({
|
||
url: '/pages/search/index'
|
||
});
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/history/index'
|
||
});
|
||
}
|
||
}
|
||
if (taskStatus === 4 && users.detailType === 1) {
|
||
store.commit('user/setTabIndex', 0);
|
||
uni.redirectTo({
|
||
url: '/pages/delivery/index'
|
||
});
|
||
}
|
||
} else if (users.newType === 301) {
|
||
// 跳转到消息寄件相关
|
||
uni.redirectTo({
|
||
url: '/pages/news/system?title=取件相关&type=301'
|
||
});
|
||
} else if (users.newType === 302) {
|
||
// 跳转到消息寄件相关
|
||
uni.redirectTo({
|
||
url: '/pages/news/system?title=签收提醒&type=302'
|
||
});
|
||
} else if (users.newType === 303) {
|
||
// 跳转到消息快件取消
|
||
uni.redirectTo({
|
||
url: '/pages/news/system?title=快件取消&type=303'
|
||
});
|
||
} else if (users.newType === 304) {
|
||
// 跳转到消息派件相关
|
||
uni.redirectTo({
|
||
url: '/pages/news/system?title=派件相关&type=304'
|
||
});
|
||
} else {
|
||
store.commit('user/setTabIndex', 0);
|
||
uni.redirectTo({
|
||
url: '/pages/delivery/index'
|
||
});
|
||
}
|
||
store.commit('user/setIsNew', false);
|
||
};
|
||
// 去收款
|
||
const handleReceipt = () => {
|
||
store.commit('user/setPayData', {});
|
||
uni.redirectTo({
|
||
url: '/pages/pay/scanPay'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style src="./index.scss" lang="scss" scoped></style>
|