yueche_app/pages/home/home.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/home/banner.png" mode="aspectFill" />
		<view class="title" :style="{ top: `${paddingTop * 2}rpx` }"></view>
		<image class="people" src="@/static/images/home/people.png" mode="aspectFill" />

		<!-- 选择时间路线区域 -->
		<view class="path">
			<view class="path_box">
				<view>选择日期</view>
				<view class="box_time" @click="chooseDate">
					<wd-icon name="warning" color="#707070" size="10" />
					<view class="time" :class="currentTime ? '' : 'novalue'">
						<!-- 2025-8月-14日 星期五 -->
						{{ currentTime ? currentTime : '请选择日期' }}
					</view>
					<wd-icon name="calendar" color="#707070" size="26" />
				</view>
				<view>选择路线</view>

				<view
					v-for="(item, index) in pathList"
					:key="index"
					class="box_line"
					:class="currentIndex === index ? 'active' : ''"
					@click="handleChangeCurrentIndex(index, item)"
				>
					<image v-if="index % 2 === 1" style="width: 28rpx; height: 28rpx; margin-right: 20rpx" src="@/static/images/home/address.png" mode="aspectFill" />
					<image v-else style="width: 28rpx; height: 28rpx; margin-right: 20rpx" src="@/static/images/home/address2.png" mode="aspectFill" />
					{{ item.route }}
				</view>
			</view>
		</view>

		<!-- 选择车辆区域 -->
		<view class="car">
			选择车辆
			<view class="car_list">
				<!-- 每一个车辆区域 -->
				<view v-for="(item, index) in busList" :key="index" :class="{ 'car_box': true, 'car_box1': item.isExpired,'car_box2': !item.isExpired  }" @click="handleClickItem(item)"> 
					<view class="box_top">
						<view class="top_time">{{item.ci_time}}</view>
						<image class="top-line" src="../../static/images/home/line.png"></image>
						<view class="top_info">
							<view :class="{ 'info_box': true, 'top': index2 > 0 }"  v-for="(item2, index2) in getRouteParts(item.route_end)" :key="index2">{{item2}}</view>
							<!-- <view class="info_box top">{{getRouteParts(item.route_end).suffix}}</view> -->
						</view>
						<view class="top_msg">   
							<view class="msg_price">
								¥
								<text class="text">{{ item.price }}</text>
							</view>

							<view class="msg_num">剩余{{ item.contain - item.boarde_num }}座</view>
						</view>
					</view>

					<image class="top-line2" src="../../static/images/home/line-bu.png" v-if="item.isExpired==false"></image>
					<view class="box_bottom">   
						<view class="bottom_box">6点30分起售</view>

						<view class="bottom_box">车牌：{{ item.car_number }}</view>

						<view class="bottom_box">容量：{{ item.contain }}座</view>
					</view>
				</view>
			</view>

			<view v-if="!busList.length">
				<wd-status-tip image="content" tip="暂无数据" />
			</view>
		</view>

		<!-- 温馨提示区域 -->
		<view class="box_info">
			<view class="info_title">温馨提示</view>
			<view class="info_detail">
				预约截止时间为发车前{{ yy_end }}分钟，车队长联系方式：
				<span @click="handlePhone('13576937506')">13576937506</span>
				，技术支持联系方式：
				<span @click="handlePhone(`0791 - 82293574`)">0791-82293574</span>
				，候补功能仅当日开放。
			</view>
		</view>
	</view>

	<!-- 授权手机号 -->
	<AuthorizePopup :show="show" @close="handleClose" />
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { myRequest } from '@/utils/api.ts'
import dayjs from 'dayjs'

const show = ref(false)

// 胶囊按钮距离页面顶部的距离
const paddingTop = ref(0)

// 用户信息
const userInfo = uni.getStorageSync('carUserInfo')

// 当前日期
const currentTime = ref('')

// 发车路线列表
const pathList = ref([])
// 当前发车路线
const currentPath = ref(null)
// 当前路线
const currentIndex = ref(0)
// 发车车辆列表
const busList = ref([])

// 预约截止时间
const yy_end = ref(0)

// 截取箭头前后的文字
const getRouteParts = (str) => {
	if (typeof str === 'string' && str.length > 0) {
		return str.split('→');
	}
	
	return [];
  // if (str && typeof str === 'string') {
  //   const parts = str.split('→').slice(1); // 分割后取第2个及以后的元素
  //   // return {
  //   //   prefix: parts[0] || '', // 箭头前的文字
  //   //   suffix: parts[parts.length - 1] || ''  // 箭头最后的文字 
  //   // };
  // }
  // return { prefix: '', suffix: '' };
};

// 获取预约时间段数据
async function getOrderConfig() {
	const res = await myRequest({
		url: '/appqueryConfig.action'
	})
	// console.log(res)
	yy_end.value = res.data.data.yy_end || 0
}

