YGChatCS/pages/order

工单管理系统

项目概述

这是一个基于 uniapp + Vue3 组合式 API 开发的微信小程序工单管理系统，提供完整的工单展示、管理和操作功能。

系统架构

页面结构

pages/order/
├── list.vue              # 工单列表主页面
├── detail.vue            # 工单详情页面
├── demo.vue              # 功能演示页面
├── components/           # 组件目录
│   ├── TopNavBar/        # 顶部导航栏组件
│   ├── Tabs/             # Tab切换组件
│   ├── OrderCard/        # 工单卡片组件
│   ├── OrderList/        # 工单列表组件
│   └── ConsultationBar/  # 底部咨询栏组件
├── styles/               # 样式文件
└── images/               # 图片资源

核心组件

1. TopNavBar - 顶部导航栏组件

功能特性：

• 左侧返回按钮
• 自适应状态栏高度
• 支持自定义标题内容
• 响应式设计

使用示例：

<TopNavBar>
  <template #title>
    <Tabs :tabs="tabList" @change="handleTabChange" />
  </template>
</TopNavBar>

2. Tabs - Tab切换组件

功能特性：

• 多标签页切换
• 动态下划线指示器
• 平滑动画过渡
• 自定义标签内容
• 固定15px宽度，2px圆角下划线

使用示例：

<Tabs 
  :tabs="tabList" 
  :defaultActive="0"
  @change="handleTabChange" 
/>

3. OrderCard - 工单卡片组件

功能特性：

• 工单信息展示
• 多种状态支持（待处理、处理中、已完成、已取消）
• 状态图标和标签
• 操作按钮（呼叫、完成）
• 自定义操作区域
• 响应式设计

使用示例：

<OrderCard
  :orderData="orderInfo"
  @click="handleOrderClick"
  @call="handleOrderCall"
  @complete="handleOrderComplete"
/>

4. OrderList - 工单列表组件

功能特性：

• 工单列表展示
• 下拉刷新
• 上拉加载更多
• 空状态显示
• 加载状态管理
• 蓝色渐变背景

使用示例：

<OrderList
  :orderList="orderList"
  :hasMore="hasMore"
  :isLoading="isLoading"
  @refresh="handleRefresh"
  @loadMore="handleLoadMore"
/>

5. ConsultationBar - 底部咨询栏组件

功能特性：

• 客服咨询入口
• 固定底部显示
• 安全区域适配
• 自定义咨询文案
• 跳转链接支持

使用示例：

<ConsultationBar
  mainText="遇到问题？联系客服"
  subText="7×24小时在线服务"
  buttonText="立即咨询"
  @consultation="handleConsultation"
/>

数据结构

工单数据结构

{
  id: String,           // 工单ID
  title: String,        // 工单标题
  createTime: String,   // 创建时间
  contactName: String,  // 联系人姓名
  contactPhone: String, // 联系电话
  status: String,       // 工单状态：pending/processing/completed/cancelled
  type: String          // 工单类型：service/order
}

Tab数据结构

{
  label: String,        // 显示文本
  value: String         // 值
}

功能特性

✅ 已实现功能

1. 工单管理

   • 工单列表展示
   • 工单状态管理
   • 工单详情查看
   • 工单操作（呼叫、完成）

2. 交互功能

   • Tab页面切换
   • 下拉刷新
   • 上拉加载更多
   • 一键拨号
   • 客服咨询

3. UI/UX

   • 响应式设计
   • 暗色模式支持
   • 流畅动画效果
   • 优雅的加载状态
   • 空状态处理

4. 技术特性

   • Vue3 组合式 API
   • TypeScript 支持
   • 组件化架构
   • SCSS 样式管理
   • 错误处理机制

使用指南

快速开始

1. 进入工单列表

   uni.navigateTo({
     url: '/pages/order/list'
   })
   

2. 查看功能演示

   uni.navigateTo({
     url: '/pages/order/demo'
   })
   

自定义配置

1. 修改Tab配置

   const tabList = ref([
     { label: "全部订单", value: "all" },
     { label: "服务工单", value: "service" },
     { label: "自定义Tab", value: "custom" }
   ])
   

2. 自定义工单状态

   const statusMap = {
     pending: '待处理',
     processing: '处理中',
     completed: '已完成',
     cancelled: '已取消',
     custom: '自定义状态'
   }
   

3. 自定义样式主题

   :root {
     --primary-color: #007AFF;
     --success-color: #52C41A;
     --warning-color: #FF8C00;
     --danger-color: #FF3B30;
   }
   

API 接口

工单相关接口

// 获取工单列表
const getOrderList = async (params) => {
  return await uni.request({
    url: '/api/orders',
    method: 'GET',
    data: params
  })
}

// 更新工单状态
const updateOrderStatus = async (orderId, status) => {
  return await uni.request({
    url: `/api/orders/${orderId}/status`,
    method: 'PUT',
    data: { status }
  })
}

性能优化

1. 虚拟滚动：大量数据时建议使用虚拟滚动
2. 图片懒加载：工单图片支持懒加载
3. 防抖处理：搜索和筛选功能防抖优化
4. 缓存机制：Tab切换时数据缓存

兼容性

• 微信小程序：✅ 完全支持
• 支付宝小程序：✅ 支持
• H5：✅ 支持
• App：✅ 支持

更新日志

v1.0.0 (2024-01-15)

• 🎉 初始版本发布
• ✨ 完整的工单管理功能
• ✨ 响应式设计和暗色模式
• ✨ 组件化架构
• ✨ 完善的文档和演示

开发团队

• 开发者：AI Assistant
• 技术栈：uniapp + Vue3 + SCSS
• 设计规范：微信小程序设计指南

许可证

MIT License

---

如有问题或建议，请联系开发团队。