School_bus_h5/pages/my/my.vue

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

		<!-- 列表区域 -->
		<view class="list" v-for="(item,index) in listData" :key="index">
			<view class="list-title">
				<view v-if="item.title">
					{{item.title }}
				</view>
				<view v-else>
					墨轩湖到黄家湖
				</view>
				<view class="list-img" :class="item.type ===1 ? 'mr-15':''">
					<img v-if="item.type===1" src="../../static/success.png">
					<img v-if="item.type===2" src="../../static/pass.png">
					<img v-if="item.type===3" src="../../static/cancel.png">
					<img v-if="item.type===4" src="../../static/waiting.png">
				</view>
			</view>
			<view class="list-info">
				<view class="list-info-item">
					<span>下单时间：</span>{{item.orderTime}}
				</view>
				<view class="list-info-item" v-if="item.departureTime">
					<span>发车时间：</span>{{item.departureTime}}
				</view>
				<view class="list-info-item" v-if="item.busNumber">
					<span>车辆尾号：</span>{{item.busNumber}}
				</view>
				<view class="list-info-item" v-if="item.capacity">
					<span>容 量：</span>{{item.capacity}}
				</view>
				<view class="list-info-item" v-if="item.message">
					<span>变更信息：</span>{{item.message}}
				</view>
			</view>
			<view class="list-button">
				<view class="list-button-change" v-if="item.type ===1">
					更换车次
				</view>
				<view class="list-button-cancel">
					取消预约
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import Search from '../../components/search'

	// 1代表成功,2代表通行,3代表取消,4代表候补中
	const listData = ref([{
			type: 1,
			title: '墨轩湖 - 综合楼',
			orderTime: '2023-03-31  15:15:15',
			departureTime: '2023-03-31  15:15:15',
			busNumber: '0269',
			capacity: '53人',
			message: '车辆0290变更为6001，容量53变更为63'
		},
		{
			type: 2,
			title: '墨轩湖 - 综合楼',
			orderTime: '2023-03-31  15:15:15',
			departureTime: '2023-03-31  15:15:15',
			busNumber: '0269',
			capacity: '53人',
			message: '车辆0290变更为6001，容量53变更为63'
		},
		{
			type: 3,
			title: '墨轩湖 - 综合楼',
			orderTime: '2023-03-31  15:15:15',
			departureTime: '2023-03-31  15:15:15',
			busNumber: '0269',
			capacity: '53人',
			message: '车辆0290变更为6001，容量53变更为63'
		},
		{
			type: 4,
			// title: '墨轩湖 - 综合楼',
			orderTime: '2023-03-31  15:15:15',
			// departureTime: '2023-03-31  15:15:15',
			// busNumber: '0269',
			// capacity: '53人',
			// message: '车辆0290变更为6001，容量53变更为63'
		}
	])
</script>

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

		.list {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			background-color: #fff;

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

				.list-img {
					width: 121rpx;
					height: 34rpx;

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

				.mr-15 {
					margin-right: 15rpx;
				}
			}

			.list-info {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding: 0 30rpx;
				margin-top: 15rpx;

				.list-info-item {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #333333;

					span {
						display: inline-block;
						width: 140rpx;
						text-align-last: justify;
						color: #999999;
					}
				}
			}

			.list-button {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 114rpx;
				font-size: 28rpx;
				text-align: center;

				.list-button-change {
					width: 170rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					border-radius: 15rpx;
					background: linear-gradient(#8684FF, #3C50E8);
				}

				.list-button-cancel {
					margin: 0 30rpx;
					width: 170rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #999999;
					border-radius: 15rpx;
					background-color: #E6E6E6;
				}
			}
		}
	}
</style>