// 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 MobileProduct from '@polyv/interactions-receive-sdk-ui-default/lib/MobileProduct';
<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>
