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