feat(预约系统): 添加日期详情弹窗功能并优化预约检查逻辑

- 在日历中添加点击日期显示详细预约信息的功能
- 实现按日期组织的预约数据查询和展示
- 添加CSS样式支持详情弹窗的显示效果
- 改进时间段检查逻辑，基于实际预约数据判断可用性

index.php

@@ -100,8 +100,31 @@ $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 // 将结果转换为键值对格式（日期 => 预约数量）
 $booking_schedule = [];
+$booking_details = []; // 存储详细的预约信息
 foreach ($results as $row) {
     $booking_schedule[$row['date']] = $row['booking_count'];
+    $booking_details[$row['date']] = $row['bookings'];
+}
+
+// 获取具体的时间段预约信息供JavaScript使用
+$stmt2 = $pdo->prepare("SELECT DATE(start_time) as date,
+                               TIME_FORMAT(start_time, '%H:%i') as start_time,
+                               TIME_FORMAT(end_time, '%H:%i') as end_time,
+                               status,
+                               customer_name,
+                               car_model,
+                               car_number
+                        FROM bookings 
+                        WHERE DATE(start_time) BETWEEN ? AND ? 
+                        AND status != '已取消'
+                        ORDER BY date, start_time");
+$stmt2->execute([$start_date, $end_date]);
+$all_bookings = $stmt2->fetchAll(PDO::FETCH_ASSOC);
+
+// 按日期组织预约数据
+$bookings_by_date = [];
+foreach ($all_bookings as $booking) {
+    $bookings_by_date[$booking['date']][] = $booking;
 }
 
 // 获取套餐信息用于JavaScript
@@ -163,7 +186,8 @@ $packages_json = json_encode(array_map(function($package) {
                         $status_text = $is_full ? '已满' : ($booking_count > 0 ? '繁忙' : '可预约');
                     ?>
                         <div class="calendar-day <?= $status_class ?> <?= $is_today ? 'today' : '' ?>" 
-                             data-date="<?= $date ?>" onclick="selectDate('<?= $date ?>')">
+                             data-date="<?= $date ?>" 
+                             onclick="showDateDetails('<?= $date ?>')">
                             <div class="day-number"><?= $date_display ?></div>
                             <div class="day-week">周<?= $weekday ?></div>
                             <div class="day-status"><?= $status_text ?></div>
@@ -297,6 +321,7 @@ $packages_json = json_encode(array_map(function($package) {
     <script>
         const packages = <?= $packages_json ?>;
         const bookingSchedule = <?= json_encode($booking_schedule) ?>;
+        const bookingsByDate = <?= json_encode($bookings_by_date) ?>;
         let selectedDate = null;
         let selectedTime = null;
         let selectedDuration = 60;
@@ -329,6 +354,37 @@ $packages_json = json_encode(array_map(function($package) {
             }
         });
 
+        function showDateDetails(date) {
+            // 显示该日期的预约详情弹窗
+            const modal = document.getElementById('dateModal');
+            const modalDate = document.getElementById('modalDate');
+            const modalBody = document.getElementById('modalBody');
+            
+            // 设置弹窗标题
+            const dateObj = new Date(date);
+            const dateStr = dateObj.toLocaleDateString('zh-CN', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                weekday: 'long'
+            });
+            modalDate.textContent = dateStr;
+            
+            // 获取并显示预约详情
+            const details = getBookingDetailsForDate(date);
+            modalBody.innerHTML = details;
+            
+            // 显示弹窗
+            modal.style.display = 'block';
+            
+            // 同时选择该日期用于预约
+            selectDate(date);
+        }
+
+        function closeModal() {
+            document.getElementById('dateModal').style.display = 'none';
+        }
+
         function selectDate(date) {
             selectedDate = date;
             document.getElementById('appointment_date').value = date;
@@ -376,9 +432,44 @@ $packages_json = json_encode(array_map(function($package) {
         }
 
         function checkTimeSlotBooked(date, time) {
-            // 这里需要根据实际的预约数据检查时间段是否被占用
-            // 简化实现，实际应该查询数据库
-            return false;
+            // 检查指定时间段是否已被预约
+            const bookings = bookingsByDate[date] || [];
+            for (let booking of bookings) {
+                const bookingStart = booking.start_time;
+                const bookingEnd = booking.end_time;
+                
+                // 检查当前时间段是否与已有预约重叠
+                if (time >= bookingStart && time < bookingEnd) {
+                    return true; // 该时间段已被预约
+                }
+            }
+            return false; // 该时间段可用
+        }
+
+        function getBookingDetailsForDate(date) {
+            // 获取指定日期的所有预约详情
+            const bookings = bookingsByDate[date] || [];
+            let details = '';
+            
+            if (bookings.length === 0) {
+                return '<p>该日期暂无预约</p>';
+            }
+            
+            details += `<h4>当日预约情况 (共${bookings.length}个预约):</h4>`;
+            bookings.forEach((booking, index) => {
+                details += `
+                    <div class="booking-detail-item">
+                        <div class="booking-time">${booking.start_time} - ${booking.end_time}</div>
+                        <div class="booking-info">
+                            <strong>客户:</strong> ${booking.customer_name} | 
+                            <strong>车辆:</strong> ${booking.car_model} (${booking.car_number}) | 
+                            <strong>状态:</strong> <span class="status-${booking.status}">${booking.status}</span>
+                        </div>
+                    </div>
+                `;
+            });
+            
+            return details;
         }
 
         function selectTimeSlot(time) {

style.css

@@ -647,6 +647,43 @@ body {
     padding: var(--el-spacing-large);
 }
 
+.booking-detail-item {
+    background: var(--el-bg-color-light);
+    border: 1px solid var(--el-border-lighter);
+    border-radius: var(--el-border-radius-base);
+    padding: var(--el-spacing-base);
+    margin-bottom: var(--el-spacing-base);
+}
+
+.booking-time {
+    font-weight: 600;
+    color: var(--el-text-primary);
+    margin-bottom: var(--el-spacing-small);
+    font-size: var(--el-font-size-medium);
+}
+
+.booking-info {
+    color: var(--el-text-regular);
+    font-size: var(--el-font-size-base);
+    line-height: 1.5;
+}
+
+.status-已确认 {
+    color: var(--el-color-success);
+}
+
+.status-进行中 {
+    color: var(--el-color-warning);
+}
+
+.status-已完成 {
+    color: var(--el-color-info);
+}
+
+.status-已取消 {
+    color: var(--el-color-danger);
+}
+
 /* 表格样式 */
 .table {
     width: 100%;