user_mobile_front/src/pages/logisticslist.vue

<template>
	<div>
		<div class="content">
			<div class="tab">
				<div>
					<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">外部件</p>
					<p @click="tab(2)" :class="[index == 2 ? 'active' : '']">内部件</p>
				</div>
			</div>
			<!-- 订单列表 -->
			<div class="batch_box" @scroll.passive="getScroll($event)"
				style=" height: calc(100vh - 40px);overflow-y: auto;">
				<van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
					<div class="jjlist" v-for="item in mailList">
						<div class="listinfo" @click="mailDetail(item)">
							<div class="list_top">
								<img src="../assets/images/ad_icon1.png" alt="">
								<div>
									<p>寄件号 {{ item.orderId }}</p>

									<p><span>收</span>收件人 {{ item.name }} {{ item.phone }}</p>
									<p>{{ item.province }} {{ item.city }} {{ item.county }}</p>
								</div>
							</div>
						</div>
					</div>
					<template v-if="!refreshLoading && mailList.length > 0">
						<div class="bottom_text" v-if="loading">
							加载中...
						</div>
						<div class="bottom_text" v-else-if="noData">
							已经到底啦...
						</div>
					</template>
					<template v-if="mailList.length === 0">
						<div class="bottom_text">数据为空！</div>
					</template>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import { getListByUser } from '../api/index'
export default {
	data() {
		return {
			titlename: "我的寄件",
			expressType: '外部件',
			userId: '',
			mailList: [],
			index: 1,
			time: 1,
			value: "",
			timevalue: "请选择日期范围",
			showPicker: false,
			showPickertype: "year-month",
			minDate: new Date(2022, 0, 1),
			maxDate: new Date(),
			startTime: '',
			endTime: '',
			pageSize: {
				page: 1,
				limit: 10
			},
			refreshLoading: false, // 刷新loading
			noData: false, // 没有更多数据
		}
	},
	created: function () {
		this.isLogin();
		this.userId = localStorage.getItem("userId");
		this.getmailList();
	},
	methods: {
		// 刷新	
		async onRefresh() {
			this.pageSize.page = 1;
			this.pageSize.limit = 10;
			this.refreshLoading = true;
			await this.getmailList(true)
			this.refreshLoading = false
		},
		// 滚动事件
		getScroll(event) {
			let scrollBottom =
				event.target.scrollHeight -
				event.target.scrollTop -
				event.target.clientHeight;
			// 距离底部20px以内 && 还有数据 && 没有正在加载中
			if (scrollBottom <= 20 && !this.noData && !this.loading) {
				this.pageSize.page += 1;
				this.getmailList();
			}
		},
		// 获取数据
		async getmailList(isClear) {
			this.loading = true
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});
			let parmas = {
				expressNo: this.value,
				startTime: this.startTime,
				endTime: this.endTime,
				type: this.index,

			}
			const res = await getListByUser({ ...this.pageSize, ...parmas })
			let expressListA = res.data
			Toast.clear()

			if (isClear) {
				this.mailList = expressListA
			} else {
				this.mailList.push(...expressListA)
			}

			this.loading = false
			if (this.pageSize.page * this.pageSize.limit >= res.count) {
				this.noData = true;
			} else {
				this.noData = false;
			}
		},

		//寄件详情
		mailDetail(item) {
			this.$router.push({ path: '/MailInfo', query: { mailDetail: item } })
		},

		//寄件查询
		tab(obj) {//外部件、内部件切换
			this.index = obj
			if (this.index == 1) {
				this.expressType = '外部件'
			}
			if (this.index == 2) {
				this.expressType = '内部件'
			}
			this.mailList = []
			this.pageSize = {
				page: 1,
				limit: 10
			}
			this.getmailList();
		},
		changetime(obj) {//选择按月份、按天数
			this.time = obj
			this.timevalue = "请选择"
			if (obj == 1) {//按月份时间选择器为年-月
				this.showPickertype = "year-month"
			}
			if (obj == 2) {//按天时间选择器为年-月-日
				this.showPickertype = "date"
			}
		},
		/* onConfirm(value){//时间确定
			let year,month,day
			let date=new Date(value)
			year=date.getFullYear()
			month=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1)
			
			if(this.time==1){
				this.timevalue=year+'-'+month
			}
			if(this.time==2){
				day=date.getDate()>9?date.getDate():'0'+date.getDate()
				this.timevalue=year+'-'+month+'-'+day
			}
			this.showPicker=false
		}, */
		onConfirm(values) {//时间确定
			const [start, end] = values;
			this.showPicker = false;
			this.startTime = this.formatDate(start);
			this.endTime = this.formatDate(end);
			this.timevalue = this.startTime + '~' + this.endTime;
			this.getmailList();
		},
		formatDate(date) {
			let year, month, day
			year = date.getFullYear()
			month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
			day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
			return (year + '-' + month + '-' + day)
		}

	},
	computed: {

	}
}
</script>

