feat(预约管理): 添加预约信息复制功能和改进待处理预约界面

- 在 bookings.php 中添加复制预约信息按钮和功能
- 重构 pending_bookings.php 界面，添加预约记录选择器
- 优化待处理预约的显示逻辑，默认高亮第一条记录
- 移除不再使用的复制信息相关代码

pending_bookings.php

@@ -201,6 +201,12 @@ try {
             overflow: hidden;
         }
         
+        .pending-card.selected-card {
+            background: #e3f2fd;
+            border: 2px solid #2196f3;
+            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
+        }
+        
         .pending-header {
             background: #f5f5f5;
             padding: 15px 20px;
@@ -288,26 +294,6 @@ try {
             margin: 20px 0;
         }
         
-        .copy-message {
-            background: #fff;
-            border: 1px solid #ddd;
-            padding: 10px;
-            border-radius: 4px;
-            margin-top: 10px;
-            font-family: monospace;
-            white-space: pre-wrap;
-        }
-        
-        .copy-btn {
-            background: #28a745;
-            color: white;
-            padding: 5px 10px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        
         .status-badge {
             padding: 5px 10px;
             border-radius: 12px;
@@ -320,6 +306,50 @@ try {
             color: #212529;
         }
         
+        /* 预约记录选择器样式 */
+        .submission-selector {
+            margin-bottom: 20px;
+        }
+        
+        .submission-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        
+        .submission-item {
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            padding: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .submission-item:hover {
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            border-color: #007bff;
+        }
+        
+        .submission-item.selected-item {
+            background: #e3f2fd;
+            border-color: #2196f3;
+            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
+        }
+        
+        .submission-info h4 {
+            margin: 0 0 10px 0;
+            color: #333;
+        }
+        
+        .submission-meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            color: #666;
+            font-size: 14px;
+        }
+        
         /* 日历和时间选择样式 */
         .calendar-container {
             margin-bottom: 20px;
@@ -538,17 +568,7 @@ try {
             </div>
         <?php endif; ?>
         
-        <!-- 预约成功信息显示 -->
-        <?php if (isset($_SESSION['booking_success_msg'])): ?>
-            <div class="booking-success">
-                <h3>预约成功信息已生成</h3>
-                <div class="copy-message" id="successMessage">
-                    <?php echo htmlspecialchars($_SESSION['booking_success_msg']); ?>
-                </div>
-                <button class="copy-btn" onclick="copyMessage()">复制信息</button>
-            </div>
-            <?php unset($_SESSION['booking_success_msg']); ?>
-        <?php endif; ?>
+
         
         <div class="card">
             <h2>待处理预约 (共 <?php echo count($pending_submissions); ?> 条)</h2>
@@ -556,8 +576,31 @@ try {
             <?php if (empty($pending_submissions)): ?>
                 <div class="empty-message">暂无待处理的预约请求</div>
             <?php else: ?>
+                <!-- 无论记录数量多少，都显示选择列表 -->
+                <?php if (true): ?>
+                    <div class="submission-selector">
+                        <h3>选择要处理的预约记录</h3>
+                        <div class="submission-list">
+                            <?php foreach ($pending_submissions as $submission): ?>
+                                <div class="submission-item" onclick="selectSubmission(<?php echo $submission['id']; ?>)">
+                                    <div class="submission-info">
+                                        <h4><?php echo htmlspecialchars($submission['name']); ?></h4>
+                                        <div class="submission-meta">
+                                            <span>手机号：<?php echo htmlspecialchars($submission['mobile']); ?></span>
+                                            <span>车牌号：<?php echo htmlspecialchars($submission['license_plate']); ?></span>
+                                            <span>提交时间：<?php echo htmlspecialchars($submission['create_time']); ?></span>
+                                        </div>
+                                    </div>
+                                    <span class="status-badge status-pending">待处理</span>
+                                </div>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+                <?php endif; ?>
+                
+                <!-- 显示选中的预约记录的处理表单 -->
                 <?php foreach ($pending_submissions as $submission): ?>
-                    <div class="pending-card">
+                    <div class="pending-card" id="submission_<?php echo $submission['id']; ?>" style="display: none;">
                         <div class="pending-header">
                             <h3><?php echo htmlspecialchars($submission['name']); ?> 的预约请求</h3>
                             <span class="status-badge status-pending">待处理</span>
@@ -715,18 +758,36 @@ try {
     </div>
     
     <script>
-        // 复制预约成功信息到剪贴板
-        function copyMessage() {
-            const message = document.getElementById('successMessage');
-            const textArea = document.createElement('textarea');
-            textArea.value = message.textContent;
-            document.body.appendChild(textArea);
-            textArea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textArea);
+
+        
+        // 选择预约记录函数（提前定义，确保在调用前可用）
+        function selectSubmission(submissionId) {
+            // 隐藏所有待处理预约卡片并移除高亮
+            document.querySelectorAll('.pending-card').forEach(card => {
+                card.style.display = 'none';
+                card.classList.remove('selected-card');
+            });
             
-            // 显示复制成功提示
-            alert('预约信息已复制到剪贴板！');
+            // 移除选择列表中所有项的高亮
+            document.querySelectorAll('.submission-item').forEach(item => {
+                item.classList.remove('selected-item');
+            });
+            
+            // 显示选中的预约卡片并添加高亮
+            const selectedCard = document.getElementById(`submission_${submissionId}`);
+            if (selectedCard) {
+                selectedCard.style.display = 'block';
+                selectedCard.classList.add('selected-card');
+            }
+            
+            // 为选择列表中对应的项添加高亮
+            const submissionItems = document.querySelectorAll('.submission-item');
+            submissionItems.forEach(item => {
+                // 查找包含当前submissionId的点击事件
+                if (item.onclick && item.onclick.toString().includes(`selectSubmission(${submissionId})`)) {
+                    item.classList.add('selected-item');
+                }
+            });
         }
         
         // 工作时间设置
@@ -741,24 +802,34 @@ try {
         
         // 页面加载时初始化所有预约的日期、时间和套餐信息
         document.addEventListener('DOMContentLoaded', function() {
+            <?php $firstSubmissionId = null; ?>
             <?php foreach ($pending_submissions as $submission): ?>
+                <?php if ($firstSubmissionId === null) $firstSubmissionId = $submission['id']; ?>
                 // 初始化日期
                 selectDate(<?php echo $submission['id']; ?>, '<?php echo date('Y-m-d'); ?>');
                 
                 // 初始化默认套餐信息（如果有默认选择的话）
-                const packageSelect = document.getElementById('selected_package_<?php echo $submission['id']; ?>');
-                if (packageSelect.value) {
-                    updatePackageInfo(<?php echo $submission['id']; ?>);
-                } else if (packageSelect.options.length > 1) {
-                    // 默认选择第一个套餐
-                    packageSelect.selectedIndex = 1;
-                    updatePackageInfo(<?php echo $submission['id']; ?>);
-                }
+                (function() {
+                    let packageSelectElem = document.getElementById('selected_package_<?php echo $submission['id']; ?>');
+                    if (packageSelectElem.value) {
+                        updatePackageInfo(<?php echo $submission['id']; ?>);
+                    } else if (packageSelectElem.options.length > 1) {
+                        // 默认选择第一个套餐
+                        packageSelectElem.selectedIndex = 1;
+                        updatePackageInfo(<?php echo $submission['id']; ?>);
+                    }
+                })();
+
             <?php endforeach; ?>
+            
+            // 默认显示并高亮第一条记录
+            <?php if ($firstSubmissionId !== null): ?>
+                selectSubmission(<?php echo $firstSubmissionId; ?>);
+            <?php endif; ?>
         });
-        
-        // 选择日期
-        function selectDate(submissionId, date) {
+      
+      // 选择日期
+      function selectDate(submissionId, date) {
             const calendarGrid = document.getElementById('calendarGrid_' + submissionId);
             const timeGrid = document.getElementById('timeGrid_' + submissionId);
             const selectedDateInput = document.getElementById('selected_date_' + submissionId);
@@ -996,9 +1067,9 @@ try {
             let form = null;
             
             // 方式1：通过套餐选择元素获取表单
-            const packageSelect = document.getElementById('selected_package_' + submissionId);
-            if (packageSelect) {
-                form = packageSelect.closest('form');
+            const packageSelectForm = document.getElementById('selected_package_' + submissionId);
+            if (packageSelectForm) {
+                form = packageSelectForm.closest('form');
                 console.log('Form found via packageSelect:', form ? 'Yes' : 'No');
             }