style(bookings): 改进预约管理页面的样式和结构
- 重构导航栏布局,添加active状态样式 - 使用CSS类替代内联样式 - 重新设计预约卡片布局和状态显示 - 统一按钮样式和间距
This commit is contained in:
+44
-37
@@ -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; ?>
|
||||
|
||||
Reference in New Issue
Block a user