38 Commits

Author SHA1 Message Date
wsh5485 a6c48fc681 fix(bookings): 修复客服备注功能中的数据库连接和转义问题
将$conn改为$pdo以使用正确的数据库连接
移除addslashes函数调用,仅使用htmlspecialchars进行转义
2025-12-09 17:13:52 +08:00
wsh5485 a714f0a526 feat(预约系统): 添加客服备注功能及样式
- 在公告页面和预约管理页面添加客服备注功能
- 为客服备注添加专用样式区分于客户备注
- 实现通过模态框编辑和保存客服备注的AJAX功能
- 将原备注字段明确标记为客户备注
2025-12-09 16:57:03 +08:00
wsh5485 b963c2b513 feat: 新增预约系统功能及优化
- 添加获取每日预约时长的API接口
- 实现0元订单自动标记为已付款功能
- 优化预约信息复制功能,增加服务时长和备注
- 新增预约信息模板系统
- 在待处理预约页面添加时长提示功能
- 优化移动端触摸反馈和倒计时显示
2025-12-06 05:05:15 +08:00
wsh5485 a672e1d7bc feat(预约管理): 添加预约信息复制功能和改进待处理预约界面
- 在 bookings.php 中添加复制预约信息按钮和功能
- 重构 pending_bookings.php 界面,添加预约记录选择器
- 优化待处理预约的显示逻辑,默认高亮第一条记录
- 移除不再使用的复制信息相关代码
2025-12-06 04:16:38 +08:00
wsh5485 1f0cf4acaa fix: 排除已取消的订单在待处理预约查询中
修改SQL查询条件,添加status != '已取消'过滤,确保已取消的订单不会出现在待处理预约列表中
2025-12-06 03:25:56 +08:00
wsh5485 26dd84bea2 docs: 统一导航菜单中"待处理预约"的文案
将多个页面导航菜单中的"待预约处理"统一修改为"待处理预约",保持文案一致性
2025-12-06 03:19:18 +08:00
wsh5485 a372464299 docs: 添加系统功能文档VERSION_FEATURES.md
添加详细的系统功能文档,包含核心功能模块介绍、技术实现细节、系统架构、界面优化、安装配置说明和使用指南
2025-12-06 03:09:41 +08:00
wsh5485 6906d8da2a docs: 重构README文档使其更简洁清晰
- 简化项目描述和功能说明
- 优化目录结构和内容组织
- 移除冗余的技术细节和安装步骤
- 更新项目结构说明
- 改进使用指南部分
2025-12-06 03:04:34 +08:00
wsh5485 decbc95d28 docs: 统一更新页面标题为"张老师撸车工作室"
更新所有页面的标题和头部显示,将原来的"洗车预约系统"统一改为"张老师撸车工作室",保持品牌一致性
2025-12-06 03:00:40 +08:00
wsh5485 7f2fe3dd21 style(packages): 优化表单样式和交互体验
- 移除渐变边框效果,简化卡片悬停样式
- 为表单添加内联样式,提升视觉一致性和用户体验
- 调整服务项目输入框布局,使其更紧凑易用
2025-12-06 02:51:56 +08:00
wsh5485 ae3ed1e58f feat(ui): 更新页面标题和样式,增强移动端体验
refactor: 优化套餐管理页面布局和交互效果
2025-12-06 02:45:16 +08:00
wsh5485 bb3ebffb37 统一packages.php与pending_bookings.php的样式 2025-12-06 02:17:42 +08:00
wsh5485 9d8fa49206 美化packages.php界面:1)添加了套餐卡片网格布局;2)优化了表单样式和按钮设计;3)增强了套餐卡片的视觉层次;4)改进了空状态显示;5)添加了响应式设计支持 2025-12-06 02:08:38 +08:00
wsh5485 b5cacb9e0b 注释掉pending_bookings.php中无实际意义的applyCustomDuration按钮 2025-12-06 02:04:21 +08:00
wsh5485 cb9eb599ec refactor: 移除自定义时长输入框及相关按钮 2025-12-06 02:02:38 +08:00
wsh5485 6344947fa7 在pending_bookings.php中为时长输入框添加分钟单位标识 2025-12-06 02:02:16 +08:00
wsh5485 5c0132a209 删除重复的时长输入框:1)将customDuration_xxx输入框修改为同时用于显示和提交;2)删除独立的duration_xxx输入框;3)更新相关的JavaScript函数和label引用 2025-12-06 01:56:05 +08:00
wsh5485 5ace9b86d8 修复日期显示不一致问题:1)在index.php中使用本地时区获取日期字符串,避免toISOString()导致的时区偏差;2)在vip.php中同样修改默认预约日期的获取方式 2025-12-06 01:52:06 +08:00
wsh5485 565fc310b7 修复日期显示问题:1)在index.php和pending_bookings.php中添加时区设置;2)在db_connect.php中添加全局时区设置,确保系统一致性 2025-12-06 01:48:43 +08:00
wsh5485 77ae32095e 统一时间选择样式:将index.php的时间选择样式更新为pending_bookings.php的样式 2025-12-06 01:45:39 +08:00
wsh5485 ca554456b0 优化套餐信息区域排版:1)改进容器样式,增加圆角和阴影;2)美化套餐元数据标签;3)将服务列表改为无序列表结构;4)添加响应式布局和悬停效果 2025-12-06 01:41:49 +08:00
wsh5485 d387487bc5 修复data-services属性JSON解析错误,增加对逗号分隔字符串的支持 2025-12-06 01:39:07 +08:00
wsh5485 44e4bc64d8 修复自定义时长输入框未随套餐选择更新的问题 2025-12-06 01:37:50 +08:00
wsh5485 aefd3df9ae 修复套餐选择后默认服务时长未带出问题:1)优化元素获取方式,确保能找到正确的表单和输入框;2)添加全面的错误处理和调试信息;3)触发change事件确保所有依赖功能更新 2025-12-06 01:33:18 +08:00
wsh5485 9a256cda0a 修复套餐选择后默认服务时长未带出的问题:1)使用dataset属性获取套餐数据;2)优化selectDuration函数的表单查找逻辑;3)添加调试日志以便排查问题 2025-12-06 01:28:47 +08:00
wsh5485 0245f2c822 使用data-duration属性修复服务时长选择按钮状态更新问题 2025-12-06 01:24:48 +08:00
wsh5485 f297a12a7a 修复selectDuration函数,确保套餐默认服务时间正确显示 2025-12-06 01:17:33 +08:00
wsh5485 466f16e313 修复套餐选择默认时间问题并添加快捷选择服务时长功能 2025-12-06 01:14:37 +08:00
wsh5485 a6356ea2a2 修复已过期和已预约时间段可点击的问题 2025-12-06 01:10:27 +08:00
wsh5485 ff23ac6bbb 修复时间段选择没有反应的问题 2025-12-06 01:07:54 +08:00
wsh5485 d0abed0f86 修复套餐默认时间和时间段选择问题 2025-12-06 01:06:11 +08:00
wsh5485 3944051b25 更新待预约页面:添加套餐选择、日历和空闲时间段显示功能 2025-12-06 01:02:00 +08:00
wsh5485 a9b50046c1 调整webhook日志级别,仅在错误时记录完整信息 2025-12-05 18:18:01 +08:00
wsh5485 caac9899a5 fix: 修正导航栏活动链接状态
修复导航栏中“预约洗车”和“预约管理”链接的活动状态错误,确保当前页面链接显示为激活状态
2025-12-05 18:14:06 +08:00
wsh5485 6ffabd9384 fix: 修复会话启动位置以避免重复启动
将 session_start() 移到文件开头,避免在显示预约成功信息时重复启动会话
2025-12-05 18:12:41 +08:00
wsh5485 fc3b6aa4cc feat(导航): 添加待预约处理链接并更新活动状态
在导航栏中添加"待预约处理"链接,并将"预约管理"设为当前活动状态
2025-12-05 18:10:36 +08:00
wsh5485 ac40ce0d56 refactor(database): 移除旧的数据库脚本文件
移除不再使用的create_wps_form_table.sql和carwash_db.sql数据库脚本文件,
这些文件已被新的数据库结构和迁移脚本所替代
2025-12-05 18:07:56 +08:00
wsh5485 2590e1fc22 创建待预约页面并更新导航栏 2025-12-05 18:07:00 +08:00
16 changed files with 3099 additions and 791 deletions
+52 -468
View File
@@ -1,497 +1,81 @@
# 🚗 洗车店订单管理系统
# 张老师撸车工作室 - 洗车预约管理系统
一个功能完整的洗车店订单管理系统,支持VIP客户管理、预约处理、套餐管理等功能。
一个专为洗车店设计的现代化预约管理系统,支持客户预约、套餐管理、VIP服务等功能。
## 📋 目录
## 主要功能
- [系统概述](#-系统概述)
- [主要功能](#-主要功能)
- [技术架构](#-技术架构)
- [系统要求](#-系统要求)
- [安装指南](#-安装指南)
- [项目结构](#-项目结构)
- [功能模块](#-功能模块)
- [数据库结构](#-数据库结构)
- [API接口](#-api接口)
- [使用指南](#-使用指南)
- [调试工具](#-调试工具)
- [常见问题](#-常见问题)
- [版本历史](#-版本历史)
- **预约管理**:洗车预约创建、状态管理、历史记录查询
- **套餐管理**:洗车服务套餐配置、价格和时长设置
- **VIP客户管理**:VIP客户信息管理、历史预约记录查询
- **数据持久化**:基于MySQL的可靠数据存储
- **响应式设计**:适配各种设备屏幕
## 🎯 系统概述
## 技术栈
本系统是一个专为洗车店设计的现代化订单管理平台,提供完整的客户管理、预约处理、VIP服务等功能。系统采用PHP + MySQL架构,界面简洁易用,功能完善稳定。
- **前端**HTML5, CSS3, JavaScript (jQuery)
- **后端**PHP 7.4+
- **数据库**MySQL 5.7+
- **架构**:MVC模式,PDO数据库连接
### 核心特性
## 快速安装
- 🏆 **VIP客户管理** - 完整的VIP客户信息管理和历史预约查询功能
- 📝 **预约管理** - 完整的洗车预约生命周期管理
- 📦 **套餐管理** - 灵活的洗车服务套餐配置
- 💾 **数据持久化** - 可靠的MySQL数据库存储
- 🔍 **搜索功能** - 强大的客户搜索功能
- **调试工具** - 完善的开发调试和监控工具
### 1. 环境要求
## 🚀 主要功能
- PHP 7.4+ (启用PDO扩展)
- MySQL 5.7+
- Apache/Nginx Web服务器
### 1. 客户管理
- **客户信息录入** - 姓名、手机号、车型、车牌号等基本信息
- **VIP客户管理** - 专门的VIP客户管理功能
- **客户搜索** - 支持姓名、手机号模糊搜索
- **VIP客户预约记录** - 自动显示VIP客户最近一次预约信息
### 2. 部署步骤
### 2. 预约管理
- **预约创建** - 快速创建洗车预约
- **预约状态** - 待确认、已确认、进行中、已完成、已取消等状态管理
- **预约详情** - 完整的预约信息记录
- **VIP客户特殊处理** - 自动关联VIP客户信息和历史记录
1. **克隆/上传代码**到Web服务器根目录
2. **导入数据库**
- 创建数据库 `carwash_booking`
- 导入 `merged_db.sql` 文件
3. **配置数据库连接**
- 复制 `config.php.env``config.php`
- 修改数据库连接参数
### 3. 套餐管理
- **服务套餐** - 预设洗车服务套餐
- **价格管理** - 灵活的价格设置
- **套餐配置** - 服务项目和时长配置
### 3. 访问系统
### 4. VIP专享功能
- **VIP预约历史查询** - 自动显示VIP客户最近一次预约详情
- **首次到店提示** - 为首次预约的VIP客户提供特别提示
- **客户信息自动填充** - 选择VIP客户后自动填充相关信息
打开浏览器访问:`http://localhost/carwash_order/`
## 🏗️ 技术架
### 前端技术
- **HTML5** - 现代化的页面结构
- **CSS3** - 响应式样式设计
- **JavaScript** - 动态交互和AJAX请求
- **Bootstrap** - UI组件库(可选)
### 后端技术
- **PHP 7.4+** - 服务器端脚本语言
- **MySQL 5.7+** - 关系型数据库
- **PDO** - 数据库抽象层
- **RESTful API** - 标准API设计
### 核心组件
- **数据库连接** (`db_connect.php`) - 统一的数据库连接管理
- **配置管理** (`config.php`) - 系统配置参数
- **主页面** (`index.php`) - 系统主入口和预约创建页面
- **VIP管理** (`get_vip_customers.php`, `get_vip_last_booking.php`) - VIP客户相关功能
## 💻 系统要求
### 服务器环境
- **PHP**: 7.4 或更高版本
- **MySQL**: 5.7 或更高版本
- **Web服务器**: Apache 2.4+ 或 Nginx 1.18+
- **PHP扩展**: PDO, PDO_MySQL, JSON
### 开发环境
- **操作系统**: Windows 10+, macOS 10.14+, Linux Ubuntu 18+
- **推荐工具**: XAMPP, WAMP, LAMP 或 Docker
- **浏览器**: Chrome 80+, Firefox 75+, Safari 13+
## 🔧 安装指南
### 1. 环境准备
#### 使用XAMPP(推荐)
```bash
# 下载并安装XAMPP
# 启动Apache和MySQL服务
```
#### 使用WAMPWindows用户)
```bash
# 下载并安装WAMP
# 启动WAMP服务
```
### 2. 项目部署
#### 项目文件放置
```bash
# 将项目文件复制到Web服务器根目录
# Windows (XAMPP): C:\xampp\htdocs\carwash_order\
# Linux/macOS: /var/www/html/carwash_order/
```
#### 数据库配置
```sql
-- 1. 创建数据库
CREATE DATABASE carwash_booking CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 2. 导入数据库结构
SOURCE carwash_db.sql;
-- 3. 验证表创建
SHOW TABLES;
```
#### 配置文件设置
编辑 `config.php`
```php
<?php
$host = 'localhost'; // 数据库主机
$username = 'root'; // 数据库用户名
$password = ''; // 数据库密码
$database = 'carwash_booking'; // 数据库名称
?>
```
### 3. 权限设置
#### Linux/macOS权限
```bash
# 设置目录权限
chmod -R 755 /var/www/html/carwash_order/
chown -R www-data:www-data /var/www/html/carwash_order/
```
#### Windows权限
确保IIS或Apache用户有读取项目文件的权限。
### 4. 访问测试
打开浏览器访问:
```
http://localhost/carwash_order/
```
## 📁 项目结构
## 项目结
```
carwash_order/
├── README.md # 项目说明文档
├── carwash_db.sql # 数据库结构和初始数据
├── config.php # 系统配置文件
├── db_connect.php # 数据库连接文件
├── index.php # 主页面入口
├── style.css # 样式文件
├── announcement.php # 预约公告页面
├── index.php # 预约页面入口
├── bookings.php # 预约管理页面
├── packages.php # 套餐管理页面
├── vip.php # VIP客户管理页面
├── process_booking.php # 预约处理API
├── get_bookings.php # 获取预约列表API
├── get_vip_customers.php # 获取VIP客户列表API
├── get_vip_customer.php # 获取单个VIP客户信息API
── get_vip_last_booking.php # 获取VIP客户最近预约记录API
├── add_payment_status.php # 支付状态添加API
├── update_booking.php # 预约更新API
├── test/ # 测试文件目录
│ ├── SOLUTIONS.md # 解决方案文档
│ ├── VIP_Function_Fix_Report.md # VIP功能修复报告
│ ├── VIP_Search_Fix_Report.md # VIP搜索修复报告
│ ├── debug_vip.php # VIP调试工具
│ ├── debug_vip_db.php # VIP数据库调试工具
│ ├── test.php # 基础测试文件
│ ├── test_24hour_booking.php # 24小时预约测试
│ ├── test_db_connection.php # 数据库连接测试
│ ├── test_filters.php # 过滤器测试
│ ├── test_update_booking.php # 预约更新测试
│ ├── test_vip.php # VIP功能测试
│ ├── test_vip_ajax.html # VIP AJAX测试
│ ├── test_vip_booking_history.php # VIP预约历史测试
│ ├── test_vip_debug_panel.html # VIP调试面板
│ ├── test_vip_entries.php # VIP条目测试
│ ├── test_vip_fix.html # VIP修复测试
│ ├── test_vip_loading.php # VIP加载测试
│ ├── test_vip_search.html # VIP搜索测试
│ ├── test_vip_search_simple.html # VIP简单搜索测试
│ ├── verify_vip_data.php # VIP数据验证
│ ├── vip_debug_page.html # VIP调试页面
│ ├── vip_functionality_test.html # VIP功能测试
│ └── vip_search_debug.html # VIP搜索调试页面
├── announcement.php # 今日待办页面
├── db_connect.php # 数据库连接
├── style.css # 样式文件
├── merged_db.sql # 数据库结构
── test/ # 测试工具目录
```
## 🗄️ 数据库结构
## 使用说明
### 主要数据表
### 客户预约
1. 访问主页面,选择客户类型(普通/VIP)
2. 填写客户信息或搜索VIP客户
3. 选择服务套餐和预约时间
4. 提交预约
#### 1. vip_customersVIP客户表)
```sql
CREATE TABLE vip_customers (
id INT AUTO_INCREMENT PRIMARY KEY,
customer_name VARCHAR(100) NOT NULL COMMENT '客户姓名',
phone VARCHAR(20) NOT NULL COMMENT '联系电话',
car_model VARCHAR(50) COMMENT '车型',
car_number VARCHAR(20) COMMENT '车牌号',
email VARCHAR(100) COMMENT '邮箱地址',
birthday DATE COMMENT '生日',
notes TEXT COMMENT '备注信息',
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL,
-- 复合唯一索引:确保手机号和车牌号组合唯一
UNIQUE INDEX idx_phone_car_number (phone, car_number)
);
```
### 套餐管理
1. 进入套餐管理页面
2. 创建新套餐或编辑现有套餐
3. 配置套餐名称、价格、时长和服务项目
#### 2. bookings(预约表)
```sql
CREATE TABLE 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,
package_id INT,
custom_services TEXT COMMENT '自定义服务内容',
start_time DATETIME NOT NULL,
end_time DATETIME NOT NULL,
duration INT NOT NULL COMMENT '实际服务时长(分钟)',
total_price DECIMAL(10,2) NOT NULL,
notes TEXT,
status ENUM('待确认', '已确认', '进行中', '已完成', '已取消') DEFAULT '待确认',
member_type ENUM('普通客户', 'VIP会员') DEFAULT '普通客户' COMMENT '会员类型',
source ENUM('抖音', '微信', '快手', '朋友介绍', '其他') DEFAULT '其他' COMMENT '客户来源',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL,
FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE SET NULL
);
```
### VIP管理
1. 进入VIP管理页面
2. 添加或编辑VIP客户信息
3. 查询VIP客户历史预约记录
#### 3. packages(套餐表)
```sql
CREATE TABLE packages (
id INT AUTO_INCREMENT PRIMARY KEY,
package_name VARCHAR(100) NOT NULL,
description TEXT,
base_duration INT NOT NULL COMMENT '基础服务时长(分钟)',
price DECIMAL(10,2) NOT NULL,
services TEXT NOT NULL COMMENT '包含的服务项目(用逗号分隔)',
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL
);
```
## 许可证
## 🔌 API接口
### VIP客户相关接口
#### 1. 获取VIP客户列表
```http
GET /get_vip_customers.php
```
**参数**: 无
**返回**: JSON格式的VIP客户列表
**响应示例**:
```json
[
{
"id": 1,
"customer_name": "张总",
"phone": "13900139001",
"car_model": "奔驰S500",
"car_number": "京V88888",
"email": "zhang@example.com",
"birthday": "1980-05-15",
"is_active": 1
}
]
```
#### 2. 获取单个VIP客户信息
```http
GET /get_vip_customer.php?id=1
```
**参数**:
- `id`: VIP客户ID
**返回**: JSON格式的单个VIP客户信息
#### 3. 获取VIP客户最近预约记录
```http
GET /get_vip_last_booking.php?vip_id=1
```
**参数**:
- `vip_id`: VIP客户ID
**返回**: JSON格式的最近预约信息或首次到店标识
**响应示例** (有预约记录):
```json
{
"has_booking": true,
"appointment_date": "2024-12-21",
"appointment_time": "14:00",
"package_name": "VIP套餐",
"duration": 180
}
```
**响应示例** (首次到店):
```json
{
"has_booking": false
}
```
### 预约管理相关接口
#### 4. 获取预约列表
```http
GET /get_bookings.php
```
**参数**: 无
**返回**: JSON格式的预约列表
#### 5. 处理预约创建
```http
POST /process_booking.php
```
**参数**:
- 客户信息(姓名、手机号、车型等)
- 预约日期和时间
- 选择的套餐
**返回**: JSON格式的预约处理结果
#### 6. 更新预约信息
```http
POST /update_booking.php
```
**参数**:
- `id`: 预约ID
- 其他需要更新的预约信息
**返回**: JSON格式的预约更新结果
#### 7. 添加支付状态
```http
POST /add_payment_status.php
```
**参数**:
- `booking_id`: 预约ID
- `status`: 支付状态
- `amount`: 支付金额
**返回**: JSON格式的支付状态添加结果
## 使用指南
### 基础操作流程
#### 1. VIP客户预约
```
1. 打开系统主页 (index.php)
2. 选择客户类型为"VIP客户"
3. 在VIP搜索框中输入关键词搜索客户
4. 选择目标VIP客户
5. 系统自动显示客户信息和最近一次预约记录(如有)
6. 选择服务套餐和预约时间
7. 提交预约
```
#### 2. 普通客户预约
```
1. 打开系统主页 (index.php)
2. 选择客户类型为"普通客户"
3. 填写客户基本信息
4. 选择服务套餐和预约时间
5. 提交预约
```
### VIP客户特殊功能
#### VIP客户最近预约显示
当选择VIP客户后,系统会自动查询并显示该客户的最近一次预约信息,包括:
- 预约日期
- 预约时间
- 选择的套餐
- 服务时长
如果是首次预约,则显示"该VIP首次到店"的提示信息。
## 🛠️ 调试工具
### 1. VIP预约历史测试
- **文件**: `test/test_vip_booking_history.php`
- **功能**: 测试VIP客户预约历史查询功能
- **使用**: 浏览器访问或命令行执行
### 2. VIP功能测试
- **文件**: `test/test_vip.php`
- **功能**: 测试VIP客户管理相关功能
- **使用**: 浏览器访问
### 3. 数据库连接测试
- **文件**: `test/test_db_connection.php`
- **功能**: 测试数据库连接是否正常
- **使用**: 命令行执行
### 4. 其他测试工具
- **VIP调试工具**: `test/debug_vip.php`
- **VIP搜索调试**: `test/vip_search_debug.html`
- **数据验证工具**: `test/verify_vip_data.php`
- **功能测试页面**: `test/vip_functionality_test.html`
## ❓ 常见问题
### 安装问题
#### Q: PHP版本不兼容怎么办?
A: 确保使用PHP 7.4或更高版本,检查php.ini配置是否启用PDO扩展。
#### Q: 数据库连接失败?
A: 检查config.php中的数据库配置,确保MySQL服务正在运行,用户权限正确。
### 功能问题
#### Q: VIP客户搜索不到?
A:
1. 检查数据库中是否有VIP客户数据
2. 查看浏览器控制台是否有JavaScript错误
3. 使用调试工具验证数据加载
#### Q: VIP客户预约记录不显示?
A:
1. 确认该VIP客户已有预约记录
2. 检查get_vip_last_booking.php是否正常工作
3. 查看数据库中bookings表与vip_customers表的phone字段是否匹配
#### Q: 页面显示错误"SQLSTATE[42S22]: Column not found"
A: 确保数据库结构与代码中的表结构一致,特别是bookings表使用start_time字段而不是appointment_date字段。
## 📝 版本历史
### v3.0.0 (最新版)
-**新增**: VIP客户最近预约记录显示功能
- 🐛 **修复**: 数据库查询错误,优化表结构匹配
- 🔧 **改进**: VIP客户与预约记录的关联逻辑
- **增强**: 首次到店提示功能
### v2.1.0 (2024-01-15)
-**新增**: VIP客户搜索功能优化
- 🐛 **修复**: VIP客户数据加载时序问题
- 🔧 **改进**: 异步处理机制优化
### v2.0.0 (2024-01-10)
-**新增**: VIP客户管理系统
-**新增**: 订单状态管理
-**新增**: 套餐配置功能
### v1.0.0 (2024-01-01)
- 🎉 **初始版本**: 基础订单管理功能
-**新增**: 客户信息管理
-**新增**: 订单创建和处理
## 📄 许可证
本项目采用 [MIT License](LICENSE) 开源协议。
## 🙏 致谢
感谢所有为这个项目贡献代码、反馈问题和提出建议的开发者们!
MIT License
---
**洗车店订单管理系统** - 让洗车店管理更简单、更高效! 🚗✨
**张老师撸车工作室** - 专业洗车服务预约管理系统
+170
View File
@@ -0,0 +1,170 @@
# 张老师撸车工作室 - 洗车预约管理系统
## 版本功能汇总
### 1. 核心预约管理系统
**功能特点:**
- **普通客户/VIP客户区分预约**:支持选择普通客户或VIP客户进行预约
- **套餐选择**:可选择预设的洗车套餐
- **时间冲突检测**:自动检查并避免预约时间冲突
- **预约状态管理**:支持待确认、已确认、进行中、已完成、已取消等状态
- **预约记录查询与筛选**:可按状态筛选和搜索预约记录
- **预约时间更新**:支持修改已预约的时间
- **付款状态管理**:可标记预约的付款状态(已付款/未付款)
**技术实现:**
- 基于PHP和MySQL开发
- 使用PDO进行数据库操作
- 时间冲突算法确保资源合理分配
- 表单验证和错误处理机制
### 2. 套餐管理系统
**功能特点:**
- **套餐CRUD操作**:支持添加、编辑、删除和查看套餐
- **套餐内容管理**:可定义套餐名称、描述、基础时长、价格和包含的服务项目
- **套餐状态控制**:可启用/禁用套餐
- **服务项目管理**:支持添加多个服务项目到套餐中
- **可视化套餐列表**:卡片式展示,包含套餐详细信息
**界面优化:**
- 现代化卡片式设计
- 服务项目标签展示
- 悬停效果和微动画
- 响应式设计支持移动端
### 3. VIP客户管理系统
**功能特点:**
- **VIP客户信息录入**:支持添加VIP客户基本信息
- **VIP客户查询与管理**:可查看、编辑和删除VIP客户
- **VIP客户识别**:基于手机号和车牌号组合唯一识别
- **VIP客户预约**:支持快速选择VIP客户进行预约
- **数据验证**:防止重复录入VIP客户
**技术实现:**
- 复合唯一索引确保数据完整性
- 表单验证和错误处理
- VIP客户信息自动填充功能
### 4. 待预约处理系统(WPS表单集成)
**功能特点:**
- **WPS表单数据同步**:自动获取WPS表单提交的预约请求
- **预约转换功能**:可将WPS表单提交转换为正式预约
- **套餐选择与价格计算**:支持为WPS表单提交选择套餐和计算价格
- **时间选择与冲突检测**:转换时自动检测时间冲突
- **状态管理**:标记已处理的表单提交
**技术实现:**
- 数据库表设计支持WPS表单数据存储
- 预约转换逻辑确保数据完整性
- 错误处理和日志记录
### 5. 公告与待办列表系统
**功能特点:**
- **今日预约概览**:展示当天所有预约记录
- **状态统计**:显示待处理和已完成的预约数量
- **日期选择**:支持查看不同日期的预约记录
- **预约详情展示**:包含客户信息、套餐、时间和服务项目
- **待办事项管理**:直观展示需要处理的预约
**界面优化:**
- 响应式设计支持移动端
- 统计卡片展示关键指标
- 时间线式预约列表
- 简洁明了的状态标识
### 6. 系统架构与技术栈
**技术栈:**
- **后端语言**PHP 7+
- **数据库**MySQL
- **前端技术**HTML5, CSS3, JavaScript, jQuery
- **数据库连接**PDO (PHP Data Objects)
- **版本控制**Git
**系统特点:**
- 模块化设计,功能分离清晰
- 数据库设计合理,关系明确
- 安全性考虑(输入验证、SQL注入防护)
- 响应式设计,支持桌面和移动设备
- 用户友好的界面和交互体验
### 7. 界面与用户体验优化
**优化内容:**
- **现代化UI设计**:卡片式布局、渐变效果、阴影处理
- **响应式设计**:适配不同屏幕尺寸
- **动画效果**:页面加载淡入、元素过渡动画
- **表单体验**:统一的表单样式、输入验证、占位符提示
- **交互反馈**:按钮悬停效果、操作成功/失败提示
**移动端适配:**
- 响应式布局调整
- 触摸友好的元素大小
- 优化的移动端表单
- 适配不同移动设备
## 版本信息
**当前版本:** v1.0.0
**发布日期:** 2024年
**主要改进:**
1. 完整的预约管理流程
2. 套餐管理功能
3. VIP客户管理系统
4. WPS表单集成
5. 响应式界面设计
6. 用户体验优化
## 系统要求
- PHP 7.0+
- MySQL 5.6+
- Web服务器(Apache/Nginx
- 支持PDO的PHP环境
- 浏览器支持:Chrome、Firefox、Safari、Edge (最新版本)
## 安装与配置
1. 导入数据库脚本 `merged_db.sql`
2. 配置数据库连接信息 `config.php`
3. 将项目部署到Web服务器
4. 访问系统首页开始使用
## 使用说明
1. **添加套餐**:在套餐管理页面添加洗车套餐
2. **管理VIP客户**:录入和管理VIP客户信息
3. **创建预约**:在首页选择客户类型和套餐,填写预约信息
4. **处理待预约**:在待预约页面处理WPS表单提交
5. **查看公告**:在公告页面查看今日待办和统计信息
## 功能流程图
1. **预约流程**:选择客户类型 → 填写/选择客户信息 → 选择套餐 → 选择时间 → 确认预约
2. **套餐管理**:添加套餐 → 编辑套餐 → 启用/禁用套餐 → 查看套餐列表
3. **VIP管理**:录入VIP客户 → 查询/编辑VIP信息 → 使用VIP快速预约
4. **WPS表单处理**:接收表单提交 → 转换为预约 → 标记为已处理
## 数据统计与分析
系统支持通过数据库查询获取以下统计数据:
- 每日/每周/每月预约量
- 不同套餐的销售情况
- VIP客户数量和活跃度
- 客户来源分析
## 未来计划
1. 增加支付功能集成
2. 实现短信通知系统
3. 添加数据可视化图表
4. 完善会员积分系统
5. 支持多门店管理
6. 移动端App开发
+54 -23
View File
@@ -58,7 +58,7 @@ try {
<meta name="format-detection" content="telephone=no">
<meta name="description" content="今日洗车待办列表,直观展示今日需要处理的洗车预约">
<meta name="keywords" content="公告,今日待办,预约列表,洗车管理">
<title><?php echo $page_title; ?></title>
<title>张老师撸车(私家车库)工作室</title>
<link rel="stylesheet" href="style.css">
<style>
/* 公告页面特有样式 */
@@ -245,6 +245,29 @@ try {
font-size: 0.9rem;
}
/* 客服备注样式 */
.service-notes {
margin-top: 12px;
padding: 12px;
background-color: #f8f9fa;
border-left: 4px solid #007bff;
border-radius: 4px;
}
.service-notes h4 {
margin-top: 0;
margin-bottom: 8px;
font-size: 14px;
color: #007bff;
}
.service-notes p {
margin: 0;
font-size: 13px;
color: #495057;
line-height: 1.5;
}
.no-bookings {
text-align: center;
padding: 60px 20px;
@@ -274,10 +297,11 @@ try {
<body>
<div class="container">
<header class="header">
<h1>🚗 洗车店管理系统</h1>
<h1>🚗 张老师撸车工作室 - 今日待办</h1>
<nav class="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">待处理预约</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 active">今日待办</a>
@@ -352,9 +376,6 @@ try {
if (!empty($booking['services'])) {
$services = explode(',', $booking['services']);
}
if (!empty($booking['custom_services'])) {
$services[] = $booking['custom_services'];
}
?>
<div class="booking-card <?php echo $card_class; ?>">
<div class="booking-time">
@@ -410,10 +431,18 @@ try {
</div>
<?php endif; ?>
<!-- 客服备注 -->
<?php if (!empty($booking['custom_services'])): ?>
<div class="service-notes">
<h4>客服备注:</h4>
<p><?php echo htmlspecialchars($booking['custom_services']); ?></p>
</div>
<?php endif; ?>
<!-- 备注信息 -->
<?php if (!empty($booking['notes'])): ?>
<div class="detail-row">
<span class="detail-label">备注</span>
<span class="detail-label">客户备注</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['notes']); ?></span>
</div>
<?php endif; ?>
@@ -429,18 +458,19 @@ try {
// 移动端优化脚本
document.addEventListener('DOMContentLoaded', function() {
// 为按钮添加触摸反馈
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => {
var buttons = document.querySelectorAll('.btn');
for (var i = 0; i < buttons.length; i++) {
var btn = buttons[i];
btn.addEventListener('touchstart', function() {
this.style.transform = 'translateY(1px)';
});
btn.addEventListener('touchend', function() {
this.style.transform = 'translateY(-2px)';
});
});
}
// 检测设备类型
const isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
var isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
document.body.classList.add('mobile-device');
}
@@ -451,8 +481,8 @@ try {
}, 5 * 60 * 1000);
// 将倒计时添加到页面标题旁边
const pageHeader = document.querySelector('.page-header');
const refreshInfo = document.createElement('div');
var pageHeader = document.querySelector('.page-header');
var refreshInfo = document.createElement('div');
refreshInfo.style.cssText = 'font-size:0.9rem;color:#666;margin-top:5px;';
if (pageHeader) {
@@ -465,28 +495,29 @@ try {
// 显示北京时间及距离下次刷新倒计时
function updateBeijingTime() {
const now = new Date();
const beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000); // 转为北京时间
const hours = String(beijingTime.getUTCHours()).padStart(2, '0');
const minutes = String(beijingTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(beijingTime.getUTCSeconds()).padStart(2, '0');
var now = new Date();
var beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000); // 转为北京时间
var hours = String(beijingTime.getUTCHours()).padStart(2, '0');
var minutes = String(beijingTime.getUTCMinutes()).padStart(2, '0');
var seconds = String(beijingTime.getUTCSeconds()).padStart(2, '0');
// 计算距离下次刷新的剩余时间
const refreshInterval = 5 * 60 * 1000; // 5分钟
const elapsed = now.getTime() % refreshInterval;
const remaining = refreshInterval - elapsed;
const remMinutes = Math.floor(remaining / 60000);
const remSeconds = Math.floor((remaining % 60000) / 1000);
var refreshInterval = 5 * 60 * 1000; // 5分钟
var elapsed = now.getTime() % refreshInterval;
var remaining = refreshInterval - elapsed;
var remMinutes = Math.floor(remaining / 60000);
var remSeconds = Math.floor((remaining % 60000) / 1000);
// 更新显示
if (refreshInfo) {
refreshInfo.textContent = `北京时间 ${hours}:${minutes}:${seconds} | 下次刷新 ${remMinutes}分${remSeconds}秒`;
refreshInfo.textContent = '北京时间 ' + hours + ':' + minutes + ':' + seconds + ' | 下次刷新 ' + remMinutes + '分' + remSeconds + '秒';
}
}
// 每秒更新一次
setInterval(updateBeijingTime, 1000);
updateBeijingTime(); // 初始化显示
});
</script>
</body>
+161
View File
@@ -0,0 +1,161 @@
<?php
/**
* 预约信息模板文件
* 此文件用于定义预约成功后发送给客户的信息模板
* 用户可以根据自己的需求修改此模板
*/
// 预约成功信息模板配置
$booking_templates = [
// 基本模板
'basic' => [
'title' => '预约成功!',
'message' => "预约成功!\n\n" .
"客户:{customer_name}\n" .
"手机号:{phone}\n" .
"车牌号:{car_number}\n" .
"车型:{car_model}\n" .
"\n" .
"预约时间:{start_time}\n" .
"服务项目:{package_name}\n" .
"服务时长:{duration}分钟\n" .
"总价:{total_price}元\n" .
"\n" .
"感谢您的预约!"
],
// 详细模板
'detailed' => [
'title' => '【张老师撸车工作室】预约确认',
'message' => "尊敬的 {customer_name} 先生/女士:\n\n" .
"恭喜您,您的洗车预约已成功确认!\n\n" .
"🔹 客户信息:\n" .
" - 姓名:{customer_name}\n" .
" - 手机号:{phone}\n" .
" - 车牌号:{car_number}\n" .
" - 车型:{car_model}\n" .
" - 会员类型:{member_type}\n" .
"\n" .
"🔹 预约详情:\n" .
" - 预约时间:{date} {time_range}\n" .
" - 服务项目:{package_name}\n" .
" - 自定义服务:{custom_services}\n" .
" - 服务时长:{duration}分钟\n" .
" - 总价:¥{total_price}\n" .
" - 支付状态:{payment_status}\n" .
"\n" .
"🔹 备注信息:\n" .
" {notes}\n" .
"\n" .
"🔹 温馨提示:\n" .
" 1. 请提前10分钟到达洗车地点\n" .
" 2. 如需改期或取消,请至少提前2小时联系我们\n" .
" 3. 联系电话:138-0013-8000\n" .
"\n" .
"感谢您选择张老师撸车工作室!\n" .
"祝您用车愉快!🚗✨"
],
// 简洁模板
'simple' => [
'title' => '预约确认',
'message' => "{customer_name},您的洗车预约已确认:\n" .
"时间:{start_time}\n" .
"项目:{package_name}\n" .
"总价:{total_price}元\n" .
"如需调整请联系我们。"
]
];
/**
* 生成预约信息
* @param array $booking_data 预约数据数组
* @param string $template_name 使用的模板名称
* @return string 生成的预约信息
*/
function generateBookingMessage($booking_data, $template_name = 'basic') {
global $booking_templates;
// 检查模板是否存在
if (!isset($booking_templates[$template_name])) {
$template_name = 'basic'; // 默认使用基本模板
}
$template = $booking_templates[$template_name]['message'];
// 定义替换字段
$replacements = [
'{customer_name}' => $booking_data['customer_name'] ?? '未知客户',
'{phone}' => $booking_data['phone'] ?? '未提供',
'{car_model}' => $booking_data['car_model'] ?? '未提供',
'{car_number}' => $booking_data['car_number'] ?? '未提供',
'{member_type}' => $booking_data['member_type'] ?? '普通客户',
'{package_name}' => $booking_data['package_name'] ?? '未选择套餐',
'{custom_services}' => $booking_data['custom_services'] ?? '无',
'{start_time}' => $booking_data['start_time'] ?? '未设置',
'{end_time}' => $booking_data['end_time'] ?? '未设置',
'{date}' => $booking_data['date'] ?? (isset($booking_data['start_time']) ? date('Y年m月d日', strtotime($booking_data['start_time'])) : '未设置'),
'{time_range}' => $booking_data['time_range'] ?? (isset($booking_data['start_time'], $booking_data['end_time']) ? date('H:i', strtotime($booking_data['start_time'])) . ' - ' . date('H:i', strtotime($booking_data['end_time'])) : '未设置'),
'{duration}' => $booking_data['duration'] ?? '未设置',
'{total_price}' => $booking_data['total_price'] ?? '0.00',
'{notes}' => $booking_data['notes'] ?? '无',
'{status}' => $booking_data['status'] ?? '未确认',
'{payment_status}' => $booking_data['payment_status'] ?? '未支付',
'{source}' => $booking_data['source'] ?? '未知',
'{created_at}' => $booking_data['created_at'] ?? date('Y-m-d H:i:s')
];
// 替换模板中的占位符
$message = str_replace(array_keys($replacements), array_values($replacements), $template);
return $message;
}
/**
* 获取指定模板的标题
* @param string $template_name 模板名称
* @return string 模板标题
*/
function getTemplateTitle($template_name = 'basic') {
global $booking_templates;
if (isset($booking_templates[$template_name])) {
return $booking_templates[$template_name]['title'];
}
return $booking_templates['basic']['title'];
}
/**
* 获取所有可用的模板名称
* @return array 模板名称数组
*/
function getAvailableTemplates() {
global $booking_templates;
return array_keys($booking_templates);
}
/**
* 示例用法:
* 1. 包含此文件:require_once 'booking_template.php';
* 2. 准备预约数据:
* $booking_data = [
* 'customer_name' => '张三',
* 'phone' => '138-0013-8000',
* 'car_model' => '特斯拉 Model 3',
* 'car_number' => '京A12345',
* 'member_type' => 'VIP会员',
* 'package_name' => '精致洗车套餐',
* 'start_time' => '2023-10-01 10:00:00',
* 'end_time' => '2023-10-01 11:00:00',
* 'duration' => 60,
* 'total_price' => '128.00',
* 'notes' => '车顶上有行李架,请小心清洗',
* 'status' => '已确认',
* 'payment_status' => '已付款',
* 'source' => '微信'
* ];
* 3. 生成预约信息:
* $message = generateBookingMessage($booking_data, 'detailed');
* 4. 输出或使用生成的信息:
* echo $message;
*/
?>
+140 -6
View File
@@ -25,6 +25,13 @@ if (isset($_POST['action']) && isset($_POST['booking_id'])) {
$stmt = $pdo->prepare("UPDATE bookings SET start_time = ?, end_time = ? WHERE id = ?");
$stmt->execute([$new_start_time, $new_end_time, $booking_id]);
$success_message = '预约时间更新成功!';
} elseif ($action == 'update_notes' && isset($_POST['notes_content'])) {
// 更新客服备注
$notes_content = $_POST['notes_content'];
$stmt = $pdo->prepare("UPDATE bookings SET custom_services = ? WHERE id = ?");
$stmt->execute([$notes_content, $booking_id]);
echo 'success';
exit();
}
} catch (Exception $e) {
$error_message = '更新失败:' . $e->getMessage();
@@ -74,7 +81,7 @@ try {
<meta name="format-detection" content="telephone=no">
<meta name="description" content="洗车预约管理列表,查看和管理所有预约记录">
<meta name="keywords" content="预约管理,洗车预约,预约列表">
<title>预约列表 - 洗车预约系统</title>
<title>张老师撸车(私家车库)工作室</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -84,10 +91,11 @@ try {
<body>
<div class="container">
<header class="header">
<h1>🚗 洗车预约系统 - 预约管理</h1>
<h1>🚗 张老师撸车工作室 - 预约管理</h1>
<nav class="nav">
<a href="index.php" class="nav-link">预约洗车</a>
<a href="bookings.php" class="nav-link active">预约管理</a>
<a href="pending_bookings.php" class="nav-link">待处理预约</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>
@@ -213,17 +221,31 @@ try {
<?php if ($booking['notes']): ?>
<div class="package-description">
<span class="detail-label">备注:</span>
<span class="detail-label">客户备注:</span>
<span><?php echo htmlspecialchars($booking['notes']); ?></span>
</div>
<?php endif; ?>
<?php if ($booking['custom_services']): ?>
<div class="package-description">
<span class="detail-label">客服备注:</span>
<span><?php echo htmlspecialchars($booking['custom_services']); ?></span>
<button type="button" class="btn btn-sm btn-secondary" onclick="openEditNotesModal(<?php echo $booking['id']; ?>, '<?php echo htmlspecialchars($booking['custom_services']); ?>')" style="margin-left: 10px;">修改</button>
</div>
<?php else: ?>
<div class="package-description">
<span class="detail-label">客服备注:</span>
<span style="color: #999;">无</span>
<button type="button" class="btn btn-sm btn-secondary" onclick="openEditNotesModal(<?php echo $booking['id']; ?>, '<?php echo htmlspecialchars($booking['custom_services']); ?>')" style="margin-left: 10px;">添加</button>
</div>
<?php endif; ?>
<div class="package-meta">
<span>预约时间:<?php echo $booking['created_at']; ?></span>
</div>
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
<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>
@@ -239,8 +261,19 @@ 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>
<br>
<?php endif; ?>
<!-- 复制预约信息按钮 -->
<?php
// 计算服务时长(分钟)
$start = strtotime($booking['start_time']);
$end = strtotime($booking['end_time']);
$duration = round(($end - $start) / 60);
// 获取车友备注(如果不存在则为空字符串)
$notes = $booking['notes'] ?? '';
?>
<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'])); ?>', <?php echo $duration; ?>, '<?php echo htmlspecialchars($notes); ?>')">复制预约信息</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
@@ -251,6 +284,27 @@ try {
</div>
</div>
<!-- 编辑客服备注模态框 -->
<div id="editNotesModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
<div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
<div class="modal-header">
<h3>编辑客服备注</h3>
<span class="close-modal" onclick="closeEditNotesModal()">&times;</span>
</div>
<form id="editNotesForm">
<input type="hidden" id="editNotesBookingId" name="booking_id">
<div class="form-group">
<label for="editNotesContent">客服备注内容:</label>
<textarea id="editNotesContent" name="notes_content" rows="5" placeholder="请输入客服备注内容..." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"></textarea>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-sm" onclick="closeEditNotesModal()">取消</button>
<button type="submit" class="btn btn-sm btn-primary">保存</button>
</div>
</form>
</div>
</div>
<!-- 修改预约时间模态框 -->
<div id="editTimeModal" class="modal">
<div class="modal-content">
@@ -461,15 +515,56 @@ try {
document.getElementById('editTimeModal').style.display = 'none';
}
// 编辑客服备注相关函数
function openEditNotesModal(bookingId, notesContent) {
document.getElementById('editNotesBookingId').value = bookingId;
document.getElementById('editNotesContent').value = notesContent;
document.getElementById('editNotesModal').style.display = 'block';
}
function closeEditNotesModal() {
document.getElementById('editNotesModal').style.display = 'none';
}
// 点击模态框外部关闭模态框
window.onclick = function(event) {
const modal = document.getElementById('editTimeModal');
const notesModal = document.getElementById('editNotesModal');
if (event.target == modal) {
closeEditModal();
} else if (event.target == notesModal) {
closeEditNotesModal();
}
}
// 表单提交处理 - 使用AJAX
// 编辑客服备注表单提交处理 - 使用AJAX
document.getElementById('editNotesForm').addEventListener('submit', function(event) {
event.preventDefault();
const bookingId = document.getElementById('editNotesBookingId').value;
const notesContent = document.getElementById('editNotesContent').value;
// 创建AJAX请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'bookings.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
// 刷新页面以显示更新后的备注
window.location.reload();
} else {
alert('保存失败,请重试');
}
};
xhr.onerror = function() {
alert('网络错误,请重试');
};
// 发送请求
xhr.send('action=update_notes&booking_id=' + bookingId + '&notes_content=' + encodeURIComponent(notesContent));
});
// 修改预约时间表单提交处理 - 使用AJAX
document.getElementById('editTimeForm').addEventListener('submit', function(event) {
event.preventDefault();
@@ -600,6 +695,45 @@ try {
}
}
// 复制预约信息到剪贴板
function copyMessage(id, customer_name, phone, car_model, car_number, package_name, date, time, duration, notes) {
// 构建预约信息字符串
const message = `【张老师撸车工作室】预约确认\n
客户姓名:${customer_name}
联系方式:${phone}
车型:${car_model}
车牌号:${car_number}
预约日期:${date}
套餐:${package_name}
预约时间:${time}
预计服务时长:${duration}分钟
车友备注:${notes}
\n温馨提示:
1. 请提前20分钟到达工作室
2. 如需改期或取消,请至少提前2小时联系我们
3. 联系电话:186-0345-3500
\n工作室地点:
山西省太原市晋源区义井街道西中环充电站内
也可高德/百度/腾讯地图软件内搜索‘张老师撸车’
感谢您选择张老师撸车工作室!
祝您用车愉快!
`;
// 复制到剪贴板
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() {
// 为按钮添加触摸反馈
-83
View File
@@ -1,83 +0,0 @@
-- carwash_db.sql - 数据库创建脚本
CREATE DATABASE IF NOT EXISTS carwash_booking;
USE carwash_booking;
-- 创建VIP客户表
CREATE TABLE IF NOT EXISTS vip_customers (
id INT AUTO_INCREMENT PRIMARY KEY,
customer_name VARCHAR(100) NOT NULL COMMENT '客户姓名',
phone VARCHAR(20) NOT NULL COMMENT '联系电话',
car_model VARCHAR(50) COMMENT '车型',
car_number VARCHAR(20) COMMENT '车牌号',
email VARCHAR(100) COMMENT '邮箱地址',
birthday DATE COMMENT '生日',
notes TEXT COMMENT '备注信息',
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL
);
-- 更新VIP客户表的索引结构
-- 1. 移除phone字段的UNIQUE约束(如果存在)
ALTER TABLE vip_customers DROP INDEX IF EXISTS phone;
-- 2. 添加phone和car_number的复合唯一索引
ALTER TABLE vip_customers ADD UNIQUE INDEX idx_phone_car_number (phone, car_number);
-- 3. 验证索引添加成功
SHOW INDEX FROM vip_customers;
-- 创建套餐表
CREATE TABLE IF NOT EXISTS packages (
id INT AUTO_INCREMENT PRIMARY KEY,
package_name VARCHAR(100) NOT NULL,
description TEXT,
base_duration INT NOT NULL COMMENT '基础服务时长(分钟)',
price DECIMAL(10,2) NOT NULL,
services TEXT NOT NULL COMMENT '包含的服务项目(用逗号分隔)',
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL
);
-- 修改预约表支持时间段、会员类型和来源
DROP TABLE IF EXISTS bookings;
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,
package_id INT,
custom_services TEXT COMMENT '自定义服务内容',
start_time DATETIME NOT NULL,
end_time DATETIME NOT NULL,
duration INT NOT NULL COMMENT '实际服务时长(分钟)',
total_price DECIMAL(10,2) NOT NULL,
notes TEXT,
status ENUM('待确认', '已确认', '进行中', '已完成', '已取消') DEFAULT '待确认',
member_type ENUM('普通客户', 'VIP会员') DEFAULT '普通客户' COMMENT '会员类型',
source ENUM('抖音', '微信', '快手', '朋友介绍', '其他') DEFAULT '其他' COMMENT '客户来源',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NULL,
FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE SET NULL
);
-- 插入示例套餐数据
INSERT INTO packages (package_name, description, base_duration, price, services) VALUES
('基础洗车', '基础外观清洗', 30, 50.00, '外观冲洗,泡沫清洁,内饰吸尘'),
('精洗套餐', '全面深度清洗', 90, 150.00, '外观精洗,内饰深度清洁,轮胎清洁,打蜡'),
('VIP套餐', '顶级豪华洗护', 180, 300.00, '全套精洗,抛光打蜡,内饰护理,发动机清洁,真皮护理');
-- 插入示例预约数据(包含会员类型和来源)
INSERT INTO bookings (customer_name, phone, car_model, car_number, package_id, start_time, end_time, duration, total_price, notes, member_type, source) VALUES
('张三', '13800138001', '大众朗逸', '京A12345', 1, '2024-12-20 09:00:00', '2024-12-20 09:30:00', 30, 50.00, '第一次来', '普通客户', '抖音'),
('李四', '13800138002', '丰田凯美瑞', '京B67890', 2, '2024-12-20 10:30:00', '2024-12-20 12:00:00', 90, 150.00, '需要特别清洗内饰', 'VIP会员', '朋友介绍'),
('王五', '13800138003', '宝马X3', '沪C88888', 3, '2024-12-21 14:00:00', '2024-12-21 17:00:00', 180, 300.00, 'VIP客户,定期保养', 'VIP会员', '微信'),
('赵六', '13800138004', '本田雅阁', '粤A66666', 1, '2024-12-21 09:30:00', '2024-12-21 10:00:00', 30, 50.00, '快手看到广告来的', '普通客户', '快手');
-- 插入示例VIP客户数据
INSERT INTO vip_customers (customer_name, phone, car_model, car_number, email, birthday, notes) VALUES
('张总', '13900139001', '奔驰S500', '京V88888', 'zhang@example.com', '1980-05-15', '长期VIP客户,商务人士'),
('王女士', '13900139002', '奥迪A6L', '京A66666', 'wang@example.com', '1985-03-20', '女企业家,每月定期保养'),
('李先生', '13900139003', 'BMW X5', '沪B99999', 'li@example.com', '1978-11-10', '房地产公司老板,对服务要求较高');
-30
View File
@@ -1,30 +0,0 @@
-- 创建WPS表单数据表
CREATE TABLE IF NOT EXISTS wps_form_submissions (
id INT AUTO_INCREMENT PRIMARY KEY,
rid VARCHAR(50) NOT NULL COMMENT '表单提交ID',
form_id VARCHAR(50) NOT NULL COMMENT '表单ID',
form_title VARCHAR(255) NOT NULL COMMENT '表单标题',
creator_id VARCHAR(50) NOT NULL COMMENT '创建者ID',
create_time DATETIME NOT NULL COMMENT '创建时间',
update_time DATETIME NOT NULL COMMENT '更新时间',
mobile VARCHAR(20) COMMENT '请输入手机号',
name VARCHAR(255) COMMENT '怎么称呼您',
license_plate VARCHAR(20) COMMENT '车牌号',
date DATE COMMENT '日期',
time_slot VARCHAR(20) COMMENT '时间段',
car_type VARCHAR(50) COMMENT '车型',
has_car_coat VARCHAR(10) COMMENT '是否有车衣',
car_wash_habit VARCHAR(10) COMMENT '有无自己撸车习惯',
car_wash_experience VARCHAR(50) COMMENT '撸车经验',
wash_frequency VARCHAR(50) COMMENT '洗车频率',
age_group VARCHAR(20) COMMENT '请选择年龄段',
remarks TEXT COMMENT '备注内容',
auto_number VARCHAR(50) COMMENT '自动编号',
status VARCHAR(20) DEFAULT 'pending' COMMENT '状态',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '记录创建时间',
updated_at DATETIME NOT NULL COMMENT '记录更新时间',
INDEX idx_rid (rid),
INDEX idx_license_plate (license_plate),
INDEX idx_date (date),
INDEX idx_mobile (mobile)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+1
View File
@@ -1,5 +1,6 @@
<?php
// db_connect.php - 数据库连接文件
date_default_timezone_set('Asia/Shanghai');
require_once 'config.php';
try {
+213
View File
@@ -0,0 +1,213 @@
<?php
/**
* 预约信息模板使用示例
* 此文件展示如何使用 booking_template.php 来生成预约信息
*/
// 包含模板文件
require_once 'booking_template.php';
// 示例1:使用基本模板
function example_basic_template() {
echo "=== 示例1:使用基本模板 ===\n\n";
// 准备预约数据
$booking_data = [
'customer_name' => '张三',
'phone' => '138-0013-8000',
'car_number' => '京A12345',
'car_model' => '特斯拉 Model 3',
'start_time' => '2023-10-01 10:00:00',
'package_name' => '精致洗车套餐',
'duration' => 60,
'total_price' => '128.00'
];
// 生成预约信息
$message = generateBookingMessage($booking_data, 'basic');
// 输出结果
echo "模板标题:" . getTemplateTitle('basic') . "\n";
echo "模板内容:\n" . $message . "\n\n";
}
// 示例2:使用详细模板
function example_detailed_template() {
echo "=== 示例2:使用详细模板 ===\n\n";
// 准备完整的预约数据
$booking_data = [
'customer_name' => '李四',
'phone' => '139-0013-9000',
'car_model' => '宝马 5系',
'car_number' => '沪B67890',
'member_type' => 'VIP会员',
'package_name' => '深度清洁套餐',
'custom_services' => '内饰消毒 + 轮胎养护',
'start_time' => '2023-10-02 14:30:00',
'end_time' => '2023-10-02 16:00:00',
'duration' => 90,
'total_price' => '298.00',
'notes' => '车辆右前门有轻微划痕,清洗时请注意',
'status' => '已确认',
'payment_status' => '已付款',
'source' => '抖音'
];
// 生成预约信息
$message = generateBookingMessage($booking_data, 'detailed');
// 输出结果
echo "模板标题:" . getTemplateTitle('detailed') . "\n";
echo "模板内容:\n" . $message . "\n\n";
}
// 示例3:使用简洁模板
function example_simple_template() {
echo "=== 示例3:使用简洁模板 ===\n\n";
// 准备简约的预约数据
$booking_data = [
'customer_name' => '王五',
'phone' => '137-0013-7000',
'car_number' => '粤C54321',
'car_model' => '本田 CR-V',
'start_time' => '2023-10-03 09:30:00',
'package_name' => '快速洗车',
'duration' => 30,
'total_price' => '38.00'
];
// 生成预约信息
$message = generateBookingMessage($booking_data, 'simple');
// 输出结果
echo "模板标题:" . getTemplateTitle('simple') . "\n";
echo "模板内容:\n" . $message . "\n\n";
}
// 示例4:自定义模板数据
function example_custom_data() {
echo "=== 示例4:自定义模板数据 ===\n\n";
// 从数据库获取的示例预约数据
$db_booking_data = [
'id' => 123,
'customer_name' => '赵六',
'phone' => '136-0013-6000',
'car_model' => '丰田 凯美瑞',
'car_number' => '苏D98765',
'member_type' => '普通会员',
'package_id' => 2,
'package_name' => '打蜡套餐',
'custom_services' => '',
'start_time' => '2023-10-04 16:00:00',
'end_time' => '2023-10-04 17:30:00',
'duration' => 90,
'total_price' => '198.00',
'notes' => '',
'status' => '已确认',
'payment_status' => '未付款',
'source' => '朋友介绍',
'created_at' => '2023-09-25 14:20:00',
'updated_at' => '2023-09-25 14:20:00'
];
// 生成预约信息
$message = generateBookingMessage($db_booking_data, 'detailed');
// 输出结果
echo "模板标题:" . getTemplateTitle('detailed') . "\n";
echo "模板内容:\n" . $message . "\n\n";
}
// 示例5:将模板集成到现有系统中
function example_integration() {
echo "=== 示例5:将模板集成到现有系统中 ===\n\n";
// 模拟从数据库获取预约数据
function getBookingFromDatabase($booking_id) {
// 这里应该是实际的数据库查询
return [
'id' => $booking_id,
'customer_name' => '孙七',
'phone' => '135-0013-5000',
'car_model' => '大众 帕萨特',
'car_number' => '浙E34567',
'member_type' => '普通客户',
'package_name' => '普通洗车',
'start_time' => '2023-10-05 11:00:00',
'end_time' => '2023-10-05 11:30:00',
'duration' => 30,
'total_price' => '58.00',
'notes' => '',
'status' => '已确认',
'payment_status' => '已付款',
'source' => '其他'
];
}
// 模拟发送预约确认信息
function sendBookingConfirmation($booking_id) {
// 获取预约数据
$booking = getBookingFromDatabase($booking_id);
// 生成预约信息
$template_name = $booking['member_type'] == 'VIP会员' ? 'detailed' : 'basic';
$message = generateBookingMessage($booking, $template_name);
$title = getTemplateTitle($template_name);
// 这里应该是实际的发送逻辑(短信、微信等)
echo "{$booking['phone']} 发送信息:\n";
echo "标题:{$title}\n";
echo "内容:\n{$message}\n";
return true;
}
// 使用示例
$booking_id = 456;
sendBookingConfirmation($booking_id);
}
// 运行所有示例
example_basic_template();
example_detailed_template();
example_simple_template();
example_custom_data();
example_integration();
// 显示可用模板
echo "\n=== 可用模板列表 ===\n";
echo "当前系统中可用的预约信息模板:\n";
$templates = getAvailableTemplates();
foreach ($templates as $template) {
echo "- {$template} (标题:" . getTemplateTitle($template) . ")\n";
}
// 如何自定义模板的说明
echo "\n=== 如何自定义模板 ===\n";
echo "1. 打开 booking_template.php 文件\n";
echo "2. 在 \$booking_templates 数组中添加新的模板或修改现有模板\n";
echo "3. 每个模板包含 title 和 message 两个字段\n";
echo "4. 使用 {字段名} 作为占位符,系统会自动替换为实际数据\n";
echo "5. 可使用的占位符包括:\n";
echo " - {customer_name}:客户姓名\n";
echo " - {phone}:手机号\n";
echo " - {car_model}:车型\n";
echo " - {car_number}:车牌号\n";
echo " - {member_type}:会员类型\n";
echo " - {package_name}:服务项目\n";
echo " - {custom_services}:自定义服务\n";
echo " - {start_time}:预约开始时间\n";
echo " - {end_time}:预约结束时间\n";
echo " - {date}:预约日期\n";
echo " - {time_range}:时间范围\n";
echo " - {duration}:服务时长\n";
echo " - {total_price}:总价\n";
echo " - {notes}:备注\n";
echo " - {status}:预约状态\n";
echo " - {payment_status}:支付状态\n";
echo " - {source}:来源渠道\n";
echo " - {created_at}:创建时间\n";
?>
+28
View File
@@ -0,0 +1,28 @@
<?php
// 引入数据库连接文件
require 'db_connect.php';
// 获取请求参数
$date = $_GET['date'];
// 验证日期格式
if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $date)) {
echo json_encode(['error' => 'Invalid date format']);
exit;
}
try {
// 查询指定日期的总预约时长
$sql = "SELECT SUM(duration) as total_duration FROM bookings WHERE DATE(start_time) = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$date]);
$row = $stmt->fetch();
// 获取总时长,如果没有预约则返回0
$total_duration = $row['total_duration'] ? $row['total_duration'] : 0;
// 返回结果
echo json_encode(['total_duration' => $total_duration]);
} catch (PDOException $e) {
echo json_encode(['error' => 'Database query failed: ' . $e->getMessage()]);
}
+89 -10
View File
@@ -1,4 +1,5 @@
<?php
date_default_timezone_set('Asia/Shanghai');
session_start();
require_once 'db_connect.php';
@@ -95,13 +96,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
// 插入预约记录
// 对于0元订单,自动标记为已付款
$payment_status = ($total_price <= 0) ? '已付款' : '未付款';
$stmt = $pdo->prepare("INSERT INTO bookings
(customer_name, phone, car_model, car_number, package_id, custom_services,
start_time, end_time, duration, total_price, notes, member_type, source)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
start_time, end_time, duration, total_price, notes, member_type, source, payment_status)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
$stmt->execute([$customer_name, $phone, $car_model, $car_number, $package_id, $custom_services,
$start_time, $end_time, $duration, $total_price, $notes, $member_type, $source]);
$start_time, $end_time, $duration, $total_price, $notes, $member_type, $source, $payment_status]);
$success_message = "预约提交成功!";
@@ -198,7 +202,7 @@ $packages_json = json_encode(array_map(function($package) {
<meta name="description" content="洗车预约系统 - 在线预约洗车服务">
<meta name="keywords" content="洗车,预约,在线预约,汽车美容">
<link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE5MiIgdmlld0JveD0iMCAwIDE5MiAxOTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxOTIiIGhlaWdodD0iMTkyIiByeD0iMjQiIGZpbGw9IiMzMDk1RjQiLz4KPHN2ZyB4PSI0OCIgeT0iNDgiIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMS4yIDQuNEMyMS42IDMuNiAyMi4xIDMuMSAyMi41IDIuN0MyMy40IDIuMSAyNC41IDIuMSAyNS4yIDIuN0MyNS44IDMuMSAyNi4zIDMuNiAyNi43IDQuNEMyNy4xIDUuMSAyNy4xIDYuMiAyNi43IDcuMUMyNi4zIDcuOCAyNS44IDguMyAyNS4yIDguN0MyNC43IDkuMSAyMy42IDkuMSAyMi45IDguN0MyMi4zIDguMyAyMS44IDcuOCAyMS40IDcuMUMyMS4wIDYuMiAyMS4wIDUuMSAyMS4yIDQuNFoiLz4KPHN2ZyB4PSIyMCIgeT0iMTIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMSAyMy41QzIwLjUgMjMuNSAyMCAyMyAyMCAyMi41VjEyQzIwIDExLjUgMjAuNSAxMSAyMSAxMUg5QzguNSAxMSAxMi41IDEwLjUgMTIgMTBIMjBWMTBCMjAgMTAuNSAyMC41IDExIDIxIDExVjIzLjVaIi8+CjxwYXRoIGQ9Ik0xOCAyMFYxN0gxNFY4SDVWMTNIMTlWMTVIMTlWMjBaIi8+CjxwYXRoIGQ9Ik04IDEwSDVWN0g4VjEwWiIvPgo8L3N2Zz4KPC9zdmc+">
<title>洗车预约系统</title>
<title>张老师撸车(私家车库)工作室</title>
<link rel="stylesheet" href="style.css">
<style>
@@ -310,10 +314,11 @@ $packages_json = json_encode(array_map(function($package) {
<body>
<div class="container">
<header class="header">
<h1>🚗 洗车预约系统</h1>
<h1>🚗 张老师撸车工作室</h1>
<nav class="nav">
<a href="index.php" class="nav-link active">预约洗车</a>
<a href="bookings.php" class="nav-link">预约管理</a>
<a href="pending_bookings.php" class="nav-link">待处理预约</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>
@@ -435,13 +440,20 @@ $packages_json = json_encode(array_map(function($package) {
for (let dayOffset = 0; dayOffset < 7; dayOffset++) {
const date = new Date(pageStartMonday);
date.setDate(pageStartMonday.getDate() + dayOffset);
const dateStr = date.toISOString().split('T')[0];
// 确保使用本地时区获取日期字符串
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const dateStr = `${year}-${month}-${day}`;
const dateDisplay = `${date.getMonth() + 1}/${date.getDate()}`;
const weekday = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];
// 获取今天的日期字符串用于比较
const today = new Date();
const todayStr = today.toISOString().split('T')[0];
const todayYear = today.getFullYear();
const todayMonth = String(today.getMonth() + 1).padStart(2, '0');
const todayDay = String(today.getDate()).padStart(2, '0');
const todayStr = `${todayYear}-${todayMonth}-${todayDay}`;
const isToday = dateStr === todayStr;
// 获取预约数量
@@ -506,6 +518,71 @@ $packages_json = json_encode(array_map(function($package) {
});
</script>
<style>
/* 统一时间选择样式为pending_bookings.php的样式 */
.calendar-day {
padding: 15px;
background: #f5f5f5;
border-radius: 4px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.calendar-day:hover {
background: #e9ecef;
}
.calendar-day.selected {
background: #007bff;
color: white;
}
.time-slots-container {
margin-bottom: 20px;
}
.time-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
}
.time-slot {
padding: 10px;
border-radius: 4px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.time-slot.available {
background: #d4edda;
color: #155724;
}
.time-slot.booked {
background: #f8d7da;
color: #721c24;
cursor: not-allowed;
}
.time-slot.past {
background: #e9ecef;
color: #6c757d;
cursor: not-allowed;
}
.time-slot.selected {
background: #007bff;
color: white;
}
.time-slot:hover.available {
background: #c3e6cb;
}
</style>
<div class="time-slots" id="timeSlots" style="display: none;">
<h3>🕐 选择时间段</h3>
<div class="quick-duration">
@@ -518,8 +595,8 @@ $packages_json = json_encode(array_map(function($package) {
<button type="button" class="duration-btn" onclick="selectDuration(480)">8小时</button>
<button type="button" class="duration-btn" onclick="selectDuration(600)">10小时</button>
<button type="button" class="duration-btn" onclick="selectDuration(720)">12小时</button>
<input type="number" id="customDuration" min="30" step="30" value="60" style="width: 80px; margin-left: 10px;">
<button type="button" class="btn btn-sm" onclick="applyCustomDuration()">确定</button>
<!-- <input type="number" id="customDuration" min="30" step="30" value="60" style="width: 80px; margin-left: 10px;"> -->
<!-- <button type="button" class="btn btn-sm" onclick="applyCustomDuration()">确定</button> -->
</div>
<div class="time-grid" id="timeGrid">
<!-- 时间段将通过JavaScript动态生成 -->
@@ -1805,6 +1882,7 @@ $packages_json = json_encode(array_map(function($package) {
const slotDiv = document.createElement('div');
slotDiv.className = `time-slot ${isPast ? 'past' : ''} ${isBooked ? 'booked' : 'available'}`;
slotDiv.textContent = timeString;
slotDiv.dataset.time = timeString; // 添加数据属性,与pending_bookings.php保持一致
slotDiv.onclick = () => selectTimeSlot(timeString);
timeGrid.appendChild(slotDiv);
@@ -1885,7 +1963,8 @@ $packages_json = json_encode(array_map(function($package) {
slot.classList.remove('selected');
});
const slotElement = document.querySelector(`[onclick="selectTimeSlot('${time}')"]`);
// 使用data-time属性查找元素,与pending_bookings.php保持一致
const slotElement = document.querySelector(`[data-time="${time}"]`);
if (slotElement) {
slotElement.classList.add('selected');
}
+123 -82
View File
@@ -51,23 +51,34 @@ $packages = $stmt->fetchAll();
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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="洗车套餐管理系统">
<meta name="keywords" content="洗车,套餐,管理">
<link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE5MiIgdmlld0JveD0iMCAwIDE5MiAxOTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxOTIiIGhlaWdodD0iMTkyIiByeD0iMjQiIGZpbGw9IiMzMDk1RjQiLz4KPHN2ZyB4PSI0OCIgeT0iNDgiIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMS4yIDQuNEMyMS42IDMuNiAyMi4xIDMuMSAyMi41IDIuN0MyMy40IDIuMSAyNC41IDIuMSAyNS4yIDIuN0MyNS44IDMuMSAyNi4zIDMuNiAyNi43IDQuNEMyNy4xIDUuMSAyNy4xIDYuMiAyNi43IDcuMUMyNi4zIDcuOCAyNS44IDguMyAyNS4yIDguN0MyNC43IDkuMSAyMy42IDkuMSAyMi45IDguN0MyMi4zIDguMyAyMS44IDcuOCAyMS40IDcuMUMyMS4wIDYuMiAyMS4wIDUuMSAyMS4yIDQuNFoiLz4KPHN2ZyB4PSIyMCIgeT0iMTIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMSAyMy41QzIwLjUgMjMuNSAyMCAyMyAyMCAyMi41VjEyQzIwIDExLjUgMjAuNSAxMSAyMSAxMUg5QzguNSAxMSAxMi41IDEwLjUgMTIgMTBIMjBWMTBCMjAgMTAuNSAyMC41IDExIDIxIDExVjIzLjVaIi8+CjxwYXRoIGQ9Ik0xOCAyMFYxN0gxNFY4SDVWMTNIMTlWMTVIMTlWMjBaIi8+CjxwYXRoIGQ9Ik04IDEwSDVWN0g4VjEwWiIvPgo8L3N2Zz4KPC9zdmc+">
<title>套餐管理 - 洗车预约系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张老师撸车(私家车库)工作室</title>
<link rel="stylesheet" href="style.css">
<style>
/* 套餐管理页面特定样式 */
.pending-bookings-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 加载动画 */
.loading { display: none; }
/* 页面淡入效果 */
body {
animation: fadeIn 0.5s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="pending-bookings-container">
<header class="header">
<h1>🚗 洗车预约系统 - 套餐管理</h1>
<h1>🚗 张老师撸车工作室 - 套餐管理</h1>
<nav class="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">待处理预约</a>
<a href="packages.php" class="nav-link active">套餐管理</a>
<a href="vip.php" class="nav-link">VIP管理</a>
<a href="announcement.php" class="nav-link">今日待办</a>
@@ -82,62 +93,75 @@ $packages = $stmt->fetchAll();
<?php endif; ?>
<div class="package-form-container">
<h2>添加新套餐</h2>
<form method="POST" class="form">
<h2>📋 添加新套餐</h2>
<form method="POST" class="package-form" style="background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
<input type="hidden" name="action" value="add">
<div class="form-group">
<label for="package_name">套餐名称</label>
<input type="text" id="package_name" name="package_name" required>
<div class="form-group" style="margin-bottom: 16px;">
<label for="package_name" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐名称</label>
<input type="text" id="package_name" name="package_name" required placeholder="如:标准洗车套餐" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
</div>
<div class="form-group">
<label for="description">套餐描述</label>
<textarea id="description" name="description" rows="3"></textarea>
<div class="form-group" style="margin-bottom: 16px;">
<label for="description" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐描述</label>
<textarea id="description" name="description" rows="3" placeholder="详细描述套餐内容和特点" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="base_duration">基础时长(分钟):</label>
<input type="number" id="base_duration" name="base_duration" min="15" step="15" value="60" required>
</div>
<div class="form-group">
<label for="price">价格(元):</label>
<input type="number" id="price" name="price" min="0" step="0.01" required>
<div class="form-row" style="display: flex; gap: 16px; margin-bottom: 16px;">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label for="base_duration" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">基础时长</label>
<div class="input-group" style="display: flex; align-items: center;">
<input type="number" id="base_duration" name="base_duration" min="15" step="15" value="60" required class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; border-right: none;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; color: #666;">分钟</span>
</div>
</div>
<div class="form-group">
<label>服务项目:</label>
<div class="services-container">
<div class="service-item">
<input type="text" name="services[]" placeholder="服务项目1" value="外观清洗">
<button type="button" class="btn-remove" onclick="removeService(this)">删除</button>
</div>
<div class="service-item">
<input type="text" name="services[]" placeholder="服务项目2" value="内饰清洁">
<button type="button" class="btn-remove" onclick="removeService(this)">删除</button>
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label for="price" class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">价格</label>
<div class="input-group" style="display: flex; align-items: center;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; color: #666;">¥</span>
<input type="number" id="price" name="price" min="0" step="0.01" required placeholder="0.00" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; border-left: none;">
</div>
</div>
<button type="button" class="btn-add" onclick="addService()">+ 添加服务项目</button>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">添加套餐</button>
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">服务项目</label>
<div class="services-container" style="margin-bottom: 8px;">
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" placeholder="如:外观清洗" value="外观清洗" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" placeholder="如:内饰清洁" value="内饰清洁" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
</div>
<button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
</div>
<div class="form-actions" style="margin-top: 24px; display: flex; justify-content: flex-end;">
<button type="submit" class="btn-primary btn-lg" style="padding: 10px 24px; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.3s;">
<span>✨ 添加套餐</span>
</button>
</div>
</form>
</div>
<div class="packages-list">
<h2>套餐列表</h2>
<h2>📊 套餐列表</h2>
<?php if (empty($packages)): ?>
<div class="empty-state">
<div class="empty-icon">📦</div>
<p class="empty-message">暂无套餐数据</p>
<p class="empty-submessage">点击上方"添加套餐"按钮创建第一个套餐吧!</p>
</div>
<?php else: ?>
<div class="packages-grid">
<?php foreach ($packages as $package): ?>
<div class="package-card <?= $package['is_active'] ? '' : 'inactive' ?>">
<div class="package-card <?= $package['is_active'] ? '' : 'inactive' ?>" data-package-id="<?= $package['id'] ?>">
<div class="package-header">
<h3><?= htmlspecialchars($package['package_name']) ?></h3>
<h3 class="package-title"><?= htmlspecialchars($package['package_name']) ?></h3>
<div class="package-status">
<span class="status-badge <?= $package['is_active'] ? 'active' : 'inactive' ?>">
<?= $package['is_active'] ? '启用' : '禁用' ?>
@@ -151,12 +175,12 @@ $packages = $stmt->fetchAll();
<div class="package-details">
<div class="detail-item">
<span class="detail-label">基础时长</span>
<span class="detail-value"><?= $package['base_duration'] ?>分钟</span>
<span class="detail-label">时长</span>
<span class="detail-value"><strong><?= $package['base_duration'] ?></strong>分钟</span>
</div>
<div class="detail-item">
<span class="detail-label">价格</span>
<span class="detail-value">¥<?= number_format($package['price'], 2) ?></span>
<span class="detail-label">价格</span>
<span class="detail-value price"><strong>¥<?= number_format($package['price'], 2) ?></strong></span>
</div>
</div>
@@ -165,7 +189,7 @@ $packages = $stmt->fetchAll();
if ($services && !empty(trim($services[0]))):
?>
<div class="package-services">
<span class="detail-label">包含服务</span>
<span class="detail-label">包含服务</span>
<div class="services-tags">
<?php foreach ($services as $service): ?>
<?php if (trim($service)): ?>
@@ -177,75 +201,88 @@ $packages = $stmt->fetchAll();
<?php endif; ?>
<div class="package-actions">
<button class="btn btn-sm" onclick="editPackage(<?= $package['id'] ?>)">编辑</button>
<button class="btn-primary btn-sm" onclick="editPackage(<?= $package['id'] ?>)"><span>✏️ 编辑</span></button>
<form method="POST" style="display: inline;" onsubmit="return confirmDelete()">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="id" value="<?= $package['id'] ?>">
<button type="submit" class="btn btn-danger btn-sm">删除</button>
<button type="submit" class="btn-danger btn-sm"><span>🗑️ 删除</span></button>
</form>
</div>
<!-- 编辑表单 -->
<form method="POST" class="edit-form" id="edit-form-<?= $package['id'] ?>" style="display: none;">
<form method="POST" class="edit-form" id="edit-form-<?= $package['id'] ?>" style="display: none; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-top: 16px;">
<input type="hidden" name="action" value="update">
<input type="hidden" name="id" value="<?= $package['id'] ?>">
<div class="form-group">
<label>套餐名称:</label>
<input type="text" name="package_name" value="<?= htmlspecialchars($package['package_name']) ?>" required>
<h4 style="margin-top: 0; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">✏️ 编辑套餐</h4>
<div class="form-group" style="margin-bottom: 16px;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐名称</label>
<input type="text" name="package_name" value="<?= htmlspecialchars($package['package_name']) ?>" required placeholder="请输入套餐名称" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
</div>
<div class="form-group">
<label>套餐描述</label>
<textarea name="description" rows="2"><?= htmlspecialchars($package['description']) ?></textarea>
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">套餐描述</label>
<textarea name="description" rows="2" placeholder="请输入套餐描述" class="form-control" style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"><?= htmlspecialchars($package['description']) ?></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>基础时长(分钟):</label>
<input type="number" name="base_duration" min="15" step="15" value="<?= $package['base_duration'] ?>" required>
</div>
<div class="form-group">
<label>价格(元):</label>
<input type="number" name="price" min="0" step="0.01" value="<?= $package['price'] ?>" required>
<div class="form-row" style="display: flex; gap: 16px; margin-bottom: 16px;">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">基础时长</label>
<div class="input-group" style="display: flex; align-items: center;">
<input type="number" name="base_duration" min="15" step="15" value="<?= $package['base_duration'] ?>" required class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; border-right: none;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; color: #666;">分钟</span>
</div>
</div>
<div class="form-group">
<label>服务项目:</label>
<div class="services-container">
<div class="form-group" style="flex: 1; margin-bottom: 0;">
<label class="required" style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">价格</label>
<div class="input-group" style="display: flex; align-items: center;">
<span class="input-group-addon" style="padding: 10px 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 14px; color: #666;">¥</span>
<input type="number" name="price" min="0" step="0.01" value="<?= $package['price'] ?>" required placeholder="0.00" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 0 4px 4px 0; font-size: 14px; border-left: none;">
</div>
</div>
</div>
<div class="form-group" style="margin-bottom: 16px;">
<label style="display: block; font-weight: 600; margin-bottom: 6px; color: #333;">服务项目</label>
<div class="services-container" style="margin-bottom: 8px;">
<?php
$services = explode(',', $package['services']);
foreach ($services as $service):
if (trim($service)):
?>
<div class="service-item">
<input type="text" name="services[]" value="<?= htmlspecialchars(trim($service)) ?>">
<button type="button" class="btn-remove" onclick="removeService(this)">删除</button>
<div class="service-item" style="display: flex; gap: 8px; margin-bottom: 8px; align-items: center;">
<input type="text" name="services[]" value="<?= htmlspecialchars(trim($service)) ?>" placeholder="请输入服务项目" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
</div>
<?php
endif;
endforeach;
?>
</div>
<button type="button" class="btn-add" onclick="addService()">+ 添加服务项目</button>
<button type="button" class="btn-outline btn-sm" onclick="addService()" style="padding: 6px 12px; background: white; color: #1890ff; border: 1px solid #1890ff; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>+ 添加服务项目</span></button>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?>>
启用此套餐
<div class="form-group" style="margin-bottom: 16px;">
<label class="checkbox-label" style="display: flex; align-items: center; cursor: pointer;">
<input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?> style="margin-right: 8px;">
<span class="checkbox-text" style="font-weight: normal; color: #333;">启用此套餐</span>
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存更改</button>
<button type="button" class="btn" onclick="cancelEdit(<?= $package['id'] ?>)">取消</button>
<div class="form-actions" style="display: flex; gap: 12px; justify-content: flex-end;">
<button type="submit" class="btn-primary" style="padding: 8px 16px; background: #1890ff; color: white; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: background 0.3s;">
<span>💾 保存更改</span>
</button>
<button type="button" class="btn-outline" onclick="cancelEdit(<?= $package['id'] ?>)" style="padding: 8px 16px; background: white; color: #666; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s;">
<span>❌ 取消</span>
</button>
</div>
</form>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
@@ -255,9 +292,13 @@ $packages = $stmt->fetchAll();
const container = document.querySelector('.services-container');
const serviceItem = document.createElement('div');
serviceItem.className = 'service-item';
serviceItem.style.display = 'flex';
serviceItem.style.gap = '8px';
serviceItem.style.marginBottom = '8px';
serviceItem.style.alignItems = 'center';
serviceItem.innerHTML = `
<input type="text" name="services[]" placeholder="服务项目">
<button type="button" class="btn-remove" onclick="removeService(this)">删除</button>
<input type="text" name="services[]" placeholder="如:外观清洗" class="form-control" style="flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" required>
<button type="button" class="btn-danger btn-sm" onclick="removeService(this)" style="padding: 6px 12px; background: #ff4d4f; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;"><span>删除</span></button>
`;
container.appendChild(serviceItem);
}
+1260
View File
File diff suppressed because it is too large Load Diff
+717 -5
View File
@@ -878,6 +878,85 @@ body {
margin: 0;
max-height: calc(100vh - 20px);
}
/* 套餐管理页面移动端优化 */
.pending-bookings-container {
padding: var(--el-spacing-small);
}
.pending-card {
padding: var(--el-spacing-base);
}
.pending-header h2 {
font-size: var(--el-font-size-large);
}
.package-card {
padding: var(--el-spacing-base);
margin-bottom: var(--el-spacing-base);
}
.package-header {
flex-direction: column;
align-items: flex-start;
gap: var(--el-spacing-small);
}
.package-details {
grid-template-columns: 1fr;
gap: var(--el-spacing-small);
}
.services-tags {
justify-content: flex-start;
gap: var(--el-spacing-small);
}
.service-tag {
font-size: var(--el-font-size-small);
padding: 3px 6px;
}
.package-actions {
flex-direction: column;
gap: var(--el-spacing-small);
}
/* 服务项目移动端布局 */
.service-item {
flex-direction: column;
align-items: stretch !important;
gap: var(--el-spacing-small) !important;
}
.service-item div {
flex: none !important;
}
/* 表单移动端优化 */
.form-group {
margin-bottom: var(--el-spacing-base);
}
.form-control {
padding: 14px 16px;
font-size: 16px; /* 防止iOS缩放 */
}
.input-group {
flex-direction: column;
}
.input-group .form-control {
border-radius: var(--el-border-radius-base);
margin-bottom: var(--el-spacing-small);
}
.input-group .btn {
border-radius: var(--el-border-radius-base);
width: 100%;
}
}
/* 小屏幕手机 */
@@ -963,6 +1042,171 @@ body {
to { transform: translateX(0); }
}
/* 页面加载动画 */
.page-fade-in {
animation: pageFadeIn 0.6s ease-out;
}
@keyframes pageFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 套餐卡片入场动画 */
.package-card {
animation: cardFadeIn 0.4s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes cardFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 卡片延迟动画,为每个卡片添加不同的延迟 */
.package-card:nth-child(1) { animation-delay: 0.1s; }
.package-card:nth-child(2) { animation-delay: 0.2s; }
.package-card:nth-child(3) { animation-delay: 0.3s; }
.package-card:nth-child(4) { animation-delay: 0.4s; }
.package-card:nth-child(5) { animation-delay: 0.5s; }
.package-card:nth-child(6) { animation-delay: 0.6s; }
/* 按钮波纹效果 */
.btn {
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::after {
width: 300px;
height: 300px;
}
.btn-primary::after {
background: rgba(255, 255, 255, 0.5);
}
/* 表单元素动画 */
.form-control {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 服务标签悬停动画 */
.service-tag {
transition: all 0.3s ease;
}
.service-tag:hover {
transform: translateY(-2px);
box-shadow: var(--el-shadow-light);
}
/* 状态徽章动画 */
.status-badge {
transition: all 0.3s ease;
}
/* 空状态动画 */
.empty-message {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 0.8;
}
50% {
opacity: 1;
}
100% {
opacity: 0.8;
}
}
/* 表单基础样式 */
.form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
font-size: var(--el-font-size-base);
color: var(--el-text-primary);
background-color: var(--el-bg-color);
transition: all 0.3s ease;
outline: none;
box-sizing: border-box;
}
.form-control:focus {
border-color: var(--el-primary-color);
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.form-control:hover:not(:disabled) {
border-color: var(--el-primary-light);
}
.form-control:disabled {
background-color: var(--el-bg-color-page);
opacity: 0.7;
cursor: not-allowed;
}
/* 表单组样式 */
.form-group {
margin-bottom: var(--el-spacing-large);
}
.form-group label {
display: block;
margin-bottom: var(--el-spacing-small);
font-weight: 500;
color: var(--el-text-primary);
font-size: var(--el-font-size-base);
}
.form-group label.required::after {
content: " *";
color: var(--el-danger-color);
}
/* 输入组样式 */
.input-group {
display: flex;
align-items: stretch;
width: 100%;
gap: var(--el-spacing-small);
}
.input-group .form-control {
flex: 1;
margin-bottom: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .btn {
flex: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* 表单操作区域 */
.form-actions {
display: flex;
@@ -1110,18 +1354,486 @@ label {
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--el-bg-color-page);
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--el-border-color);
border-radius: 3px;
background: #ccc;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--el-text-secondary);
background: #999;
}
/* 套餐管理页面样式 */
.package-form-container {
margin-bottom: var(--el-spacing-extra-large);
background: var(--el-bg-color);
border-radius: var(--el-border-radius-base);
box-shadow: var(--el-shadow-light);
padding: var(--el-spacing-large);
}
.package-form-container h2,
.packages-list h2 {
margin: 0 0 var(--el-spacing-large) 0;
font-size: var(--el-font-size-large);
font-weight: 600;
color: var(--el-text-primary);
padding-bottom: var(--el-spacing-base);
border-bottom: 1px solid var(--el-border-lighter);
}
.packages-list {
background: var(--el-bg-color);
border-radius: var(--el-border-radius-base);
box-shadow: var(--el-shadow-light);
padding: var(--el-spacing-large);
}
/* 套餐卡片网格布局 */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--el-spacing-large);
margin-top: var(--el-spacing-large);
}
/* 套餐卡片样式 */
.package-card {
background: var(--el-bg-color);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
padding: var(--el-spacing-large);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
background-clip: padding-box;
}
.package-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.package-card.inactive {
opacity: 0.7;
border: 1px dashed var(--el-border-color);
}
.package-card.inactive::before {
content: '已禁用';
position: absolute;
top: 16px;
right: -30px;
background: var(--el-danger-color);
color: white;
padding: 4px 32px;
font-size: 12px;
font-weight: 600;
transform: rotate(45deg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1;
letter-spacing: 0.5px;
}
.package-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--el-spacing-base);
padding-bottom: var(--el-spacing-small);
border-bottom: 2px solid var(--el-border-color-lighter);
position: relative;
z-index: 2;
}
.package-title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
color: var(--el-text-primary);
flex: 1;
margin-right: var(--el-spacing-base);
line-height: 1.4;
position: relative;
display: inline-block;
}
/* 标题悬停下划线动画 */
.package-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--el-primary-color);
transition: width 0.3s ease;
}
.package-card:hover .package-title::after {
width: 100%;
}
.package-status {
display: flex;
align-items: center;
}
.status-badge {
padding: 4px 12px;
border-radius: var(--el-border-radius-round);
font-size: var(--el-font-size-extra-small);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.status-badge.active {
background: rgba(103, 194, 58, 0.1);
color: var(--el-success-color);
border: 1px solid rgba(103, 194, 58, 0.2);
}
.status-badge.inactive {
background: rgba(245, 108, 108, 0.1);
color: var(--el-danger-color);
border: 1px solid rgba(245, 108, 108, 0.2);
}
.package-description {
margin: 0 0 var(--el-spacing-base) 0;
color: var(--el-text-secondary);
font-size: var(--el-font-size-small);
line-height: 1.6;
padding: 0 var(--el-spacing-small);
}
.package-details {
margin: var(--el-spacing-base) 0;
padding: var(--el-spacing-large);
background: linear-gradient(135deg, rgba(246, 248, 250, 0.8), rgba(238, 242, 246, 0.8));
border-radius: 10px;
border: 1px solid var(--el-border-color-lighter);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
/* 详情区域悬停效果 */
.package-card:hover .package-details {
background: linear-gradient(135deg, rgba(240, 244, 248, 0.9), rgba(228, 232, 236, 0.9));
transform: scale(1.02);
}
/* 渐变光效 */
.package-details::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
}
.package-card:hover .package-details::before {
left: 100%;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--el-spacing-small);
font-size: var(--el-font-size-small);
}
.detail-item:last-child {
margin-bottom: 0;
}
.detail-label {
color: var(--el-text-secondary);
font-weight: 500;
font-size: var(--el-font-size-extra-small);
}
.detail-value {
color: var(--el-text-primary);
font-weight: 600;
}
.detail-value.price {
color: var(--el-danger-color);
font-size: var(--el-font-size-base);
}
/* 服务项目标签 */
.package-services {
margin: var(--el-spacing-base) 0;
}
.package-services .detail-label {
display: block;
margin-bottom: var(--el-spacing-small);
font-size: var(--el-font-size-small);
color: var(--el-text-regular);
font-weight: 500;
}
.services-tags {
display: flex;
flex-wrap: wrap;
gap: var(--el-spacing-small);
}
.service-tag {
background: var(--el-border-extra-light);
color: var(--el-text-regular);
padding: 6px 16px;
border-radius: 20px;
font-size: var(--el-font-size-extra-small);
font-weight: 600;
border: 1px solid var(--el-border-lighter);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.service-tag:hover {
background: var(--el-primary-color);
color: white;
border-color: var(--el-primary-color);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 服务标签悬停光效 */
.service-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.4s ease;
}
.service-tag:hover::before {
left: 100%;
}
/* 套餐操作按钮 */
.package-actions {
margin-top: var(--el-spacing-base);
display: flex;
gap: var(--el-spacing-small);
justify-content: flex-end;
padding-top: var(--el-spacing-base);
border-top: 1px solid var(--el-border-lighter);
}
/* 空状态样式 */
.empty-state {
text-align: center;
padding: var(--el-spacing-extra-large) 0;
background: var(--el-bg-color);
border-radius: var(--el-border-radius-base);
box-shadow: var(--el-shadow-light);
margin-top: var(--el-spacing-large);
}
.empty-icon {
font-size: 64px;
margin-bottom: var(--el-spacing-base);
opacity: 0.5;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.empty-state:hover .empty-icon {
opacity: 0.8;
filter: grayscale(0%);
transform: scale(1.05);
}
.empty-message {
font-size: var(--el-font-size-large);
font-weight: 600;
color: var(--el-text-secondary);
margin: 0 0 var(--el-spacing-small) 0;
}
.empty-submessage {
font-size: var(--el-font-size-base);
color: var(--el-text-placeholder);
margin: 0;
}
/* 编辑表单样式 */
.edit-form {
margin-top: var(--el-spacing-base);
border-top: 2px solid var(--el-border-lighter);
padding-top: var(--el-spacing-large);
animation: fadeIn 0.3s ease;
}
.edit-form h4 {
margin: 0 0 var(--el-spacing-base) 0;
font-size: var(--el-font-size-base);
font-weight: 600;
color: var(--el-text-primary);
}
/* 服务项目样式 */
.services-container {
margin-bottom: var(--el-spacing-small);
}
.service-item {
display: flex;
align-items: center;
gap: var(--el-spacing-small);
margin-bottom: var(--el-spacing-small);
}
.service-item input {
flex: 1;
}
/* 复选框标签样式 */
.checkbox-label {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
margin-bottom: var(--el-spacing-small);
}
.checkbox-text {
margin-left: var(--el-spacing-small);
color: var(--el-text-primary);
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.packages-grid {
grid-template-columns: 1fr;
gap: var(--el-spacing-base);
}
.package-header {
flex-direction: column;
align-items: flex-start;
}
.package-status {
margin-top: var(--el-spacing-small);
align-self: flex-start;
}
.form-row {
flex-direction: column;
}
.form-row .form-group {
width: 100%;
}
.package-actions {
flex-direction: column;
gap: var(--el-spacing-base);
}
.package-actions button {
width: 100%;
}
.package-form-container,
.packages-list {
padding: var(--el-spacing-base);
}
.package-card {
padding: var(--el-spacing-base);
}
}
/* 表单样式增强 */
.form-row {
display: flex;
gap: 20px;
margin-bottom: var(--el-spacing-large);
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
/* 按钮悬停效果增强 */
.btn {
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn span {
position: relative;
z-index: 1;
}
+8 -3
View File
@@ -141,16 +141,17 @@ try {
<meta name="format-detection" content="telephone=no">
<meta name="description" content="VIP客户管理,录入和管理VIP客户信息">
<meta name="keywords" content="VIP管理,客户管理,会员管理">
<title>VIP管理 - 洗车预约系统</title>
<title>张老师撸车(私家车库)工作室</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>🚗 洗车预约系统 - VIP管理</h1>
<h1>🚗 张老师撸车工作室 - VIP管理</h1>
<nav class="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">待处理预约</a>
<a href="packages.php" class="nav-link">套餐管理</a>
<a href="vip.php" class="nav-link active">VIP管理</a>
<a href="announcement.php" class="nav-link">今日待办</a>
@@ -921,7 +922,11 @@ try {
document.getElementById('booking_car_number').value = carNumber || '';
// 设置默认预约日期为今天
document.getElementById('booking_date').value = new Date().toISOString().split('T')[0];
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
document.getElementById('booking_date').value = `${year}-${month}-${day}`;
// 清空其他字段
document.getElementById('booking_time_slot').value = '';
+7 -5
View File
@@ -82,9 +82,8 @@ $method = $_SERVER['REQUEST_METHOD'];
// 获取请求数据
$request_body = file_get_contents('php://input');
// 记录所有请求
// 记录所有请求(仅记录方法)
log_message("收到请求 - 方法: $method");
log_message("请求内容: $request_body");
// 处理验证请求
if ($method == 'POST') {
@@ -108,7 +107,6 @@ if ($method == 'POST') {
// 处理实际的表单数据
log_message("处理表单数据");
log_message("原始表单数据: " . print_r($data, true), 'data');
// 解析WPS表单数据结构
$form_data = array(
@@ -174,8 +172,6 @@ if ($method == 'POST') {
}
}
log_message("解析后的表单数据: " . print_r($form_data, true), 'data');
// 在这里可以添加数据处理逻辑,例如:
// 1. 将数据保存到数据库
// 2. 发送通知
@@ -233,7 +229,9 @@ if ($method == 'POST') {
echo json_encode($response);
} else {
// 处理非POST请求
// 在错误时记录完整请求
log_message("不支持的请求方法: $method", 'error');
log_message("完整请求内容: $request_body", 'error');
http_response_code(405); // 方法不允许
echo json_encode(array('error' => '只支持POST请求'));
}
@@ -245,6 +243,8 @@ function store_form_data_to_db($form_data) {
try {
$pdo = get_db_connection();
if (!$pdo) {
// 在错误时记录完整表单数据
log_message("数据库连接失败,表单数据: " . print_r($form_data, true), 'error');
return false;
}
@@ -305,7 +305,9 @@ function store_form_data_to_db($form_data) {
log_message("表单数据成功存储到数据库,插入ID: " . $pdo->lastInsertId());
return true;
} catch (Exception $e) {
// 在错误时记录完整表单数据
log_message("数据存储失败: " . $e->getMessage(), 'error');
log_message("表单数据: " . print_r($form_data, true), 'error');
return false;
}
}