YGChatCS/pages/order/components/OrderCard/prompt.md

OrderCard 工单卡片组件

组件概述

OrderCard 是一个用于显示工单信息的卡片组件，支持多种工单状态展示、操作按钮和自定义内容。适用于工单管理、客服系统等场景。

功能特性

• ✅ 多种工单状态支持（待处理、处理中、已完成、已取消）
• ✅ 状态图标和标签显示
• ✅ 工单基本信息展示
• ✅ 可配置的操作按钮
• ✅ 自定义操作区域插槽
• ✅ 点击事件和操作事件
• ✅ 响应式设计
• ✅ 暗色模式支持
• ✅ 优雅的交互动画

组件属性 (Props)

属性名	类型	默认值	必填	说明
orderData	Object	-	是	工单数据对象
showActions	Boolean	true	否	是否显示操作按钮区域

orderData 对象结构

{
  id: String,           // 工单ID
  title: String,        // 工单标题
  createTime: String,   // 创建时间
  contactName: String,  // 联系人姓名
  contactPhone: String, // 联系电话
  status: String        // 工单状态：pending/processing/completed/cancelled
}

组件事件 (Events)

事件名	参数	说明
click	orderData	卡片点击事件
call	orderData	呼叫按钮点击事件
complete	orderData	完成按钮点击事件

插槽 (Slots)

插槽名	说明
actions	自定义操作按钮区域

工单状态说明

状态值	显示文本	图标颜色	标签样式
pending	待处理	橙色	橙色边框
processing	处理中	蓝色	蓝色边框
completed	已完成	绿色	绿色边框
cancelled	已取消	灰色	灰色边框

使用示例

基础用法

<template>
  <OrderCard
    :orderData="orderInfo"
    @click="handleCardClick"
    @call="handleCall"
    @complete="handleComplete"
  />
</template>

<script setup>
import OrderCard from '@/components/OrderCard/index.vue'

const orderInfo = {
  id: '001',
  title: '空调不制冷，需要维修',
  createTime: '2024-01-15 14:30',
  contactName: '张先生',
  contactPhone: '138****8888',
  status: 'pending'
}

const handleCardClick = (orderData) => {
  console.log('卡片点击', orderData)
}

const handleCall = (orderData) => {
  console.log('呼叫', orderData.contactPhone)
}

const handleComplete = (orderData) => {
  console.log('标记完成', orderData.id)
}
</script>

隐藏操作按钮

<template>
  <OrderCard
    :orderData="completedOrder"
    :showActions="false"
    @click="handleCardClick"
  />
</template>

自定义操作按钮

<template>
  <OrderCard
    :orderData="orderInfo"
    @click="handleCardClick"
  >
    <template #actions>
      <button class="custom-btn" @click.stop="handleEdit">
        编辑
      </button>
      <button class="custom-btn" @click.stop="handleDelete">
        删除
      </button>
    </template>
  </OrderCard>
</template>

样式定制

组件支持通过 CSS 变量进行样式定制：

.order-card {
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --primary-color: #007AFF;
  --success-color: #52C41A;
  --warning-color: #FF8C00;
  --danger-color: #FF3B30;
}

响应式支持

• 在小屏设备（≤375px）上自动调整字体大小和间距
• 支持暗色模式自动适配
• 触摸设备优化的交互体验

注意事项

1. 数据格式：确保传入的 orderData 包含所有必需字段
2. 状态值：status 字段必须是预定义的状态值之一
3. 事件处理：使用 @click.stop 防止操作按钮事件冒泡
4. 性能优化：大量卡片时建议使用虚拟滚动

更新日志

v1.0.0 (2024-01-15)

• 初始版本发布
• 支持基础工单信息展示
• 支持多种状态和操作按钮
• 支持自定义插槽
• 响应式设计和暗色模式支持