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

feat(预约管理): 添加预约信息复制功能和改进待处理预约界面

Browse Source 
- 在 bookings.php 中添加复制预约信息按钮和功能
- 重构 pending_bookings.php 界面，添加预约记录选择器
- 优化待处理预约的显示逻辑，默认高亮第一条记录
- 移除不再使用的复制信息相关代码
This commit is contained in:
吴展鹏
2025-12-06 04:16:38 +08:00
parent 1f0cf4acaa
commit a672e1d7bc
2 changed files with 152 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bookings.php
+24 -4
View File
@@ -223,8 +223,8 @@ try {
<span>预约时间：<?php echo $booking['created_at']; ?></span>
</div>
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
<div class="package-actions">
<div class="package-actions">
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
<!-- 状态更新按钮 - 使用AJAX -->
<div>
<button type="button" class="btn btn-sm btn-success" onclick="updateStatus(<?php echo $booking['id']; ?>, '已确认')">确认</button>
@@ -240,8 +240,11 @@ try {
<br>
<!-- 修改预约时间按钮 -->
<button type="button" class="btn btn-sm btn-secondary" onclick="openEditModal(<?php echo $booking['id']; ?>, '<?php echo date('Y-m-d\TH:i', strtotime($booking['start_time'])); ?>', '<?php echo date('Y-m-d\TH:i', strtotime($booking['end_time'])); ?>')">修改预约时间</button>
</div>
<?php endif; ?>
<br>
<?php endif; ?>
<!-- 复制预约信息按钮 -->
<button type="button" class="btn btn-sm btn-copy" onclick="copyMessage(<?php echo $booking['id']; ?>, '<?php echo htmlspecialchars($booking['customer_name']); ?>', '<?php echo htmlspecialchars($booking['phone']); ?>', '<?php echo htmlspecialchars($booking['car_model']); ?>', '<?php echo htmlspecialchars($booking['car_number']); ?>', '<?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?>', '<?php echo date('Y-m-d', strtotime($booking['start_time'])); ?>', '<?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?>')">复制预约信息</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
@@ -601,6 +604,23 @@ try {
}
}
// 复制预约信息到剪贴板
function copyMessage(id, customer_name, phone, car_model, car_number, package_name, date, time) {
// 构建预约信息字符串
const message = `预约信息\n\n客户姓名：${customer_name}\n联系方式：${phone}\n车型：${car_model}\n车牌号：${car_number}\n服务套餐：${package_name}\n预约日期：${date}\n预约时间：${time}`;
// 复制到剪贴板
const textArea = document.createElement('textarea');
textArea.value = message;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// 显示复制成功提示
alert('预约信息已复制到剪贴板！');
}
// 移动端优化脚本
document.addEventListener('DOMContentLoaded', function() {
// 为按钮添加触摸反馈
pending_bookings.php
+128 -57
View File
@@ -201,6 +201,12 @@ try {
overflow: hidden;
}
.pending-card.selected-card {
background: #e3f2fd;
border: 2px solid #2196f3;
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}
.pending-header {
background: #f5f5f5;
padding: 15px 20px;
@@ -288,26 +294,6 @@ try {
margin: 20px 0;
}
.copy-message {
background: #fff;
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
font-family: monospace;
white-space: pre-wrap;
}
.copy-btn {
background: #28a745;
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
.status-badge {
padding: 5px 10px;
border-radius: 12px;
@@ -320,6 +306,50 @@ try {
color: #212529;
}
/* 预约记录选择器样式 */
.submission-selector {
margin-bottom: 20px;
}
.submission-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.submission-item {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.submission-item:hover {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-color: #007bff;
}
.submission-item.selected-item {
background: #e3f2fd;
border-color: #2196f3;
box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}
.submission-info h4 {
margin: 0 0 10px 0;
color: #333;
}
.submission-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
color: #666;
font-size: 14px;
}
/* 日历和时间选择样式 */
.calendar-container {
margin-bottom: 20px;
@@ -538,17 +568,7 @@ try {
</div>
<?php endif; ?>
<!-- 预约成功信息显示 -->
<?php if (isset($_SESSION['booking_success_msg'])): ?>
<div class="booking-success">
<h3>预约成功信息已生成</h3>
<div class="copy-message" id="successMessage">
<?php echo htmlspecialchars($_SESSION['booking_success_msg']); ?>
</div>
<button class="copy-btn" onclick="copyMessage()">复制信息</button>
</div>
<?php unset($_SESSION['booking_success_msg']); ?>
<?php endif; ?>
<div class="card">
<h2>待处理预约 (共 <?php echo count($pending_submissions); ?> 条)</h2>
@@ -556,8 +576,31 @@ try {
<?php if (empty($pending_submissions)): ?>
<div class="empty-message">暂无待处理的预约请求</div>
<?php else: ?>
<!-- 无论记录数量多少，都显示选择列表 -->
<?php if (true): ?>
<div class="submission-selector">
<h3>选择要处理的预约记录</h3>
<div class="submission-list">
<?php foreach ($pending_submissions as $submission): ?>
<div class="submission-item" onclick="selectSubmission(<?php echo $submission['id']; ?>)">
<div class="submission-info">
<h4><?php echo htmlspecialchars($submission['name']); ?></h4>
<div class="submission-meta">
<span>手机号：<?php echo htmlspecialchars($submission['mobile']); ?></span>
<span>车牌号：<?php echo htmlspecialchars($submission['license_plate']); ?></span>
<span>提交时间：<?php echo htmlspecialchars($submission['create_time']); ?></span>
</div>
</div>
<span class="status-badge status-pending">待处理</span>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- 显示选中的预约记录的处理表单 -->
<?php foreach ($pending_submissions as $submission): ?>
<div class="pending-card">
<div class="pending-card" id="submission_<?php echo $submission['id']; ?>" style="display: none;">
<div class="pending-header">
<h3><?php echo htmlspecialchars($submission['name']); ?> 的预约请求</h3>
<span class="status-badge status-pending">待处理</span>
@@ -715,18 +758,36 @@ try {
</div>
<script>
// 复制预约成功信息到剪贴板
function copyMessage() {
const message = document.getElementById('successMessage');
const textArea = document.createElement('textarea');
textArea.value = message.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// 选择预约记录函数（提前定义，确保在调用前可用）
function selectSubmission(submissionId) {
// 隐藏所有待处理预约卡片并移除高亮
document.querySelectorAll('.pending-card').forEach(card => {
card.style.display = 'none';
card.classList.remove('selected-card');
});
// 显示复制成功提示
alert('预约信息已复制到剪贴板！');
// 移除选择列表中所有项的高亮
document.querySelectorAll('.submission-item').forEach(item => {
item.classList.remove('selected-item');
});
// 显示选中的预约卡片并添加高亮
const selectedCard = document.getElementById(`submission_${submissionId}`);
if (selectedCard) {
selectedCard.style.display = 'block';
selectedCard.classList.add('selected-card');
}
// 为选择列表中对应的项添加高亮
const submissionItems = document.querySelectorAll('.submission-item');
submissionItems.forEach(item => {
// 查找包含当前submissionId的点击事件
if (item.onclick && item.onclick.toString().includes(`selectSubmission(${submissionId})`)) {
item.classList.add('selected-item');
}
});
}
// 工作时间设置
@@ -741,24 +802,34 @@ try {
// 页面加载时初始化所有预约的日期、时间和套餐信息
document.addEventListener('DOMContentLoaded', function() {
<?php $firstSubmissionId = null; ?>
<?php foreach ($pending_submissions as $submission): ?>
<?php if ($firstSubmissionId === null) $firstSubmissionId = $submission['id']; ?>
// 初始化日期
selectDate(<?php echo $submission['id']; ?>, '<?php echo date('Y-m-d'); ?>');
// 初始化默认套餐信息（如果有默认选择的话）
const packageSelect = document.getElementById('selected_package_<?php echo $submission['id']; ?>');
if (packageSelect.value) {
updatePackageInfo(<?php echo $submission['id']; ?>);
} else if (packageSelect.options.length > 1) {
// 默认选择第一个套餐
packageSelect.selectedIndex = 1;
updatePackageInfo(<?php echo $submission['id']; ?>);
}
(function() {
let packageSelectElem = document.getElementById('selected_package_<?php echo $submission['id']; ?>');
if (packageSelectElem.value) {
updatePackageInfo(<?php echo $submission['id']; ?>);
} else if (packageSelectElem.options.length > 1) {
// 默认选择第一个套餐
packageSelectElem.selectedIndex = 1;
updatePackageInfo(<?php echo $submission['id']; ?>);
}
})();
<?php endforeach; ?>
// 默认显示并高亮第一条记录
<?php if ($firstSubmissionId !== null): ?>
selectSubmission(<?php echo $firstSubmissionId; ?>);
<?php endif; ?>
});
// 选择日期
function selectDate(submissionId, date) {
// 选择日期
function selectDate(submissionId, date) {
const calendarGrid = document.getElementById('calendarGrid_' + submissionId);
const timeGrid = document.getElementById('timeGrid_' + submissionId);
const selectedDateInput = document.getElementById('selected_date_' + submissionId);
@@ -996,9 +1067,9 @@ try {
let form = null;
// 方式1：通过套餐选择元素获取表单
const packageSelect = document.getElementById('selected_package_' + submissionId);
if (packageSelect) {
form = packageSelect.closest('form');
const packageSelectForm = document.getElementById('selected_package_' + submissionId);
if (packageSelectForm) {
form = packageSelectForm.closest('form');
console.log('Form found via packageSelect:', form ? 'Yes' : 'No');
}