uniapp-shunfengche/my/classes/list.vue

<template>
	<view class="container">

		<!-- 可滚动日期选择 -->
		<view class="date-section">
			<view class="title">选择日期</view>
			<scroll-view class="date-scroll" scroll-x>
				<view class="date-container">
					<view v-for="(date, index) in dates" :key="index" class="date-item" :class="{ selected: selectedModule === index }" @click="selectModule(index)">
						<text class="date-num" :class="{ selected: selectedModule === index }">{{ date.text }}</text>
						<text class="date-text" :class="{ selected: selectedModule === index }">{{ date.num }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 班车列表 -->
		<view class="bus-section">
			<view class="title">选择班车</view>
			<view class="bus-list">
				<view v-for="(bus, index) in buses" :key="index" class="bus-item">
					<view class="time-row">
						<view>
							<text class="time">{{ bus.time }}</text>
							<text class="duration">{{ bus.duration }}</text>
						</view>
						<view style="color: #f56c6c;font-size: 24rpx;">¥<text
								style="font-size: 38rpx; font-weight: bold;">{{ bus.points }}</text>起</view>
					</view>
					<view class="station-row">
						<text class="station">{{ bus.startStation }}</text>
						<view class="arrow-box">
							<text class="arrow">→</text>
						</view>
						<text class="station">{{ bus.endStation }}</text>
					</view>
					<view class="action-row" style="padding-top: 20rpx;">
						<view>
							<text class="status">{{ bus.status }}</text>
							<text class="remaining">{{ bus.remaining }}</text>
						</view>
						<view>
							<button type="primary" style="background: #fe6b01;" size="mini" class="feedback-submit"
								@click="goNav('/my/classes/detailsList', bus)">订票</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<text class="action-item">上下站</text>
			<text class="action-item">人数车型</text>
			<text class="action-item">时间段</text>
			<text class="action-item">候补车</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedModule: 0,
				dates: [{
						num: '今天',
						text: '13'
					},
					{
						num: '明天',
						text: '14'
					},
					{
						num: '后天',
						text: '15'
					},
					{
						num: '周三',
						text: '1'
					},
					{
						num: '周四',
						text: '2'
					},
					{
						num: '周五',
						text: '3'
					},
					{
						num: '周六',
						text: '4'
					}
				],
				buses: [{
						time: '08:30',
						duration: '预计3小时52分',
						startStation: '合肥南站',
						points: '128',
						endStation: '上海虹桥',
						status: '暂停本吧',
						remaining: '剩余12条'
					},
					{
						time: '09:45',
						duration: '预计4小时15分',
						startStation: '南京南站',
						points: '96',
						endStation: '杭州东站',
						status: '正常发车',
						remaining: '剩余5条'
					},
					{
						time: '10:20',
						duration: '预计2小时30分',
						startStation: '北京西站',
						points: '156',
						endStation: '天津站',
						status: '即将满员',
						remaining: '剩余3条'
					},
					// 可继续添加更多数据...
				]
			}
		},
		methods: {
			selectModule(module) {
				this.selectedModule = module;
			},
			goNav(url, busData) {  // 添加busData参数
			  // 保存数据到本地临时存储
			  uni.setStorageSync('selectedBus', busData)
		
			  // 原有登录验证逻辑
			  let token = this.$queue.getData("token");
			  if (token) {
				uni.navigateTo({
				  url: url,
				  success: function(res) {
					// 通过eventChannel发送数据
					res.eventChannel.emit('acceptBusData', { data: busData })
				  }
				})
			  } else {
				this.bindlogin();
			  }
			},
		}
	}
</script>

<style scoped>
	.container {
		padding: 0 30rpx;
		/* background: #fff; */
	}
	
	.selected {
		background: #fe6b01 !important;
		color: #fff !important;
	}

	.title {
		font-size: 33rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	/* 状态栏 */
	.status-bar {
		font-size: 34rpx;
		color: #000;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	/* 主标题 */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	/* 日期选择 */
	.date-section {
		padding: 30rpx 0;
	}

	.date-scroll {
		width: 100%;
		white-space: nowrap;
		margin: 20rpx 0;
	}

	.date-container {
		display: inline-flex;
		gap: 30rpx;
	}

	.date-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 130rpx;
		height: 130rpx;
		background: #fee8d9;
		padding: 30rpx;
		border-radius: 12rpx;
	}

	.date-num {
		font-size: 34rpx;
		color: #333;
		font-weight: bold;
	}

	.date-text {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	/* 班车列表 */
	.bus-item {
		padding: 30rpx;
		margin: 20rpx 0;
		background: #fff;
		border-radius: 16rpx;
	}

	.time-row {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}

	.time {
		font-size: 44rpx;
		color: #333;
		margin-right: 30rpx;
	}

	.duration {
		font-size: 24rpx;
		color: #999999;
	}

	.station-row {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		justify-content: space-between;
	}

	.station {
		font-size: 30rpx;
		color: #333;
	}

	.arrow-box {
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.arrow {
		font-size: 40rpx;
		color: #fe6b01;
	}

	.points {
		font-size: 24rpx;
		color: #999;
	}

	.action-row {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.status {
		font-size: 28rpx;
		color: #fe6b01;
		padding: 10rpx 20rpx;
		border: 1px #fe6b01 solid;
		border-radius: 8rpx;
		background: #fee8d9;
		margin-right: 20rpx;
	}

	.remaining {
		font-size: 28rpx;
		color: #00c18a;
		padding: 10rpx 20rpx;
		border: 1px #00c18a solid;
		border-radius: 8rpx;
		background: #e8fbf6;
	}

	/* 底部操作栏 */
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
		margin: 0 30rpx;
		border-radius: 14rpx;
	}

	.action-item {
		font-size: 28rpx;
		color: #666;
	}
</style>