訂單確認

介紹

訂單確認元件用於訂單的建立和確認流程，支援地址選擇、商品資訊展示、付款方式選擇等功能。

訂單確認提供兩個主要元件：

• OrderConfirm - 訂單確認頁面元件
• OrderPopup - 訂單確認彈窗元件

引入

UMD 方式

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

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

<script>
const OrderConfirm = window.PolyvProductUIOrderConfirm;
const OrderPopup = window.PolyvProductUIOrderPopup;
</script>

NPM 方式

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

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

程式碼範例

<template>
  <div>
    <OrderPopup
      ref="orderPopupRef"
      :order-target="orderSDK"
      :payment-target="paymentSDK"
      :address-target="addressSDK"
    />
  </div>
</template>

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

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

const orderPopupRef = ref();

// 打开订单确认弹窗
const openOrderPopup = (productList) => {
  orderPopupRef.value?.setupProductOrderPopup(productList);
};

// 关闭订单确认弹窗
const closeOrderPopup = () => {
  orderPopupRef.value?.close();
};
</script>

API

OrderPopup Props

OrderConfirm Events

OrderPopup 方法

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