feat(预约管理): 添加付款状态功能并增强预约更新逻辑

添加付款状态字段到预约表，实现状态更新API和前端交互
新增update_booking.php处理预约状态、付款状态和时间更新
改进bookings.php前端界面，添加付款状态显示和AJAX操作
添加测试页面test_update_booking.php验证功能

add_payment_status.php

@@ -0,0 +1,18 @@
+<?php
+// add_payment_status.php - 添加付款状态字段
+require_once 'db_connect.php';
+
+try {
+    // 检查字段是否已存在
+    $checkColumn = $pdo->query("SHOW COLUMNS FROM bookings LIKE 'payment_status'");
+    if ($checkColumn->rowCount() == 0) {
+        // 添加付款状态字段
+        $pdo->exec("ALTER TABLE bookings ADD COLUMN payment_status ENUM('未付款', '已付款') DEFAULT '未付款' AFTER status");
+        echo "付款状态字段添加成功！";
+    } else {
+        echo "付款状态字段已存在！";
+    }
+} catch (Exception $e) {
+    echo "操作失败：" . $e->getMessage();
+}
+?>

bookings.php

@@ -5,21 +5,35 @@ require_once 'db_connect.php';
 // 处理状态更新
 if (isset($_POST['action']) && isset($_POST['booking_id'])) {
     $booking_id = $_POST['booking_id'];
-    $new_status = $_POST['action'];
+    $action = $_POST['action'];
     
-    if (in_array($new_status, ['已确认', '已完成', '已取消'])) {
     try {
+        if (in_array($action, ['已确认', '已完成', '已取消'])) {
+            // 更新预约状态
             $stmt = $pdo->prepare("UPDATE bookings SET status = ? WHERE id = ?");
-            $stmt->execute([$new_status, $booking_id]);
-            $success_message = '状态更新成功！';
-        } catch (Exception $e) {
-            $error_message = '状态更新失败：' . $e->getMessage();
+            $stmt->execute([$action, $booking_id]);
+            $success_message = '预约状态更新成功！';
+        } elseif (in_array($action, ['已付款', '未付款'])) {
+            // 更新付款状态
+            $stmt = $pdo->prepare("UPDATE bookings SET payment_status = ? WHERE id = ?");
+            $stmt->execute([$action, $booking_id]);
+            $success_message = '付款状态更新成功！';
+        } elseif ($action == 'update_time' && isset($_POST['new_start_time']) && isset($_POST['new_end_time'])) {
+            // 更新预约时间
+            $new_start_time = $_POST['new_start_time'];
+            $new_end_time = $_POST['new_end_time'];
+            $stmt = $pdo->prepare("UPDATE bookings SET start_time = ?, end_time = ? WHERE id = ?");
+            $stmt->execute([$new_start_time, $new_end_time, $booking_id]);
+            $success_message = '预约时间更新成功！';
         }
+    } catch (Exception $e) {
+        $error_message = '更新失败：' . $e->getMessage();
     }
 }
 
 // 获取所有预约（过滤掉已完成和已取消的订单）
 try {
+    // 确保查询包含payment_status字段
     $stmt = $pdo->query("SELECT b.*, p.package_name FROM bookings b LEFT JOIN packages p ON b.package_id = p.id WHERE b.status NOT IN ('已完成', '已取消') ORDER BY b.start_time DESC");
     $bookings = $stmt->fetchAll();
 } catch (Exception $e) {
@@ -39,6 +53,7 @@ try {
     <meta name="keywords" content="预约管理,洗车预约,预约列表">
     <title>预约列表 - 洗车预约系统</title>
     <link rel="stylesheet" href="style.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     
     <!-- Favicon for mobile devices -->
     <link rel="apple-touch-icon" sizes="180x180" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>">
@@ -110,6 +125,14 @@ try {
                                 <span class="detail-label">预约时间：</span>
                                 <span class="detail-value"><?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?></span>
                             </div>
+                            <div class="detail-item">
+                                <span class="detail-label">付款状态：</span>
+                                <span class="detail-value">
+                                    <span class="payment-status <?php echo $booking['payment_status'] === '已付款' ? 'paid' : 'unpaid'; ?>">
+                                        <?php echo $booking['payment_status'] === '已付款' ? '💰 已付款' : '💳 未付款'; ?>
+                                    </span>
+                                </span>
+                            </div>
                             <div class="detail-item">
                                 <span class="detail-label">会员类型：</span>
                                 <span class="detail-value">
@@ -151,12 +174,21 @@ try {
 
                         <?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
                             <div class="package-actions">
-                                <form method="POST">
-                                    <input type="hidden" name="booking_id" value="<?php echo $booking['id']; ?>">
-                                    <button type="submit" name="action" value="已确认" class="btn btn-sm btn-success">确认</button>
-                                    <button type="submit" name="action" value="已完成" class="btn btn-sm btn-primary">完成</button>
-                                    <button type="submit" name="action" value="已取消" class="btn btn-sm btn-danger">取消</button>
-                                </form>
+                                <!-- 状态更新按钮 - 使用AJAX -->
+                                <div>
+                                    <button type="button" class="btn btn-sm btn-success" onclick="updateStatus(<?php echo $booking['id']; ?>, '已确认')">确认</button>
+                                    <button type="button" class="btn btn-sm btn-primary" onclick="updateStatus(<?php echo $booking['id']; ?>, '已完成')">完成</button>
+                                    <button type="button" class="btn btn-sm btn-danger" onclick="updateStatus(<?php echo $booking['id']; ?>, '已取消')">取消</button>
+                                </div>
+                                <br>
+                                <!-- 付款状态操作 - 使用AJAX -->
+                                <div>
+                                    <button type="button" class="btn btn-sm btn-info" onclick="updateStatus(<?php echo $booking['id']; ?>, '已付款')">标记为已付款</button>
+                                    <button type="button" class="btn btn-sm btn-warning" onclick="updateStatus(<?php echo $booking['id']; ?>, '未付款')">标记为未付款</button>
+                                </div>
+                                <br>
+                                <!-- 修改预约时间按钮 -->
+                                <button type="button" class="btn btn-sm btn-secondary" onclick="openEditModal(<?php echo $booking['id']; ?>, '<?php echo date('Y-m-d\TH:i', strtotime($booking['start_time'])); ?>', '<?php echo date('Y-m-d\TH:i', strtotime($booking['end_time'])); ?>')">修改预约时间</button>
                             </div>
                         <?php endif; ?>
                     </div>
@@ -169,7 +201,284 @@ try {
         </div>
     </div>
     
+    <!-- 修改预约时间模态框 -->
+    <div id="editTimeModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>修改预约时间</h3>
+                <span class="close-modal" onclick="closeEditModal()">&times;</span>
+            </div>
+            <div class="modal-body">
+                <form id="editTimeForm" method="POST">
+                    <input type="hidden" name="booking_id" id="editBookingId" value="">
+                    <input type="hidden" name="action" value="update_time">
+                    
+                    <div class="form-group">
+                        <label for="new_start_time">新的开始时间：</label>
+                        <input type="datetime-local" id="new_start_time" name="new_start_time" required>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="new_end_time">新的结束时间：</label>
+                        <input type="datetime-local" id="new_end_time" name="new_end_time" required>
+                    </div>
+                    
+                    <div class="modal-actions">
+                        <button type="submit" class="btn btn-primary">确认修改</button>
+                        <button type="button" class="btn btn-secondary" onclick="closeEditModal()">取消</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        /* 付款状态样式 */
+        .payment-status {
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-weight: bold;
+            font-size: 0.9em;
+        }
+        .payment-status.paid {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .payment-status.unpaid {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        
+        /* 模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.4);
+            overflow: auto;
+        }
+        .modal-content {
+            background-color: #fff;
+            margin: 15% auto;
+            padding: 20px;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .modal-header h3 {
+            margin: 0;
+        }
+        .close-modal {
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+        }
+        .close-modal:hover {
+            color: #000;
+        }
+        .modal-body {
+            margin-bottom: 15px;
+        }
+        .modal-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+    </style>
+
     <script>
+    // 确保jQuery库已加载
+    if (typeof jQuery === 'undefined') {
+        // 如果jQuery未加载，动态加载它
+        var script = document.createElement('script');
+        script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
+        script.onload = function() {
+            console.log('jQuery已成功加载');
+        };
+        script.onerror = function() {
+            console.log('jQuery加载失败，将使用原生JavaScript实现');
+        };
+        document.head.appendChild(script);
+    }
+    
+    // 修改预约时间相关函数
+    function openEditModal(bookingId, startTime, endTime) {
+        document.getElementById('editBookingId').value = bookingId;
+        document.getElementById('new_start_time').value = startTime;
+        document.getElementById('new_end_time').value = endTime;
+        document.getElementById('editTimeModal').style.display = 'block';
+    }
+    
+    function closeEditModal() {
+        document.getElementById('editTimeModal').style.display = 'none';
+    }
+    
+    // 点击模态框外部关闭模态框
+    window.onclick = function(event) {
+        const modal = document.getElementById('editTimeModal');
+        if (event.target == modal) {
+            closeEditModal();
+        }
+    }
+    
+    // 表单提交处理 - 使用AJAX
+    document.getElementById('editTimeForm').addEventListener('submit', function(event) {
+        event.preventDefault();
+        
+        const bookingId = document.getElementById('editBookingId').value;
+        const startTime = new Date(document.getElementById('new_start_time').value);
+        const endTime = new Date(document.getElementById('new_end_time').value);
+        const now = new Date();
+        
+        if (startTime < now) {
+            alert('开始时间不能早于当前时间');
+            return;
+        }
+        
+        if (endTime <= startTime) {
+            alert('结束时间必须晚于开始时间');
+            return;
+        }
+        
+        if (typeof jQuery !== 'undefined') {
+            $.ajax({
+                url: 'update_booking.php',
+                type: 'POST',
+                data: {
+                    booking_id: bookingId,
+                    action: 'update_time',
+                    new_start_time: document.getElementById('new_start_time').value,
+                    new_end_time: document.getElementById('new_end_time').value
+                },
+                dataType: 'json',
+                success: function(response) {
+                    if (response.status === 'success') {
+                        alert(response.message);
+                        closeEditModal();
+                        location.reload(); // 刷新页面以显示最新状态
+                    } else {
+                        alert(response.message);
+                    }
+                },
+                error: function() {
+                    alert('操作失败，请重试');
+                }
+            });
+        } else {
+            // 纯JavaScript的Ajax实现作为备用
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', 'update_booking.php', true);
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState === 4) {
+                    try {
+                        const response = JSON.parse(xhr.responseText);
+                        alert(response.message);
+                        if (response.status === 'success') {
+                            closeEditModal();
+                            location.reload();
+                        }
+                    } catch (e) {
+                        alert('操作失败，请重试');
+                    }
+                }
+            };
+            
+            const params = new URLSearchParams();
+            params.append('booking_id', bookingId);
+            params.append('action', 'update_time');
+            params.append('new_start_time', document.getElementById('new_start_time').value);
+            params.append('new_end_time', document.getElementById('new_end_time').value);
+            xhr.send(params.toString());
+        }
+    });
+    
+    // 处理状态更新的AJAX函数
+    function updateStatus(bookingId, action) {
+        let confirmMsg;
+        
+        if (action === '已付款' || action === '未付款') {
+            confirmMsg = `确定要将预约的付款状态更改为「${action}」吗？`;
+        } else {
+            confirmMsg = `确定要将预约的状态更改为「${action}」吗？`;
+        }
+        
+        if (confirm(confirmMsg)) {
+            if (typeof jQuery !== 'undefined') {
+                $.ajax({
+                    url: 'update_booking.php',
+                    type: 'POST',
+                    data: {
+                        booking_id: bookingId,
+                        action: action
+                    },
+                    dataType: 'json',
+                    success: function(response) {
+                        if (response.status === 'success') {
+                            alert(response.message);
+                            location.reload(); // 刷新页面以显示最新状态
+                        } else {
+                            alert(response.message);
+                        }
+                    },
+                    error: function() {
+                        alert('操作失败，请重试');
+                    }
+                });
+            } else {
+                // 纯JavaScript的Ajax实现作为备用
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', 'update_booking.php', true);
+                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+                xhr.onreadystatechange = function() {
+                    if (xhr.readyState === 4) {
+                        try {
+                            const response = JSON.parse(xhr.responseText);
+                            alert(response.message);
+                            if (response.status === 'success') {
+                                location.reload();
+                            }
+                        } catch (e) {
+                            alert('操作失败，请重试');
+                        }
+                    }
+                };
+                
+                const params = new URLSearchParams();
+                params.append('booking_id', bookingId);
+                params.append('action', action);
+                xhr.send(params.toString());
+            }
+        }
+    }
+    
     // 移动端优化脚本
     document.addEventListener('DOMContentLoaded', function() {
         // 为按钮添加触摸反馈

test_update_booking.php

@@ -0,0 +1,160 @@
+<?php
+// test_update_booking.php - 用于测试update_booking.php功能
+
+// 测试参数
+$test_cases = [
+    [
+        'name' => '测试修改预约状态',
+        'booking_id' => 1, // 假设存在ID为1的预约
+        'action' => '已确认'
+    ],
+    [
+        'name' => '测试更新付款状态',
+        'booking_id' => 1,
+        'action' => '已付款'
+    ],
+    [
+        'name' => '测试更新预约时间',
+        'booking_id' => 1,
+        'action' => 'update_time',
+        'new_start_time' => date('Y-m-d H:i', strtotime('tomorrow 10:00')),
+        'new_end_time' => date('Y-m-d H:i', strtotime('tomorrow 11:30'))
+    ]
+];
+?>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>测试预约更新功能</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        h1 {
+            color: #333;
+        }
+        .test-case {
+            border: 1px solid #ddd;
+            margin-bottom: 20px;
+            padding: 15px;
+            border-radius: 5px;
+        }
+        .test-case h3 {
+            margin-top: 0;
+            color: #2c3e50;
+        }
+        .form-group {
+            margin-bottom: 10px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        input[type="text"], input[type="datetime-local"] {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        .result {
+            margin-top: 15px;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 4px;
+        }
+        .success {
+            color: #27ae60;
+        }
+        .error {
+            color: #e74c3c;
+        }
+    </style>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+    <h1>测试预约更新功能</h1>
+    
+    <p>使用此页面测试update_booking.php脚本的功能。</p>
+    
+    <?php foreach ($test_cases as $index => $test_case): ?>
+    <div class="test-case">
+        <h3><?php echo $test_case['name']; ?></h3>
+        <form class="test-form" data-index="<?php echo $index; ?>">
+            <input type="hidden" name="test_index" value="<?php echo $index; ?>">
+            
+            <div class="form-group">
+                <label for="booking_id_<?php echo $index; ?>">预约ID:</label>
+                <input type="text" id="booking_id_<?php echo $index; ?>" name="booking_id" value="<?php echo $test_case['booking_id']; ?>">
+            </div>
+            
+            <div class="form-group">
+                <label for="action_<?php echo $index; ?>">操作:</label>
+                <input type="text" id="action_<?php echo $index; ?>" name="action" value="<?php echo $test_case['action']; ?>">
+            </div>
+            
+            <?php if ($test_case['action'] === 'update_time'): ?>
+            <div class="form-group">
+                <label for="new_start_time_<?php echo $index; ?>">新开始时间:</label>
+                <input type="datetime-local" id="new_start_time_<?php echo $index; ?>" name="new_start_time" value="<?php echo date('Y-m-d\TH:i', strtotime($test_case['new_start_time'])); ?>">
+            </div>
+            
+            <div class="form-group">
+                <label for="new_end_time_<?php echo $index; ?>">新结束时间:</label>
+                <input type="datetime-local" id="new_end_time_<?php echo $index; ?>" name="new_end_time" value="<?php echo date('Y-m-d\TH:i', strtotime($test_case['new_end_time'])); ?>">
+            </div>
+            <?php endif; ?>
+            
+            <button type="submit">运行测试</button>
+        </form>
+        
+        <div id="result_<?php echo $index; ?>" class="result"></div>
+    </div>
+    <?php endforeach; ?>
+    
+    <script>
+        $(document).ready(function() {
+            $('.test-form').on('submit', function(event) {
+                event.preventDefault();
+                const form = $(this);
+                const index = form.data('index');
+                const resultDiv = $('#result_' + index);
+                
+                resultDiv.text('正在测试...');
+                
+                $.ajax({
+                    url: 'update_booking.php',
+                    type: 'POST',
+                    data: form.serialize(),
+                    dataType: 'json',
+                    success: function(response) {
+                        const statusClass = response.status === 'success' ? 'success' : 'error';
+                        resultDiv.html('<strong class="' + statusClass + '">' + 
+                            (response.status === 'success' ? '成功' : '失败') + 
+                            '</strong>: ' + response.message);
+                    },
+                    error: function(xhr, status, error) {
+                        resultDiv.html('<strong class="error">请求失败</strong>: ' + error);
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>

update_booking.php

@@ -0,0 +1,77 @@
+<?php
+// update_booking.php - 处理预约更新功能
+require_once 'db_connect.php';
+
+// 只接受POST请求
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    header('HTTP/1.1 405 Method Not Allowed');
+    echo json_encode(['status' => 'error', 'message' => '只允许POST请求']);
+    exit;
+}
+
+// 检查必要的参数
+if (!isset($_POST['booking_id']) || !isset($_POST['action'])) {
+    echo json_encode(['status' => 'error', 'message' => '缺少必要参数']);
+    exit;
+}
+
+$booking_id = $_POST['booking_id'];
+$action = $_POST['action'];
+$response = ['status' => 'error', 'message' => '未知操作'];
+
+try {
+    // 验证预约ID是否存在
+    $stmt = $pdo->prepare("SELECT id FROM bookings WHERE id = ?");
+    $stmt->execute([$booking_id]);
+    if ($stmt->rowCount() === 0) {
+        $response['message'] = '预约不存在';
+        echo json_encode($response);
+        exit;
+    }
+    
+    if (in_array($action, ['已确认', '已完成', '已取消'])) {
+        // 更新预约状态
+        $stmt = $pdo->prepare("UPDATE bookings SET status = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?");
+        $stmt->execute([$action, $booking_id]);
+        $response = ['status' => 'success', 'message' => '预约状态更新成功！'];
+    } elseif (in_array($action, ['已付款', '未付款'])) {
+        // 更新付款状态
+        $stmt = $pdo->prepare("UPDATE bookings SET payment_status = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?");
+        $stmt->execute([$action, $booking_id]);
+        $response = ['status' => 'success', 'message' => '付款状态更新成功！'];
+    } elseif ($action == 'update_time' && isset($_POST['new_start_time']) && isset($_POST['new_end_time'])) {
+        // 更新预约时间
+        $new_start_time = $_POST['new_start_time'];
+        $new_end_time = $_POST['new_end_time'];
+        
+        // 验证时间有效性
+        $start_dt = new DateTime($new_start_time);
+        $end_dt = new DateTime($new_end_time);
+        $now = new DateTime();
+        
+        if ($start_dt < $now) {
+            $response['message'] = '开始时间不能早于当前时间';
+            echo json_encode($response);
+            exit;
+        }
+        
+        if ($end_dt <= $start_dt) {
+            $response['message'] = '结束时间必须晚于开始时间';
+            echo json_encode($response);
+            exit;
+        }
+        
+        // 计算新的持续时间（分钟）
+        $duration = $start_dt->diff($end_dt)->i + ($start_dt->diff($end_dt)->h * 60);
+        
+        // 更新预约时间和持续时间
+        $stmt = $pdo->prepare("UPDATE bookings SET start_time = ?, end_time = ?, duration = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?");
+        $stmt->execute([$new_start_time, $new_end_time, $duration, $booking_id]);
+        $response = ['status' => 'success', 'message' => '预约时间更新成功！'];
+    }
+} catch (Exception $e) {
+    $response['message'] = '操作失败：' . $e->getMessage();
+}
+
+echo json_encode($response);
+?>