YGChatCS/pages/order/prompt.md

订单管理系统组件需求文档

项目概述

订单管理系统的核心组件库，包含工单卡片、工单列表、咨询栏等核心功能组件。

TopNavBar 组件

功能要求

• 顶部导航栏展示
• 支持自定义标题内容
• 支持插槽扩展

设计要求

• 固定在页面顶部
• 背景色与主题一致
• 高度适中，不占用过多空间

Tabs 组件

功能要求

• 标签页切换功能
• 支持默认激活项
• 切换动画效果
• 事件回调

设计要求

• 标签间距均匀
• 激活状态明显
• 切换动画流畅
• 响应式适配

OrderCard 组件

功能要求

• 展示工单基本信息（标题、时间、联系人、状态等）
• 支持点击事件
• 支持呼叫功能
• 支持完成操作
• 状态标识清晰

设计要求

• 卡片式布局，圆角设计
• 信息层次分明
• 操作按钮位置合理
• 状态颜色区分明显
• 支持不同状态的视觉反馈

OrderList 组件

功能要求

• 显示工单列表
• 集成z-paging组件，支持虚拟列表
• 支持自定义下拉刷新（文案、样式、阈值）
• 支持自定义上拉加载更多（文案、样式、阈值）
• 自动管理空数据状态
• 支持固定高度和自适应高度模式
• 完整的事件回调机制
• 加载状态管理

设计要求

• 列表项间距合理
• 加载动画流畅
• 空状态友好提示
• 响应式布局
• 虚拟列表优化大数据渲染性能

z-paging配置

• useVirtualList: 是否启用虚拟列表（默认true）
• virtualListHeight: 虚拟列表高度（默认100%）
• cellHeightMode: 单元格高度模式（auto/fixed）
• fixedHeight: 固定高度值（当cellHeightMode为fixed时使用）
• customEmptyView: 是否使用自定义空状态

ConsultationBar 组件

功能要求

• 底部固定咨询栏
• 显示客服信息和联系方式
• 支持立即咨询功能
• 默认隐藏，点击"立即呼叫"按钮后显示
• "立即咨询"按钮单独一行显示
• 支持显示/隐藏动画效果

设计要求

• 固定在页面底部
• 背景半透明或纯色
• 按钮样式与主题一致
• 信息布局清晰
• 支持安全区域适配
• 显示/隐藏动画流畅

数据结构

工单数据结构

{
  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   // 值
}

技术要求

框架和库

• 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组件开发
• ✅ 完成订单管理页面集成
• ✅ 创建组件演示页面
• ✅ 编写技术文档