feat(预约系统): 添加套餐专属预约信息功能并优化复制逻辑

- 在SQL查询中添加package_reminder字段
- 重构复制按钮使用data属性存储预约信息
- 实现套餐专属预约信息的单独保存功能
- 优化复制功能以包含套餐专属提醒信息
- 添加套餐专属预约信息的实时编辑功能

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 = $pdo->prepare("UPDATE bookings SET custom_services = ? WHERE id = ?");
+            $stmt->execute([$notes_content, $booking_id]);
+            echo 'success';
+            exit();
         }
     } catch (Exception $e) {
         $error_message = '更新失败：' . $e->getMessage();
@@ -34,7 +41,7 @@ if (isset($_POST['action']) && isset($_POST['booking_id'])) {
 // 获取所有预约，支持状态筛选和搜索功能
 try {
     // 构建查询，支持筛选和搜索
-    $query = "SELECT b.*, p.package_name FROM bookings b LEFT JOIN packages p ON b.package_id = p.id WHERE 1=1 ";
+    $query = "SELECT b.*, p.package_name, p.package_reminder FROM bookings b LEFT JOIN packages p ON b.package_id = p.id WHERE 1=1 ";
     $params = [];
     
     // 状态筛选
@@ -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 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']; ?>, '<?php echo htmlspecialchars($booking['custom_services']); ?>')" style="margin-left: 10px;">添加</button>
+                            </div>
+                        <?php endif; ?>
 
                         <div class="package-meta">
                             <span>预约时间：<?php echo $booking['created_at']; ?></span>
@@ -251,7 +272,19 @@ try {
                             // 获取车友备注（如果不存在则为空字符串）
                             $notes = $booking['notes'] ?? '';
                             ?>
-                            <button type="button" class="btn btn-sm btn-copy" onclick="copyMessage(<?php echo $booking['id']; ?>, '<?php echo htmlspecialchars($booking['customer_name']); ?>', '<?php echo htmlspecialchars($booking['phone']); ?>', '<?php echo htmlspecialchars($booking['car_model']); ?>', '<?php echo htmlspecialchars($booking['car_number']); ?>', '<?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?>', '<?php echo date('Y-m-d', strtotime($booking['start_time'])); ?>', '<?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?>', <?php echo $duration; ?>, '<?php echo htmlspecialchars($notes); ?>')">复制预约信息</button>
+                            <button type="button" class="btn btn-sm btn-copy" 
+                                    data-id="<?php echo $booking['id']; ?>"
+                                    data-customer-name="<?php echo htmlspecialchars($booking['customer_name']); ?>"
+                                    data-phone="<?php echo htmlspecialchars($booking['phone']); ?>"
+                                    data-car-model="<?php echo htmlspecialchars($booking['car_model']); ?>"
+                                    data-car-number="<?php echo htmlspecialchars($booking['car_number']); ?>"
+                                    data-package-name="<?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?>"
+                                    data-date="<?php echo date('Y-m-d', strtotime($booking['start_time'])); ?>"
+                                    data-time="<?php echo date('H:i', strtotime($booking['start_time'])) . ' - ' . date('H:i', strtotime($booking['end_time'])); ?>"
+                                    data-duration="<?php echo $duration; ?>"
+                                    data-notes="<?php echo htmlspecialchars($notes); ?>"
+                                    data-package-reminder="<?php echo htmlspecialchars($booking['package_reminder'] ?? ''); ?>"
+                                    onclick="copyMessage(this)">复制预约信息</button>
                         </div>
                     </div>
                 <?php endforeach; ?>
@@ -262,6 +295,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 +527,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();
         
@@ -612,44 +707,62 @@ try {
         }
     }
     
-    // 复制预约信息到剪贴板
-    function copyMessage(id, customer_name, phone, car_model, car_number, package_name, date, time, duration, notes) {
-        // 构建预约信息字符串
-        const message = `【张老师撸车工作室】预约确认\n
-        客户姓名：${customer_name}
-        联系方式：${phone}
-        车型：${car_model}
-        车牌号：${car_number}
-        预约日期：${date}
-        套餐：${package_name}
-        预约时间：${time}
-        预计服务时长：${duration}分钟
-        车友备注：${notes}
-        \n温馨提示：
-        1. 请提前20分钟到达工作室
-        2. 如需改期或取消，请至少提前2小时联系我们
-        3. 联系电话：186-0345-3500
+</script>
+
+<!-- 单独的JavaScript块用于复制功能 -->
+<!-- 复制预约信息功能 -->
+<script>
+function copyMessage(button) {
+    try {
+        // 从按钮的data属性获取预约信息
+        var id = button.dataset.id;
+        var customer_name = button.dataset.customerName;
+        var phone = button.dataset.phone;
+        var car_model = button.dataset.carModel;
+        var car_number = button.dataset.carNumber;
+        var package_name = button.dataset.packageName;
+        var date = button.dataset.date;
+        var time = button.dataset.time;
+        var duration = button.dataset.duration;
+        var notes = button.dataset.notes;
+        var package_reminder = button.dataset.packageReminder;
         
-        \n工作室地点：
-        山西省太原市晋源区义井街道西中环充电站内
-        也可高德/百度/腾讯地图软件内搜索‘张老师撸车’
+        var msg = "【张老师撸车工作室】预约确认\n\n";
+        msg += "客户姓名：" + customer_name + "\n";
+        msg += "联系方式：" + phone + "\n";
+        msg += "车型：" + car_model + "\n";
+        msg += "车牌号：" + car_number + "\n";
+        msg += "预约日期：" + date + "\n";
+        msg += "套餐：" + package_name + "\n";
+        msg += "预约时间：" + time + "\n";
+        msg += "预计服务时长：" + duration + "分钟\n";
+        msg += "车友备注：" + notes + "\n";
+        msg += "" + (package_reminder || "") + "\n\n";
 
-        感谢您选择张老师撸车工作室！
-        祝您用车愉快！
-
-        `;
         
         // 复制到剪贴板
-        const textArea = document.createElement('textarea');
-        textArea.value = message;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textArea);
+        var ta = document.createElement('textarea');
+        ta.value = msg;
+        ta.style.position = 'fixed';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.select();
         
-        // 显示复制成功提示
-        alert('预约信息已复制到剪贴板！');
+        try {
+            document.execCommand('copy');
+            alert('预约信息已复制到剪贴板！');
+        } catch (err) {
+            alert('复制失败，请手动复制！');
+        }
+        
+        document.body.removeChild(ta);
+    } catch (e) {
+        alert('复制过程中发生错误，请稍后重试！');
     }
+}
+</script>
+
+<script type="text/javascript">
 
     // 移动端优化脚本
     document.addEventListener('DOMContentLoaded', function() {

packages.php

@@ -14,9 +14,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             $base_duration = (int)$_POST['base_duration'];
             $price = (float)$_POST['price'];
             $services = implode(',', array_filter(array_map('trim', $_POST['services'] ?? [])));
+            $package_reminder = trim($_POST['package_reminder']);
             
-            $stmt = $pdo->prepare("INSERT INTO packages (package_name, description, base_duration, price, services) VALUES (?, ?, ?, ?, ?)");
-            $stmt->execute([$package_name, $description, $base_duration, $price, $services]);
+            $stmt = $pdo->prepare("INSERT INTO packages (package_name, description, base_duration, price, services, package_reminder) VALUES (?, ?, ?, ?, ?, ?)");
+            $stmt->execute([$package_name, $description, $base_duration, $price, $services, $package_reminder]);
             $message = "套餐添加成功！";
             
         } elseif ($action === 'update') {
@@ -28,8 +29,15 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             $services = implode(',', array_filter(array_map('trim', $_POST['services'] ?? [])));
             $is_active = isset($_POST['is_active']) ? 1 : 0;
             
-            $stmt = $pdo->prepare("UPDATE packages SET package_name = ?, description = ?, base_duration = ?, price = ?, services = ?, is_active = ? WHERE id = ?");
-            $stmt->execute([$package_name, $description, $base_duration, $price, $services, $is_active, $id]);
+            // 获取当前套餐的专属预约信息，避免更新时丢失
+            $stmt = $pdo->prepare("SELECT package_reminder FROM packages WHERE id = ?");
+            $stmt->execute([$id]);
+            $current_package = $stmt->fetch();
+            $package_reminder = $current_package['package_reminder'] ?? '';
+            
+            // 更新套餐信息，保留现有的package_reminder
+            $stmt = $pdo->prepare("UPDATE packages SET package_name = ?, description = ?, base_duration = ?, price = ?, services = ?, package_reminder = ?, is_active = ? WHERE id = ?");
+            $stmt->execute([$package_name, $description, $base_duration, $price, $services, $package_reminder, $is_active, $id]);
             $message = "套餐更新成功！";
             
         } elseif ($action === 'delete') {
@@ -37,6 +45,18 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             $stmt = $pdo->prepare("DELETE FROM packages WHERE id = ?");
             $stmt->execute([$id]);
             $message = "套餐删除成功！";
+        } elseif ($action === 'update_reminder') {
+            // 处理套餐专属预约信息的单独更新
+            $id = (int)$_POST['id'];
+            $package_reminder = trim($_POST['package_reminder']);
+            
+            $stmt = $pdo->prepare("UPDATE packages SET package_reminder = ? WHERE id = ?");
+            $stmt->execute([$package_reminder, $id]);
+            
+            // 返回JSON响应
+            header('Content-Type: application/json');
+            echo json_encode(['success' => true, 'message' => '套餐专属预约信息更新成功！']);
+            exit;
         }
     } catch (Exception $e) {
         $message = "操作失败：" . $e->getMessage();
@@ -140,6 +160,11 @@ $packages = $stmt->fetchAll();
                     <button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
                 </div>
 
+                <div class="form-group" style="margin-bottom: 16px;">
+                    <label for="package_reminder" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐专属预约信息</label>
+                    <textarea id="package_reminder" name="package_reminder" rows="4" placeholder="输入此套餐的专属预约信息，将在预约确认时显示" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"></textarea>
+                </div>
+
                 <div class="form-actions" style="margin-top: 24px; display: flex; justify-content: flex-end;">
                     <button type="submit" class="btn-primary btn-lg" style="padding: 10px 24px; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s;">
                         <span>✨ 添加套餐</span>
@@ -200,6 +225,15 @@ $packages = $stmt->fetchAll();
                                 </div>
                             <?php endif; ?>
 
+                            <div class="package-reminder" style="margin-top: 12px; padding: 12px; background: #f8f9fa; border-radius: 4px; border-left: 4px solid #1890ff;">
+                                <div class="detail-label" style="font-weight: 600; margin-bottom: 8px; color: #333;">套餐专属预约信息</div>
+                                <textarea class="reminder-editor" data-package-id="<?= $package['id'] ?>" oninput="autoResizeTextarea(this)" style="width: 100%; padding: 10px; background: white; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; line-height: 1.5; min-height: 100px; resize: none; overflow: hidden;" placeholder="输入此套餐的专属预约信息，将在预约确认时显示"><?= htmlspecialchars($package['package_reminder'] ?? '') ?></textarea>
+                                <div class="reminder-actions" style="margin-top: 8px; text-align: right;">
+                                    <button class="btn-primary btn-sm" onclick="saveReminder(this)">保存</button>
+                                    <button class="btn-outline btn-sm" onclick="cancelEdit(this)">取消</button>
+                                </div>
+                            </div>
+
                             <div class="package-actions">
                                 <button class="btn-primary btn-sm" onclick="editPackage(<?= $package['id'] ?>)"><span>✏️ 编辑</span></button>
                                 <form method="POST" style="display: inline;" onsubmit="return confirmDelete()">
@@ -264,6 +298,8 @@ $packages = $stmt->fetchAll();
                                     <button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
                                 </div>
 
+                                <!-- 套餐专属预约信息编辑已移至套餐列表直接编辑 -->
+
                                 <div class="form-group" style="margin-bottom: 16px;">
                                     <label class="checkbox-label" style="display: flex; align-items: center; cursor: pointer;">
                                         <input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?> style="margin-right: 8px;">
@@ -343,5 +379,52 @@ $packages = $stmt->fetchAll();
             document.body.classList.add('mobile-device');
         }
     </script>
+<script>
+// 自适应文本框高度
+function autoResizeTextarea(textarea) {
+    // 重置高度以获取正确的滚动高度
+    textarea.style.height = 'auto';
+    // 设置新高度（加上一些内边距的补偿）
+    textarea.style.height = Math.min(textarea.scrollHeight + 10, 500) + 'px';
+}
+
+// 页面加载时初始化所有文本框高度
+window.addEventListener('DOMContentLoaded', function() {
+    const textareas = document.querySelectorAll('.reminder-editor');
+    textareas.forEach(autoResizeTextarea);
+});
+
+// 保存套餐专属预约信息
+function saveReminder(button) {
+    const textarea = button.closest('.package-reminder').querySelector('.reminder-editor');
+    const packageId = textarea.dataset.packageId;
+    const reminderText = textarea.value.trim();
+    
+    // 创建保存请求
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', 'packages.php', true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                alert('保存成功！');
+                // 可以选择刷新页面或更新UI
+            } else {
+                alert('保存失败，请重试！');
+            }
+        }
+    };
+    xhr.send(`action=update_reminder&id=${packageId}&package_reminder=${encodeURIComponent(reminderText)}`);
+}
+
+// 取消编辑
+function cancelEdit(button) {
+    const textarea = button.closest('.package-reminder').querySelector('.reminder-editor');
+    const packageId = textarea.dataset.packageId;
+    
+    // 可以选择恢复原始值或不做处理
+    textarea.blur();
+}
+</script>
 </body>
 </html>