School_bus_h5/pages/record/record.vue

<template>
	<view class="container">
		<!-- 筛选区域 -->
		<Search @handLeConveyData="getConveyData" />

		<!-- 列表区域 -->
		<view class="list" v-for="(item,index) in listData" :key="index" @click="handleLookDetail(item)">
			<view class="list-title">
				<view class="title-number">
					车牌：{{item.number?item.number:'无'}}
				</view>
				<view class="title-icon">
					<img src="../../static/right.png">
				</view>
			</view>
			<view class="list-item">
				状态：
				<span class="list-item-type" v-if="item.type ===1">预约进行中</span>
				<span v-if="item.type ===2">预约已截止</span>
				<span class="list-item-type" v-if="item.type ===3">候补排队中</span>
				<span v-if="item.type ===4">候补已截止</span>
			</view>
			<view class="list-item">
				日期：<span>{{item.date}}</span>
			</view>
			<view class="list-item" v-if="item.departureTime">
				发车时间：<span>{{item.departureTime}}</span>
			</view>
			<view class="list-item" v-if="item.path">
				线路：<span>{{item.path}}</span>
			</view>
			<view class="list-item">
				人数：
				<view class="list-item-progress" v-if="item.type===1||item.type ===2">
					<progress activeColor="#3C50E8" stroke-width="9" :percent="15" />
				</view>
				<span>{{item.proportion}}</span>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import Search from '../../components/search'

	// 1代表预约进行中,2代表预约已截止,3代表候补排队中,4代表候补已截止
	const listData = ref([{
			number: '赣M06001',
			type: 1,
			date: "2023.03.01",
			departureTime: "15:30",
			path: "墨轩湖 - 综合楼",
			proportion: '25/52'
		},
		{
			number: '赣M06001',
			type: 2,
			date: "2023.03.01",
			departureTime: "15:30",
			path: "墨轩湖 - 综合楼",
			proportion: '25/52'
		},
		{
			type: 3,
			date: "2023.03.01",
			proportion: '25'
		},
		{
			type: 4,
			date: "2023.03.01",
			proportion: '25'
		}
	])

	const handleLookDetail = (item) => {
		const info = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/detail/detail?info=${info}`
		})
	}

	const getConveyData = (Obj) => {
		console.log(Obj);
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F2F2F2;

		.list {
			margin-bottom: 20rpx;
			padding-bottom: 24rpx;
			background-color: #fff;

			.list-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				height: 94rpx;
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #E6E6E6;

				.title-icon {
					margin-top: -20rpx;
					width: 15rpx;
					height: 25rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.list-item {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 14rpx;

				color: #999999;
				font-size: 28rpx;

				span {
					color: #333333;
				}

				.list-item-type {
					color: #00BAAD;
				}

				.list-item-progress {
					margin-right: 36rpx;
					width: 437rpx;
					height: 22rpx;

					:deep(.uni-progress-bar),
					:deep(.uni-progress-inner-bar) {
						border-radius: 85rpx;
					}
				}
			}
		}
	}
</style>