lanan-app/pages/rescue/historylist.vue

<!-- 历史订单列表-->

<template>
	<view class="content">
		<view class="content-header">
			<VNavigationBarVue title="我的订单"></VNavigationBarVue>
			<view class="top-icon">
				<view class="s-input">
					<uni-icons type="search" color="#8E8E93" size="16"></uni-icons>
					<input v-model="searchText" type="text" placeholder="搜索我的订单">
					<uni-icons @click="searchText = ''" type="clear" color="#8E8E93"></uni-icons>
				</view>
				<view class="h-text">搜索</view>
			</view>
		</view>
		<view class="top-tap">
			<view class="tap-box" :class="{'cc' : gindex == item.id }" v-for="(item,index) in arrtap" :key="index"
				@click="getindex(item.id)">
				<view style="margin-bottom: 4px;">{{item.text}}</view>
				<view class="gang" v-if="item.id == gindex"></view>
			</view>
		</view>
		<view class="dil">
			<view class="ques" v-if="orderList.length== 0 ">
				<image src="../../static/quesheng.png" mode=""></image>
			</view>

			<order-card-vue v-for="(item,index) in orderList" :key="index" :orderData="item"></order-card-vue>
			<!-- <view class="boxt" v-for="(item,index) in orderList" :key="index" @click="godetail(item.id)">
				<view class="boxt-left">
					<view class="left-lan">
						<view class="">{{item.rescueTypeStr}}</view>
					</view>
					<view class="text1">{{item.rescuePosition}}</view>
					<view class="" v-if="item.rescueStatus == 1">
						<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">预约单</view>
						<view class="text2">{{item.rescueTime || ''}}</view>
					</view>
					<view class="" v-if="item.rescueStatus == 2">
						<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">系统正在派单中...</view>
						<view class="text2">{{item.rescueTime || ''}}</view>

					</view>
					<view class="text2"><text class="lanzi">
							{{item.driverName || ''}}</text> <text style="margin-left: 2px;margin-right: 2px;">
							驾驶 </text><text class="lanzi">{{item.driverCarNum||""}}</text></view>
					<view class="" v-if="item.rescueStatus  > 2">
						<view class="text2">救援车辆距 <text class="lanzi"> {{item.distance / 1000 || 0}}KM</text> </view>
						<view class="text2">预计 <text class="lanzi">{{item.needTime || 0}}分钟</text> 到达</view>
					</view>
					<view class="text2">{{item.rescueTime || ''}}</view>
				</view>
				<view class="boxt-right">
					<view class="zhtai">
						<view class="">{{item.rescueStatusStr}}</view>
					</view>
					<view class="dianhua" v-if="item.rescueStatus > 2">
						<view class="ticon">
							<image src="../../static/dh.png" mode=""></image>
						</view>
						<view class="">联系司机</view>
					</view>
				</view>
			</view> -->


			<view style="width: 100%; height: 60px;"></view>
		</view>

		<tabBar msg="1"></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
	import OrderCardVue from '../../components/orderCard/OrderCard.vue';
	import request from '../../utils/request';
	export default {
		data() {
			return {
				// 搜索内容
				searchText: '',
				gindex: 1,
				orderList: [
					// {
					// 	rescueTypeStr: '扣车',
					// 	rescuePosition: '四川省泸州市江阳区酒谷大道四段18号泸州',
					// 	rescueStatus: 2,
					// 	rescueStatusStr: '待救援',
					// 	driverName: '先伟',
					// 	driverCarNum: '川E69752',
					// 	distance: 12800,
					// 	needTime: 26,
					// 	rescueTime: '2024-08-12 08:42'
					// }
				],
				total: 0,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				arrtap: [{
						text: '待支付',
						id: 2
					},
					{
						text: '待取车',
						id: 3
					},
					{
						text: '救援中',
						id: 1
					},
					{
						text: '已完成',
						id: 5
					},
					{
						text: '待评价',
						id: 4
					}
					
				],
				arrbox: [],
				role: ''
			}
		},
		components: {
			tabBar,
			VNavigationBarVue,
			OrderCardVue
		},
		onLoad(option) {
			this.role = uni.getStorageSync('role')
			this.gindex = option.id
			this.getlist()
		},
		onReachBottom() {
			console.log('执行了');
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++

				this.getlist()
			}
		},
		methods: {
			godetail(id) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + id
				})
			},
			getlist() {
				let data = {
					rescueStatus: this.gindex,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: data
				}).then((res) => {
					console.log('list', res);
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						} else {
							this.orderList = res.rows
						}
						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);

					}

				})
			},
			getindex(index) {
				this.orderList = []
				this.gindex = index
				this.getlist()
			},
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F7F8FC;
		box-sizing: border-box;
	}

	.content-header {
		background-color: #327DFB;
	}

	.top-icon {
		box-sizing: border-box;
		width: 100%;

		padding: 5px 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dil {
		background-color: #F7F8FC;
		box-sizing: border-box;
		padding: 15px 12px;
		display: flex;
		flex-direction: column;
		row-gap: 10px;
	}

	.h-text {
		width: 124rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 28rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.s-input {
		width: 78%;
		height: 56rpx;
		background: #fff;
		border-radius: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 10px;

		input {
			margin-left: 5px;
			flex: 1;
			width: 0;
			font-size: 14px;
			color: #999999;

		}
	}

	.top-tap {
		width: 100%;
		background: #327DFB;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.tap-box {
		width: 20%;
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		text-align: center;
		position: relative;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.gang {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 60%;
		height: 6rpx;
		border-radius: 12px;
		background: linear-gradient(87deg, #fff 0%, #fff 100%);
	}

	.d-box {
		width: 100%;
		// height: 100px;
		background: white;
		border-radius: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		padding: 8px;
		position: relative;
		overflow: hidden;
		padding-top: 30px;
	}

	.d-y-top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 20px;
		border-radius: 0px 0px 6px 0px;
		background-color: #339DFF;
		color: white;
		font-size: 12px;
		text-align: center;
	}

	.t-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.bq {
			width: 55px;
			height: 20px;
			background: #FFD7D7;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #FF4C4C;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bq2 {
			width: 55px;
			height: 20px;
			background: #CDE2FF;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #3289FF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.d-left {
		margin-left: 10px;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
	}

	.t-left {
		margin-left: 10px;
		display: flex;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 5px;
	}

	.x-left {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.cc {
		font-weight: bold;
	}

	.hong {
		font-size: 16px;
		font-weight: 400;
		color: #F85021;
	}

	.ques {
		margin: 0px auto;
		margin-top: 40px;
		width: 80%;

		image {
			width: 100%;
		}
	}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 50%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 50%;
		height: 100%;
		position: relative;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -110px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>