init
This commit is contained in:
		@@ -0,0 +1,138 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<!-- 待取件 -->
 | 
			
		||||
	<DealParcel ref="dealparcel" :tabIndex="tabIndex" :isAdmin="isAdmin" @checkbox="checkbox" @getSelected="getSelected"></DealParcel>
 | 
			
		||||
	<!-- end -->
 | 
			
		||||
	<!-- 已取件 -->
 | 
			
		||||
	<AlreadyParcel ref="already" :tabIndex="tabIndex" :isAdmin="isAdmin" @checkbox="checkbox"></AlreadyParcel>
 | 
			
		||||
	<!-- end -->
 | 
			
		||||
	<!-- 已取件 -->
 | 
			
		||||
	<CancelParcel :tabIndex="tabIndex" ref="cancel" :isAdmin="isAdmin" @checkbox="checkbox" @handleOpen="handleOpen"></CancelParcel>
 | 
			
		||||
	<!-- end -->
 | 
			
		||||
	<!-- 提示窗 -->
 | 
			
		||||
	<UniPopup ref="popup" :tipInfo="tipInfo" @handleClick="handleClick"></UniPopup>
 | 
			
		||||
	<!-- end -->
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
import { ref, onMounted } from 'vue';
 | 
			
		||||
import { useStore } from 'vuex';
 | 
			
		||||
//接口
 | 
			
		||||
import { taskDelete } from '@/pages/api/index.js';
 | 
			
		||||
// 导入组件
 | 
			
		||||
// 待取件
 | 
			
		||||
import DealParcel from './components/dealParcel.vue';
 | 
			
		||||
// 已取件
 | 
			
		||||
import AlreadyParcel from './components/alreadyParcel.vue';
 | 
			
		||||
// 已取件
 | 
			
		||||
import CancelParcel from './components/cancelParcel.vue';
 | 
			
		||||
// 弹层
 | 
			
		||||
import UniPopup from '@/components/uni-popup/index.vue';
 | 
			
		||||
 | 
			
		||||
// 获取父组件数据
 | 
			
		||||
const props = defineProps({
 | 
			
		||||
	// tab切换数据
 | 
			
		||||
	tabBars: {
 | 
			
		||||
		type: Object,
 | 
			
		||||
		default: () => ({})
 | 
			
		||||
	},
 | 
			
		||||
	tabIndex: {
 | 
			
		||||
		type: Number,
 | 
			
		||||
		default: 0
 | 
			
		||||
	},
 | 
			
		||||
	// 当前高度
 | 
			
		||||
	scrollH: {
 | 
			
		||||
		type: String,
 | 
			
		||||
		default: ''
 | 
			
		||||
	},
 | 
			
		||||
	// 是否触发管理按钮
 | 
			
		||||
	isAdmin: {
 | 
			
		||||
		type: Boolean,
 | 
			
		||||
		default: false
 | 
			
		||||
	},
 | 
			
		||||
	// 获取当前筛选的距离升序还是降序
 | 
			
		||||
	orderDistance: {
 | 
			
		||||
		type: Number,
 | 
			
		||||
		default: 0
 | 
			
		||||
	},
 | 
			
		||||
	// 获取当前筛选的时间升序还是降序
 | 
			
		||||
	orderTime: {
 | 
			
		||||
		type: Number,
 | 
			
		||||
		default: 0
 | 
			
		||||
	},
 | 
			
		||||
	// 获取当前筛选超时
 | 
			
		||||
	filterOverTime: {
 | 
			
		||||
		type: Number,
 | 
			
		||||
		default: 0
 | 
			
		||||
	}
 | 
			
		||||
});
 | 
			
		||||
// ------定义变量------
 | 
			
		||||
const emit = defineEmits(''); //子组件向父组件事件传递
 | 
			
		||||
const store = useStore(); //设置、获取储存的数据
 | 
			
		||||
const users = store.state.user;
 | 
			
		||||
let popup = ref();
 | 
			
		||||
let dealparcel = ref();
 | 
			
		||||
let already = ref();
 | 
			
		||||
let cancel = ref();
 | 
			
		||||
const tipInfo = ref('确定要删除吗?');
 | 
			
		||||
let taskId = ref('');
 | 
			
		||||
let scrollH = ref(0); //滚动高度
 | 
			
		||||
// ------生命周期------
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
	// 获取屏幕信息
 | 
			
		||||
	uni.getSystemInfo({
 | 
			
		||||
		success: res => {
 | 
			
		||||
			scrollH.value = res.windowHeight;
 | 
			
		||||
		}
 | 
			
		||||
	});
 | 
			
		||||
});
 | 
			
		||||
// ------定义方法------
 | 
			
		||||
// 获取已经选的任务
 | 
			
		||||
const getSelected = array => {
 | 
			
		||||
	emit('getSelected', array);
 | 
			
		||||
};
 | 
			
		||||
// 获取待取件列表方法
 | 
			
		||||
const dealPList = () => {
 | 
			
		||||
	dealparcel.value.getList();
 | 
			
		||||
};
 | 
			
		||||
// 获取已取件列表方法
 | 
			
		||||
const alreadList = () => {
 | 
			
		||||
	already.value.getList();
 | 
			
		||||
};
 | 
			
		||||
// 获取取消件列表方法
 | 
			
		||||
