145 lines
3.8 KiB
Markdown
145 lines
3.8 KiB
Markdown
|
# 智慧城市工单微信小程序
|
|||
|
|
|
|||
|
|
基于 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. 编译并发布到微信小程序平台
|