uniapp-shunfengche/my/classes/detailsList.vue

<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<text class="section-title">行程信息</text>
			<view style="height: 80rpx; border-bottom: 1rpx #e4e7ed solid; line-height: 80rpx; display: flex;position: relative;">
				<view style="width: 10rpx; height: 10rpx; background: #00c18a; border-radius: 5rpx; position: absolute; top: 50%; margin-top: -5rpx;"></view>
				<view style="margin-left: 30rpx;">{{ busInfo.startStation }}</view>
			</view>
			<view style="height: 80rpx; border-bottom: 1rpx #e4e7ed solid; line-height: 80rpx; display: flex; position: relative;">
				<view style="width: 10rpx; height: 10rpx; background: #f56c6c; border-radius: 5rpx; position: absolute; top: 50%; margin-top: -5rpx;"></view>
				<view style="margin-left: 30rpx;">{{ busInfo.endStation }}</view>
			</view>
			<view class="route-info">
				<text class="sub-title">途径站点 (3个)</text>
				<view class="station-list">
					<view class="station-item" v-for="(station, index) in stations" :key="index">
						<text class="station-name">{{ station.name }}</text>
						<text class="station-time">{{ station.time }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 乘车人信息 -->
		<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<view class="flex" style="justify-content: space-between;">
				<text class="section-title">乘车人</text>
				<text style="font-size: 24rpx;" @click="goNav('/my/classes/adddetailsList?type=add')">+ 新增乘车人</text>
			</view>
			<view v-if="selectdata.length > 0">
				<view class="flex align-center" style="padding: 15rpx 30rpx;" v-for="(item, index) in selectdata" :key="index">
					<!-- 显示头像 -->
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/chengcheren.png'" style="width: 70rpx;height: 70rpx;" mode=""></image>
					</view>
					<!-- 显示姓名和身份证号 -->
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view>{{ item.name }}</view>
						<view style="color: #999;">{{ item.idCard }}</view>
					</view>
				</view>
			</view>
			<view v-else style="width: 100%; display: flex; justify-content: center;margin: 30rpx;">
				<image v-if="globalImages" :src="globalImages + 'images/kong.png'" style="width: 230rpx;height: 180rpx;" mode=""></image>
			</view>
			<view class="section" style="margin-top: 20rpx;">
				<text class="section-title">联系人手机</text>
				<view class="phone">138****1234</view>
			</view>
		</view>

		<!-- 座位选择 -->
		<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx; margin-top: 20rpx;">
			<text class="section-title">座位选择</text>
			<view class="seat-options">
				<view class="seat-item" :class="{active: seatType === 'single'}">
					<text>单座</text>
				</view>
				<view class="seat-item active">
					<text>多座</text>
				</view>
				<view class="seat-item" :class="{active: seatType === 'charter'}">
					<text>包车</text>
				</view>
			</view>
			<view class="section">
				<text class="section-title">司机位置</text>
				<view class="driver-grid">
					<view v-for="num in 11" :key="num" class="driver-seat" :class="{
			    selected: selectedSeat === num,
			    disabled: num > 6
			  }">
						<text>{{ num }}</text>
					</view>
				</view>
				<view class="seat-status">
					<text>37 / 62 可选 已选 不可选</text>
				</view>
			</view>
		</view>

		<!-- 附加服务 -->
		<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
			<text class="section-title">附加服务</text>
			<view >
				<view>备注</view>
				<view style="color: #999;font-size: 24rpx;">如有特殊要求请说明</view>
			</view>
			<view class="service-item">
				<view class="">
					<view>携带宠物</view>
					<view style="color: #999;font-size: 24rpx;">需提前告知司机</view>
				</view>
				<view class="">
					123123
				</view>
			</view>
			<view class="service-item">
				<view class="">
					<view>使用优惠券</view>
				</view>
				<view style="color: #999;font-size: 24rpx;">
					选择优惠券<text class="arrow" style="margin-left: 10rpx;">></text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<button class="submit-btn">提交订单</button>
		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				busInfo: {}, // 存储接收到的班车数据
				stations: [{
						name: '合肥南站',
						time: '08:30'
					},
					{
						name: '嘉兴南站',
						time: '09:05'
					},
					{
						name: '上海虹桥',
						time: '09:35'
					}
				],
				seatType: 'multiple',
				selectedSeat: 2,
				globalImages: '',
				selectdata: [],
			}
		},
		onLoad(options) {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			// 方式1：通过本地存储获取
			const busData = uni.getStorageSync('selectedBus')
			this.busInfo = busData
			console.log('本地存储数据:', busData, this.busInfo)
			
			this.fetchPassengerList(); // 初始化加载一次
			
			  uni.$on('refreshPassengerList', () => {
				this.fetchPassengerList(); // 被添加页通知时刷新
			  });
		},
		onUnload() {
		  uni.$off('refreshPassengerList'); // 销毁监听，避免重复绑定
		},
		methods: {
			fetchPassengerList() {
			    this.$Request.getT('/app/passenger/selectList').then(res => {
			      if (res.code === 0) {
			        this.selectdata = res.data;
			      }
			    });
		    },
			goNav(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let token = this.$queue.getData("token");
				if (token) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.bindlogin();
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		margin: 30rpx;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.sub-title {
		font-size: 28rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.station-list {
	}

	.station-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.station-item:last-child {
		border-bottom: none;
	}

	.divider {
		height: 20rpx;
		background: #f8f8f8;
		margin: 40rpx -30rpx;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
		
	}

	.phone {
		height: 80rpx;
		background: #f5f5f5;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #333;
		border-radius: 14rpx;
		border: 1rpx solid #e4e7ed;
		padding-left: 20rpx;
	}

	.seat-options {
		display: flex;
		gap: 20rpx;
	}

	.seat-item {
		border: 1rpx solid #ddd;
		padding: 12rpx 30rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.seat-item.active {
		border-color: #fe6b01;
		background: #fff5f0;
		color: #fe6b01;
	}

	.driver-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 20rpx;
	}

	.driver-seat {
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.driver-seat.selected {
		border-color: #fe6b01;
		background: #fff5f0;
		color: #fe6b01;
	}

	.driver-seat.disabled {
		background: #f8f8f8;
		color: #ccc;
		border-color: #eee;
	}

	.seat-status {
		margin-top: 30rpx;
		color: #999;
		font-size: 24rpx;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		font-size: 32rpx;
	}

	.arrow {
		font-size: 32rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.submit-btn {
		background: #fe6b01;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>