School_bus_h5/pages/detail/detail.vue

<template>
	<view class="container">

		<!-- 车牌号区域 -->
		<view class="box">
			<view class="left">
				车牌号
			</view>

			<picker style="width: 40%;" @change="bindPickerChange($event,1)" :value="busIndex" :range="busList">
				<view class="right">
					{{busList[busIndex]}}
					<div class="right-img">
						<img src="../../static/bottom.png">
					</div>
				</view>
			</picker>
		</view>

		<!-- 人数区域 -->
		<view class="box">
			<view class="left">
				人数
			</view>

			<picker style="width: 40%;" @change="bindPickerChange($event,1)" :value="busIndex" :range="busList">
				<view class="right">
					{{busList[busIndex]}}
					<div class="right-img">
						<img src="../../static/bottom.png">
					</div>
				</view>
			</picker>
		</view>

		<!-- 时间区域 -->
		<view class="box">
			<view class="left">
				时间
			</view>
			<view class="right">
				<uni-datetime-picker v-model="single">
					<view class="right">
						{{single}}
						<div class="right-img">
							<img src="../../static/bottom.png">
						</div>
					</view>
				</uni-datetime-picker>
			</view>
		</view>

		<!-- 路线区域 -->
		<view class="box">
			<view class="left">
				路线
			</view>

			<picker style="width: 40%;" @change="bindPickerChange($event,1)" :value="pathIndex" :range="pathList">
				<view class="right">
					{{pathList[pathIndex]}}
					<div class="right-img">
						<img src="../../static/bottom.png">
					</div>
				</view>
			</picker>
		</view>

		<!-- 状态区域 -->
		<view class="box">
			<view class="left">
				状态
			</view>

			<picker style="width: 40%;" @change="bindPickerChange($event,1)" :value="busIndex" :range="busList">
				<view class="right">
					<!-- {{busList[busIndex]}} -->
					预约进行中
					<!-- <div class="right-img">
						<img src="../../static/bottom.png">
					</div> -->
				</view>
			</picker>
		</view>

		<!-- 人员名单区域 -->
		<view class="list">
			<view class="list-title">
				人员名单（25/52）
			</view>
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<view class="item-img">
					<img :src="item.url">
				</view>
				<view class="item-info">
					<view class="info-name">
						<view>
							{{item.name}}
						</view>
						<view class="info-name-img">
							<img :src="item.sex ===1?'../../static/boy.png':'../../static/gril.png'">
						</view>
					</view>
					<view class="info-mes">
						{{item.identity}}<span>{{item.time}}</span>
					</view>
				</view>
				<view class="item-type">
					<img src="../../static/subscribe.png">
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad((options) => {
		info.value = JSON.parse(options.info)
		console.log(info.value);
	})

	const info = ref({})

	const busList = ref(["赣AU8G96", "赣AU8G99", "赣AU8G86"])
	const busIndex = ref(0)

	const pathList = ref(["墨轩湖 - 综合楼", "墨轩湖 - 老校区 - 美程宾馆", "墨轩湖 - 老校区"])
	const pathIndex = ref(0)

	const single = ref('2023-03-28 17:10')

	const bindPickerChange = (e, type) => {
		console.log(123);
	}


	const listData = ref([
		{
			name: '张三',
			url: '../../static/man.png',
			// 1代表男生,2代表女生
			sex: 1,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		},
		{
			name: '小刘',
			url: '../../static/woman.png',
			// 1代表男生,2代表女生
			sex: 2,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		},
		{
			name: '小王',
			url: '../../static/woman.png',
			// 1代表男生,2代表女生
			sex: 2,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		},
		{
			name: '张三',
			url: '../../static/man.png',
			// 1代表男生,2代表女生
			sex: 1,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		},
		{
			name: '小刘',
			url: '../../static/woman.png',
			// 1代表男生,2代表女生
			sex: 2,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		},
		{
			name: '小王',
			url: '../../static/woman.png',
			// 1代表男生,2代表女生
			sex: 2,
			identity: '教职工',
			time: '2023-03-01  10:33:12',
			// 1代表已预约
			type: 1
		}
	])
</script>

<style lang="scss" scoped>
	.container {

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 98rpx;
			font-size: 28rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.left {
				flex: 1;
				color: #999999;
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: flex-end;

				.right-img {
					margin-left: 27rpx;
					margin-top: -5rpx;
					width: 17rpx;
					height: 12rpx;

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

		.list {
			padding: 33rpx 30rpx;

			.list-title {
				height: 41rpx;
				color: #999999;
				font-size: 28rpx;
			}

			.list-item {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 29rpx 0 26rpx 0;
				height: 155rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.item-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;

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

				.item-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					margin-left: 6rpx;
					height: 100rpx;

					.info-name {
						display: flex;
						align-items: center;
						font-size: 32rpx;

						.info-name-img {
							margin-left: 26rpx;
							width: 30rpx;
							height: 35rpx;

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

					.info-mes {
						font-size: 24rpx;
						color: #999999;

						span {
							margin-left: 26rpx;
							color: #A6A6A6;
						}
					}
				}

				.item-type {
					width: 104rpx;
					height: 41rpx;

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