Order Confirmation

Introduction

The order confirmation component is used for the order creation and confirmation process, supporting features such as address selection, product information display, and payment method selection.

Order confirmation provides two main components:

• OrderConfirm - Order confirmation page component
• OrderPopup - Order confirmation popup component

Import

UMD Method

Where rc-20250814 is the current version number, please import based on the actual version number.

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

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

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

Code Example

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

Component methods can be called via ref: