From 0fadca8ca0d024a454c84332a210ff2f52e6f783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= Date: Wed, 19 Nov 2025 00:42:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E6=B4=97?= =?UTF-8?q?=E8=BD=A6=E9=A2=84=E7=BA=A6=E7=B3=BB=E7=BB=9F=E5=9F=BA=E7=A1=80?= =?UTF-8?q?=E6=A1=86=E6=9E=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加系统核心文件包括数据库配置、连接、SQL脚本、前端页面和样式 实现预约提交、管理功能及移动端优化 包含完整的README文档说明系统功能和使用方法 --- 0 | 0 README.md | 146 +++++++++++++++++++ bookings.php | 205 +++++++++++++++++++++++++++ carwash_db.sql | 22 +++ config.php | 7 + db_connect.php | 12 ++ index.php | 224 +++++++++++++++++++++++++++++ style.css | 374 +++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 990 insertions(+) delete mode 100644 0 create mode 100644 README.md create mode 100644 bookings.php create mode 100644 carwash_db.sql create mode 100644 config.php create mode 100644 db_connect.php create mode 100644 index.php create mode 100644 style.css diff --git a/0 b/0 deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md new file mode 100644 index 0000000..f0fd80a --- /dev/null +++ b/README.md @@ -0,0 +1,146 @@ +# 洗车预约系统 + +一个简单实用的PHP洗车预约管理系统，支持在线预约和预约管理功能。 + +## 功能特性 + +### 客户功能 +- 📝 在线提交洗车预约 +- 📱 填写客户信息（姓名、电话、车型、车牌号） +- 🛁 选择服务类型（普通洗车、精洗、打蜡、内饰清洁） +- 📅 选择预约日期和时间 +- 💬 添加备注信息 +- ✅ 防重复预约检查 + +### 管理功能 +- 📋 查看所有预约记录 +- 🔄 更新预约状态（待确认→已确认→已完成） +- ❌ 取消预约功能 +- 📊 预约统计显示 +- 🎯 状态颜色标识 + +## 技术栈 +- **后端**: PHP 7.4+ +- **数据库**: MySQL 5.7+ +- **前端**: HTML5 + CSS3 + JavaScript +- **响应式设计**: 移动端自适应 +- **数据库操作**: PDO + +## 移动端优化特性 +- 📱 **响应式设计**: 完美适配手机、平板、桌面设备 +- 👆 **触摸优化**: 针对移动设备优化的触摸交互 +- 🔍 **防缩放**: 防止意外的双击缩放 +- ⌨️ **输入优化**: 针对移动端键盘类型的自动适配 +- 🎨 **界面适配**: 小屏幕下的布局优化 +- 🚫 **触摸反馈**: 按钮点击的视觉反馈效果 +- 📋 **表单体验**: 移动端友好的表单交互 + +## 文件结构 +``` +carwash_order/ +├── index.php # 预约首页 +├── bookings.php # 预约管理页面 +├── config.php # 数据库配置 +├── db_connect.php # 数据库连接 +├── carwash_db.sql # 数据库结构 +├── style.css # 样式文件 +└── README.md # 说明文档 +``` + +## 安装说明 + +### 1. 环境要求 +- PHP 7.4 或更高版本 +- MySQL 5.7 或更高版本 +- Web服务器 (Apache/Nginx) + +### 2. 数据库配置 +1. 创建MySQL数据库 +2. 导入数据库结构： +```bash +mysql -u root -p < carwash_db.sql +``` + +### 3. 修改配置文件 +编辑 `config.php` 文件，修改数据库连接信息： +```php +$host = 'localhost'; // 数据库主机 +$username = 'root'; // 数据库用户名 +$password = ''; // 数据库密码 +$database = 'carwash_booking'; // 数据库名 +``` + +### 4. 运行系统 +1. 将所有文件放在Web服务器根目录 +2. 访问 `index.php` 开始使用系统 + +## 使用指南 + +### 客户预约流程 +1. 访问首页，填写完整的预约信息 +2. 选择服务类型和预约时间 +3. 提交表单后系统会检查时间冲突 +4. 成功提交后会显示确认信息 + +### 管理员操作 +1. 访问 `bookings.php` 查看所有预约 +2. 可以更新预约状态： + - **已确认**: 联系客户确认预约 + - **已完成**: 洗车服务已完成 + - **已取消**: 取消该预约 + +## 数据库表结构 + +### bookings 表 +| 字段 | 类型 | 说明 | +|------|------|------| +| id | INT | 主键，自增 | +| customer_name | VARCHAR(100) | 客户姓名 | +| phone | VARCHAR(20) | 联系电话 | +| car_model | VARCHAR(50) | 车型 | +| car_number | VARCHAR(20) | 车牌号 | +| service_type | ENUM | 服务类型 | +| appointment_date | DATE | 预约日期 | +| appointment_time | TIME | 预约时间 | +| notes | TEXT | 备注信息 | +| status | ENUM | 预约状态 | +| created_at | TIMESTAMP | 创建时间 | + +## 服务类型和价格 +- **普通洗车**: ￥30 +- **精洗**: ￥80 +- **打蜡**: ￥120 +- **内饰清洁**: ￥60 + +## 状态说明 +- **待确认**: 新提交的预约，等待管理员确认 +- **已确认**: 管理员已确认，可以提供服务 +- **已完成**: 服务已完成 +- **已取消**: 预约已取消 + +## 扩展功能建议 +如需添加更多功能，可以考虑： +- 用户注册登录系统 +- 在线支付功能 +- 短信/邮件通知 +- 预约提醒功能 +- 服务评价系统 +- 数据统计报表 + +## 故障排除 + +### 数据库连接失败 +1. 检查 `config.php` 中的数据库配置 +2. 确认MySQL服务正在运行 +3. 检查数据库用户权限 + +### 页面显示异常 +1. 确认PHP版本兼容 +2. 检查Web服务器配置 +3. 查看PHP错误日志 + +## 许可证 +本项目基于MIT许可证开源。 + +## 联系信息 +如有问题或建议，请联系开发团队。 \ No newline at end of file diff --git a/bookings.php b/bookings.php new file mode 100644 index 0000000..7f0fcbf --- /dev/null +++ b/bookings.php @@ -0,0 +1,205 @@ +prepare("UPDATE bookings SET status = ? WHERE id = ?"); + $stmt->execute([$new_status, $booking_id]); + $success_message = '状态更新成功！'; + } catch (Exception $e) { + $error_message = '状态更新失败：' . $e->getMessage(); + } + } +} + +// 获取所有预约 +try { + $stmt = $pdo->query("SELECT * FROM bookings ORDER BY appointment_date DESC, appointment_time DESC"); + $bookings = $stmt->fetchAll(); +} catch (Exception $e) { + $error_message = '获取预约列表失败：' . $e->getMessage(); + $bookings = []; +} +?> + + + + + + + + + + + 预约列表 - 洗车预约系统 + + + + + + +
+
+

