YGChatCS/pages/order/components/OrderCard

OrderCard 组件

订单卡片组件，用于显示订单和工单信息。

组件结构

OrderCard/
├── index.vue              # 主组件
├── OrderCardContent.vue   # 卡片内容组件
├── InfoRow.vue           # 信息行组件
├── images/               # 图片资源
├── styles/               # 样式文件
└── README.md            # 说明文档

组件说明

OrderCard (主组件)

• 负责整体布局和事件处理
• 包含卡片头部、分割线、内容区域和操作区域
• 处理点击、呼叫等交互事件

OrderCardContent (内容组件)

• 负责根据 orderType 动态渲染不同的内容
• 支持订单类型（0-酒店订单，1-门票订单，2-其他订单）和工单类型
• 使用条件渲染显示对应的信息字段

InfoRow (信息行组件)

• 可复用的信息展示组件
• 统一的标签和值的显示格式
• 支持字符串和数字类型的值

使用方式

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