商品庫

本文件主要描述如何接入互動功能接收端的商品庫元件，接入後可實現觀眾端顯示商品庫內容。

在引入及使用本功能元件前，需要先對互動功能接收端 SDK 進行公共配置，詳情請查看：互動功能接收端 UI 元件 - 配置 SDK。

引入

線上檔案引入方式

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileProduct/MobileProduct.umd.min.js"></script>
<script>
    const MobileProduct = window.PolyvIRScene.MobileProduct.default;
</script>

import 方式引入（推薦）

import MobileProduct from '@polyv/interactions-receive-sdk-ui-default/lib/MobileProduct';

程式碼範例

先實例化 SDK，然後將其傳入到商品庫元件中，以便內部進行相應邏輯處理。

以 Mobile 端接入為例：

<template>
  <div class="plv-demo-product">
    <product-list
        v-if="productSdk"
        :product-sdk="productSdk"
        :lang="lang"
        @browse-product="handleBrowseProduct"
        @click-buy="handleClickBuy"
        @job-detail="handleShowJobDetail"
    ></product-list>

    <div
        class="c-product-bubble"
    >
      <product-bubble
          v-if="productSdk"
          :product-sdk="productSdk"
          :lang="lang"
          :getLinkParams="getLinkParams"
          @click-buy="handleClickBuy"
      />
    </div>
    <!-- modal是一个弹窗组件，可根据界面风格自行设计 -->
    <modal
        draggable
        body-locked
        title="岗位详情"
        :visible="visible"
        :close-on-click-modal="false"
        no-bg
        @close="hideJobDetail"
    >
      <product-job
          v-if="productSdk"
          :product-sdk="productSdk"
          :job-detail="jobDetail"
          :use-mobile-class="true"
      />
    </modal>
  </div>
</template>

<script>
import { Product } from '@polyv/interactions-receive-sdk';
import ProductList from '@polyv/interactions-receive-sdk-ui-default/lib/MobileProduct';
import ProductBubble from '@polyv/interactions-receive-sdk-ui-default/lib/ProductBubble'
import ProductJob from '@polyv/interactions-receive-sdk-ui-default/lib/ProductJob';


export default {
  components: {
    ProductList,
    ProductBubble,
    ProductJob
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 商品库 SDK 实例
      productSdk: null,
      visible: false,
      jobDetail: {
        cover: '',
        name: '',
        tags: [],
        params: ''
      },
    };
  },

  created() {
    this.productSdk = new Product();
  },

  beforeDestroy() {
    this.productSdk?.destroy();
  },

  methods: {
    getLinkParams() {
      // 跳转路径上携带参数如： ***.com?customParams1=自定义参数
      // return {
      //   customParams1: '自定义参数'
      // }
      return {};
    },
    handleBrowseProduct() {
      // TODO 用于统计用户数据
    },
    handleClickBuy() {
      // TODO 用户统计点击商品
    },
    handleShowJobDetail(data) {
      this.$set(this, 'jobDetail', data);
      this.visible = true;
    },
    hideJobDetail() {
      this.visible = false;
    },
  }
};
</script>

<style lang="scss">
.plv-demo-product {
  position: relative;
}
.c-product-bubble {
  position: absolute;
  top: 16px;
  padding-left: 8px;
  z-index: 35;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.c-product-bubble--mobile {
  top: 60px;
}
</style>

ProductList

Attributes

Events

ProductBubble

Attributes

Events

ProductJob

Attributes

Events