205 lines
8.9 KiB
PHP
205 lines
8.9 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 * FROM bookings ORDER BY appointment_date DESC, appointment_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>
|
|
<h1>📋 预约列表</h1>
|
|
<p>管理所有洗车预约</p>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="index.php">预约洗车</a>
|
|
<a href="bookings.php">查看预约</a>
|
|
</nav>
|
|
|
|
<?php if (isset($success_message)): ?>
|
|
<div class="success-message"><?php echo $success_message; ?></div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($error_message)): ?>
|
|
<div style="background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #f5c6cb;">
|
|
<?php echo $error_message; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="bookings-list">
|
|
<h2>所有预约 (共 <?php echo count($bookings); ?> 条)</h2>
|
|
|
|
<?php if (empty($bookings)): ?>
|
|
<p style="text-align: center; color: #666; padding: 2rem;">暂无预约记录</p>
|
|
<?php else: ?>
|
|
<?php foreach ($bookings as $booking): ?>
|
|
<div class="booking-item">
|
|
<div class="booking-header">
|
|
<h3><?php echo htmlspecialchars($booking['customer_name']); ?> 的预约</h3>
|
|
<span class="status <?php
|
|
echo $booking['status'] === '待确认' ? 'pending' :
|
|
($booking['status'] === '已确认' ? 'confirmed' :
|
|
($booking['status'] === '已完成' ? 'completed' : 'cancelled'));
|
|
?>">
|
|
<?php echo $booking['status']; ?>
|
|
</span>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
|
|
<div>
|
|
<strong>联系方式：</strong><?php echo htmlspecialchars($booking['phone']); ?>
|
|
</div>
|
|
<div>
|
|
<strong>车型：</strong><?php echo htmlspecialchars($booking['car_model']); ?>
|
|
</div>
|
|
<div>
|
|
<strong>车牌号：</strong><?php echo htmlspecialchars($booking['car_number']); ?>
|
|
</div>
|
|
<div>
|
|
<strong>服务类型：</strong><?php echo htmlspecialchars($booking['service_type']); ?>
|
|
</div>
|
|
<div>
|
|
<strong>预约日期：</strong><?php echo $booking['appointment_date']; ?>
|
|
</div>
|
|
<div>
|
|
<strong>预约时间：</strong><?php echo $booking['appointment_time']; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($booking['notes']): ?>
|
|
<div style="margin-bottom: 1rem;">
|
|
<strong>备注：</strong><?php echo htmlspecialchars($booking['notes']); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div style="font-size: 0.9rem; color: #666;">
|
|
预约时间：<?php echo $booking['created_at']; ?>
|
|
</div>
|
|
|
|
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
|
|
<div style="margin-top: 1rem;">
|
|
<form method="POST" style="display: inline;">
|
|
<input type="hidden" name="booking_id" value="<?php echo $booking['id']; ?>">
|
|
<button type="submit" name="action" value="已确认" class="btn" style="margin-right: 0.5rem;">确认</button>
|
|
<button type="submit" name="action" value="已完成" class="btn" style="margin-right: 0.5rem;">完成</button>
|
|
<button type="submit" name="action" value="已取消" class="btn" style="background: #dc3545;">取消</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>
|