商品库

本文档主要描述如何接入互动功能接收端的商品库组件，接入后可实现观众端显示商品库内容。

在引入及使用本功能组件前，需要先对互动功能接收端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

属性名	类型	默认值	含义
productSdk	Object	null	商品库 SDK 实例
lang	string：'zh_CN', 'en'	'zh_CN'	语言
getWeixinSdk	Function	null	回调参数：无。获取微信 SDK 对象， 用于小程序中打开商品库跳转，非小程序环境下不用传入
getLinkParams	Function	null	回调参数：商品信息。跳转商品路径传入额外的参数
customClickButtonHandler	Function	null	回调参数：商品信息。 自定义点击购买按钮的处理，注意传入该参数后不会触发自动跳转，需要在该函数内实现

Events

事件名	参数类型	参数含义	说明
browse-product	Array	商品列表	记录用户浏览过的商品
click-buy	Object	商品数据	点击购买按钮
job-detail	Object	职位商品数据	点击职位商品按钮

ProductBubble

Attributes

属性名	类型	默认值	含义
productSdk	Object	null	商品库 SDK 实例
lang	string：'zh_CN', 'en'	'zh_CN'	语言
getWeixinSdk	Function	null	回调参数：无。获取微信 SDK 对象， 用于小程序中打开商品库跳转，非小程序环境下不用传入
getLinkParams	Function	null	回调参数：商品信息。跳转商品路径传入额外的参数
customClickButtonHandler	Function	null	回调参数：商品信息。 自定义点击购买按钮的处理，注意传入该参数后不会触发自动跳转，需要在该函数内实现

Events

事件名	参数类型	参数含义	说明
click-buy	Object	商品数据	点击购买按钮
product-push	Object	商品数据	推送商品数据

ProductJob

Attributes

属性名	类型	默认值	含义
productSdk	Object	null	商品库 SDK 实例
lang	string：'zh_CN', 'en'	'zh_CN'	语言
jobDetail	Object	null	职位商品数据
use-mobile-class	Boolean	false	是否使用移动端样式

Events

事件名	参数类型	参数含义	说明
click-buy	Object	职位商品数据	点击购买按钮