129 lines
4.1 KiB
Markdown
129 lines
4.1 KiB
Markdown
# 服务工单页面组件需求分析
|
||
|
||
## 页面概述
|
||
|
||
根据提供的设计图，这是一个服务工单管理页面，主要包含以下几个核心组件：
|
||
|
||
## 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、遵循微信小程序设计规范
|
||
```
|