zd/pages/index/route.vue

<template>
	<view class="content">
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content padding-t-30" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<!-- #ifdef H5 -->
					<empty src="../../static/error/emptyList.png"
						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<empty src="../static/error/emptyList.png"
						v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- #endif -->
					<!-- 订单列表 -->
					<view v-for="(item,index) in tabItem.orderList" @click="navTo('./routeDetail?id='+item.id)">
						<!-- <view class="timeDay">
							{{items.time}}
						</view> -->
						<view class="routeItemBox">
							<view class="cartName flex">
								<view class="flex">
									<image class="cartImg" :src="item.car.image" mode="scaleToFill">
									</image>
									<text class="carName">
										{{item.car.car_name}}
									</text>
								</view>
								<image class="iconRight" src="../../static/icon/next1.png" mode="widthFix"></image>
							</view>
							<view class="routeItem flex">
								<view class="leftTime">
									<view>
										{{item.add_time}}
									</view>
								</view>
								<view class="rightRoute flex">
									<view class="leftImg">
										<image src="../../static/image/routeContent.png" mode="widthFix"></image>
									</view>
									<view class="rightConent">
										<view class="statusTitle">
											起点
										</view>
										<view class="routeName clamp2">
											{{item.start_address}}
										</view>
										<view class="contentJg">

										</view>
										<view class="statusTitle">
											终点
										</view>
										<view class="routeName clamp2 end">
											{{item.last_address}}
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="detailRoute flex">
								<view class="flex">
									<image src="../../static/icon/cartRoute.png" mode="widthFix"></image>
									<text class="margin-l-10">{{item.route}}</text>
								</view>
								<view class="flex">
									<image src="../../static/icon/cartTime.png" mode="widthFix"></image>
									<text class="margin-l-10">{{item.timeAll}}</text>
								</view>
								<view class="flex">
									<image src="../../static/icon/cartSpeed.png" mode="widthFix"></image>
									<text class="margin-l-10">{{item.speed}}</text>
								</view>
							</view> -->
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		car_record
	} from '@/api/user.js';
	export default {
		data() {
			return {
				id: '', //保存车辆car_number
				tabCurrentIndex: 0,
				navList: [{
					state: 0,
					text: '全部',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}]
			};
		},

		onLoad(options) {
			this.id = options.id || ''
			this.loadData();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 转换金额为数字
			// 确认收货
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				console.log(navItem, '数据');
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';

				car_record({
						car_number: this.id,
						page: navItem.page,
						limit: navItem.limit
					})
					.then(({
						data
					}) => {
						let arr = data.data.map(e => {
							return e;
						});
						navItem.orderList = navItem.orderList.concat(arr);
						// console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == arr.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.list-scroll-content,
	.swiper-box {
		height: 100%;
	}

	.timeDay {
		font-size: 32rpx;
		font-weight: 400;
		padding: 30rpx;
	}

	.routeItemBox {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx;
		margin-bottom: 30rpx;
		line-height: 1.5;
		padding-bottom: 30rpx;
		padding-top: 10rpx;

		.cartName {
			font-size: 32rpx;
			font-weight: 400;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid $page-color-light;

			.carName {
				padding-left: 20rpx;
			}

			.cartImg {
				width: 60rpx;
				height: 60rpx;
			}

			.iconRight {
				width: 26rpx;
			}
		}

		.detailRoute {
			color: $font-color-base;
			font-weight: 100;
			margin: 0 30rpx;
			background-color: #F3F6F8;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;

			image {
				width: 36rpx;
				font-size: 24rpx;
			}
		}

		.routeItem {
			align-items: flex-start;
			padding-top: 20rpx;

			.leftTime {
				width: 70rpx;
				margin: 50rpx;
				flex-shrink: 0;
				font-size: 24rpx;
				font-weight: 100;
			}

			.rightRoute {
				flex-grow: 1;
				// height: 262rpx;
				align-items: flex-start;

				.leftImg {
					image {
						width: 36rpx;
					}
				}

				.rightConent {
					padding-left: 20rpx;
					flex-grow: 1;

					.statusTitle {
						color: $font-color-light;
						font-size: 22rpx;
					}

					.routeName {
						color: $font-color-base;
						font-size: 28rpx;
						min-height: 2.5rem;
						margin-bottom: 15rpx;

						&.end {
							min-height: 1.5rem;
						}
					}
				}
			}
		}
	}
</style>