訂單詳情

介紹

訂單詳情元件用於展示訂單的詳細資訊，包括訂單狀態、商品資訊、物流資訊、支付資訊等。元件支援訂單操作，如支付、確認收貨、申請退款等功能。

引入

UMD 方式

其中 rc-20250814 為目前版本號，請根據實際版本號進行引入。

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

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

NPM 方式

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

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

程式碼範例

<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