YGChatCS/pages/order/propmt.md

服务工单页面组件需求分析

页面概述

根据提供的设计图，这是一个服务工单管理页面，主要包含以下几个核心组件：

1. 顶部导航栏组件 (TopNavBar)

功能需求：

• 左侧返回按钮

设计要求：

• 图标使用 order/images/back.png
• 高度适配状态栏

提示词：

使用 uniapp + vue3 组合式 api 开发微信小程序顶部导航栏组件，要求如下：
1、左侧显示返回按钮，点击可返回上一页
2、适配不同设备的状态栏高度
3、组件内部使用 uniapp 内置组件

2. Tab 切换组件 (Tab)

功能需求：

• 支持多个标签页切换（全部订单、服务工单）
• 选中状态有下划线指示器
• 下划线支持动画过渡效果
• 支持自定义标签内容

设计要求：

• 选中项文字颜色：深色 (#333)
• 未选中项文字颜色：灰色 (#666)
• 下划线颜色：蓝色 (#007AFF)
• 下划线宽度根据文字宽度动态调整

提示词：

使用 uniapp + vue3 组合式 api 开发微信小程序Tab切换组件，要求如下：
1、支持多个标签页切换，默认支持"全部订单"、"服务工单"两个标签
2、选中项底部显示蓝色下划线，下划线宽度根据文字宽度动态调整
3、下划线切换时有平滑的滑动动画效果
4、选中项文字为深色，未选中为灰色
5、支持自定义标签列表和默认选中项
6、组件内部使用 uniapp 内置组件
7、支持插槽自定义标签内容

3. 工单卡片组件 (OrderCard)

功能需求：

• 显示工单基本信息（标题、创建时间、联系人、电话）
• 支持不同状态的工单样式（待处理、已完成等）
• 支持操作按钮（立即呼叫、已完成标记等）
• 支持工单状态图标显示
• 超过 30 天卡片置灰

设计要求：

• 卡片背景：白色，圆角设计
• 卡片间距：适当的上下间距
• 状态图标：橙色圆形图标（待处理）、绿色图标（已完成）、灰色图标（其他状态）
• 操作按钮：橙色渐变按钮（立即呼叫）、绿色边框按钮（已完成）

提示词：

使用 uniapp + vue3 组合式 api 开发微信小程序工单卡片组件，要求如下：
1、卡片式布局，白色背景，圆角设计
2、显示工单标题、创建时间、联系房客、联系电话等信息
3、左侧显示状态图标，不同状态使用不同颜色（橙色-待处理、绿色-已完成、灰色-其他）
4、右侧显示状态标签，支持"已完成"等状态显示
5、底部支持操作按钮，如"立即呼叫"（橙色渐变按钮）
6、支持不同工单状态的样式变化
7、组件内部使用 uniapp 内置组件
8、支持插槽自定义操作区域

4. 工单列表容器组件 (OrderList)

功能需求：

• 支持工单虚拟列表不固定高度的滚动显示
• 支持下拉刷新和上拉加载更多
• 支持空状态显示
• 支持加载状态显示

设计要求：

• 列表背景：蓝色渐变背景
• 卡片间距：统一的间距设计
• 滚动区域：支持弹性滚动

提示词：

使用 uniapp + vue3 组合式 api 开发微信小程序工单列表组件，要求如下：
1、支持工单数据的列表展示
2、背景使用蓝色渐变效果
3、支持下拉刷新和上拉加载更多功能
4、支持空状态和加载状态的显示
5、列表项使用工单卡片组件进行展示
6、支持不同Tab页面的数据筛选
7、组件内部使用 uniapp 内置组件
8、支持自定义列表项模板

整体页面集成提示词

使用 uniapp + vue3 组合式 api 开发微信小程序服务工单页面，要求如下：
1、页面包含顶部导航栏、Tab切换、工单列表、底部咨询栏等模块
2、支持"全部订单"和"服务工单"两个Tab页面切换
3、工单列表支持不同状态的工单展示（待处理、已完成等）
4、整体使用蓝色渐变背景，卡片式布局
5、支持下拉刷新和上拉加载更多
6、所有组件都要求响应式设计，适配不同屏幕尺寸
7、使用组件化开发，各模块独立封装
8、遵循微信小程序设计规范