user-my-order（订单列表组件）

Vue 3 组件：仅保留「我的订单」列表卡片区（你截图红框区域）。
组件不包含 Header、目录切换、搜索框、数据总览，也不做任何后端请求。

另外提供 OrderDetailPanel 详情样式组件（无目录/无header），宿主可用路由页或弹窗承载。

安装

npm install user-my-order vue lucide-vue-next

在应用入口引入样式：

import 'user-my-order/style.css'

使用

<script setup lang="ts">
import { OrderManagement } from 'user-my-order'
import type { Order } from 'user-my-order'
import { ref } from 'vue'

const orders = ref<Order[]>([])
const currentOrderPage = ref(1)

function onPageChange(page: number) {
  currentOrderPage.value = page
  // 在这里请求宿主后端
}
</script>

<template>
  <OrderManagement
    :orders="orders"
    :current-order-page="currentOrderPage"
    :on-page-change="onPageChange"
  />
</template>

详情样式组件示例（宿主弹窗承载）：

<OrderDetailPanel :order="selectedOrder">
  <template #host-extra>
    <!-- 宿主自定义内容 -->
    <div>这里可以放宿主按钮/文案</div>
  </template>
</OrderDetailPanel>

Props / 回调

| Prop | 类型 | 说明 | |---|---|---| | orders | Order[] | 列表数据 | | currentOrderPage | number | 当前页码，默认 1 | | orderItemsPerPage | number | 每页条数，默认 10 | | serverPagination | boolean | 是否服务端分页 | | totalOrderCount | number | 服务端分页总条数 | | downloadStates | Record<string, DownloadState> | 下载状态映射，key 为 ${orderId}-${productId} | | downloadStatusText | Partial<Record<DownloadStatus, string>> | 可选自定义状态文案；未传时走组件默认文案 |

| 回调 | 参数 | 说明 | |---|---|---| | onPageChange | page: number | 翻页触发 | | onViewDetail | order: Order | 点击“订单详情” | | onViewProduct | order: Order, product: Product | 点击订单列表中的产品名称 | | onDownload | productId: string | 点击下载按钮 | | onPauseDownload | productId: string | 下载中/解密中点击暂停 | | onResumeDownload | productId: string | 暂停态点击继续 | | onOpenFile | productId: string | 完成态点击打开文件 | | onContactSeller | productId: string | 点击联系卖家按钮 |

DownloadState：

• status: idle | preparing | downloading | paused | decrypting | completed
• progress: 百分比 0-100
• fileSize: 总大小字符串（例如 5.2，单位 MB）
• estimatedTime: 预计剩余（例如 00:12）
• speed: 下载速度（例如 1.2，单位 MB/s）

默认状态文案：

• idle: 下载数据
• preparing: 资源加载中...
• downloading: 下载中...
• paused: 下载已暂停
• decrypting: 解密中...
• completed: 下载完成

OrderDetailPanel Props：

| Prop | 类型 | 说明 | |---|---|---| | order | Order | 详情数据 |

OrderDetailPanel 回调：

| 回调 | 参数 | 说明 | |---|---|---| | onContactSeller | productId: string | 点击联系卖家按钮 | | onViewProduct | order: Order, product: Product | 点击详情页中的产品名称 |

Order 与详情展示（购买 / 兑换 / 赠送）

字段定义见包内 src/types/order.ts；src/App.vue 中有 isExchange 的示例订单。

Order.status 支持的状态值：

• 交易成功

• 已付款

• 待审核

• 审核通过

• 退款中

• 已退款

• 已拒绝

• 已兑换

• 未兑换

• 已结算

• 普通购买：不设 isExchange、isGift；填 paymentMethod、createTime（购买时间）。详情里展示「支付方式」。

• 兑换：isExchange: true，填 exchangeCode、exchangeTime；不要再给可用的 createTime（OrderDetailPanel 取时间时优先读 createTime）。详情里展示「兑换码」「兑换时间」，不展示「支付方式」。

• 平台赠送：isGift: true，填 issueTime（发放时间）；详情里展示赠送说明等（见组件内文案）。