wsh5485/carwash_order
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

feat(预约系统): 添加预约详情展示区域并优化日期点击交互

Browse Source 
- 新增 booking-details 样式组件用于展示预约详情
- 移除旧版弹窗设计，改为页面内嵌式展示
- 添加日期点击时的平滑滚动效果
- 始终显示预约数量，无论是否有预约
This commit is contained in:
吴展鹏
2025-11-19 01:39:36 +08:00
parent e12968506a
commit 7a5718b26e
2 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+25 -26
View File
@@ -187,13 +187,12 @@ $packages_json = json_encode(array_map(function($package) {
?>
<div class="calendar-day <?= $status_class ?> <?= $is_today ? 'today' : '' ?>"
data-date="<?= $date ?>"
data-booking-count="<?= $booking_count ?>"
onclick="showDateDetails('<?= $date ?>')">
<div class="day-number"><?= $date_display ?></div>
<div class="day-week">周<?= $weekday ?></div>
<div class="day-status"><?= $status_text ?></div>
<?php if (isset($booking_schedule[$date]) && $booking_schedule[$date]): ?>
<div class="booking-count"><?= $booking_count ?>个预约</div>
<?php endif; ?>
<div class="booking-count"><?= $booking_count ?>个预约</div>
</div>
<?php endfor; ?>
</div>
@@ -214,6 +213,12 @@ $packages_json = json_encode(array_map(function($package) {
<!-- 时间段将通过JavaScript动态生成 -->
</div>
</div>
<!-- 预约详情显示区域 -->
<div id="bookingDetails" class="booking-details" style="display: none;">
<h3 id="detailsDateTitle"></h3>
<div id="bookingDetailsContent"></div>
</div>
</div>
<div class="booking-form-section">
@@ -304,18 +309,7 @@ $packages_json = json_encode(array_map(function($package) {
</div>
</div>
<!-- 日期详情弹窗 -->
<div id="dateModal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalDate"></h3>
<span class="close" onclick="closeModal()">&times;</span>
</div>
<div class="modal-body" id="modalBody">
<!-- 预约详情将通过JavaScript加载 -->
</div>
</div>
</div>
</div>
<script>
@@ -355,12 +349,12 @@ $packages_json = json_encode(array_map(function($package) {
});
function showDateDetails(date) {
// 显示该日期的预约详情弹窗
const modal = document.getElementById('dateModal');
const modalDate = document.getElementById('modalDate');
const modalBody = document.getElementById('modalBody');
// 获取预约详情容器
const detailsDiv = document.getElementById('bookingDetails');
const detailsDateTitle = document.getElementById('detailsDateTitle');
const detailsContent = document.getElementById('bookingDetailsContent');
// 设置弹窗标题
// 设置日期标题
const dateObj = new Date(date);
const dateStr = dateObj.toLocaleDateString('zh-CN', {
year: 'numeric',
@@ -368,21 +362,26 @@ $packages_json = json_encode(array_map(function($package) {
day: 'numeric',
weekday: 'long'
});
modalDate.textContent = dateStr;
detailsDateTitle.textContent = dateStr + ' - 预约详情';
// 获取并显示预约详情
const details = getBookingDetailsForDate(date);
modalBody.innerHTML = details;
detailsContent.innerHTML = details;
// 显示弹窗
modal.style.display = 'block';
// 显示预约详情区域
detailsDiv.style.display = 'block';
// 同时选择该日期用于预约
selectDate(date);
// 滚动到预约详情区域
setTimeout(() => {
detailsDiv.scrollIntoView({ behavior: 'smooth' });
}, 100);
}
function closeModal() {
document.getElementById('dateModal').style.display = 'none';
function hideDateDetails() {
document.getElementById('bookingDetails').style.display = 'none';
}
function selectDate(date) {
style.css
+36
View File
@@ -684,6 +684,42 @@ body {
color: var(--el-color-danger);
}
/* 预约详情显示区域 */
.booking-details {
background: var(--el-bg-color);
border: 1px solid var(--el-border-lighter);
border-radius: var(--el-border-radius-large);
padding: var(--el-spacing-large);
margin-top: var(--el-spacing-large);
box-shadow: var(--el-box-shadow-lighter);
}
.booking-details h3 {
color: var(--el-text-primary);
margin: 0 0 var(--el-spacing-base) 0;
font-size: var(--el-font-size-large);
border-bottom: 2px solid var(--el-color-primary);
padding-bottom: var(--el-spacing-base);
display: flex;
align-items: center;
gap: var(--el-spacing-small);
}
.booking-details h3:before {
content: "📋";
font-size: var(--el-font-size-medium);
}
.booking-details .booking-detail-item {
margin-bottom: var(--el-spacing-base);
transition: all 0.3s ease;
}
.booking-details .booking-detail-item:hover {
transform: translateY(-2px);
box-shadow: var(--el-box-shadow-base);
}
/* 表格样式 */
.table {
width: 100%;