zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9e931e0a1f779a9cc8e5037e16880b970e2cd4cd
YGChatCS/pages/order
History

README.md

工单管理系统

项目概述

这是一个基于 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

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