feat(预约系统): 将工作时间改为24小时制并添加测试页面
修改工作时间设置为24小时制（00:00-24:00） 添加测试页面用于验证24小时预约功能
This commit is contained in:
@@ -518,10 +518,10 @@ $packages_json = json_encode(array_map(function($package) {
|
||||
let selectedTime = null;
|
||||
let selectedDuration = 60;
|
||||
|
||||
// 工作时间设置
|
||||
// 工作时间设置 - 改为24小时制
|
||||
const workingHours = {
|
||||
start: 8, // 8:00
|
||||
end: 18, // 18:00
|
||||
start: 0, // 00:00
|
||||
end: 24, // 24:00
|
||||
slotDuration: 30 // 30分钟一个时段
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
<?php
|
||||
// 24小时制预约功能测试脚本
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>24小时制预约功能测试</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.test-section {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
h2 {
|
||||
color: #2c3e50;
|
||||
margin-top: 0;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.test-cases {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.test-case {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.test-case h3 {
|
||||
margin-top: 0;
|
||||
color: #34495e;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.test-case p {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.test-btn {
|
||||
display: inline-block;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.test-btn:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.note {
|
||||
background-color: #fff8e1;
|
||||
padding: 15px;
|
||||
border-left: 4px solid #ffc107;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.success {
|
||||
color: #155724;
|
||||
background-color: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>24小时制预约功能测试</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>功能概述</h2>
|
||||
<p>本测试页面用于验证洗车预约系统的24小时制功能是否正常工作。系统已将原有的工作时间（08:00-17:30）修改为24小时制（00:00-24:00），以下是测试用例：</p>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>测试用例</h2>
|
||||
|
||||
<div class="test-cases">
|
||||
<div class="test-case">
|
||||
<h3>1. 正常工作时间预约</h3>
|
||||
<p>测试早上和下午的预约功能是否正常（08:00-18:00）</p>
|
||||
<a href="index.php" class="test-btn" target="_blank">打开预约页面</a>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>2. 夜间时间段预约</h3>
|
||||
<p>测试晚上时段的预约功能（18:00-23:59）</p>
|
||||
<a href="index.php" class="test-btn" target="_blank">打开预约页面</a>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>3. 凌晨时间段预约</h3>
|
||||
<p>测试凌晨时段的预约功能（00:00-08:00）</p>
|
||||
<a href="index.php" class="test-btn" target="_blank">打开预约页面</a>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
<h3>4. 跨天预约测试</h3>
|
||||
<p>测试从晚上到次日凌晨的跨天预约</p>
|
||||
<a href="index.php" class="test-btn" target="_blank">打开预约页面</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>验证步骤</h2>
|
||||
<ol>
|
||||
<li>点击上方测试按钮打开预约页面</li>
|
||||
<li>选择预约日期</li>
|
||||
<li>验证时间选择器中显示的时间段是否包含全天24小时</li>
|
||||
<li>选择不同时段（早、中、晚、凌晨）进行测试</li>
|
||||
<li>填写其他必要信息并提交预约</li>
|
||||
<li>验证预约是否成功创建，时间是否正确</li>
|
||||
<li>在订单管理页面检查新创建的预约</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>检查事项</h2>
|
||||
<ul>
|
||||
<li>确保00:00-08:00的时间段可正常选择</li>
|
||||
<li>确保18:00-23:59的时间段可正常选择</li>
|
||||
<li>验证预约提交后的时间是否正确保存</li>
|
||||
<li>确认订单管理页面中显示的时间是否正确</li>
|
||||
<li>测试修改预约时间功能是否支持24小时制</li>
|
||||
</ul>
|
||||
|
||||
<div class="note">
|
||||
<strong>注意：</strong>在测试过程中，如果发现任何时间段无法选择或预约失败，请记录具体的时间点和错误信息，以便进一步排查问题。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>手动验证</h2>
|
||||
<p>如果您想直接验证工作时间设置是否已成功修改，可以在浏览器控制台执行以下JavaScript代码：</p>
|
||||
<div style="background-color: #f1f1f1; padding: 15px; border-radius: 4px; font-family: monospace; overflow-x: auto;">
|
||||
console.log('工作时间设置:', workingHours);
|
||||
</div>
|
||||
<div class="success">
|
||||
<strong>预期结果：</strong>应该显示 {"start": 0, "end": 24, "slotDuration": 30}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 简单的页面加载提示
|
||||
window.onload = function() {
|
||||
console.log('24小时制预约功能测试页面已加载');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user