feat: 新增订单列表交互
This commit is contained in:
duanshuwen
161
pages/order/prompt.md
Normal file
161
pages/order/prompt.md
Normal file
@@ -0,0 +1,161 @@
|
||||
# 订单管理系统组件需求文档
|
||||
|
||||
## 项目概述
|
||||
订单管理系统的核心组件库，包含工单卡片、工单列表、咨询栏等核心功能组件。
|
||||
|
||||
## 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组件开发
|
||||
- ✅ 完成订单管理页面集成
|
||||
- ✅ 创建组件演示页面
|
||||
- ✅ 编写技术文档
|
||||
Reference in New Issue
Block a user