Order List

Introduction

The order list component is used to display and manage user orders, supporting features such as filtering by status, paginated loading, and order operations. The component includes order status switching, order card display, action buttons, and other functionalities.

The order list provides the following components:

• OrderList - Order list component
• OrderItem - Order card component
• OrderListPopup - Order list popup component

Import

UMD Method

Take the order-list-popup component as an example, where rc-20250814 is the current version number. Please import it based on the actual version number.

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

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

NPM Method

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

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

Code Example

<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 Methods

Component methods can be called via ref:

OrderList Props

OrderList Methods

Component methods can be called via ref:

OrderItem Props

OrderItem Events

Order Status