// 根据路线查询所有车次
async function getBusList(route) {
	const res = await myRequest({
		url: '/tAppqueryCarNums.action',
		data: {
			date: currentTime.value,
			route: route || currentPath.value,
			mobile: userInfo.mobile
		}
	})
	// console.log(res)
	// ... 在获取到 res 数据之后
	if (res.data && res.data.data) {
	  res.data.data.forEach(item => {
	    // 1. 拼接目标时间字符串
	    const targetDateStr = `${item.s_date} ${item.yy_end}`;
	    
	    // 2. 转换为时间戳并比较
	    const targetTimestamp = new Date(targetDateStr).getTime();
	    const nowTimestamp = new Date().getTime();
	    
	    // 3. 添加判断后的参数到 item 对象中
	    // 这里我们添加一个叫 isExpired 的布尔值
	    item.isExpired = nowTimestamp > targetTimestamp;
	  }); 
	  busList.value = res.data.data || []
	  console.log(busList.value,'车次')
	}
	
}

// 获取所有的发车路线
async function getPathList() {
	const res = await myRequest({
		url: '/appqueryRoute.action'
	})
	// console.log(res)
	pathList.value = res.data.data || []
	if (pathList.value.length) {
		currentPath.value = pathList.value[0]?.route
		getBusList(currentPath.value)
	}
}

onMounted(() => {
	const bus_date = uni.getStorageSync('bus_date')
	if (bus_date) {
		currentTime.value = bus_date
	} else {
		currentTime.value = dayjs(Date.now()).format('YYYY-MM-DD')
	}
	paddingTop.value = uni.getMenuButtonBoundingClientRect().top
	getOrderConfig()
	getPathList()
})

onLoad(() => {
	// uni.removeStorageSync('bus_date')
})

// 选择路线回调
function handleChangeCurrentIndex(index, item) {
	currentIndex.value = index
	currentPath.value = item.route
	getBusList(currentPath.value)
}

// 点击跳转选择日期
function chooseDate() {
	uni.navigateTo({
		url: '/pages/date/date'
	})
}

// 点击每一个车辆的回调
function handleClickItem(item) {
	const info = encodeURIComponent(JSON.stringify(item),'l')
	uni.navigateTo({
		url: `/pages/chooseCar/chooseCar?info=${info}`  
	})
}

// 点击拨打电话回调
function handlePhone(phoneNumber) {
	uni.makePhoneCall({
		phoneNumber
	})
}



const handleClose = () => {
	show.value = false
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100%;

	.banner {
		width: 100%;
		height: 680rpx;
	}

	.title {
		position: absolute;
		left: 314rpx;
		font-size: 40rpx;
		color: #001713;
	}

	.people {
		position: absolute;
		top: 274rpx;
		right: 18rpx;
		width: 234rpx;
		height: 298rpx;
	}

	.path {
		display: flex;
		margin: -266rpx auto 0;
		width: 706rpx;
		height: 410rpx;
		background: url(@/static/images/home/box.png);
		background-size: 100% 100%;

		.path_box {
			margin-top: 48rpx;
			margin-left: 50rpx;
			color: #707070;
			font-size: 24rpx;

			.box_time {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				margin-bottom: 14rpx;
				height: 64rpx;
				color: #001713;
				font-size: 28rpx;
				font-weight: bold;
				border-bottom: 2rpx solid #ebecf1;

				.time {
					margin: 0 56rpx 0 10rpx;
				}

				.novalue {
					color: #707070;
				}
			}

			.box_line {
				display: flex;
				align-items: center;
				height: 76rpx;
				font-size: 28rpx;
			}

			.active {
				color: #001713;
				font-weight: bold;
				transform: scale(1.08);
			}
		}
	}

	.car {
		margin: auto;
		width: 700rpx;
		color: #001713;
		font-size: 24rpx;

		.car_list {
			margin-top: 20rpx;

			.car_box1{
				/* 背景色调：浅灰色系，可根据需求微调 */
				  background-color: rgba(0, 0, 0, 0.1);    
				  /* 阴影：轻微立体感，参数为 水平偏移 垂直偏移 模糊度 扩散度 颜色 */
				  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
				  /* 可选：圆角优化视觉 */
				  border-radius: 8px;    
			}
			.car_box2{
				background-color: #FFFFFF;
			}
			.car_box {
				box-sizing: border-box;
				padding: 34rpx 34rpx 0;
				margin-bottom: 20rpx;
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
				// background: url(@/static/images/home/car-box.png);
				background-size: 100% 100%;

				.box_top {
					display: flex;
					align-items: center;
					// height: 110rpx;

					.top_time {
						margin-top: -30rpx;
						margin-right: 76rpx;
						font-size: 44rpx;
					}
					.top-line{
						width: 7px;
						height: 34px;
						background-size: 100%;
					}

					.top_info {
						margin-left: 2px;
						height: 100%;
						font-size: 28rpx;

						.info_box {
							width: 320rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.top {
							margin-top: 8rpx; 
						}
					}

					.top_msg {
						// margin-left: 8rpx; 
						height: 100%;
						color: #f86818;

						.msg_price {
							margin-top: -15rpx;
							font-size: 28rpx;

							.text {
								font-size: 48rpx;
							}
						}

						.msg_num {
							margin-top: 8rpx;
						}
					}
				}
				.top-line2{
					margin-left: -20px;
					width: 114%;
					height: 17px; 
					background-size: 100%; 
				}

				.box_bottom {
					display: flex;
					align-items: center;
					height: 58rpx;
					color: #f86818;

					.bottom_box {
						margin-right: 65rpx;
					}
				}
			}
		}
	}

	.box_info {
		padding: 30rpx 30rpx 40rpx;

		.info_title {
			height: 41rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.info_detail {
			margin-top: 5rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}
}
</style>