style(bookings): 改进预约管理页面的样式和结构

- 重构导航栏布局,添加active状态样式
- 使用CSS类替代内联样式
- 重新设计预约卡片布局和状态显示
- 统一按钮样式和间距
This commit is contained in:
2025-11-19 01:29:16 +08:00
parent 1982c73a0d
commit 4914ff3572
+44 -37
View File
@@ -45,83 +45,90 @@ try {
</head>
<body>
<div class="container">
<header>
<header class="header">
<h1>📋 预约列表</h1>
<p>管理所有洗车预约</p>
</header>
<nav>
<a href="index.php">预约洗车</a>
<a href="bookings.php">查看预约</a>
<nav class="nav">
<a href="index.php" class="nav-link">预约洗车</a>
<a href="bookings.php" class="nav-link active">预约管理</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 style="background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #f5c6cb;">
<div class="error-message">
<?php echo $error_message; ?>
</div>
<?php endif; ?>
<div class="bookings-list">
<div class="card">
<h2>所有预约 (共 <?php echo count($bookings); ?> 条)</h2>
<?php if (empty($bookings)): ?>
<p style="text-align: center; color: #666; padding: 2rem;">暂无预约记录</p>
<div class="empty-message">暂无预约记录</div>
<?php else: ?>
<?php foreach ($bookings as $booking): ?>
<div class="booking-item">
<div class="booking-header">
<div class="package-card">
<div class="package-header">
<h3><?php echo htmlspecialchars($booking['customer_name']); ?> 的预约</h3>
<span class="status <?php
<div class="package-status">
<span class="status-badge <?php
echo $booking['status'] === '待确认' ? 'pending' :
($booking['status'] === '已确认' ? 'confirmed' :
($booking['status'] === '已完成' ? 'completed' : 'cancelled'));
($booking['status'] === '已确认' ? 'active' :
($booking['status'] === '已完成' ? 'active' : 'inactive'));
?>">
<?php echo $booking['status']; ?>
</span>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
<div>
<strong>联系方式:</strong><?php echo htmlspecialchars($booking['phone']); ?>
<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>
<strong>车型:</strong><?php echo htmlspecialchars($booking['car_model']); ?>
<div class="detail-item">
<span class="detail-label">车型:</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['car_model']); ?></span>
</div>
<div>
<strong>车牌号:</strong><?php echo htmlspecialchars($booking['car_number']); ?>
<div class="detail-item">
<span class="detail-label">车牌号:</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['car_number']); ?></span>
</div>
<div>
<strong>服务套餐:</strong><?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?>
<div class="detail-item">
<span class="detail-label">服务套餐:</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?></span>
</div>
<div>
<strong>预约日期:</strong><?php echo date('Y-m-d', strtotime($booking['start_time'])); ?>
<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>
<strong>预约时间:</strong><?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?>
<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 style="margin-bottom: 1rem;">
<strong>备注:</strong><?php echo htmlspecialchars($booking['notes']); ?>
<div class="package-description">
<span class="detail-label">备注:</span>
<span><?php echo htmlspecialchars($booking['notes']); ?></span>
</div>
<?php endif; ?>
<div style="font-size: 0.9rem; color: #666;">
预约时间:<?php echo $booking['created_at']; ?>
<div class="package-meta">
<span>预约时间:<?php echo $booking['created_at']; ?></span>
</div>
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
<div style="margin-top: 1rem;">
<form method="POST" style="display: inline;">
<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" 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>
<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; ?>