161 lines
3.9 KiB
Markdown
161 lines
3.9 KiB
Markdown
# 订单管理系统组件需求文档
|
||
|
||
## 项目概述
|
||
订单管理系统的核心组件库，包含工单卡片、工单列表、咨询栏等核心功能组件。
|
||
|
||
## TopNavBar 组件
|
||
|
||
### 功能要求
|
||
- 顶部导航栏展示
|
||
- 支持自定义标题内容
|
||
- 支持插槽扩展
|
||
|
||
### 设计要求
|
||
- 固定在页面顶部
|
||
- 背景色与主题一致
|
||
- 高度适中，不占用过多空间
|
||
|
||
## Tabs 组件
|
||
|
||
### 功能要求
|
||
- 标签页切换功能
|
||
- 支持默认激活项
|
||
- 切换动画效果
|
||
- 事件回调
|
||
|
||
### 设计要求
|
||
- 标签间距均匀
|
||
- 激活状态明显
|
||
- 切换动画流畅
|
||
- 响应式适配
|
||
|
||
## OrderCard 组件
|
||
|
||
### 功能要求
|
||
- 展示工单基本信息（标题、时间、联系人、状态等）
|
||
- 支持点击事件
|
||
- 支持呼叫功能
|
||
- 支持完成操作
|
||
- 状态标识清晰
|
||
|
||
### 设计要求
|
||
- 卡片式布局，圆角设计
|
||
- 信息层次分明
|
||
- 操作按钮位置合理
|
||
- 状态颜色区分明显
|
||
- 支持不同状态的视觉反馈
|
||
|
||
## OrderList 组件
|
||
|
||
### 功能要求
|
||
- 显示工单列表
|
||
- 集成z-paging组件，支持虚拟列表
|
||
- 支持自定义下拉刷新（文案、样式、阈值）
|
||
- 支持自定义上拉加载更多（文案、样式、阈值）
|
||
- 自动管理空数据状态
|
||
- 支持固定高度和自适应高度模式
|
||
- 完整的事件回调机制
|
||
- 加载状态管理
|
||
|
||
### 设计要求
|
||
- 列表项间距合理
|
||
- 加载动画流畅
|
||
- 空状态友好提示
|
||
- 响应式布局
|
||
- 虚拟列表优化大数据渲染性能
|
||
|
||
### z-paging配置
|
||
- `useVirtualList`: 是否启用虚拟列表（默认true）
|
||
- `virtualListHeight`: 虚拟列表高度（默认100%）
|
||
- `cellHeightMode`: 单元格高度模式（auto/fixed）
|
||
- `fixedHeight`: 固定高度值（当cellHeightMode为fixed时使用）
|
||
- `customEmptyView`: 是否使用自定义空状态
|
||
|
||
## ConsultationBar 组件
|
||
|
||
### 功能要求
|
||
- 底部固定咨询栏
|
||
- 显示客服信息和联系方式
|
||
- 支持立即咨询功能
|
||
- 默认隐藏，点击"立即呼叫"按钮后显示
|
||
- "立即咨询"按钮单独一行显示
|
||
- 支持显示/隐藏动画效果
|
||
|
||
### 设计要求
|
||
- 固定在页面底部
|
||
- 背景半透明或纯色
|
||
- 按钮样式与主题一致
|
||
- 信息布局清晰
|
||
- 支持安全区域适配
|
||
- 显示/隐藏动画流畅
|
||
|
||
## 数据结构
|
||
|
||
### 工单数据结构
|
||
```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 // 值
|
||
}
|
||
```
|
||
|
||
## 技术要求
|
||
|
||
### 框架和库
|
||
- Vue 3 Composition API
|
||
- uni-app框架
|
||
- z-paging组件（用于列表优化）
|
||
- SCSS样式预处理
|
||
|
||
### 性能优化
|
||
- 虚拟列表支持大数据量渲染
|
||
- 图片懒加载
|
||
- 组件按需加载
|
||
- 合理的缓存策略
|
||
|
||
### 兼容性
|
||
- 支持微信小程序
|
||
- 支持H5
|
||
- 支持APP
|
||
- 响应式设计，适配不同屏幕尺寸
|
||
|
||
## 更新日志
|
||
|
||
### v1.2.0 (最新)
|
||
- ✅ 集成z-paging组件到OrderList
|
||
- ✅ 支持虚拟列表，提升大数据渲染性能
|
||
- ✅ 自定义下拉刷新和上拉加载更多
|
||
- ✅ 自动管理空数据状态
|
||
- ✅ 支持固定高度和自适应高度模式
|
||
- ✅ 完整的事件回调机制
|
||
- ✅ 创建OrderList演示页面
|
||
|
||
### v1.1.0
|
||
- ✅ 修改ConsultationBar组件布局
|
||
- ✅ "立即咨询"按钮单独一行显示
|
||
- ✅ 默认隐藏，点击"立即呼叫"后显示
|
||
- ✅ 添加显示/隐藏动画效果
|
||
- ✅ 更新相关样式和交互逻辑
|
||
|
||
### v1.0.0
|
||
- ✅ 完成OrderCard组件开发
|
||
- ✅ 完成OrderList组件开发
|
||
- ✅ 完成ConsultationBar组件开发
|
||
- ✅ 完成TopNavBar组件开发
|
||
- ✅ 完成Tabs组件开发
|
||
- ✅ 完成订单管理页面集成
|
||
- ✅ 创建组件演示页面
|
||
- ✅ 编写技术文档 |