shunfengche-sfd/my/order/myOrderList.vue

<template>
	<view>
		<view class="myOrder_itemView" v-for="(item,index) in orderList" @tap="goDetail(item)">
			<view class="flex justify-between align-center">
				<view class="item_title">正在寻找乘客</view>
				<view style="color: #346EF6;font-weight: bold;">进行中</view>
			</view>
			<view class="flex align-center" style="margin: 30rpx 0rpx 4rpx;">
				<image src="/static/upload/times.png" style="width: 28rpx;height: 28rpx;"></image>
				<view style="margin-left: 16rpx;" class="add_name">{{item.startTime}}</view>
			</view>
			<view class="flex align-center add_name" style="margin: 20rpx 6rpx 4rpx;">
				<view class="green"></view>{{item.shipCity}} {{item.shipAddress}}
			</view>
			<image src="/static/upload/up.png" class="order_up"></image>
			<view class="flex align-center add_name" style="margin-left: 6rpx;">
				<view class="orgin"></view>{{item.deliveryCity}} {{item.deliveryAddress}}
			</view>
		</view>
		<empty v-if="orderList.length == 0"></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty'
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 10,
				orderList: [],
				indentNumber: ''
			}
		},
		onLoad(d) {
			if (d.indentNumber) {
				this.indentNumber = d.indentNumber;
				uni.setNavigationBarTitle({
					title: '选择行程'
				})
			}
		},
		onShow() {
			this.page = 1;
			this.getMyOrderList();
		},
		methods: {
			goDetail(item) {
				if (this.indentNumber != '') {
					uni.navigateTo({
						url: '/pages/index/orderDet?indentNumber=' + this.indentNumber + '&driverRouteId=' + item
							.driverRouteId
					})
				} else {
					uni.navigateTo({
						url: '/my/order/myOrderDetail?driverRouteId=' + item.driverRouteId
					});
				}
			},
			getMyOrderList() {
				this.$queue.showLoading('加载中...')
				this.$Request.getT('/app/driverRoute/selectDriverRouteListByUserId?page=' + this.page + '&limit=' + this
					.limit).then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.orderList = res.data.records
						} else {
							this.orderList = [...this.orderList, ...res.data.records]
						}
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
		},
		// 上拉加载
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getMyOrderList();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getMyOrderList();
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.myOrder_itemView {
		width: 686rpx;
		// height: 549rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 40rpx;
	}

	.item_title {
		font-family: Source Han Sans CN;
		font-weight: 600;
		font-size: 32rpx;
		color: #242424;
	}

	.order_up {
		width: 6rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}


	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>