feat: 订单功能完善

pages/order/components/OrderCard/README.md

@@ -0,0 +1,109 @@
+# 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 组件