訂單列表

介紹

訂單列表元件用於展示和管理使用者的訂單，支援按狀態篩選、分頁載入、訂單操作等功能。元件包含訂單狀態切換、訂單卡片展示、操作按鈕等功能。

訂單列表提供以下元件：

• OrderList - 訂單列表元件
• OrderItem - 訂單卡片元件
• OrderListPopup - 訂單列表彈窗元件

引入

UMD 方式

以 order-list-popup 元件為例，其中 rc-20250814 為目前版本號，請根據實際版本號進行引入。

<script src="https://websdk.videocc.net/product-ui/rc-20250814/order-list-popup.umd.js"></script>

<script>
const OrderListPopup = window.PolyvProductUIOrderListPopup;
</script>

NPM 方式

// 安装依赖
pnpm add @polyv/product-ui

// 引入组件
import { OrderList, OrderItem, OrderListPopup } from '@polyv/product-ui';

程式碼範例

<template>
  <div>
    <OrderListPopup
      ref="orderListRef"
      :order-target="orderSDK"
      :payment-target="paymentSDK"
    />
  </div>
</template>

<script setup>
import { OrderListPopup } from '@polyv/product-ui';
import { Order, Payment } from '@polyv/product-sdk';

// 初始化 SDK
const orderSDK = new Order(interactionCore, config);
const paymentSDK = new Payment(interactionCore, config);

const orderListRef = ref();

// 打开订单列表
const openOrderList = () => {
  orderListRef.value?.open();
};

// 关闭订单列表
const closeOrderList = () => {
  orderListRef.value?.close();
};
</script>

API

OrderListPopup Props

OrderListPopup 方法

透過 ref 可以呼叫元件的方法：

OrderList Props

OrderList 方法

透過 ref 可以呼叫元件的方法：

OrderItem Props

OrderItem Events

訂單狀態