# 工单管理系统

## 项目概述

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

## 系统架构

### 页面结构

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

## 核心组件

### 1. TopNavBar - 顶部导航栏组件

**功能特性：**
- 左侧返回按钮
- 自适应状态栏高度
- 支持自定义标题内容
- 响应式设计

**使用示例：**
```vue
<TopNavBar>
  <template #title>
    <Tabs :tabs="tabList" @change="handleTabChange" />
  </template>
</TopNavBar>
```

### 2. Tabs - Tab切换组件

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

**使用示例：**
```vue
<Tabs 
  :tabs="tabList" 
  :defaultActive="0"
  @change="handleTabChange" 
/>
```

### 3. OrderCard - 工单卡片组件

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

**使用示例：**
```vue
<OrderCard
  :orderData="orderInfo"
  @click="handleOrderClick"
  @call="handleOrderCall"
  @complete="handleOrderComplete"
/>
```

### 4. OrderList - 工单列表组件

**功能特性：**
- 工单列表展示
- 下拉刷新
- 上拉加载更多
- 空状态显示
- 加载状态管理
- 蓝色渐变背景

**使用示例：**
```vue
<OrderList
  :orderList="orderList"
  :hasMore="hasMore"
  :isLoading="isLoading"
  @refresh="handleRefresh"
  @loadMore="handleLoadMore"
/>
```

### 5. ConsultationBar - 底部咨询栏组件

**功能特性：**
- 客服咨询入口
- 固定底部显示
- 安全区域适配
- 自定义咨询文案
- 跳转链接支持

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

## 数据结构

### 工单数据结构

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

### Tab数据结构

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

## 功能特性

### ✅ 已实现功能

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

2. **交互功能**
   - Tab页面切换
   - 下拉刷新
   - 上拉加载更多
   - 一键拨号
   - 客服咨询

3. **UI/UX**
   - 响应式设计
   - 暗色模式支持
   - 流畅动画效果
   - 优雅的加载状态
   - 空状态处理

4. **技术特性**
   - Vue3 组合式 API
   - TypeScript 支持
   - 组件化架构
   - SCSS 样式管理
   - 错误处理机制

## 使用指南

### 快速开始

1. **进入工单列表**
   ```javascript
   uni.navigateTo({
     url: '/pages/order/list'
   })
   ```

2. **查看功能演示**
   ```javascript
   uni.navigateTo({
     url: '/pages/order/demo'
   })
   ```

### 自定义配置

1. **修改Tab配置**
   ```javascript
   const tabList = ref([
     { label: "全部订单", value: "all" },
     { label: "服务工单", value: "service" },
     { label: "自定义Tab", value: "custom" }
   ])
   ```

2. **自定义工单状态**
   ```javascript
   const statusMap = {
     pending: '待处理',
     processing: '处理中',
     completed: '已完成',
     cancelled: '已取消',
     custom: '自定义状态'
   }
   ```

3. **自定义样式主题**
   ```scss
   :root {
     --primary-color: #007AFF;
     --success-color: #52C41A;
     --warning-color: #FF8C00;
     --danger-color: #FF3B30;
   }
   ```

## API 接口

### 工单相关接口

```javascript
// 获取工单列表
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

---

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