feat(预约系统): 添加客服备注功能及样式

- 在公告页面和预约管理页面添加客服备注功能
- 为客服备注添加专用样式区分于客户备注
- 实现通过模态框编辑和保存客服备注的AJAX功能
- 将原备注字段明确标记为客户备注

announcement.php

@@ -245,6 +245,29 @@ try {
             font-size: 0.9rem;
         }
         
+        /* 客服备注样式 */
+        .service-notes {
+            margin-top: 12px;
+            padding: 12px;
+            background-color: #f8f9fa;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+
+        .service-notes h4 {
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: #007bff;
+        }
+
+        .service-notes p {
+            margin: 0;
+            font-size: 13px;
+            color: #495057;
+            line-height: 1.5;
+        }
+        
         .no-bookings {
             text-align: center;
             padding: 60px 20px;
@@ -353,9 +376,6 @@ try {
                             if (!empty($booking['services'])) {
                                 $services = explode(',', $booking['services']);
                             }
-                            if (!empty($booking['custom_services'])) {
-                                $services[] = $booking['custom_services'];
-                            }
                         ?>
                         <div class="booking-card <?php echo $card_class; ?>">
                             <div class="booking-time">
@@ -410,11 +430,19 @@ try {
                                         </ul>
                                     </div>
                                 <?php endif; ?>
+                                 
+                                <!-- 客服备注 -->
+                                <?php if (!empty($booking['custom_services'])): ?>
+                                    <div class="service-notes">
+                                        <h4>客服备注：</h4>
+                                        <p><?php echo htmlspecialchars($booking['custom_services']); ?></p>
+                                    </div>
+                                <?php endif; ?>
                                 
                                 <!-- 备注信息 -->
                                 <?php if (!empty($booking['notes'])): ?>
                                     <div class="detail-row">
-                                        <span class="detail-label">备注</span>
+                                        <span class="detail-label">客户备注</span>
                                         <span class="detail-value"><?php echo htmlspecialchars($booking['notes']); ?></span>
                                     </div>
                                 <?php endif; ?>

bookings.php

@@ -25,6 +25,13 @@ if (isset($_POST['action']) && isset($_POST['booking_id'])) {
             $stmt = $pdo->prepare("UPDATE bookings SET start_time = ?, end_time = ? WHERE id = ?");
             $stmt->execute([$new_start_time, $new_end_time, $booking_id]);
             $success_message = '预约时间更新成功！';
+        } elseif ($action == 'update_notes' && isset($_POST['notes_content'])) {
+            // 更新客服备注
+            $notes_content = $_POST['notes_content'];
+            $stmt = $conn->prepare("UPDATE bookings SET custom_services = ? WHERE id = ?");
+            $stmt->execute([$notes_content, $booking_id]);
+            echo 'success';
+            exit();
         }
     } catch (Exception $e) {
         $error_message = '更新失败：' . $e->getMessage();
@@ -214,10 +221,24 @@ try {
 
                         <?php if ($booking['notes']): ?>
                             <div class="package-description">
-                                <span class="detail-label">备注：</span>
+                                <span class="detail-label">客户备注：</span>
                                 <span><?php echo htmlspecialchars($booking['notes']); ?></span>
                             </div>
                         <?php endif; ?>
+                        
+                        <?php if ($booking['custom_services']): ?>
+                            <div class="package-description">
+                                <span class="detail-label">客服备注：</span>
+                                <span><?php echo htmlspecialchars($booking['custom_services']); ?></span>
+                                <button type="button" class="btn btn-sm btn-secondary" onclick="openEditNotesModal(<?php echo $booking['id']; ?>, '<?php echo addslashes(htmlspecialchars($booking['custom_services'])); ?>')" style="margin-left: 10px;">修改</button>
+                            </div>
+                        <?php else: ?>
+                            <div class="package-description">
+                                <span class="detail-label">客服备注：</span>
+                                <span style="color: #999;">无</span>
+                                <button type="button" class="btn btn-sm btn-secondary" onclick="openEditNotesModal(<?php echo $booking['id']; ?>, '')" style="margin-left: 10px;">添加</button>
+                            </div>
+                        <?php endif; ?>
 
                         <div class="package-meta">
                             <span>预约时间：<?php echo $booking['created_at']; ?></span>
@@ -262,6 +283,27 @@ try {
             <a href="index.php" class="btn">返回预约页面</a>
         </div>
     </div>
+
+    <!-- 编辑客服备注模态框 -->
+    <div id="editNotesModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
+        <div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+            <div class="modal-header">
+                <h3>编辑客服备注</h3>
+                <span class="close-modal" onclick="closeEditNotesModal()">&times;</span>
+            </div>
+            <form id="editNotesForm">
+                <input type="hidden" id="editNotesBookingId" name="booking_id">
+                <div class="form-group">
+                    <label for="editNotesContent">客服备注内容：</label>
+                    <textarea id="editNotesContent" name="notes_content" rows="5" placeholder="请输入客服备注内容..." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"></textarea>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-sm" onclick="closeEditNotesModal()">取消</button>
+                    <button type="submit" class="btn btn-sm btn-primary">保存</button>
+                </div>
+            </form>
+        </div>
+    </div>
     
     <!-- 修改预约时间模态框 -->
     <div id="editTimeModal" class="modal">
@@ -473,15 +515,56 @@ try {
         document.getElementById('editTimeModal').style.display = 'none';
     }
     
+    // 编辑客服备注相关函数
+    function openEditNotesModal(bookingId, notesContent) {
+        document.getElementById('editNotesBookingId').value = bookingId;
+        document.getElementById('editNotesContent').value = notesContent;
+        document.getElementById('editNotesModal').style.display = 'block';
+    }
+    
+    function closeEditNotesModal() {
+        document.getElementById('editNotesModal').style.display = 'none';
+    }
+    
     // 点击模态框外部关闭模态框
     window.onclick = function(event) {
         const modal = document.getElementById('editTimeModal');
+        const notesModal = document.getElementById('editNotesModal');
         if (event.target == modal) {
             closeEditModal();
+        } else if (event.target == notesModal) {
+            closeEditNotesModal();
         }
     }
     
-    // 表单提交处理 - 使用AJAX
+    // 编辑客服备注表单提交处理 - 使用AJAX
+    document.getElementById('editNotesForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        
+        const bookingId = document.getElementById('editNotesBookingId').value;
+        const notesContent = document.getElementById('editNotesContent').value;
+        
+        // 创建AJAX请求
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', 'bookings.php', true);
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        xhr.onload = function() {
+            if (xhr.status === 200) {
+                // 刷新页面以显示更新后的备注
+                window.location.reload();
+            } else {
+                alert('保存失败，请重试');
+            }
+        };
+        xhr.onerror = function() {
+            alert('网络错误，请重试');
+        };
+        
+        // 发送请求
+        xhr.send('action=update_notes&booking_id=' + bookingId + '&notes_content=' + encodeURIComponent(notesContent));
+    });
+    
+    // 修改预约时间表单提交处理 - 使用AJAX
     document.getElementById('editTimeForm').addEventListener('submit', function(event) {
         event.preventDefault();