<style lang="less" scoped="">
.content {
	font-size: .3rem;
	//padding: .33rem;
	// padding: .33rem .33rem 1.2rem;

	/deep/.van-search {
		padding: 0px;
		margin-bottom: .3rem;

		.van-search__content {
			background: white;
		}
	}

	.tab {
		height: 40px;
		font-size: .36rem;
		color: #00c4b8;
		// padding-bottom: .3rem;
		background: white;

		div {
			display: flex;
			// border: .01rem solid #00c4b8;
			text-align: center;
			border-radius: .05rem;

			p {
				flex: 1;
				padding: .15rem 0rem;
			}

			p.active {
				background: #00c4b8;
				color: white;
			}
		}
	}

	.jjlist {
		font-size: .3rem;
		color: #999999;

		.listinfo {
			background: white;
			padding: .33rem .33rem .2rem;
			border-radius: .05rem;
			margin-bottom: .2rem;
			position: relative;

			.list_top {
				display: flex;
				justify-content: flex-start;
				align-items: center;


				img {
					margin: 0 0.2rem;
					width: .9rem;
					height: .9rem;
				}

				div {
					width: 4rem;
					margin-left: .2rem;
					display: inline-block;
					line-height: 150%;

					p:nth-of-type(1) {
						font-size: .3rem;
						font-weight: bold;
						color: #333;
					}

					p:nth-of-type(3) {
						font-size: .24rem;
						color: #333;

						span {
							width: .37rem;
							height: .37rem;
							color: white;
							border-radius: 50%;
							background: #cc9a09;
							display: inline-block;
							text-align: center;
							line-height: .37rem;
							margin-right: .1rem;
						}
					}

					p:nth-of-type(4) {
						font-size: .2rem;
					}
				}

				// }

				>p {
					font-size: .24rem;
					color: #f5693d;
					font-weight: bold;
				}
			}

			.list_bot {
				text-align: right;
				border-top: .01rem solid #ededed;
				padding-top: .2rem;

				p {
					display: inline-block;
					font-size: .24rem;
					padding: .16rem .4rem;
					border-radius: .05rem;
				}

				p:nth-of-type(1) {
					border: .01rem solid #263fbf;
					color: #263fbf;
				}

				p:nth-of-type(2) {
					border: .01rem solid #408cc7;
					color: #408cc7;
				}

				p:nth-of-type(3) {
					border: .01rem solid #d5a43c;
					color: #d5a43c;
				}

				p:nth-of-type(4) {
					border: .01rem solid #e24444;
					color: #e24444;
				}
			}

			.fast {
				background: url(../assets/images/status.png) no-repeat center;
				background-size: 100% 100%;
				color: white;
				position: absolute;
				bottom: 0px;
				right: 0px;
				width: 1rem;
				height: .4rem;
				text-align: center;
				line-height: .4rem;
				font-size: .2rem;
			}
		}
	}

	.change {
		color: #00c4b8;
		margin-bottom: .3rem;
		padding: 0rem .3rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		padding-bottom: .3rem;

		.datapicker {
			color: #9f9d9d;
			font-size: .3rem;

			p:after {
				content: "";
				display: inline-block;
				margin-left: .1rem;
				width: .15rem;
				height: .15rem;
				border-right: .05rem solid #9f9d9d;
				border-bottom: .05rem solid #9f9d9d;
				transform: rotate(45deg);
				position: relative;
				top: -.05rem;
			}
		}

		.time {
			width: 2rem;
			display: flex;
			border: .01rem solid #00c4b8;
			text-align: center;
			border-radius: .05rem;
			font-size: .26rem;

			p {
				flex: 1;
				padding: .1rem 0rem;
			}

			p.timeactive {
				background: #00c4b8;
				color: white;
			}
		}
	}

	.logistics {
		background: white;
		border-radius: .1rem;
		padding: .15rem;
		margin-bottom: .3rem;

		.logistics_top {
			display: flex;
			align-items: center;

			img {
				width: 12px;
				height: 14px;
				margin-left: .1rem;
			}
		}

		.logistics_center {
			padding: .3rem .6rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: .26rem;
			color: #9f9d9d;

			div:nth-of-type(1) {
				text-align: center;

				p:nth-of-type(1) {
					font-size: .36rem;
					font-weight: bold;
					color: #333;
					margin-bottom: .2rem;
				}
			}

			div:nth-of-type(2) {
				text-align: center;
				color: #333;
				font-weight: bold;
			}

			div:nth-of-type(3) {
				text-align: center;

				p:nth-of-type(1) {
					font-size: .36rem;
					font-weight: bold;
					color: #333;
					margin-bottom: .2rem;
				}
			}
		}

		.logistics_bottom {
			color: #9f9d9d;
			font-size: .26rem;

			p {
				padding-top: .1rem;
			}
		}
	}
}

.bottom_text {
	color: #969799;
	text-align: center;
	padding-top: 10px;
}
</style>