213 lines
9.6 KiB
PHP
213 lines
9.6 KiB
PHP
<?php
|
|
// bookings.php - 预约列表页面
|
|
require_once 'db_connect.php';
|
|
|
|
// 处理状态更新
|
|
if (isset($_POST['action']) && isset($_POST['booking_id'])) {
|
|
$booking_id = $_POST['booking_id'];
|
|
$new_status = $_POST['action'];
|
|
|
|
if (in_array($new_status, ['已确认', '已完成', '已取消'])) {
|
|
try {
|
|
$stmt = $pdo->prepare("UPDATE bookings SET status = ? WHERE id = ?");
|
|
$stmt->execute([$new_status, $booking_id]);
|
|
$success_message = '状态更新成功！';
|
|
} catch (Exception $e) {
|
|
$error_message = '状态更新失败：' . $e->getMessage();
|
|
}
|
|
}
|
|
}
|
|
|
|
// 获取所有预约
|
|
try {
|
|
$stmt = $pdo->query("SELECT b.*, p.package_name FROM bookings b LEFT JOIN packages p ON b.package_id = p.id ORDER BY b.start_time DESC");
|
|
$bookings = $stmt->fetchAll();
|
|
} catch (Exception $e) {
|
|
$error_message = '获取预约列表失败：' . $e->getMessage();
|
|
$bookings = [];
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="description" content="洗车预约管理列表，查看和管理所有预约记录">
|
|
<meta name="keywords" content="预约管理,洗车预约,预约列表">
|
|
<title>预约列表 - 洗车预约系统</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<!-- 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>">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1>📋 预约列表</h1>
|
|
<nav class="nav">
|
|
<a href="index.php" class="nav-link">预约洗车</a>
|
|
<a href="bookings.php" class="nav-link active">预约管理</a>
|
|
<a href="packages.php" class="nav-link">套餐管理</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<?php if (isset($success_message)): ?>
|
|
<div class="success-message"><?php echo $success_message; ?></div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($error_message)): ?>
|
|
<div class="error-message">
|
|
<?php echo $error_message; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="card">
|
|
<h2>所有预约 (共 <?php echo count($bookings); ?> 条)</h2>
|
|
|
|
<?php if (empty($bookings)): ?>
|
|
<div class="empty-message">暂无预约记录</div>
|
|
<?php else: ?>
|
|
<?php foreach ($bookings as $booking): ?>
|
|
<div class="package-card">
|
|
<div class="package-header">
|
|
<h3><?php echo htmlspecialchars($booking['customer_name']); ?> 的预约</h3>
|
|
<div class="package-status">
|
|
<span class="status-badge <?php
|
|
echo $booking['status'] === '待确认' ? 'pending' :
|
|
($booking['status'] === '已确认' ? 'active' :
|
|
($booking['status'] === '已完成' ? 'active' : 'inactive'));
|
|
?>">
|
|
<?php echo $booking['status']; ?>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="package-details">
|
|
<div class="detail-item">
|
|
<span class="detail-label">联系方式：</span>
|
|
<span class="detail-value"><?php echo htmlspecialchars($booking['phone']); ?></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">车型：</span>
|
|
<span class="detail-value"><?php echo htmlspecialchars($booking['car_model']); ?></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">车牌号：</span>
|
|
<span class="detail-value"><?php echo htmlspecialchars($booking['car_number']); ?></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">服务套餐：</span>
|
|
<span class="detail-value"><?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="detail-label">预约日期：</span>
|
|
<span class="detail-value"><?php echo date('Y-m-d', strtotime($booking['start_time'])); ?></span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<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>
|
|
|
|
<?php if ($booking['notes']): ?>
|
|
<div class="package-description">
|
|
<span class="detail-label">备注：</span>
|
|
<span><?php echo htmlspecialchars($booking['notes']); ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="package-meta">
|
|
<span>预约时间：<?php echo $booking['created_at']; ?></span>
|
|
</div>
|
|
|
|
<?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>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
<a href="index.php" class="btn">返回预约页面</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 移动端优化脚本
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 为按钮添加触摸反馈
|
|
const buttons = document.querySelectorAll('.btn');
|
|
buttons.forEach(btn => {
|
|
btn.addEventListener('touchstart', function() {
|
|
this.style.transform = 'translateY(1px)';
|
|
});
|
|
btn.addEventListener('touchend', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
});
|
|
|
|
// 优化表单按钮
|
|
const formButtons = document.querySelectorAll('form button');
|
|
formButtons.forEach(btn => {
|
|
btn.addEventListener('touchstart', function() {
|
|
this.style.transform = 'scale(0.98)';
|
|
});
|
|
btn.addEventListener('touchend', function() {
|
|
this.style.transform = 'scale(1)';
|
|
});
|
|
});
|
|
|
|
// 预约项目点击优化
|
|
const bookingItems = document.querySelectorAll('.booking-item');
|
|
bookingItems.forEach(item => {
|
|
item.addEventListener('touchstart', function() {
|
|
this.style.backgroundColor = '#f0f0f0';
|
|
});
|
|
item.addEventListener('touchend', function() {
|
|
setTimeout(() => {
|
|
this.style.backgroundColor = '';
|
|
}, 150);
|
|
});
|
|
});
|
|
|
|
// 检测设备类型并添加类名
|
|
const isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
if (isMobile) {
|
|
document.body.classList.add('mobile-device');
|
|
}
|
|
|
|
// 防止双击缩放（针对iOS Safari）
|
|
let lastTouchEnd = 0;
|
|
document.addEventListener('touchend', function(event) {
|
|
const now = (new Date()).getTime();
|
|
if (now - lastTouchEnd <= 300) {
|
|
event.preventDefault();
|
|
}
|
|
lastTouchEnd = now;
|
|
}, false);
|
|
|
|
// 长按删除确认（可选功能）
|
|
const statusButtons = document.querySelectorAll('form button[value="已取消"]');
|
|
statusButtons.forEach(btn => {
|
|
btn.addEventListener('contextmenu', function(e) {
|
|
e.preventDefault();
|
|
if (confirm('确定要取消这个预约吗？')) {
|
|
this.closest('form').submit();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|