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

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

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

安装

npm install @yeez-tech/user-my-order lucide-vue-next

在应用入口引入样式：

import '@yeez-tech/user-my-order/style.css'

使用

<script setup lang="ts">
import { OrderManagement } from '@yeez-tech/user-my-order'
import type { Order } from '@yeez-tech/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"
  :refund-states="refundStates"
  :contact-seller-button-visible="contactSellerButtonVisible"
  @contact-seller="onContactSeller"
  @view-product="onViewProduct"
  @request-refund="onRequestRefund"
  @request-after-sales="onRequestAfterSales"
>
  <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>> | 可选自定义状态文案；未传时走组件默认文案 | | refundStates | RefundStatesMap | 可选；key 为 ${orderId}-${productId}，值为 refundable（申请退款）或 after_sales（联系售后）；仅购买单展示第三操作按钮 | | downloadButtonVisible | DownloadButtonVisibleMap（即 Record<string, boolean>） | 可选；按行控制是否展示下载/打开按钮，key 同 refundStates。某个 key 显式传 true / false 时以宿主为准；未出现的 key 由组件内置规则兜底（当前：order.status 为 已退款 或 退款中 时不展示，其余展示） | | contactSellerButtonVisible | ContactSellerButtonVisibleMap（即 Record<string, boolean>） | 可选；按行控制是否展示「联系卖家」按钮，key 同 refundStates。某个 key 显式传 true / false 时以宿主为准；未出现的 key 默认展示 |

| 回调 | 参数 | 说明 | |---|---|---| | 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 | 点击联系卖家按钮 | | onRequestRefund | productId: string | 用户在「申请退款」确认弹窗点击确认后触发；不在组件内调接口；成功/失败提示由宿主在请求结束后再展示 | | onRequestAfterSales | 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 | 详情数据 | | refundStates | RefundStatesMap | 可选；与列表 OrderManagement 相同 key，控制每行「申请退款 / 联系售后」；仅购买单展示 | | contactSellerButtonVisible | ContactSellerButtonVisibleMap | 可选；与列表相同 key；未传的 key 默认展示「联系卖家」 |

详情行内：不展示下载相关按钮（与列表不同；下载仅在列表操作）。

OrderDetailPanel 事件（@ 监听）：

| 事件 | 参数 | 说明 | |---|---|---| | contact-seller | productId: string | 点击「联系卖家」 | | view-product | order: Order, product: Product | 点击产品名称 | | request-refund | productId: string | 用户在「申请退款」弹窗点击确认后触发（与列表一致，由宿主调接口与提示） | | request-after-sales | productId: string | 点击「联系售后」 |

OrderDetailPanel 回调（若使用 onXxx 形式传参，与事件等价，按宿主习惯二选一即可）：

| 回调 | 参数 | 说明 | |---|---|---| | onContactSeller | productId: string | 点击联系卖家按钮 | | onViewProduct | order: Order, product: Product | 点击详情页中的产品名称 | | onRequestRefund | productId: string | 申请退款确认后 | | onRequestAfterSales | productId: string | 点击联系售后 |

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（发放时间）；详情里展示赠送说明等（见组件内文案）。

版本记录

0.1.7

• 修复：OrderDetailPanel 补回误删的 lucide-vue-next 与 @arco-design/web-vue 导入——「联系卖家」图标恢复；申请退款确认层重新走 Arco Modal（按 visible 显隐，不再把文案铺在内联版心）。

0.1.6

• downloadButtonVisible：可选，与 refundStates 相同 key；未传的 key 仍用内置规则（order.status 为 已退款 / 退款中 时不展示下载/打开按钮）。
• contactSellerButtonVisible：可选，key 同 refundStates；未传的 key 默认展示「联系卖家」。
• OrderDetailPanel：行内不展示下载；「联系卖家 / 退款 / 售后」与列表同一套 map 与事件（refundStates、contactSellerButtonVisible、request-refund、request-after-sales）。

0.1.5

• 文档：安装与入口示例与 peerDependencies（vue、@arco-design/web-vue、lucide-vue-next）一致；说明 Arco 与组件样式在宿主侧全局只引一次。
• PrepaidOrders：使用 Modal + Tooltip 与退款相关 ref / 类型 / SVG ?url 导入一致化；不在组件内引入 arco.css，避免与宿主重复注入全局样式。

0.1.4

• 申请退款：仅保留一步确认弹窗；用户点「确认」后即 emit('request-refund') 并关闭弹窗；不再在组件内展示「已提交」第二步；接口与成功/失败提示由宿主处理。
• 退款 / 售后图标：改为随包打包的 SVG 资源（?url），避免宿主根路径缺少 public 静态文件导致裂图。
• 类型声明 typings/index.d.ts 与 OrderManagement 的 refundStates、onRequestRefund、onRequestAfterSales 对齐。

0.1.3 及更早

见仓库历史提交。