Compare commits
53 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 wsh5485
|
b963c2b513 | ||
|
wsh5485
|
a672e1d7bc | ||
|
wsh5485
|
1f0cf4acaa | ||
|
wsh5485
|
26dd84bea2 | ||
|
wsh5485
|
a372464299 | ||
|
wsh5485
|
6906d8da2a | ||
|
wsh5485
|
decbc95d28 | ||
|
wsh5485
|
7f2fe3dd21 | ||
|
wsh5485
|
ae3ed1e58f | ||
|
wsh5485
|
bb3ebffb37 | ||
|
wsh5485
|
9d8fa49206 | ||
|
wsh5485
|
b5cacb9e0b | ||
|
wsh5485
|
cb9eb599ec | ||
|
wsh5485
|
6344947fa7 | ||
|
wsh5485
|
5c0132a209 | ||
|
wsh5485
|
5ace9b86d8 | ||
|
wsh5485
|
565fc310b7 | ||
|
wsh5485
|
77ae32095e | ||
|
wsh5485
|
ca554456b0 | ||
|
wsh5485
|
d387487bc5 | ||
|
wsh5485
|
44e4bc64d8 | ||
|
wsh5485
|
aefd3df9ae | ||
|
wsh5485
|
9a256cda0a | ||
|
wsh5485
|
0245f2c822 | ||
|
wsh5485
|
f297a12a7a | ||
|
wsh5485
|
466f16e313 | ||
|
wsh5485
|
a6356ea2a2 | ||
|
wsh5485
|
ff23ac6bbb | ||
|
wsh5485
|
d0abed0f86 | ||
|
wsh5485
|
3944051b25 | ||
|
wsh5485
|
a9b50046c1 | ||
|
wsh5485
|
caac9899a5 | ||
|
wsh5485
|
6ffabd9384 | ||
|
wsh5485
|
fc3b6aa4cc | ||
|
wsh5485
|
ac40ce0d56 | ||
|
wsh5485
|
2590e1fc22 | ||
|
wsh5485
|
2fb3c70f87 | ||
|
wsh5485
|
5c9f4c1a4f | ||
|
wsh5485
|
b2ad942b2c | ||
|
wsh5485
|
0d20bc09bc | ||
|
wsh5485
|
8d1612b956 | ||
|
wsh5485
|
3893065393 | ||
|
wsh5485
|
bafbc8344b | ||
|
wsh5485
|
b4ab3c625a | ||
|
wsh5485
|
678c79c5a7 | ||
|
wsh5485
|
016a5bf6b9 | ||
|
wsh5485
|
1a196f968e | ||
|
wsh5485
|
6a43cec22e | ||
|
wsh5485
|
93dfc4e5cd | ||
|
wsh5485
|
537a95989e | ||
|
wsh5485
|
88346ca1ec | ||
|
wsh5485
|
5d320e0ccf | ||
|
wsh5485
|
5bbb0877d5 |
@@ -0,0 +1,7 @@
|
||||
<html>
|
||||
<head><title>404 Not Found</title></head>
|
||||
<body>
|
||||
<center><h1>404 Not Found</h1></center>
|
||||
<hr><center>nginx</center>
|
||||
</body>
|
||||
</html>
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
# 洗车预约系统安装指南
|
||||
|
||||
## 1. 环境要求
|
||||
|
||||
- PHP 5.6 或更高版本
|
||||
- MySQL 5.5 或更高版本
|
||||
- Web服务器（如Apache、Nginx等）
|
||||
|
||||
## 2. 安装步骤
|
||||
|
||||
### 2.1 克隆项目
|
||||
|
||||
首先，将项目克隆到您的本地或服务器上：
|
||||
|
||||
```bash
|
||||
git clone [项目仓库地址]
|
||||
cd carwash_order
|
||||
```
|
||||
|
||||
### 2.2 配置数据库
|
||||
|
||||
1. 创建数据库：
|
||||
- 使用MySQL客户端（如phpMyAdmin、Navicat等）创建一个新的数据库
|
||||
- 数据库名称建议使用 `carwash_booking`
|
||||
|
||||
2. 导入数据库结构：
|
||||
- 执行 `carwash_db.sql` 文件，创建所需的表结构和初始数据
|
||||
|
||||
### 2.3 配置数据库连接
|
||||
|
||||
1. 复制配置文件模板：
|
||||
- 将 `config.php.env` 重命名为 `config.php`
|
||||
|
||||
2. 修改数据库连接信息：
|
||||
- 使用文本编辑器打开 `config.php` 文件
|
||||
- 根据您的数据库配置修改以下参数：
|
||||
|
||||
```php
|
||||
// 数据库主机地址
|
||||
$host = 'localhost'; // 通常为localhost，如使用远程数据库请填写IP地址
|
||||
|
||||
// 数据库用户名
|
||||
$username = 'your_username'; // 替换为您的MySQL用户名
|
||||
|
||||
// 数据库密码
|
||||
$password = 'your_password'; // 替换为您的MySQL密码
|
||||
|
||||
// 数据库名称
|
||||
$database = 'carwash_booking'; // 替换为您创建的数据库名称
|
||||
```
|
||||
|
||||
### 2.4 部署到Web服务器
|
||||
|
||||
- 将项目文件上传到Web服务器的根目录或虚拟主机的文档根目录
|
||||
- 确保Web服务器具有对项目文件的读取权限
|
||||
- 确保PHP可以执行项目中的PHP文件
|
||||
|
||||
## 3. 访问系统
|
||||
|
||||
在浏览器中输入您的域名或IP地址，即可访问洗车预约系统。
|
||||
|
||||
例如：
|
||||
```
|
||||
http://localhost/carwash_order/
|
||||
```
|
||||
|
||||
## 4. 常见问题
|
||||
|
||||
### 4.1 数据库连接失败
|
||||
|
||||
- 检查 `config.php` 文件中的数据库连接信息是否正确
|
||||
- 确保MySQL服务正在运行
|
||||
- 确保数据库用户具有足够的权限
|
||||
|
||||
### 4.2 页面显示错误
|
||||
|
||||
- 检查PHP版本是否符合要求
|
||||
- 检查Web服务器的错误日志
|
||||
- 确保所有项目文件都已正确上传
|
||||
|
||||
## 5. 其他配置
|
||||
|
||||
- 如果您需要修改时区设置，可以在PHP文件中添加：`date_default_timezone_set('Asia/Shanghai');`
|
||||
- 如果您需要修改会话超时时间，可以在PHP文件中添加：`ini_set('session.gc_maxlifetime', 3600);`
|
||||
|
||||
## 6. 注意事项
|
||||
|
||||
- 不要将 `config.php` 文件提交到Git仓库，该文件包含敏感的数据库连接信息
|
||||
- 定期备份数据库和项目文件
|
||||
- 确保使用强密码保护数据库和服务器
|
||||
|
||||
如有其他问题，请参考项目的README.md文件或联系技术支持。
|
||||
@@ -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服务
|
||||
```
|
||||
|
||||
#### 使用WAMP（Windows用户）
|
||||
```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 # 预约公告页面
|
||||
├── 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搜索调试页面
|
||||
├── index.php # 预约页面入口
|
||||
├── bookings.php # 预约管理页面
|
||||
├── packages.php # 套餐管理页面
|
||||
├── vip.php # VIP客户管理页面
|
||||
├── announcement.php # 今日待办页面
|
||||
├── db_connect.php # 数据库连接
|
||||
├── style.css # 样式文件
|
||||
├── merged_db.sql # 数据库结构
|
||||
└── test/ # 测试工具目录
|
||||
```
|
||||
|
||||
## 🗄️ 数据库结构
|
||||
## 使用说明
|
||||
|
||||
### 主要数据表
|
||||
### 客户预约
|
||||
1. 访问主页面，选择客户类型（普通/VIP）
|
||||
2. 填写客户信息或搜索VIP客户
|
||||
3. 选择服务套餐和预约时间
|
||||
4. 提交预约
|
||||
|
||||
#### 1. vip_customers（VIP客户表）
|
||||
```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
|
||||
|
||||
---
|
||||
|
||||
**洗车店订单管理系统** - 让洗车店管理更简单、更高效！ 🚗✨
|
||||
**张老师撸车工作室** - 专业洗车服务预约管理系统
|
||||
@@ -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开发
|
||||
+22
-19
@@ -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>
|
||||
/* 公告页面特有样式 */
|
||||
@@ -274,10 +274,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>
|
||||
@@ -429,18 +430,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 +453,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 +467,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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
*/
|
||||
?>
|
||||
+57
-6
@@ -74,7 +74,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 +84,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>
|
||||
@@ -222,8 +223,8 @@ try {
|
||||
<span>预约时间：<?php echo $booking['created_at']; ?></span>
|
||||
</div>
|
||||
|
||||
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
|
||||
<div class="package-actions">
|
||||
<div class="package-actions">
|
||||
<?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
|
||||
<!-- 状态更新按钮 - 使用AJAX -->
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-success" onclick="updateStatus(<?php echo $booking['id']; ?>, '已确认')">确认</button>
|
||||
@@ -239,8 +240,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>
|
||||
<?php endif; ?>
|
||||
<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; ?>
|
||||
@@ -600,6 +612,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() {
|
||||
// 为按钮添加触摸反馈
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<?php
|
||||
// config.php - 数据库配置文件
|
||||
$host = 'localhost';
|
||||
$username = 'root';
|
||||
$password = '';
|
||||
$database = 'carwash_booking';
|
||||
?>
|
||||
@@ -0,0 +1,16 @@
|
||||
<?php
|
||||
// config.php.env - 数据库配置文件模板
|
||||
// 请将此文件重命名为 config.php 并根据实际情况修改以下配置
|
||||
|
||||
// 数据库主机地址
|
||||
$host = 'localhost';
|
||||
|
||||
// 数据库用户名
|
||||
$username = 'your_username';
|
||||
|
||||
// 数据库密码
|
||||
$password = 'your_password';
|
||||
|
||||
// 数据库名称
|
||||
$database = 'carwash_booking';
|
||||
?>
|
||||
@@ -1,5 +1,6 @@
|
||||
<?php
|
||||
// db_connect.php - 数据库连接文件
|
||||
date_default_timezone_set('Asia/Shanghai');
|
||||
require_once 'config.php';
|
||||
|
||||
try {
|
||||
|
||||
@@ -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";
|
||||
?>
|
||||
@@ -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()]);
|
||||
}
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
@@ -63,6 +63,37 @@ CREATE TABLE IF NOT EXISTS bookings (
|
||||
FOREIGN KEY (package_id) REFERENCES packages(id) ON DELETE SET NULL
|
||||
);
|
||||
|
||||
-- 创建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;
|
||||
|
||||
-- 插入示例套餐数据
|
||||
INSERT INTO packages (package_name, description, base_duration, price, services) VALUES
|
||||
('基础洗车', '基础外观清洗', 30, 50.00, '外观冲洗,泡沫清洁,内饰吸尘'),
|
||||
+194
-153
@@ -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,170 +93,196 @@ $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>
|
||||
</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-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" 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)): ?>
|
||||
<p class="empty-message">暂无套餐数据</p>
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📦</div>
|
||||
<p class="empty-message">暂无套餐数据</p>
|
||||
<p class="empty-submessage">点击上方"添加套餐"按钮创建第一个套餐吧！</p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($packages as $package): ?>
|
||||
<div class="package-card <?= $package['is_active'] ? '' : 'inactive' ?>">
|
||||
<div class="package-header">
|
||||
<h3><?= htmlspecialchars($package['package_name']) ?></h3>
|
||||
<div class="package-status">
|
||||
<span class="status-badge <?= $package['is_active'] ? 'active' : 'inactive' ?>">
|
||||
<?= $package['is_active'] ? '启用' : '禁用' ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($package['description']): ?>
|
||||
<p class="package-description"><?= htmlspecialchars($package['description']) ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="package-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">基础时长：</span>
|
||||
<span class="detail-value"><?= $package['base_duration'] ?>分钟</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">价格：</span>
|
||||
<span class="detail-value">￥<?= number_format($package['price'], 2) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$services = explode(',', $package['services']);
|
||||
if ($services && !empty(trim($services[0]))):
|
||||
?>
|
||||
<div class="package-services">
|
||||
<span class="detail-label">包含服务：</span>
|
||||
<div class="services-tags">
|
||||
<?php foreach ($services as $service): ?>
|
||||
<?php if (trim($service)): ?>
|
||||
<span class="service-tag"><?= htmlspecialchars(trim($service)) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
<div class="packages-grid">
|
||||
<?php foreach ($packages as $package): ?>
|
||||
<div class="package-card <?= $package['is_active'] ? '' : 'inactive' ?>" data-package-id="<?= $package['id'] ?>">
|
||||
<div class="package-header">
|
||||
<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'] ? '启用' : '禁用' ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($package['description']): ?>
|
||||
<p class="package-description"><?= htmlspecialchars($package['description']) ?></p>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="package-actions">
|
||||
<button class="btn btn-sm" onclick="editPackage(<?= $package['id'] ?>)">编辑</button>
|
||||
<form method="POST" style="display: inline;" onsubmit="return confirmDelete()">
|
||||
<input type="hidden" name="action" value="delete">
|
||||
<div class="package-details">
|
||||
<div class="detail-item">
|
||||
<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 price"><strong>¥<?= number_format($package['price'], 2) ?></strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$services = explode(',', $package['services']);
|
||||
if ($services && !empty(trim($services[0]))):
|
||||
?>
|
||||
<div class="package-services">
|
||||
<span class="detail-label">包含服务</span>
|
||||
<div class="services-tags">
|
||||
<?php foreach ($services as $service): ?>
|
||||
<?php if (trim($service)): ?>
|
||||
<span class="service-tag"><?= htmlspecialchars(trim($service)) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="package-actions">
|
||||
<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-danger btn-sm"><span>🗑️ 删除</span></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<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'] ?>">
|
||||
<button type="submit" class="btn btn-danger btn-sm">删除</button>
|
||||
|
||||
<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" 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" 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" 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" 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-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" 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" 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>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<form method="POST" class="edit-form" id="edit-form-<?= $package['id'] ?>" style="display: none;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>套餐描述：</label>
|
||||
<textarea name="description" rows="2"><?= 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>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>服务项目：</label>
|
||||
<div class="services-container">
|
||||
<?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>
|
||||
<?php
|
||||
endif;
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
<button type="button" class="btn-add" onclick="addService()">+ 添加服务项目</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" name="is_active" <?= $package['is_active'] ? 'checked' : '' ?>>
|
||||
启用此套餐
|
||||
</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>
|
||||
</form>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?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);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
// 测试数据库连接和表创建功能
|
||||
require_once 'config.php';
|
||||
|
||||
// 记录日志的函数
|
||||
function log_test_message($message, $type = 'info') {
|
||||
$log_file = 'test_db.log';
|
||||
$timestamp = date('Y-m-d H:i:s');
|
||||
$log_entry = "[$timestamp] [$type] $message\n";
|
||||
file_put_contents($log_file, $log_entry, FILE_APPEND);
|
||||
echo $log_entry;
|
||||
}
|
||||
|
||||
echo "=== 测试数据库连接和表创建功能 ===\n";
|
||||
|
||||
// 测试数据库连接
|
||||
try {
|
||||
$pdo = new PDO("mysql:host=$host;dbname=$database;charset=utf8mb4", $username, $password);
|
||||
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
log_test_message("数据库连接成功");
|
||||
} catch(PDOException $e) {
|
||||
log_test_message("数据库连接失败: " . $e->getMessage(), 'error');
|
||||
exit(1);
|
||||
}
|
||||
|
||||
// 测试创建表
|
||||
try {
|
||||
$sql = "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 '车型',
|
||||
wash_type VARCHAR(100) COMMENT '洗车类型',
|
||||
wash_packages VARCHAR(255) COMMENT '洗车套餐',
|
||||
wash_services TEXT COMMENT '洗车服务',
|
||||
additional_services TEXT COMMENT '额外服务',
|
||||
need_wax VARCHAR(10) COMMENT '是否需要打蜡',
|
||||
wax_type VARCHAR(50) COMMENT '蜡的类型',
|
||||
cleaning_needs TEXT COMMENT '清洁需求',
|
||||
interior_cleaning VARCHAR(10) COMMENT '是否需要内饰清洁',
|
||||
exterior_cleaning VARCHAR(10) COMMENT '是否需要外观清洁',
|
||||
vip_member VARCHAR(10) COMMENT '是否为VIP会员',
|
||||
vip_number VARCHAR(50) COMMENT 'VIP卡号',
|
||||
payment_method VARCHAR(50) COMMENT '支付方式',
|
||||
special_requests TEXT COMMENT '特殊要求',
|
||||
technician VARCHAR(50) COMMENT '指定技师',
|
||||
status VARCHAR(20) DEFAULT 'pending' COMMENT '状态',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '记录创建时间',
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '记录更新时间',
|
||||
INDEX idx_rid (rid),
|
||||
INDEX idx_license_plate (license_plate),
|
||||
INDEX idx_date (date),
|
||||
INDEX idx_mobile (mobile)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
|
||||
|
||||
$pdo->exec($sql);
|
||||
log_test_message("表创建成功");
|
||||
} catch(PDOException $e) {
|
||||
log_test_message("表创建失败: " . $e->getMessage(), 'error');
|
||||
exit(1);
|
||||
}
|
||||
|
||||
// 测试插入数据
|
||||
try {
|
||||
$sql = "INSERT INTO wps_form_submissions (
|
||||
rid, form_id, form_title, creator_id, create_time, update_time,
|
||||
mobile, name, license_plate, date, time_slot, car_type
|
||||
) VALUES (
|
||||
:rid, :form_id, :form_title, :creator_id, :create_time, :update_time,
|
||||
:mobile, :name, :license_plate, :date, :time_slot, :car_type
|
||||
)";
|
||||
|
||||
$stmt = $pdo->prepare($sql);
|
||||
|
||||
$stmt->bindValue(':rid', 'test_rid_' . time());
|
||||
$stmt->bindValue(':form_id', 'test_form_id');
|
||||
$stmt->bindValue(':form_title', '测试表单');
|
||||
$stmt->bindValue(':creator_id', 'test_creator_id');
|
||||
$stmt->bindValue(':create_time', date('Y-m-d H:i:s'));
|
||||
$stmt->bindValue(':update_time', date('Y-m-d H:i:s'));
|
||||
$stmt->bindValue(':mobile', '13800138000');
|
||||
$stmt->bindValue(':name', '测试用户');
|
||||
$stmt->bindValue(':license_plate', '京A12345');
|
||||
$stmt->bindValue(':date', date('Y-m-d'));
|
||||
$stmt->bindValue(':time_slot', '14:00-15:00');
|
||||
$stmt->bindValue(':car_type', '轿车');
|
||||
|
||||
$stmt->execute();
|
||||
|
||||
$insert_id = $pdo->lastInsertId();
|
||||
log_test_message("测试数据插入成功，ID: " . $insert_id);
|
||||
} catch(PDOException $e) {
|
||||
log_test_message("测试数据插入失败: " . $e->getMessage(), 'error');
|
||||
exit(1);
|
||||
}
|
||||
|
||||
// 测试查询数据
|
||||
try {
|
||||
$sql = "SELECT * FROM wps_form_submissions ORDER BY id DESC LIMIT 1";
|
||||
$stmt = $pdo->query($sql);
|
||||
$row = $stmt->fetch();
|
||||
|
||||
if ($row) {
|
||||
log_test_message("测试数据查询成功");
|
||||
log_test_message("查询结果: " . print_r($row, true));
|
||||
} else {
|
||||
log_test_message("测试数据查询失败: 没有找到数据", 'error');
|
||||
}
|
||||
} catch(PDOException $e) {
|
||||
log_test_message("测试数据查询失败: " . $e->getMessage(), 'error');
|
||||
exit(1);
|
||||
}
|
||||
|
||||
echo "\n=== 所有测试完成 ===\n";
|
||||
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WPS表单Webhook测试</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.test-section {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.response {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
}
|
||||
.log-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
#log-content {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
background-color: #2d2d2d;
|
||||
color: #f0f0f0;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>WPS表单Webhook测试工具</h1>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>1. 验证请求测试</h2>
|
||||
<p>模拟WPS表单的验证请求，Webhook应返回绑定码</p>
|
||||
<button onclick="testVerification()">发送验证请求</button>
|
||||
<div class="response" id="verification-response"></div>
|
||||
</div>
|
||||
|
||||
<div class="test-section">
|
||||
<h2>2. 表单数据测试</h2>
|
||||
<p>模拟WPS表单发送数据，Webhook应接收并处理数据</p>
|
||||
<button onclick="testFormData()">发送表单数据</button>
|
||||
<div class="response" id="form-data-response"></div>
|
||||
</div>
|
||||
|
||||
<div class="log-section">
|
||||
<h2>3. Webhook日志</h2>
|
||||
<button onclick="loadLog()">加载日志</button>
|
||||
<button onclick="clearLog()">清空日志</button>
|
||||
<div id="log-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Webhook URL
|
||||
const webhookUrl = 'http://carwash.com/webhook.php';
|
||||
|
||||
// 发送验证请求
|
||||
async function testVerification() {
|
||||
const responseDiv = document.getElementById('verification-response');
|
||||
responseDiv.innerHTML = '发送中...';
|
||||
|
||||
try {
|
||||
const response = await fetch(webhookUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: '' // 空请求体，模拟验证请求
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
responseDiv.innerHTML = '响应: ' + JSON.stringify(data, null, 2);
|
||||
} catch (error) {
|
||||
responseDiv.innerHTML = '错误: ' + error.message;
|
||||
}
|
||||
}
|
||||
|
||||
// 发送表单数据
|
||||
async function testFormData() {
|
||||
const responseDiv = document.getElementById('form-data-response');
|
||||
responseDiv.innerHTML = '发送中...';
|
||||
|
||||
// 模拟WPS实际表单数据格式
|
||||
const formData = {
|
||||
"rid": "lAFP6N1Tap",
|
||||
"formId": "20251205123619412736007",
|
||||
"formTitle": "张老师撸车（私家车库）预约撸车表单",
|
||||
"aid": "20251205131620432762589",
|
||||
"eventTs": Date.now(),
|
||||
"messageTs": Date.now(),
|
||||
"creatorId": "344573037",
|
||||
"creatorName": "吴展鹏",
|
||||
"event": "create_answer",
|
||||
"version": 2,
|
||||
"answerContents": [
|
||||
{
|
||||
"qid": "eo513g",
|
||||
"type": "input",
|
||||
"title": "怎么称呼您",
|
||||
"value": "吴展鹏"
|
||||
},
|
||||
{
|
||||
"qid": "xKFUcp",
|
||||
"type": "input",
|
||||
"title": "车型",
|
||||
"value": "比亚迪宋PRODMi"
|
||||
},
|
||||
{
|
||||
"qid": "NFJDDT",
|
||||
"type": "input",
|
||||
"title": "车牌号",
|
||||
"value": "新AF10365-普通输入"
|
||||
},
|
||||
{
|
||||
"qid": "t2u2i4",
|
||||
"type": "licensePlate",
|
||||
"title": "车牌号",
|
||||
"value": "新AF10365-车牌专用"
|
||||
},
|
||||
{
|
||||
"qid": "7jgfmh",
|
||||
"type": "telphone",
|
||||
"title": "请输入手机号",
|
||||
"value": "18699627661"
|
||||
},
|
||||
{
|
||||
"qid": "3j6opi",
|
||||
"type": "select",
|
||||
"title": "是否有车衣",
|
||||
"value": ["否，无车衣"]
|
||||
},
|
||||
{
|
||||
"qid": "ej48lk",
|
||||
"type": "select",
|
||||
"title": "有无自己撸车习惯",
|
||||
"value": ["有"]
|
||||
},
|
||||
{
|
||||
"qid": "1tnljp",
|
||||
"type": "select",
|
||||
"title": "撸车经验",
|
||||
"value": ["我是老司机啦"]
|
||||
},
|
||||
{
|
||||
"qid": "x02g35",
|
||||
"type": "select",
|
||||
"title": "洗车频率",
|
||||
"value": ["每2周一次（每月1-2次）"]
|
||||
},
|
||||
{
|
||||
"qid": "54dbo7",
|
||||
"type": "select",
|
||||
"title": "请选择年龄段",
|
||||
"value": ["26~30"]
|
||||
},
|
||||
{
|
||||
"qid": "rwxgkc",
|
||||
"type": "autoNum",
|
||||
"title": "自动编号",
|
||||
"value": "zlslc202512002"
|
||||
},
|
||||
{
|
||||
"qid": "r3ft9n",
|
||||
"type": "input",
|
||||
"title": "备注内容",
|
||||
"value": "谢谢"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(webhookUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
responseDiv.innerHTML = '响应: ' + JSON.stringify(data, null, 2);
|
||||
} catch (error) {
|
||||
responseDiv.innerHTML = '错误: ' + error.message;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载日志
|
||||
async function loadLog() {
|
||||
const logContent = document.getElementById('log-content');
|
||||
logContent.innerHTML = '加载中...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/log/wps_form_webhook.log');
|
||||
if (response.ok) {
|
||||
const text = await response.text();
|
||||
logContent.innerHTML = text;
|
||||
} else {
|
||||
logContent.innerHTML = '无法加载日志文件: ' + response.statusText;
|
||||
}
|
||||
} catch (error) {
|
||||
logContent.innerHTML = '错误: ' + error.message;
|
||||
}
|
||||
}
|
||||
|
||||
// 清空日志
|
||||
async function clearLog() {
|
||||
const logContent = document.getElementById('log-content');
|
||||
|
||||
try {
|
||||
const response = await fetch('webhook.php?action=clear_log', {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
logContent.innerHTML = '日志已清空';
|
||||
} else {
|
||||
logContent.innerHTML = '清空日志失败';
|
||||
}
|
||||
} catch (error) {
|
||||
logContent.innerHTML = '错误: ' + error.message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 = '';
|
||||
|
||||
+316
@@ -0,0 +1,316 @@
|
||||
<?php
|
||||
// WPS表单Webhook接收端点
|
||||
|
||||
// 设置响应头
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
// 绑定码（根据WPS表单要求提供）
|
||||
$bind_code = '20251205123619412736007';
|
||||
|
||||
// 日志文件路径
|
||||
$log_file = 'log/wps_form_webhook.log';
|
||||
|
||||
// 加载数据库配置
|
||||
require_once 'config.php';
|
||||
|
||||
// 数据库连接函数
|
||||
function get_db_connection() {
|
||||
global $host, $username, $password, $database;
|
||||
try {
|
||||
$pdo = new PDO("mysql:host=$host;dbname=$database;charset=utf8mb4", $username, $password);
|
||||
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
|
||||
return $pdo;
|
||||
} catch(PDOException $e) {
|
||||
log_message("数据库连接失败: " . $e->getMessage(), 'error');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 字段对照表（根据WPS表单实际字段）
|
||||
$field_mapping = array(
|
||||
// 题目标题 => array(qid, type)
|
||||
'日期' => array('0AmAeI', 'date'),
|
||||
'单选项' => array('y0Rvqm', 'select'),
|
||||
'图片和附件' => array('FOS5GT', 'file'),
|
||||
'等级' => array('0wJSrH', 'star'),
|
||||
'填写ID' => array('vwS7ci', 'input'),
|
||||
'提交时间' => array('yjbQYS', 'date'),
|
||||
'答题时间(秒)' => array('AA2kq8', 'input'),
|
||||
'车牌号' => array('t2u2i4', 'licensePlate'), // 只使用这个车牌号字段（qid: t2u2i4, type: licensePlate）
|
||||
'车牌号2' => array('7nAOz7', 'input'), // 不使用
|
||||
'车牌号(普通)' => array('NFJDDT', 'input'), // 不使用
|
||||
'怎么称呼您' => array('eo513g', 'input'),
|
||||
'车型' => array('xKFUcp', 'input'),
|
||||
'请输入手机号' => array('7jgfmh', 'input'),
|
||||
'是否有车衣' => array('3j6opi', 'select'),
|
||||
'有无自己撸车习惯' => array('ej48lk', 'select'),
|
||||
'撸车经验' => array('1tnljp', 'select'),
|
||||
'洗车频率' => array('x02g35', 'select'),
|
||||
'请选择年龄段' => array('54dbo7', 'select'),
|
||||
'提交者' => array('T9OiCe', 'contact'),
|
||||
'自动编号' => array('rwxgkc', 'autoNum'),
|
||||
'备注内容' => array('r3ft9n', 'input')
|
||||
);
|
||||
|
||||
// 反向映射：qid => array(title, type)
|
||||
$qid_mapping = array();
|
||||
foreach ($field_mapping as $title => $info) {
|
||||
$qid = $info[0];
|
||||
$type = $info[1];
|
||||
$qid_mapping[$qid] = array('title' => $title, 'type' => $type);
|
||||
}
|
||||
|
||||
// 记录日志的函数
|
||||
function log_message($message, $type = 'info') {
|
||||
global $log_file;
|
||||
$timestamp = date('Y-m-d H:i:s');
|
||||
$log_entry = "[$timestamp] [$type] $message\n";
|
||||
|
||||
// 检查日志目录是否存在，如果不存在则创建
|
||||
$log_dir = dirname($log_file);
|
||||
if (!is_dir($log_dir)) {
|
||||
mkdir($log_dir, 0755, true);
|
||||
}
|
||||
|
||||
file_put_contents($log_file, $log_entry, FILE_APPEND);
|
||||
}
|
||||
|
||||
// 获取请求方法
|
||||
$method = $_SERVER['REQUEST_METHOD'];
|
||||
|
||||
// 获取请求数据
|
||||
$request_body = file_get_contents('php://input');
|
||||
|
||||
// 记录所有请求（仅记录方法）
|
||||
log_message("收到请求 - 方法: $method");
|
||||
|
||||
// 处理验证请求
|
||||
if ($method == 'POST') {
|
||||
// 尝试解析请求体
|
||||
$data = json_decode($request_body, true);
|
||||
|
||||
// 如果解析失败，可能是验证请求
|
||||
if ($data === null) {
|
||||
// 返回绑定码进行验证
|
||||
log_message("返回绑定码进行验证");
|
||||
echo json_encode(array('bind_code' => $bind_code));
|
||||
exit;
|
||||
}
|
||||
|
||||
// 检查是否是绑定验证请求
|
||||
if (isset($data['event']) && $data['event'] === 'bind') {
|
||||
log_message("收到绑定验证请求");
|
||||
echo json_encode(array('bind_code' => $bind_code));
|
||||
exit;
|
||||
}
|
||||
|
||||
// 处理实际的表单数据
|
||||
log_message("处理表单数据");
|
||||
|
||||
// 解析WPS表单数据结构
|
||||
$form_data = array(
|
||||
'rid' => isset($data['rid']) ? $data['rid'] : '',
|
||||
'form_id' => isset($data['formId']) ? $data['formId'] : '',
|
||||
'form_title' => isset($data['formTitle']) ? $data['formTitle'] : '',
|
||||
'aid' => isset($data['aid']) ? $data['aid'] : '',
|
||||
'event_ts' => isset($data['eventTs']) ? $data['eventTs'] : 0,
|
||||
'message_ts' => isset($data['messageTs']) ? $data['messageTs'] : 0,
|
||||
'creator_id' => isset($data['creatorId']) ? $data['creatorId'] : '',
|
||||
'creator_name' => isset($data['creatorName']) ? $data['creatorName'] : '',
|
||||
'event' => isset($data['event']) ? $data['event'] : '',
|
||||
'version' => isset($data['version']) ? $data['version'] : 1,
|
||||
'answers' => array()
|
||||
);
|
||||
|
||||
// 解析表单字段
|
||||
if (isset($data['answerContents']) && is_array($data['answerContents'])) {
|
||||
foreach ($data['answerContents'] as $content) {
|
||||
$qid = isset($content['qid']) ? $content['qid'] : '';
|
||||
$type = isset($content['type']) ? $content['type'] : '';
|
||||
$title = isset($content['title']) ? $content['title'] : '';
|
||||
$value = isset($content['value']) ? $content['value'] : '';
|
||||
|
||||
// 将数组值转换为字符串，便于处理
|
||||
if (is_array($value)) {
|
||||
$value = implode(', ', $value);
|
||||
}
|
||||
|
||||
$field = array(
|
||||
'qid' => $qid,
|
||||
'type' => $type,
|
||||
'title' => $title,
|
||||
'value' => $value
|
||||
);
|
||||
|
||||
$form_data['answers'][] = $field;
|
||||
|
||||
// 按标题索引存储，便于直接访问
|
||||
if (!empty($title)) {
|
||||
$form_data['answers_by_title'][$title] = $value;
|
||||
}
|
||||
|
||||
// 按qid索引存储，便于精确访问
|
||||
if (!empty($qid)) {
|
||||
$form_data['answers_by_qid'][$qid] = $value;
|
||||
}
|
||||
|
||||
// 使用字段对照表检查并标准化字段
|
||||
if (!empty($qid) && isset($qid_mapping[$qid])) {
|
||||
$standard_title = $qid_mapping[$qid]['title'];
|
||||
$standard_type = $qid_mapping[$qid]['type'];
|
||||
|
||||
// 存储标准化字段
|
||||
$form_data['standardized_answers'][$standard_title] = array(
|
||||
'qid' => $qid,
|
||||
'type' => $standard_type,
|
||||
'title' => $title, // 保留原始标题
|
||||
'value' => $value,
|
||||
'standard_title' => $standard_title
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 在这里可以添加数据处理逻辑，例如：
|
||||
// 1. 将数据保存到数据库
|
||||
// 2. 发送通知
|
||||
// 3. 其他业务逻辑
|
||||
|
||||
// 示例：访问特定字段
|
||||
|
||||
// 通过标题访问
|
||||
if (isset($form_data['answers_by_title']['怎么称呼您'])) {
|
||||
$name = $form_data['answers_by_title']['怎么称呼您'];
|
||||
log_message("客户姓名: $name");
|
||||
}
|
||||
|
||||
// 注意：由于有两个"车牌号"字段，通过标题访问可能获取到任意一个
|
||||
// 建议使用qid或标准化字段访问
|
||||
if (isset($form_data['answers_by_title']['车牌号'])) {
|
||||
$license_plate = $form_data['answers_by_title']['车牌号'];
|
||||
log_message("车牌号(通过标题): $license_plate");
|
||||
}
|
||||
|
||||
// 通过qid精确访问特定的车牌号字段
|
||||
if (isset($form_data['answers_by_qid']['t2u2i4'])) {
|
||||
$license_plate_standard = $form_data['answers_by_qid']['t2u2i4'];
|
||||
log_message("车牌号(通过qid t2u2i4 - 标准): $license_plate_standard");
|
||||
}
|
||||
|
||||
// 通过标准化字段访问
|
||||
if (isset($form_data['standardized_answers']['怎么称呼您'])) {
|
||||
$name_standard = $form_data['standardized_answers']['怎么称呼您']['value'];
|
||||
log_message("客户姓名(标准化): $name_standard");
|
||||
}
|
||||
|
||||
if (isset($form_data['standardized_answers']['车型'])) {
|
||||
$car_model = $form_data['standardized_answers']['车型']['value'];
|
||||
log_message("车型: $car_model");
|
||||
}
|
||||
|
||||
if (isset($form_data['standardized_answers']['请输入手机号'])) {
|
||||
$phone = $form_data['standardized_answers']['请输入手机号']['value'];
|
||||
log_message("手机号: $phone");
|
||||
}
|
||||
|
||||
// 返回成功响应
|
||||
$response = array(
|
||||
'code' => 200,
|
||||
'message' => '数据接收成功',
|
||||
'received_at' => date('Y-m-d H:i:s'),
|
||||
'processed_fields' => count($form_data['answers'])
|
||||
);
|
||||
|
||||
// 将数据存储到数据库
|
||||
store_form_data_to_db($form_data);
|
||||
|
||||
log_message("返回成功响应");
|
||||
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请求'));
|
||||
}
|
||||
|
||||
log_message("请求处理完成\n" . str_repeat('-', 50) . "\n");
|
||||
|
||||
// 将表单数据存储到数据库
|
||||
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;
|
||||
}
|
||||
|
||||
// 准备SQL语句（只包含实际WPS表单存在的字段）
|
||||
$sql = "INSERT INTO wps_form_submissions (
|
||||
rid, form_id, form_title, creator_id, create_time, update_time,
|
||||
mobile, name, license_plate, date, time_slot, car_type,
|
||||
has_car_coat, car_wash_habit, car_wash_experience, wash_frequency,
|
||||
age_group, remarks, auto_number, status, updated_at
|
||||
) VALUES (
|
||||
:rid, :form_id, :form_title, :creator_id, :create_time, :update_time,
|
||||
:mobile, :name, :license_plate, :date, :time_slot, :car_type,
|
||||
:has_car_coat, :car_wash_habit, :car_wash_experience, :wash_frequency,
|
||||
:age_group, :remarks, :auto_number, :status, :updated_at
|
||||
)";
|
||||
|
||||
$stmt = $pdo->prepare($sql);
|
||||
|
||||
// 绑定参数
|
||||
$stmt->bindValue(':rid', $form_data['rid']);
|
||||
$stmt->bindValue(':form_id', $form_data['form_id']);
|
||||
$stmt->bindValue(':form_title', $form_data['form_title']);
|
||||
$stmt->bindValue(':creator_id', $form_data['creator_id']);
|
||||
$stmt->bindValue(':create_time', date('Y-m-d H:i:s'));
|
||||
$stmt->bindValue(':update_time', date('Y-m-d H:i:s'));
|
||||
$stmt->bindValue(':updated_at', date('Y-m-d H:i:s'));
|
||||
|
||||
// 绑定表单字段值（只绑定实际存在的字段）
|
||||
$stmt->bindValue(':mobile', isset($form_data['answers_by_title']['请输入手机号']) ? $form_data['answers_by_title']['请输入手机号'] : '');
|
||||
$stmt->bindValue(':name', isset($form_data['answers_by_title']['怎么称呼您']) ? $form_data['answers_by_title']['怎么称呼您'] : '');
|
||||
|
||||
// 处理车牌号字段（只使用qid为t2u2i4、type为licensePlate的车牌号字段）
|
||||
$license_plate = '';
|
||||
if (isset($form_data['answers_by_qid']['t2u2i4'])) {
|
||||
$license_plate = $form_data['answers_by_qid']['t2u2i4'];
|
||||
}
|
||||
$stmt->bindValue(':license_plate', $license_plate);
|
||||
|
||||
// 日期处理
|
||||
$date = isset($form_data['answers_by_title']['日期']) ? $form_data['answers_by_title']['日期'] : '';
|
||||
$stmt->bindValue(':date', $date ? date('Y-m-d', strtotime($date)) : null);
|
||||
|
||||
// 绑定实际存在的其他字段
|
||||
$stmt->bindValue(':time_slot', isset($form_data['answers_by_title']['单选项']) ? $form_data['answers_by_title']['单选项'] : '');
|
||||
$stmt->bindValue(':car_type', isset($form_data['answers_by_title']['车型']) ? $form_data['answers_by_title']['车型'] : '');
|
||||
$stmt->bindValue(':has_car_coat', isset($form_data['answers_by_title']['是否有车衣']) ? $form_data['answers_by_title']['是否有车衣'] : '');
|
||||
$stmt->bindValue(':car_wash_habit', isset($form_data['answers_by_title']['有无自己撸车习惯']) ? $form_data['answers_by_title']['有无自己撸车习惯'] : '');
|
||||
$stmt->bindValue(':car_wash_experience', isset($form_data['answers_by_title']['撸车经验']) ? $form_data['answers_by_title']['撸车经验'] : '');
|
||||
$stmt->bindValue(':wash_frequency', isset($form_data['answers_by_title']['洗车频率']) ? $form_data['answers_by_title']['洗车频率'] : '');
|
||||
$stmt->bindValue(':age_group', isset($form_data['answers_by_title']['请选择年龄段']) ? $form_data['answers_by_title']['请选择年龄段'] : '');
|
||||
$stmt->bindValue(':remarks', isset($form_data['answers_by_title']['备注内容']) ? $form_data['answers_by_title']['备注内容'] : '');
|
||||
$stmt->bindValue(':auto_number', isset($form_data['answers_by_title']['自动编号']) ? $form_data['answers_by_title']['自动编号'] : '');
|
||||
$stmt->bindValue(':status', 'pending');
|
||||
|
||||
// 执行SQL
|
||||
$stmt->execute();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
Reference in New Issue
Block a user