const cancelList = () => {
 | 
			
		||||
	cancel.value.getList();
 | 
			
		||||
};
 | 
			
		||||
// 确认删除
 | 
			
		||||
const handleClick = async () => {
 | 
			
		||||
	await taskDelete(taskId.value)
 | 
			
		||||
		.then(res => {
 | 
			
		||||
			if (res.code === 200) {
 | 
			
		||||
				dealparcel.value.getList();
 | 
			
		||||
				return uni.showToast({
 | 
			
		||||
					title: '删除成功!',
 | 
			
		||||
					duration: 1000,
 | 
			
		||||
					icon: 'none'
 | 
			
		||||
				});
 | 
			
		||||
			}
 | 
			
		||||
		})
 | 
			
		||||
		.catch(err => {});
 | 
			
		||||
};
 | 
			
		||||
// 选项框点击事件,参数是数据的下标
 | 
			
		||||
const checkbox = index => {
 | 
			
		||||
	emit('checkbox', index);
 | 
			
		||||
};
 | 
			
		||||
// 删除弹层id
 | 
			
		||||
const handleOpen = id => {
 | 
			
		||||
	popup.value.dialogOpen();
 | 
			
		||||
	taskId.value = id;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
//把数据、方法暴漏给父组件
 | 
			
		||||
defineExpose({
 | 
			
		||||
	dealPList,
 | 
			
		||||
	alreadList,
 | 
			
		||||
	cancelList
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style></style>
 | 
			
		||||
@@ -0,0 +1,200 @@
 | 
			
		||||
	.maxHeight{
 | 
			
		||||
		height: 1170rpx;
 | 
			
		||||
	}
 | 
			
		||||
.orderList{
 | 
			
		||||
	margin: 40rpx 28rpx 0;
 | 
			
		||||
	position: relative;
 | 
			
		||||
	margin-top: 0rpx;
 | 
			
		||||
	::v-deep .scrollView {
 | 
			
		||||
		height:1300rpx ;
 | 
			
		||||
	}
 | 
			
		||||
	//隐藏滚动条
 | 
			
		||||
	::v-deep ::-webkit-scrollbar {
 | 
			
		||||
		display: none;
 | 
			
		||||
	}
 | 
			
		||||
	.title{
 | 
			
		||||
		font-size: 30rpx;
 | 
			
		||||
		color:#333334 ;
 | 
			
		||||
		font-weight: bold;
 | 
			
		||||
		margin-bottom: 10rpx;
 | 
			
		||||
	}
 | 
			
		||||
	.see-more{
 | 
			
		||||
		font-size: 24rpx;
 | 
			
		||||
		text-align: center;
 | 
			
		||||
		margin-top: 22rpx;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		align-items: center;
 | 
			
		||||
		justify-content: center;
 | 
			
		||||
		.arrow{
 | 
			
		||||
			margin-left: 10rpx;
 | 
			
		||||
			margin-top: 4rpx;
 | 
			
		||||
			width: 12rpx;
 | 
			
		||||
			height: 18rpx;
 | 
			
		||||
			background-repeat: no-repeat;
 | 
			
		||||
			background-size: contain;
 | 
			
		||||
			background-image: url('../../../static/icon15.png');
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.empty-data{
 | 
			
		||||
		height:1200rpx ;
 | 
			
		||||
		overflow: hidden;
 | 
			
		||||
		image{
 | 
			
		||||
			width: 400rpx;
 | 
			
		||||
			height: 240rpx;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			margin: 0 auto;
 | 
			
		||||
			display: block;
 | 
			
		||||
			margin-top: 27vh;
 | 
			
		||||
		}
 | 
			
		||||
		.tips{
 | 
			
		||||
			color: #818181;
 | 
			
		||||
			font-size: 28rpx;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			margin-top: 40rpx;
 | 
			
		||||
			margin-left: 25rpx;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.notLogin{
 | 
			
		||||
		position: relative;
 | 
			
		||||
		top: 36vh;
 | 
			
		||||
		.toLogin-btn{
 | 
			
		||||
			width: 240rpx;
 | 
			
		||||
			height: 88rpx;
 | 
			
		||||
			background: #E63E32;
 | 
			
		||||
			border-radius: 44rpx;
 | 
			
		||||
			color: white;
 | 
			
		||||
			font-size: 30rpx;
 | 
			
		||||
			margin: 0 auto;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			line-height: 88rpx;
 | 
			
		||||
		}
 | 
			
		||||
		.tips{
 | 
			
		||||
			color:#6C6C6C ;
 | 
			
		||||
			font-size: 24rpx;
 | 
			
		||||
			text-align: center;
 | 
			
		||||
			margin-top: 30rpx;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.order-item{
 | 
			
		||||
		position: relative;
 | 
			
		||||
		background: #FFFFFF;
 | 
			
		||||
		border-radius: 24rpx;
 | 
			
		||||
		padding:28rpx 32rpx 20rpx;
 | 
			
		||||
		margin-top: 20rpx;
 | 
			
		||||
		.orderNumber{
 | 
			
		||||
			font-size: 20rpx;
 | 
			
		||||
			color: #878787;
 | 
			
		||||
			display: flex;
 | 
			
		||||
			align-items: center;
 | 
			
		||||
			.copy{
 | 
			
		||||
				width: 40rpx;
 | 
			
		||||
				height: 40rpx;
 | 
			
		||||
				margin-left: 10rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		.area-to-area{
 | 
			
		||||
			display: flex;
 | 
			
		||||
			align-items: center;
 | 
			
		||||
			justify-content: space-between;
 | 
			
		||||
			margin-top:40rpx ;
 | 
			
		||||
			margin-left: 42rpx;
 | 
			
		||||
			margin-right: 42rpx;
 | 
			
		||||
			margin-bottom: 20rpx;
 | 
			
		||||
			.sendBox,.getBox{
 | 
			
		||||
				text-align: center;
 | 
			
		||||
				.sendArea,.getArea{
 | 
			
		||||
					font-size: 30rpx;
 | 
			
		||||
					font-weight: bold;
 | 
			
		||||
				}
 | 
			
		||||
				.sendName,.getName{
 | 
			
		||||
					font-size: 24rpx;
 | 
			
		||||
					color: #878787;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			.order-status{
 | 
			
		||||
				.status{
 | 
			
		||||
					font-size: 24rpx;
 | 
			
		||||
					color: #878787;
 | 
			
		||||
					padding-left: 20rpx;
 | 
			
		||||
				}
 | 
			
		||||
				.arrow{
 | 
			
		||||
					width: 160rpx;
 | 
			
		||||
					height: 20rpx;
 | 
			
		||||
					background-repeat: no-repeat;
 | 
			
		||||
					background-size: contain;
 | 
			
		||||
				}
 | 
			
		||||
				.green-arrow{
 | 
			
		||||
					background-image: url(data:image/png;base64,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);
 | 
			
		||||
				}
 | 
			
		||||
				.red-arrow{
 | 
			
		||||
					background-image: url(data:image/png;base64,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);
 | 
			
		||||
				}
 | 
			
		||||
				.gray-arrow{
 | 
			
		||||
					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAAAaCAYAAAA9gCd5AAAAAXNSR0IArs4c6QAABbVJREFUeF7tmk1oXFUUx//nvjeZ1EVFuxErIiIuREFciAgig2A3TaatWrXtTD+giCsXrgQhMwvdKe5URJI23bSRSvqhC9F2I+LGlYgLBatNM0mar8l8vDfvvXvkvnk3TpJJ5s17AyaZdyEQmHvPved/f3PuPecOIWmJAjEUYGaamJgQR48e9WKY2TCUemkssdVfCigolcdExIVCQRQKBdkrBRIwe6Vkn9m5dOmSoaLkhS++eUga7uP5M8M/KFAVpL2QIgGzFyr2mQ0dHc+du7yPPDEBICMMHDlx8tDXNwo3zEwh48aVJAEzroJ9Nl6DNzp6/QED3iRYPhtIUCFBb+ROZa/3As4EzD4DK467+vgeH598DA5PMPA0ABUdRfC3JITx6olTQ9/rvlHnS8CMqlyfjdOgnT9/7Um43iTAjwZQmoEUKvFRgN5lQw6fPHnkpzhwJmD2GWBR3NVH84XRK88x+CIzPwxAlYeMdfZ8OEnQbUjK5s4M/xIVzv8NTF1qaHUsaka33lav7OhSSJTN3A1jlK43izcNlcxcGLv6kpTeRQD7NoFSu+wDS4S/DRgHjp0e+j0KnF2BGQCgwnUvSgKqtrBqJ7Dd1Xq0EoEd35a2UwQwEoIO3a9YLGJ9HU7ZKhaLkdYUYuod0OVFUShk3PGxyWGWPA5gbwco18AJot/IRDaXy/7RbZ0ztOitxdQdoGiyxJgK6Jrk+dErObD8HMAeAPoeGcZ6M3ICvyLlvZzLvTLdTeQMBWbLUZmq17yPiPkJAA1V9A+zwjV91AgJVGtOSkKmdPRlCRcsG+odIaxNIgKz5OnpmQHHsUyQAEt2mKXTjR3TEJibWxB35xbTpM4D5RgTSXBDShm7JhfWn23Vj8EgNgB6AcBgl1BqV5R2JkA/mx6yx85mZ8JGzo4QtN7frJr3KTO/FXGRq7pbdQeOE/9plUBYWJjHUnkJ6v8oTQiB5eUKStOzkLJnL2pRlrJdx+jrVjSBgySJiH4UA8bQ8eMHF8NEzo6TMbMgIlmtOB8S8F5QIlCL7Ti2ndKW5aBhezourrcR+u6qouXC4oIPpiHUibGmhbLjQ7m0gqk7Jf/WrN7TotjZrkT1aF0q84601y3z+5GTQN+xOXg4nz9Q7RQ5t5yQmQ0i8qya946U8pM4kVJtuWW5aNjxT0YF1NLSIubn5xVMkfRXNsrLK5iamlEJU2Q7kSbvz0HN8hKJqzDSb3aCc9Nd1VDW626ePf4yqFmpSBTcwrpQl+BHSXWER+RodTIfqHIZc3OzkWFq2qjgjoJSqlDZhS9J1zgKOABSJOirP/8afh0oYmRkZE11RhtvuyXMbBKRa1Xdg8y4zGBd3e96CxWIjUYTyrhNAVWtVDA7Owt1N4/SmlCu+FBKmUTKKBrGHONn9oIwtv+Re89mMhm33bG+ATQdKZ0aP+9I9xqA+4LaVbeR0j9lHUeiXlMJfKi2GW3+9c+yLMyUSvCkuqNufQtpMxtFjJTRvgGh3O3bTupYN0H0Wf509u2OYOpEp1HlZ1y4V8F4MCjndB0pleSuJ1GvOqrqHeu4VEDZtoVSqQTXdTtB2Xa3SRAqK1VM3S4lkXJ7fB/8BJqIP86dPvyuWlLr7zlXgdNQ1mq8n6T7LQNPAai2eQ8N5ZaULGrVBqnEImRTIX5jZwI816NSaVrYDVtl4H6yskXbYEdF11qlLm5PTdPq8R1iXdxcT1JDCrmBXXbTm6gK9+/nzxz6oC2Y2igz77Us3D/owQJFSHSahthqWOmqJwYHwpCp6lGmtB1HWm1KE1yplNPl8nI6jQHYHbyX0rY9j21hif+i/D3ArVtTe0xPpMxUiptvA1s3VxC5FcuqlGu2aZqRToxOc/T75+5Ams2GTYZJ5mv5oX9an6gTwfudjm3q/2ZZeQLsNt2w3bqs9b8ISwDcrTu9w/1KwNzhG7hbl5+AuVt3dof79S+Hyb052GDwIQAAAABJRU5ErkJggg==');
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.order-detail{
 | 
			
		||||
			margin-top: 12rpx;
 | 
			
		||||
			overflow: hidden;
 | 
			
		||||
			border-bottom: 2rpx solid #F4F4F4;
 | 
			
		||||
			padding-bottom: 26rpx;
 | 
			
		||||
			.detail-item{
 | 
			
		||||
				overflow: hidden;
 | 
			
		||||
				text-overflow:ellipsis;
 | 
			
		||||
				white-space: nowrap;
 | 
			
		||||
				font-size: 24rpx;
 | 
			
		||||
				margin-top: 12rpx;
 | 
			
		||||
				uni-text,text{
 | 
			
		||||
					color: #878787;
 | 
			
		||||
					display: inline-block;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.btn-box{
 | 
			
		||||
			.btn{
 | 
			
		||||
				width: 144rpx;
 | 
			
		||||
				height: 56rpx;
 | 
			
		||||
				background: #FFFFFF;
 | 
			
		||||
				border: 2rpx solid #DDDDDD;
 | 
			
		||||
				border-radius: 28rpx;
 | 
			
		||||
				text-align: center;
 | 
			
		||||
				line-height: 56rpx;
 | 
			
		||||
				font-size: 24rpx;
 | 
			
		||||
				color:#303030 ;
 | 
			
		||||
			}
 | 
			
		||||
			.wait-pay{
 | 
			
		||||
				margin-top: 29rpx;
 | 
			
		||||
				display: flex;
 | 
			
		||||
				align-items: center;
 | 
			
		||||
				
 | 
			
		||||
				justify-content: space-between;
 | 
			
		||||
				.price{
 | 
			
		||||
					font-size: 26rpx;
 | 
			
		||||
					font-weight: bold;
 | 
			
		||||
					uni-text,text{
 | 
			
		||||
						color: #E84134;
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			.btn-list{
 | 
			
		||||
				display: flex;
 | 
			
		||||
				justify-content: flex-end;
 | 
			
		||||
				margin-top: 19rpx;
 | 
			
		||||
				.btn{
 | 
			
		||||
					margin-left: 20rpx;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.paymentStatus{
 | 
			
		||||
			position: absolute;
 | 
			
		||||
			right: 29rpx;
 | 
			
		||||
			top: 27rpx;
 | 
			
		||||
			image{
 | 
			
		||||
				width: 76rpx;
 | 
			
		||||
				height: 30rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,299 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<view class="orderList" :style="{'paddingTop':capsuleBottom +'px'}">
 | 
			
		||||
		<view v-if="!isLogin" class="notLogin">
 | 
			
		||||
			<view class="toLogin-btn" @click="toLogin">登录/注册</view>
 | 
			
		||||
			<view class="tips">登录后可查看快递信息</view>
 | 
			
		||||
		</view>
 | 
			
		||||
 | 
			
		||||
		<view v-else>
 | 
			
		||||
			<view v-if="!allOrderList.data.length && isLogin" class="empty-data">
 | 
			
		||||
				<image src="../../../static/emptyData.png"></image>
 | 
			
		||||
				<view class="tips">{{serchValue?'没有搜索到相关条件的运单':'暂无数据'}}</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<scroll-view v-else class="scrollView" scroll-y lower-threshold="30" @scrolltolower="LoadMoreCustomers">
 | 
			
		||||
				<view class="order-item" v-for="(item,index) in allOrderList.data" :key="index"
 | 
			
		||||
					@click='handleToOrderInfo(event,item.id,item.transportOrderId)'>
 | 
			
		||||
					<view class="orderNumber">
 | 
			
		||||
						{{[23000,22000,230011].includes(item.status)?'订':'运'}}单号:{{[23000,22000,230011].includes(item.status)?item.id:item.transportOrderId}}
 | 
			
		||||
						<image src="../../../static/pickUp-copy.png" class="copy"
 | 
			
		||||
							@click.stop="handleCopy([23000,22000,230011].includes(item.status)?item.id:item.transportOrderId)">
 | 
			
		||||
						</image>
 | 
			
		||||
					</view>
 | 
			
		||||
 | 
			
		||||
					<view class="area-to-area">
 | 
			
		||||
						<view class="sendBox">
 | 
			
		||||
							<view class="sendArea">{{item.senderCity.name}}</view>
 | 
			
		||||
							<view class="sendName">{{item.senderName}}</view>
 | 
			
		||||
						</view>
 | 
			
		||||
						<view class="order-status">
 | 
			
		||||
							<view class="status">
 | 
			
		||||
								{{showOrderStatus(item.status)}}
 | 
			
		||||
							</view>
 | 
			
		||||
							<view class="arrow" :class="
 | 
			
		||||
								  [[21000,23000,23001,23005,23008].includes(item.status)?'green-arrow':'',
 | 
			
		||||
							      [23009,23010].includes(item.status)?'red-arrow':'',
 | 
			
		||||
								  [230011,22000].includes(item.status)?'gray-arrow':'']
 | 
			
		||||
							"></view>
 | 
			
		||||
						</view>
 | 
			
		||||
						<view class="getBox">
 | 
			
		||||
							<view class="getArea">{{item.receiverCity.name}}</view>
 | 
			
		||||
							<view class="getName">{{item.receiverName}}</view>
 | 
			
		||||
 | 
			
		||||
						</view>
 | 
			
		||||
 | 
			
		||||
					</view>
 | 
			
		||||
					<view class="order-detail">
 | 
			
		||||
						<!-- 已取件运输信息 -->
 | 
			
		||||
						<view v-if="item.status ===23001 && item.transportOrderPointVOS" class="detail-item">
 | 
			
		||||
							<text>已取件:</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 运输中信息 -->
 | 
			
		||||
						<view v-if="[23005,23008].includes(item.status) && item.transportOrderPointVOS"
 | 
			
		||||
							class="detail-item">
 | 
			
		||||
							<text>运送中:</text>{{item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 已签收 -->
 | 
			
		||||
						<view v-if="item.status ===23009 && item.transportOrderPointVOS" class="detail-item">
 | 
			
		||||
							<text>已签收:</text>{{item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 已拒收 -->
 | 
			
		||||
						<view v-if="item.status ===23010 && item.transportOrderPointVOS" class="detail-item">
 | 
			
		||||
							<text>已拒收:</text>{{item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 预计上门时间 -->
 | 
			
		||||
						<view v-if="item.status ===23000 " class="detail-item">
 | 
			
		||||
							<text>预计上门时间:</text>{{item.estimatedStartTime}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 取消时间 -->
 | 
			
		||||
						<view v-if="item.status ===230011 " class="detail-item"><text>取消时间:</text>{{item.updated}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 预计送达时间 -->
 | 
			
		||||
						<view v-if="[23001,23005,23008,23010].includes(item.status) " class="detail-item">
 | 
			
		||||
							<text>预计送达时间:</text>{{item.estimatedArrivalTime}}
 | 
			
		||||
						</view>
 | 
			
		||||
						<!-- 已关闭时间 -->
 | 
			
		||||
						<view v-if="item.status ===22000 " class="detail-item"><text>关闭时间:</text>{{item.updated}}</view>
 | 
			
		||||
						<!-- 签收时间 -->
 | 
			
		||||
						<view v-if="item.status ===23009 " class="detail-item"><text>签收时间:</text>{{item.updated}}</view>
 | 
			
		||||
					</view>
 | 
			
		||||
					<!-- 功能按钮区域 -->
 | 
			
		||||
					<view class="btn-box">
 | 
			
		||||
						<view class="btn-list" @click.stop="handleSecondQi">
 | 
			
		||||
							<view class="btn" v-if="[23000,23001,23005,23008,23010].includes(item.status)">分享</view>
 | 
			
		||||
							<view class="btn" v-if='item.status===23000' @click.stop="handleOrderCancel(item.id)">取消寄件
 | 
			
		||||
							</view>
 | 
			
		||||
							<view class="btn" v-if="[22000,230011,23009].includes(item.status)"
 | 
			
		||||
								@click.stop="handleOrderDelete(item.id)">删除</view>
 | 
			
		||||
						</view>
 | 
			
		||||
					</view>
 | 
			
		||||
					<view class="paymentStatus"
 | 
			
		||||
						v-if="item.paymentStatus && [23001,23005,23008,23009,23010].includes(item.status)">
 | 
			
		||||
						<image
 | 
			
		||||
							:src="item.paymentStatus===1?'../../../static/daizhifu.png':'../../../static/yizhifu.png'">
 | 
			
		||||
						</image>
 | 
			
		||||
					</view>
 | 
			
		||||
				</view>
 | 
			
		||||
				<!-- 加载底部 -->
 | 
			
		||||
				<uni-load-more :status="status" v-if="!isShowMore && isLogin && allOrderList.data.length" />
 | 
			
		||||
			</scroll-view>
 | 
			
		||||
		</view>
 | 
			
		||||
 | 
			
		||||
		<!-- 删除确认对话框 -->
 | 
			
		||||
		<uni-popup ref="popup" type="dialog" class='address-popup'>
 | 
			
		||||
			<uni-popup-dialog mode="base" :content="'确定是否删除此条订单?'" :animation='false' :before-close="true"
 | 
			
		||||
				@close="close" @confirm="confirm">
 | 
			
		||||
			</uni-popup-dialog>
 | 
			
		||||
		</uni-popup>
 | 
			
		||||
 | 
			
		||||
	</view>
 | 
			
		||||
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	import {
 | 
			
		||||
		ref,
 | 
			
		||||
		reactive,
 | 
			
		||||
		onMounted,
 | 
			
		||||
	} from 'vue';
 | 
			
		||||
	import {
 | 
			
		||||
		getOrderList,
 | 
			
		||||
		deleteOrder
 | 
			
		||||
	} from '@/pages/api/order.js'
 | 
			
		||||
	import {
 | 
			
		||||
		onLoad,
 | 
			
		||||
		onShow,
 | 
			
		||||
	} from '@dcloudio/uni-app';
 | 
			
		||||
	import {
 | 
			
		||||
		handleSecondQi
 | 
			
		||||
	} from '@/utils/index.js'
 | 
			
		||||
	import {
 | 
			
		||||
		useStore
 | 
			
		||||
	} from 'vuex';
 | 
			
		||||
	// 获取父组件数据
 | 
			
		||||
	const props = defineProps({
 | 
			
		||||
		serchValue: {
 | 
			
		||||
			type: String
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
	const store = useStore(); //vuex获取、储存数据
 | 
			
		||||
	const users = store.state.user
 | 
			
		||||
	const emits = defineEmits(["@stopRefresh"]);
 | 
			
		||||
	let pageInfo = reactive({
 | 
			
		||||
		page: 1,
 | 
			
		||||
		pageSize: 10,
 | 
			
		||||
		mailType: 1
 | 
			
		||||
	})
 | 
			
		||||
	let status = ref('more') //加载状态     
 | 
			
		||||
	let isShowMore = ref(false) //是否显示更多
 | 
			
		||||
	let allOrderList = reactive({
 | 
			
		||||
		data: []
 | 
			
		||||
	})
 | 
			
		||||
	let orderId = ref()
 | 
			
		||||
	let isLogin = ref('')
 | 
			
		||||
	let popup = ref(null)
 | 
			
		||||
	//胶囊底部距离头部的距离
 | 
			
		||||
	let capsuleBottom = ref()
 | 
			
		||||
	// let height = ref('570rpx')
 | 
			
		||||
	//关闭删除确认提示框
 | 
			
		||||
	const close = () => {
 | 
			
		||||
		popup.value.close()
 | 
			
		||||
		orderId.value = ''
 | 
			
		||||
	}
 | 
			
		||||
	onLoad(() => {
 | 
			
		||||
		uni.getSystemInfo({
 | 
			
		||||
			success: (res) => {
 | 
			
		||||
				capsuleBottom.value = uni.getMenuButtonBoundingClientRect().bottom + 52
 | 
			
		||||
			}
 | 
			
		||||
		})
 | 
			
		||||
	})
 | 
			
		||||
	onShow(() => {
 | 
			
		||||
		isLogin.value = uni.getStorageSync('token')
 | 
			
		||||
		allOrderList.data = users.indexList
 | 
			
		||||
	})
 | 
			
		||||
	onMounted(() => {
 | 
			
		||||
		getOrderListFunc()
 | 
			
		||||
	})
 | 
			
		||||
	//复制
 | 
			
		||||
	const handleCopy = (value) => {
 | 
			
		||||
		uni.setClipboardData({
 | 
			
		||||
			data: value,
 | 
			
		||||
			showToast: false,
 | 
			
		||||
			success: () => {
 | 
			
		||||
				uni.hideToast(); // 隐藏弹出提示
 | 
			
		||||
				uni.hideKeyboard(); //  隐藏软键盘
 | 
			
		||||
				uni.showToast({
 | 
			
		||||
					title: '复制成功',
 | 
			
		||||
					icon: 'success',
 | 
			
		||||
					duration: 1000
 | 
			
		||||
				})
 | 
			
		||||
 | 
			
		||||
			}
 | 
			
		||||
		});
 | 
			
		||||
	}
 | 
			
		||||
	//确认删除订单
 | 
			
		||||
	const confirm = () => {
 | 
			
		||||
		popup.value.close()
 | 
			
		||||
		deleteOrder(orderId.value).then((res) => {
 | 
			
		||||
			pageInfo.page = 1
 | 
			
		||||
			pageInfo.pageSize = 10
 | 
			
		||||
			getOrderListFunc()
 | 
			
		||||
			uni.showToast({
 | 
			
		||||
				title: '删除成功',
 | 
			
		||||
				icon: 'success',
 | 
			
		||||
				duration: 1000
 | 
			
		||||
			})
 | 
			
		||||
		}).catch((err) => {
 | 
			
		||||
			uni.showToast({
 | 
			
		||||
				title: '网络异常',
 | 
			
		||||
				duration: 2000,
 | 
			
		||||
				icon: 'none'
 | 
			
		||||
			});
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	//删除订单
 | 
			
		||||
	const handleOrderDelete = (id) => {
 | 
			
		||||
		orderId.value = id
 | 
			
		||||
		popup.value.open()
 | 
			
		||||
	}
 | 
			
		||||
	//跳转到取消订单页面
 | 
			
		||||
	const handleOrderCancel = (id) => {
 | 
			
		||||
		uni.navigateTo({
 | 
			
		||||
			url: '/subPages/order-cancel/index?orderId=' + id
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	const toLogin = () => {
 | 
			
		||||
		uni.navigateTo({
 | 
			
		||||
			url: '/pages/login/index'
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
	const getOrderListFunc = (flag) => {
 | 
			
		||||
		status.value = 'loading'
 | 
			
		||||
		getOrderList(pageInfo).then((res) => {
 | 
			
		||||
			console.log(res, '接受到了resovle')
 | 
			
		||||
			if (res.data) {
 | 
			
		||||
				console.log(res.data.items && res.data.items.length, 'res.data.items && res.data.items.length')
 | 
			
		||||
				status.value = (res.data.items && res.data.items.length) < 10 ? 'no-more' : 'more'
 | 
			
		||||
				if (flag === 'topPull') {
 | 
			
		||||
					allOrderList.data = allOrderList.data.concat(res.data.items ? res.data.items : [])
 | 
			
		||||
				} else {
 | 
			
		||||
					allOrderList.data = res.data.items ? res.data.items : []
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			store.commit('user/setIndexList', allOrderList.data)
 | 
			
		||||
			emits('stopRefresh')
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	//根据状态去显示对应的运单状态文案
 | 
			
		||||
	const showOrderStatus = (status) => {
 | 
			
		||||
		switch (status) {
 | 
			
		||||
			case 21000:
 | 
			
		||||
				return '待支付';
 | 
			
		||||
			case 23000:
 | 
			
		||||
				return '待取件';
 | 
			
		||||
			case 230011:
 | 
			
		||||
				return '已取消';
 | 
			
		||||
			case 23001:
 | 
			
		||||
				return '已取件';
 | 
			
		||||
			case 23005:
 | 
			
		||||
				return '运送中';
 | 
			
		||||
			case 22000:
 | 
			
		||||
				return '已关闭';
 | 
			
		||||
			case 23008:
 | 
			
		||||
				return '派送中';
 | 
			
		||||
			case 23009:
 | 
			
		||||
				return '已签收';
 | 
			
		||||
			case 23010:
 | 
			
		||||
				return '已拒收';
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	//跳转到订单详情页面
 | 
			
		||||
	const handleToOrderInfo = (event, id, transportOrderId) => {
 | 
			
		||||
		uni.navigateTo({
 | 
			
		||||
			url: '/subPages/order-info/index?orderId=' + id + '&transportOrderId=' + transportOrderId
 | 
			
		||||
		});
 | 
			
		||||
		store.commit('user/setIsToOrderInfo', true)
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	//下拉加载更多
 | 
			
		||||
	const LoadMoreCustomers = () => {
 | 
			
		||||
		if (status.value === 'no-more') {
 | 
			
		||||
			return
 | 
			
		||||
		}
 | 
			
		||||
		pageInfo.page = pageInfo.page + 1
 | 
			
		||||
		getOrderListFunc('topPull')
 | 
			
		||||
	}
 | 
			
		||||
	//
 | 
			
		||||
	const indexGetOrderListFunc = (params) => {
 | 
			
		||||
		pageInfo.page = 1
 | 
			
		||||
		pageInfo = Object.assign({}, pageInfo, params)
 | 
			
		||||
		getOrderListFunc()
 | 
			
		||||
	}
 | 
			
		||||
	// 暴漏给父组件
 | 
			
		||||
	defineExpose({
 | 
			
		||||
		indexGetOrderListFunc,
 | 
			
		||||
		LoadMoreCustomers
 | 
			
		||||
	});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style src="./orderList.scss" lang="scss" scoped></style>
 | 
			
		||||
							
								
								
									
										18
									
								
								project-wl-yonghuduan-uniapp-vue3/pages/pickup/index.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								project-wl-yonghuduan-uniapp-vue3/pages/pickup/index.scss
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,18 @@
 | 
			
		||||
 | 
			
		||||
.tabScroll {
 | 
			
		||||
	.scroll-row-item {
 | 
			
		||||
		margin-right: 80rpx;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
.boxTop{
 | 
			
		||||
	position: fixed;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	z-index: 2;
 | 
			
		||||
	box-shadow: 0 4rpx 12rpx 0 rgba(0,0,0,0.03);
 | 
			
		||||
}
 | 
			
		||||
.pickup{
 | 
			
		||||
	min-height: 100vh!important;
 | 
			
		||||
	background-color: #F3F5F9;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										108
									
								
								project-wl-yonghuduan-uniapp-vue3/pages/pickup/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										108
									
								
								project-wl-yonghuduan-uniapp-vue3/pages/pickup/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,108 @@
 | 
			
		||||
<!-- 取件页面 -->
 | 
			
		||||
<template>
 | 
			
		||||
	<view class="pickup">
 | 
			
		||||
		<!-- 搜索nav -->
 | 
			
		||||
		<SearchPage @handleSearch="handleSearch"></SearchPage>
 | 
			
		||||
		<!-- end -->
 | 
			
		||||
		<view class="boxTop" :style="{'paddingTop':capsuleBottom +'px'}">
 | 
			
		||||
			<!-- tab切换 -->
 | 
			
		||||
			<UniTab :tabBars="tabBars" ref="tab" @getTabIndex="getTabIndex" :staticNum="staticNum.data"></UniTab>
 | 
			
		||||
		</view>
 | 
			
		||||
		<!-- 运单列表 -->
 | 
			
		||||
		<OrderList ref='orderListRef' :serchValue="serchValue" @stopRefresh="stopRefreshFunc"></OrderList>
 | 
			
		||||
	</view>
 | 
			
		||||
	<!-- end -->
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup>
 | 
			
		||||
	import {
 | 
			
		||||
		ref,
 | 
			
		||||
		reactive,
 | 
			
		||||
	} from 'vue';
 | 
			
		||||
	import {
 | 
			
		||||
		onLoad,
 | 
			
		||||
		onShow
 | 
			
		||||
	} from '@dcloudio/uni-app';
 | 
			
		||||
 | 
			
		||||
	// 基本数据
 | 
			
		||||
	import {
 | 
			
		||||
		DeliveryData
 | 
			
		||||
	} from '@/utils/commonData.js';
 | 
			
		||||
	import {
 | 
			
		||||
		getGoodsNum
 | 
			
		||||
	} from '@/pages/api/order.js'
 | 
			
		||||
	// 导入组件
 | 
			
		||||
	// 搜索组件
 | 
			
		||||
	import SearchPage from '@/components/uni-search/index.vue';
 | 
			
		||||
	// tab切换
 | 
			
		||||
	import UniTab from '@/components/uni-tab/index.vue';
 | 
			
		||||
	//运单列表
 | 
			
		||||
	import OrderList from './components/orderList';
 | 
			
		||||
	// 筛选
 | 
			
		||||
 | 
			
		||||
	const emit = defineEmits(''); //子组件向父组件事件传递
 | 
			
		||||
	const tab = ref();
 | 
			
		||||
	const tabBars = DeliveryData;
 | 
			
		||||
	let tabIndex = ref(0); //当前tab
 | 
			
		||||
	let staticNum = reactive({
 | 
			
		||||
		data: [0, 0]
 | 
			
		||||
	})
 | 
			
		||||
	// 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定
 | 
			
		||||
	let selected = reactive(new Map());
 | 
			
		||||
	let orderListRef = ref() //列表组件引用
 | 
			
		||||
	//设备栏高度
 | 
			
		||||
	let deviceNavHeight = ref()
 | 
			
		||||
	//胶囊顶部距离头部的距离
 | 
			
		||||
	let capsuleTop = ref()
 | 
			
		||||
	//胶囊底部距离头部的距离
 | 
			
		||||
	let capsuleBottom = ref()
 | 
			
		||||
	//导航栏高度
 | 
			
		||||
	let all = ref()
 | 
			
		||||
	//胶囊高度
 | 
			
		||||
	let capsuleHeight = ref()
 | 
			
		||||
	let serchValue = ref()//头部搜索栏的关键字
 | 
			
		||||
	// ------生命周期------
 | 
			
		||||
	onShow(() => {
 | 
			
		||||
		getStaticNum()
 | 
			
		||||
		orderListRef.value && getTabIndex(tabIndex.value)
 | 
			
		||||
	});
 | 
			
		||||
	onLoad(() => {
 | 
			
		||||
		uni.getSystemInfo({
 | 
			
		||||
			success: (res) => {
 | 
			
		||||
				deviceNavHeight.value = res.statusBarHeight
 | 
			
		||||
				capsuleTop.value = uni.getMenuButtonBoundingClientRect().top
 | 
			
		||||
				capsuleBottom.value = uni.getMenuButtonBoundingClientRect().bottom
 | 
			
		||||
				all.value = (capsuleTop.value + capsuleBottom.value - deviceNavHeight.value) + 'px'
 | 
			
		||||
				capsuleHeight.value = uni.getMenuButtonBoundingClientRect().height
 | 
			
		||||
 | 
			
		||||
			}
 | 
			
		||||
		})
 | 
			
		||||
	})
 | 
			
		||||
	// ------定义方法------
 | 
			
		||||
 | 
			
		||||
	// 搜索
 | 
			
		||||
	const handleSearch = (index) => {
 | 
			
		||||
		serchValue.value = index.value
 | 
			
		||||
		orderListRef.value.indexGetOrderListFunc({
 | 
			
		||||
			keyword: index.value
 | 
			
		||||
		}) //触发子组件获取列表数据的方法
 | 
			
		||||
	};
 | 
			
		||||
	// 获取寄件和收件的数量
 | 
			
		||||
	const getStaticNum = () => {
 | 
			
		||||
		getGoodsNum().then((res) => {
 | 
			
		||||
			if(res.code === 200){
 | 
			
		||||
				staticNum.data = [res.data['1'],res.data['2']]
 | 
			
		||||
			}
 | 
			
		||||
		})
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	// 获取tab切换当前的index
 | 
			
		||||
	const getTabIndex = index => {
 | 
			
		||||
		tabIndex.value = index 
 | 
			
		||||
		orderListRef.value.indexGetOrderListFunc({
 | 
			
		||||
			mailType: index + 1,
 | 
			
		||||
		}) //触发子组件获取列表数据的方法
 | 
			
		||||
	};
 | 
			
		||||
</script>
 | 
			
		||||
<style src="../../styles/expressage.scss" lang="scss" scoped></style>
 | 
			
		||||
<style src="./index.scss" lang="scss" scoped></style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user