ddcWechat/pages/rent/control/route.vue

<template>
	<view class="content" :style="colorStyle">
		<!-- 订单列表 -->
		<view v-for="(item,index) in list" @click="navTo('./routeDetail?id='+item.id)">
			<!-- <view class="timeDay">
							{{items.time}}
						</view> -->
			<view class="routeItemBox">
				<view class="cartName acea-row row-between-wrapper">
					<view class="acea-row row-between-wrapper">
						<image class="cartImg" src="../static/cart.png" mode="scaleToFill">
						</image>
						<text class="carNameTitle">
							{{item.car.machine_name}}
						</text>
					</view>
					<view class="iconfont  icon-xiangyou"></view>
				</view>
				<view class="routeItem acea-row row-between-wrapper">
					<!-- <view class="leftTime">
						<view>
							{{item.machine_no}}
						</view>
					</view> -->
					<view class="rightRoute acea-row row-between-wrapper">
						<view class="leftImg">
							<image src="../static/routeContent.png" mode="widthFix"></image>
						</view>
						<view class="rightConent">
							<view class="statusTitle">
								起点：{{item.add_time}}
							</view>
							<view class="routeName line2">
								{{item.start_address}}
							</view>
							<view class="contentJg">

							</view>
							<view class="statusTitle">
								终点：{{item.end_time}}
							</view>
							<view class="routeName line2 end">
								{{item.last_address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loadingicon acea-row row-center-wrapper font-color-white" v-if="list.length > 0">
			<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			{{ loadTitle }}
		</view>
		<view v-if="list.length == 0">
			<emptyPage v-if="!loading" :title="$t(`暂无行程记录`)"></emptyPage>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOneinfo
	} from '@/api/rent.js';
	import colors from '@/mixins/color.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		data() {
			return {
				id: '', //保存车辆car_number
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				list: [], //订单数组
				page: 1,
				limit: 10
			};
		},
		components: {
			emptyPage
		},
		mixins: [colors],
		onLoad(options) {
			this.id = options.id || ''
			this.loadData();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 转换金额为数字
			// 确认收货
			//获取订单列表
			loadData() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				getOneinfo({
						type: "record",
						page: that.page,
						limit: that.limit,
						id: that.id
					})
					.then(res => {
						let list = res.data.list || [];
						let loadend = list.length < that.limit;
						that.list = that.$util.SplitArray(list, that.list);
						that.$set(that, 'list', that.list);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = that.$t(`加载更多`);
					});
			},
		}
	};
</script>

<style lang="scss">
	.content {
		background: var(--view-theme);
		height: 100vh;
		padding-top: 30rpx;
	}

	.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;
		.cartName {
			font-size: 32rpx;
			font-weight: 400;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid $uni-border-color;
			
			.carNameTitle {
				padding-left: 20rpx;
			}

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

			.iconRight {
				width: 26rpx;
			}
		}

		.detailRoute {
			color: var(--view-theme);
			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: 30rpx;

			.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: $uni-border-color;
						font-size: 22rpx;
					}

					.routeName {
						color: var(--view-theme);
						font-size: 28rpx;
						min-height: 2.5rem;
						margin-bottom: 15rpx;

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