Order Details

Introduction

The Order Details component is used to display detailed information about an order, including order status, product information, logistics information, payment information, etc. The component supports order operations such as payment, confirmation of receipt, and refund requests.

Import

UMD Method

Where rc-20250814 is the current version number, please import according to the actual version number.

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

<script>
const OrderDetail = window.PolyvProductUIOrderDetail;
</script>

NPM Method

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

// 引入组件
import { OrderDetail } from '@polyv/product-ui';

Code Example

<template>
  <div>
    <OrderDetail
      :order-target="orderSDK"
      :payment-target="paymentSDK"
      :order-no="orderNo"
      :sync-pay-status="true"
    />
  </div>
</template>

<script setup>
import { OrderDetail } 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 orderNo = ref('202501010001');
</script>

API

Props