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

## 页面概述

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

## 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、遵循微信小程序设计规范
```