# 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 组件