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" @click="handleClickItem(item)">
					<view class="box_top">
						<view class="top_time">14:50</view>
						<view class="top_info">
							<view class="info_box">南昌交通学院墨轩湖校区</view>
							<view class="info_box top">南昌火车站</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>

					<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)

// 获取预约时间段数据
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?.phone || ''
		}
	})
	// console.log(res)
	busList.value = res.data.data || []
}

// 获取所有的发车路线
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))
	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_box {
				box-sizing: border-box;
				padding: 34rpx 34rpx 0;
				margin-bottom: 20rpx;
				width: 100%;
				height: 222rpx;
				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_info {
						height: 100%;
						font-size: 28rpx;

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

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

					.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;
						}
					}
				}

				.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>