# 智慧城市工单微信小程序

基于 uni-app x 开发的智慧城市工单管理微信小程序，包含智能客服对话、工单创建、查询和管理功能。

## 项目结构

```
workcase_wechat/
├── components/              # 组件目录
│   └── WorkcaseCreator.uvue # 工单创建组件
├── pages/                   # 页面目录
│   ├── index/              # 主页（智能客服对话）
│   │   └── index.uvue      
│   └── workcase/           # 工单相关页面
│       ├── list.uvue       # 工单列表页
│       └── detail.uvue     # 工单详情页
├── static/                 # 静态资源
│   └── tabbar/            # 底部导航图标
├── App.uvue               # 应用入口
├── main.uts               # 主文件
├── pages.json             # 页面配置
├── manifest.json          # 应用配置
└── uni.scss               # 全局样式
```

## 功能特性

### 1. 智能客服对话页 (pages/index/index.uvue)
- 🤖 智能客服对话界面
- 💬 实时消息收发
- 🎯 快捷操作按钮
- 📝 工单创建入口
- 🔄 打字指示器动画

**主要功能：**
- 智能问答对话
- 工单创建引导
- 快捷操作菜单
- 消息历史记录

### 2. 工单列表页 (pages/workcase/list.uvue)
- 📋 工单列表展示
- 🔍 状态和分类筛选
- 📊 统计信息卡片
- 📱 下拉刷新和上拉加载
- ⚡ 快捷操作按钮

**主要功能：**
- 工单状态筛选（全部、待处理、处理中、已完成、已取消）
- 分类筛选（设施报修、环境卫生、交通问题等）
- 工单统计概览
- 快捷操作（取消、确认完成、联系客服）

### 3. 工单详情页 (pages/workcase/detail.uvue)
- 📄 工单详细信息
- 🔄 处理进度展示
- 📷 图片附件查看
- 📝 处理记录时间线
- ⭐ 服务评价功能

**主要功能：**
- 完整的工单信息展示
- 实时进度跟踪
- 处理记录时间轴
- 图片预览功能
- 服务评价系统

### 4. 工单创建组件 (components/WorkcaseCreator.uvue)
- 📝 表单式工单创建
- 📷 图片上传（最多3张）
- 🏷️ 分类和优先级选择
- ✅ 表单验证
- 📤 模拟提交流程

**主要功能：**
- 多字段表单填写
- 图片选择和预览
- 实时字符计数
- 表单验证提示

## 页面导航

### 底部 TabBar 导航
- **智能助手**：主页聊天界面
- **我的工单**：工单列表页面

### 路由跳转
- 从聊天页面创建工单 → 弹出工单创建组件
- 从工单列表查看详情 → 跳转工单详情页
- 从详情页联系客服 → 返回聊天页面

## 样式设计

### 设计系统
- **主色调**：蓝色系 (#1976D2)
- **状态色彩**：
  - 待处理：橙色 (#F57C00)
  - 处理中：蓝色 (#1976D2)
  - 已完成：绿色 (#388E3C)
  - 已取消：红色 (#D32F2F)

### 组件风格
- 圆角卡片设计
- 阴影效果
- 渐变按钮
- 动画过渡

## 数据模拟

当前使用模拟数据进行开发和演示：
- 模拟智能客服回复
- 模拟工单数据生成
- 模拟处理记录
- 模拟图片附件

## 开发说明

### 技术栈
- **框架**：uni-app x
- **语言**：Vue 3 + TypeScript (UTS)
- **样式**：SCSS
- **平台**：微信小程序

### 注意事项
1. 图标文件需要替换为实际的 PNG 图片
2. 静态资源路径需要根据实际情况调整
3. API 接口需要替换为真实的后端服务
4. 图片上传功能需要配置真实的上传服务

### 后续开发
1. 集成真实的 AI 客服 API
2. 对接后端工单管理系统
3. 添加消息推送功能
4. 完善用户认证系统
5. 优化性能和用户体验

## 部署说明

1. 确保已安装 HBuilderX
2. 导入项目到 HBuilderX
3. 配置微信小程序开发者工具
4. 替换静态资源文件
5. 配置真实的 API 接口
6. 编译并发布到微信小程序平台
