urbanLifeline/urbanLifelineWeb/packages/workcase_wechat

智慧城市工单微信小程序

基于 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. 编译并发布到微信小程序平台