feat(移动端): 添加移动端导航菜单并优化响应式设计
refactor(预约统计): 修改查询逻辑只计算有效预约
This commit is contained in:
+29
-86
@@ -186,9 +186,18 @@ try {
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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="待处理预约页面，处理WPS表单数据">
|
||||
<meta name="keywords" content="待处理预约,预约管理,洗车预约">
|
||||
<title>张老师撸车（私家车库）工作室</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="mobile-nav.js" defer></script>
|
||||
|
||||
<!-- 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>">
|
||||
<style>
|
||||
/* 待预约页面特定样式 */
|
||||
.pending-bookings-container {
|
||||
@@ -435,30 +444,7 @@ try {
|
||||
}
|
||||
|
||||
/* 预约时长提示样式 */
|
||||
.duration-alert {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.duration-alert .alert {
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.duration-alert .alert-warning {
|
||||
background-color: #fff3cd;
|
||||
border-color: #ffeaa7;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.duration-alert .alert-info {
|
||||
background-color: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
|
||||
/* 套餐信息样式 */
|
||||
.package-info {
|
||||
@@ -577,6 +563,11 @@ try {
|
||||
<body>
|
||||
<div class="pending-bookings-container">
|
||||
<header class="header">
|
||||
<button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<h1>🚗 张老师撸车工作室 - 待处理预约</h1>
|
||||
<nav class="nav">
|
||||
<a href="index.php" class="nav-link">预约洗车</a>
|
||||
@@ -588,6 +579,17 @@ try {
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- 移动端导航菜单 -->
|
||||
<div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
|
||||
<nav class="mobile-nav">
|
||||
<a href="index.php" class="nav-link">预约洗车</a>
|
||||
<a href="bookings.php" class="nav-link">预约管理</a>
|
||||
<a href="pending_bookings.php" class="nav-link active">待处理预约</a>
|
||||
<a href="packages.php" class="nav-link">套餐管理</a>
|
||||
<a href="vip.php" class="nav-link">VIP管理</a>
|
||||
<a href="announcement.php" class="nav-link">今日待办</a>
|
||||
</nav>
|
||||
|
||||
<?php if (isset($success_message)): ?>
|
||||
<div class="success-message"><?php echo $success_message; ?></div>
|
||||
<?php endif; ?>
|
||||
@@ -754,8 +756,7 @@ try {
|
||||
</div>
|
||||
|
||||
<!-- 预约时长提示区域 -->
|
||||
<div class="duration-alert" id="durationAlert_<?php echo $submission['id']; ?>">
|
||||
<!-- 提示信息将通过JavaScript动态生成 -->
|
||||
<!-- 提示信息将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
@@ -887,9 +888,6 @@ try {
|
||||
|
||||
// 生成时间段
|
||||
generateTimeSlots(submissionId, date);
|
||||
|
||||
// 显示时长提示
|
||||
showDurationAlert(submissionId);
|
||||
}
|
||||
|
||||
// 生成时间段
|
||||
@@ -972,9 +970,6 @@ try {
|
||||
if (slotElement) {
|
||||
slotElement.classList.add('selected');
|
||||
}
|
||||
|
||||
// 显示时长提示
|
||||
showDurationAlert(submissionId);
|
||||
}
|
||||
|
||||
// 更新套餐信息
|
||||
@@ -1178,9 +1173,6 @@ try {
|
||||
if (!buttonFound) {
|
||||
console.warn('⚠️ No matching duration button found for:', minutes, 'minutes');
|
||||
}
|
||||
|
||||
// 显示时长提示
|
||||
showDurationAlert(submissionId);
|
||||
}
|
||||
|
||||
// 应用自定义时长
|
||||
@@ -1203,58 +1195,9 @@ try {
|
||||
customDurationInput.value = roundedDuration;
|
||||
selectDuration(submissionId, roundedDuration);
|
||||
}
|
||||
|
||||
// 显示时长提示
|
||||
showDurationAlert(submissionId);
|
||||
}
|
||||
|
||||
// 计算当天总预约时长（异步函数）
|
||||
async function calculateDailyTotalDuration(submissionId) {
|
||||
const selectedDate = document.getElementById('selected_date_' + submissionId).value;
|
||||
const currentDuration = parseInt(document.getElementById('customDuration_' + submissionId).value);
|
||||
|
||||
try {
|
||||
// 通过AJAX请求获取当天已有的预约时长
|
||||
const response = await fetch(`get_daily_booking_duration.php?date=${selectedDate}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
console.error('获取当天预约时长失败:', data.error);
|
||||
return currentDuration; // 如果获取失败，只返回当前预约时长
|
||||
}
|
||||
|
||||
const existingDuration = data.total_duration || 0;
|
||||
return existingDuration + currentDuration;
|
||||
} catch (error) {
|
||||
console.error('获取当天预约时长出错:', error);
|
||||
return currentDuration; // 如果出错，只返回当前预约时长
|
||||
}
|
||||
}
|
||||
|
||||
// 显示时长提示
|
||||
async function showDurationAlert(submissionId) {
|
||||
const alertContainer = document.getElementById('durationAlert_' + submissionId);
|
||||
|
||||
// 清空现有提示
|
||||
alertContainer.innerHTML = '<div class="alert alert-info">加载中...</div>';
|
||||
|
||||
try {
|
||||
const totalDuration = await calculateDailyTotalDuration(submissionId);
|
||||
|
||||
// 清空现有提示
|
||||
alertContainer.innerHTML = '';
|
||||
|
||||
// 根据总时长显示不同的提示
|
||||
if (totalDuration >= 720) { // 大于等于12小时
|
||||
alertContainer.innerHTML = '<div class="alert alert-warning">⚠️ 当天总预约时长已达到12小时，你要当超人啊，别约了！</div>';
|
||||
} else if (totalDuration >= 360) { // 大于等于6小时
|
||||
alertContainer.innerHTML = '<div class="alert alert-info">💡 当天总预约时长已达到6小时，注意休息！</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('计算总预约时长出错:', error);
|
||||
alertContainer.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user