109 lines
3.2 KiB
Markdown
109 lines
3.2 KiB
Markdown
# OrderCard 组件
|
||
|
||
订单卡片组件，用于显示订单和工单信息。
|
||
|
||
## 组件结构
|
||
|
||
```
|
||
OrderCard/
|
||
├── index.vue # 主组件
|
||
├── OrderCardContent.vue # 卡片内容组件
|
||
├── InfoRow.vue # 信息行组件
|
||
├── images/ # 图片资源
|
||
├── styles/ # 样式文件
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
## 组件说明
|
||
|
||
### OrderCard (主组件)
|
||
- 负责整体布局和事件处理
|
||
- 包含卡片头部、分割线、内容区域和操作区域
|
||
- 处理点击、呼叫等交互事件
|
||
|
||
### OrderCardContent (内容组件)
|
||
- 负责根据 `orderType` 动态渲染不同的内容
|
||
- 支持订单类型（0-酒店订单，1-门票订单，2-其他订单）和工单类型
|
||
- 使用条件渲染显示对应的信息字段
|
||
|
||
### InfoRow (信息行组件)
|
||
- 可复用的信息展示组件
|
||
- 统一的标签和值的显示格式
|
||
- 支持字符串和数字类型的值
|
||
|
||
## 使用方式
|
||
|
||
```vue
|
||
<template>
|
||
<OrderCard
|
||
:order-data="orderData"
|
||
@click="handleCardClick"
|
||
@call="handleCall"
|
||
@complete="handleComplete"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import OrderCard from '@/pages/order/components/OrderCard/index.vue'
|
||
|
||
const orderData = {
|
||
id: '123',
|
||
commodityName: '订单名称',
|
||
orderType: 0, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
|
||
orderNumber: 'ORD123456',
|
||
checkInTime: '2024-01-01',
|
||
visitorName: '张三',
|
||
contactPhone: '13800138000',
|
||
quantity: 2,
|
||
createTime: '2024-01-01 10:00:00',
|
||
orderStatus: '1',
|
||
status: 'pending'
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## Props
|
||
|
||
### orderData (Object)
|
||
|
||
| 字段 | 类型 | 说明 | 必填 |
|
||
|------|------|------|------|
|
||
| id | String | 订单ID | 是 |
|
||
| commodityName | String | 商品名称 | 是 |
|
||
| orderType | Number/undefined | 订单类型：0-酒店订单，1-门票订单，2-其他订单，undefined-工单 | 否 |
|
||
| orderNumber | String | 订单编号 | 否 |
|
||
| checkInTime | String | 入住时间（orderType=0时使用） | 否 |
|
||
| visitorName | String | 游客姓名/联系房客 | 否 |
|
||
| contactPhone | String | 联系电话 | 否 |
|
||
| quantity | Number | 份数（orderType=1,2时使用） | 否 |
|
||
| createTime | String | 创建时间（工单时使用） | 否 |
|
||
| orderStatus | String | 订单状态 | 否 |
|
||
| status | String | 状态 | 否 |
|
||
|
||
## Events
|
||
|
||
| 事件名 | 说明 | 参数 |
|
||
|--------|------|------|
|
||
| click | 卡片点击事件 | orderData |
|
||
| call | 呼叫事件 | orderData |
|
||
| complete | 完成事件 | orderData |
|
||
|
||
## 显示逻辑
|
||
|
||
### 订单类型 (orderType !== undefined)
|
||
|
||
- **orderType = 0 (酒店订单)**：显示订单编号、入住时间、游客姓名、联系电话
|
||
- **orderType = 1 (门票订单)**：显示订单编号、份数
|
||
- **orderType = 2 (其他订单)**：显示订单编号、份数
|
||
|
||
### 工单类型 (orderType === undefined)
|
||
|
||
显示创建时间、联系房客、联系电话
|
||
|
||
## 优势
|
||
|
||
1. **可读性**：组件职责单一，代码结构清晰
|
||
2. **可维护性**：组件化拆分，便于独立维护和测试
|
||
3. **可复用性**：InfoRow 组件可在其他地方复用
|
||
4. **健壮性**：类型检查和默认值处理
|
||
5. **扩展性**：新增订单类型只需修改 OrderCardContent 组件 |