📋 预约列表

+

管理所有洗车预约

+
+ + + + +
+ + + +
+ +
+ + +
+

所有预约 (共 条)

+ + +

暂无预约记录

+ + +
+
+

的预约

+ + + +
+ +
+
+ 联系方式： +
+
+ 车型： +
+
+ 车牌号： +
+
+ 服务类型： +
+
+ 预约日期： +
+
+ 预约时间： +
+
+ + +
+ 备注： +
+ + +
+ 预约时间： +
+ + +
+
+ + + + +
+
+ +
+ + +
+ +
+ 返回预约页面 +
+
+ + + + \ No newline at end of file diff --git a/carwash_db.sql b/carwash_db.sql new file mode 100644 index 0000000..20fc9d4 --- /dev/null +++ b/carwash_db.sql @@ -0,0 +1,22 @@ +-- carwash_db.sql - 数据库创建脚本 +CREATE DATABASE IF NOT EXISTS carwash_booking; +USE carwash_booking; + +CREATE TABLE IF NOT EXISTS bookings ( + id INT AUTO_INCREMENT PRIMARY KEY, + customer_name VARCHAR(100) NOT NULL, + phone VARCHAR(20) NOT NULL, + car_model VARCHAR(50) NOT NULL, + car_number VARCHAR(20) NOT NULL, + service_type ENUM('普通洗车', '精洗', '打蜡', '内饰清洁') NOT NULL, + appointment_date DATE NOT NULL, + appointment_time TIME NOT NULL, + notes TEXT, + status ENUM('待确认', '已确认', '已完成', '已取消') DEFAULT '待确认', + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP +); + +-- 插入一些示例数据 +INSERT INTO bookings (customer_name, phone, car_model, car_number, service_type, appointment_date, appointment_time, notes) VALUES +('张三', '13800138001', '大众朗逸', '京A12345', '普通洗车', '2024-01-15', '09:00:00', ''), +('李四', '13800138002', '丰田凯美瑞', '京B67890', '精洗', '2024-01-15', '10:30:00', '需要特别清洗内饰'); \ No newline at end of file diff --git a/config.php b/config.php new file mode 100644 index 0000000..b130cea --- /dev/null +++ b/config.php @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/db_connect.php b/db_connect.php new file mode 100644 index 0000000..667392c --- /dev/null +++ b/db_connect.php @@ -0,0 +1,12 @@ +setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); + $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); +} catch(PDOException $e) { + die("数据库连接失败: " . $e->getMessage()); +} +?> \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..0feac5d --- /dev/null +++ b/index.php @@ -0,0 +1,224 @@ +prepare("SELECT COUNT(*) FROM bookings WHERE appointment_date = ? AND appointment_time = ? AND status != '已取消'"); + $stmt->execute([$appointment_date, $appointment_time]); + if ($stmt->fetchColumn() > 0) { + $message = '该时间段已被预约，请选择其他时间！'; + $message_type = 'error'; + } else { + // 插入新预约 + $stmt = $pdo->prepare("INSERT INTO bookings (customer_name, phone, car_model, car_number, service_type, appointment_date, appointment_time, notes) VALUES (?, ?, ?, ?, ?, ?, ?, ?)"); + $stmt->execute([$customer_name, $phone, $car_model, $car_number, $service_type, $appointment_date, $appointment_time, $notes]); + + $message = '预约成功！我们会尽快联系您确认。'; + $message_type = 'success'; + } + } + } catch (Exception $e) { + $message = '预约失败：' . $e->getMessage(); + $message_type = 'error'; + } +} +?> + + + + + + + + + + + 洗车预约系统 + + + + + + +
+
+

🚗 洗车预约系统

+

快速预约，专业洗车服务

+
+ + + + +
+ +
+ + +
+

预约信息

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+

营业时间：8:00 - 18:00 | 咨询电话：400-123-4567

+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9c156ba --- /dev/null +++ b/style.css @@ -0,0 +1,374 @@ +/* style.css - 样式文件 */ +body { + font-family: 'Microsoft YaHei', Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + text-align: center; + padding: 2rem 0; + margin-bottom: 2rem; + border-radius: 8px; +} + +h1 { + margin: 0; + font-size: 2.5em; +} + +.booking-form { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + margin-bottom: 2rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #333; +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.75rem; + border: 2px solid #ddd; + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.3s; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #667eea; +} + +.btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 1rem 2rem; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; + transition: transform 0.2s; +} + +.btn:hover { + transform: translateY(-2px); +} + +.bookings-list { + background: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.booking-item { + border: 1px solid #ddd; + padding: 1rem; + margin-bottom: 1rem; + border-radius: 4px; + background: #f9f9f9; +} + +.booking-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.status { + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: bold; +} + +.status.pending { + background: #fff3cd; + color: #856404; +} + +.status.confirmed { + background: #d4edda; + color: #155724; +} + +.status.completed { + background: #d1ecf1; + color: #0c5460; +} + +.status.cancelled { + background: #f8d7da; + color: #721c24; +} + +.success-message { + background: #d4edda; + color: #155724; + padding: 1rem; + border-radius: 4px; + margin-bottom: 1rem; + border: 1px solid #c3e6cb; +} + +nav { + text-align: center; + margin-bottom: 2rem; +} + +nav a { + display: inline-block; + margin: 0 1rem; + padding: 0.5rem 1rem; + text-decoration: none; + color: #667eea; + border: 2px solid #667eea; + border-radius: 4px; + transition: all 0.3s; +} + +nav a:hover { + background: #667eea; + color: white; +} + +/* 移动端响应式设计 */ + +/* 平板设备优化 */ +@media (max-width: 768px) { + .container { + padding: 15px; + max-width: 100%; + } + + header { + padding: 1.5rem 0; + margin-bottom: 1.5rem; + } + + h1 { + font-size: 2em; + } + + .booking-form, + .bookings-list { + padding: 1.5rem; + } + + .booking-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .status { + align-self: flex-end; + } + + nav a { + margin: 0.5rem; + padding: 0.75rem 1rem; + } +} + +/* 手机设备优化 */ +@media (max-width: 480px) { + .container { + padding: 10px; + } + + header { + padding: 1rem 0; + margin-bottom: 1rem; + border-radius: 0; + } + + h1 { + font-size: 1.8em; + } + + .booking-form, + .bookings-list { + padding: 1rem; + border-radius: 0; + box-shadow: none; + margin-bottom: 1rem; + } + + .form-group { + margin-bottom: 1rem; + } + + .form-group input, + .form-group select, + .form-group textarea { + padding: 1rem; + font-size: 16px; /* 防止iOS缩放 */ + border-radius: 6px; + } + + .btn { + padding: 1rem 2rem; + font-size: 16px; + width: 100%; + margin-bottom: 0.5rem; + } + + .booking-item { + padding: 0.75rem; + } + + .booking-item div { + margin-bottom: 0.5rem; + } + + /* 预约信息网格改为单列布局 */ + .booking-item > div[style*="grid"] { + grid-template-columns: 1fr !important; + gap: 0.5rem !important; + } + + nav { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + nav a { + margin: 0; + padding: 1rem; + text-align: center; + } + + .success-message { + padding: 0.75rem; + margin-bottom: 1rem; + border-radius: 0; + } +} + +/* 小屏幕手机优化 */ +@media (max-width: 360px) { + .container { + padding: 5px; + } + + header { + padding: 0.75rem 0; + } + + h1 { + font-size: 1.5em; + } + + .booking-form, + .bookings-list { + padding: 0.75rem; + } + + .form-group input, + .form-group select, + .form-group textarea { + padding: 0.875rem; + } + + .btn { + padding: 0.875rem 1.5rem; + } +} + +/* 触摸设备优化 */ +@media (hover: none) and (pointer: coarse) { + .btn { + min-height: 44px; /* Apple人机界面指南建议的最小触摸目标 */ + } + + .form-group input, + .form-group select, + .form-group textarea { + min-height: 44px; + } + + nav a { + min-height: 44px; + display: flex; + align-items: center; + justify-content: center; + } +} + +/* 横屏手机优化 */ +@media (max-height: 500px) and (orientation: landscape) { + .container { + padding: 10px; + } + + header { + padding: 0.75rem 0; + margin-bottom: 1rem; + } + + h1 { + font-size: 1.5em; + } + + .booking-form, + .bookings-list { + padding: 1rem; + } +} + +/* 打印样式 */ +@media print { + body { + background: white; + } + + .container { + max-width: none; + padding: 0; + } + + header { + background: none; + color: black; + border-bottom: 2px solid #333; + } + + .btn, + nav { + display: none; + } + + .booking-form, + .bookings-list { + box-shadow: none; + border: 1px solid #333; + } +} \ No newline at end of file