|
...
|
...
|
@@ -10,13 +10,14 @@ |
|
|
|
<cube-slide ref="slide" :options="slideOptions" :data="imageList">
|
|
|
|
<cube-slide-item v-for="(item, index) in imageList" :key="index">
|
|
|
|
<a click="javascript:void 0" class="square-img-container">
|
|
|
|
<square-img v-if="!item.initial" :src="item.image_url" :width="600" :height="600" />
|
|
|
|
<square-img v-else :src="item.image_url" :width="274" :height="274" /> <!-- 利用缓存, productList使用的size -->
|
|
|
|
<square-img v-if="!item.initial" :src="item.image_url" :width="600" :height="600"/>
|
|
|
|
<square-img v-else :src="item.image_url" :width="274" :height="274"/> <!-- 利用缓存, productList使用的size -->
|
|
|
|
</a>
|
|
|
|
</cube-slide-item>
|
|
|
|
<template slot="dots" slot-scope="props">
|
|
|
|
<div class="dot-wrap">
|
|
|
|
<span class="cube-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots" :key="item">•</span>
|
|
|
|
<span class="cube-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots"
|
|
|
|
:key="item">•</span>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</cube-slide>
|
|
...
|
...
|
@@ -25,8 +26,8 @@ |
|
|
|
|
|
|
|
<div class="info-basic">
|
|
|
|
<div class="info-price">
|
|
|
|
<template v-if="productDetail.least_price == null">{{'\u200E'}}</template>
|
|
|
|
<template v-else><i>¥</i>{{productDetail.least_price}}</template>
|
|
|
|
<template v-if="price == null">{{'\u200E'}}</template>
|
|
|
|
<template v-else><i>¥</i>{{price}}</template>
|
|
|
|
</div>
|
|
|
|
<div class="info-name"><div>{{productDetail.product_name}}</div></div>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -35,7 +36,8 @@ |
|
|
|
</a>
|
|
|
|
<div class="info">
|
|
|
|
<transition-group name="info-list" tag="div" class="info-list">
|
|
|
|
<div class="info-list-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity" key="促销">
|
|
|
|
<div class="info-list-item" transtion="fade" v-if="activity && activity.length !== 0" @click="showActivity"
|
|
|
|
key="促销">
|
|
|
|
<div class="info-list-name">促销</div>
|
|
|
|
<div class="info-list-value info-promote">
|
|
|
|
<span>{{activity[0].promotionTypeStr}}</span>
|
|
...
|
...
|
@@ -48,18 +50,36 @@ |
|
|
|
</div>
|
|
|
|
</transition-group>
|
|
|
|
<!-- 相关商品 -->
|
|
|
|
<top-list ref="topList" v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct" @allClick="gotoBrand" />
|
|
|
|
<top-list ref="topList" v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct"
|
|
|
|
@allClick="gotoBrand"/>
|
|
|
|
<img class="ref-img" v-lazy="prdDetailTip"/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<img class="ref-img" v-lazy="prdDetailImage" />
|
|
|
|
<!-- 视频资源位 -->
|
|
|
|
<a
|
|
|
|
class="banner video-resource"
|
|
|
|
ref="videoResourceImg"
|
|
|
|
v-if="videoResource.src">
|
|
|
|
<div
|
|
|
|
class="video-mask"
|
|
|
|
@click="onVideoPlay"></div>
|
|
|
|
<VideoPlayer
|
|
|
|
ref="videoPlayer"
|
|
|
|
class="video-player"
|
|
|
|
:source="videoResource.url"
|
|
|
|
/>
|
|
|
|
<img-size :src="sizeImg(videoResource.src)"/>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img class="ref-img" v-lazy="prdDetailImage"/>
|
|
|
|
|
|
|
|
<div class="recommend" v-if="recommend"><h2>相关推荐</h2>
|
|
|
|
<product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
|
|
|
|
</div>
|
|
|
|
</LayoutScroll>
|
|
|
|
<div class="footer">
|
|
|
|
<div class="fav" @click="_toggleFav"><i class="iconfont" :class="[isFav ? 'icon-star-fill': 'icon-star-outline']" /><span>收藏</span></div>
|
|
|
|
<div class="fav" @click="_toggleFav"><i class="iconfont"
|
|
|
|
:class="[isFav ? 'icon-star-fill': 'icon-star-outline']"/><span>收藏</span></div>
|
|
|
|
<cube-button class="sell" @click="sell">出售</cube-button>
|
|
|
|
<cube-button class="buy active" @click="buy">购买</cube-button>
|
|
|
|
</div>
|
|
...
|
...
|
@@ -75,6 +95,7 @@ |
|
|
|
@hide="onSizeSelectSheetHide"
|
|
|
|
@select="onSelectTradeProduct"
|
|
|
|
@add="onRequestSize"/>
|
|
|
|
<detail-useage-tips></detail-useage-tips>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
...
|
...
|
@@ -97,13 +118,18 @@ import TopList from './components/top-list'; |
|
|
|
import SquareImg from './components/square-img';
|
|
|
|
import stateShortCutsMixins from './mixins';
|
|
|
|
import trackingMixins from './tracking-mixins';
|
|
|
|
import DetailUseageTips from './components/detail-useage-tips';
|
|
|
|
|
|
|
|
import VideoPlayer from '@/components/video-player';
|
|
|
|
|
|
|
|
const { mapActions, mapState } = createNamespacedHelpers('product');
|
|
|
|
const { mapActions: mapSecondActions } = createNamespacedHelpers('second');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ProductDetail',
|
|
|
|
mixins: [stateShortCutsMixins, trackingMixins],
|
|
|
|
components: {
|
|
|
|
DetailUseageTips,
|
|
|
|
SizeSelectSheet,
|
|
|
|
ActivityListSheet,
|
|
|
|
SizeRequestSheet,
|
|
...
|
...
|
@@ -116,6 +142,7 @@ export default { |
|
|
|
'cube-slide': Slide,
|
|
|
|
'cube-slide-item': Slide.Item,
|
|
|
|
'cube-popup': Popup,
|
|
|
|
VideoPlayer
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
productId: {
|
|
...
|
...
|
@@ -144,7 +171,7 @@ export default { |
|
|
|
* 1.P_NAME：页面名称，XY_UFOProductDetail；
|
|
|
|
* 2.P_PARAM：页面参数；
|
|
|
|
* 3.I_INDEX：曝光顺序；
|
|
|
|
* 4.PRD_SKN：商品id；
|
|
|
|
* 4.PRD_ID：商品id；
|
|
|
|
* 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
|
|
|
|
*/
|
|
|
|
recommendYasParams: {
|
|
...
|
...
|
@@ -160,8 +187,7 @@ export default { |
|
|
|
...mapState(['resourceContentCode']),
|
|
|
|
productDec() {
|
|
|
|
const goods = get(this.productDetail, 'goods_list[0]', {});
|
|
|
|
|
|
|
|
return [
|
|
|
|
const descList = [
|
|
|
|
{
|
|
|
|
text: '颜色',
|
|
|
|
value: goods.goods_name || '',
|
|
...
|
...
|
@@ -175,15 +201,19 @@ export default { |
|
|
|
text: '发售时间',
|
|
|
|
value: this.productDetail.sale_time
|
|
|
|
},
|
|
|
|
// {
|
|
|
|
// text: '发售价格',
|
|
|
|
// value: this.productDetail.offer_price
|
|
|
|
// },
|
|
|
|
{
|
|
|
|
text: '货号',
|
|
|
|
value: this.productDetail.product_code
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
if (this.productDetail.offer_price) {
|
|
|
|
descList.splice(-1, 0, {
|
|
|
|
text: '发售价格',
|
|
|
|
value: `￥${this.productDetail.offer_price} 仅供参考`
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return descList;
|
|
|
|
},
|
|
|
|
sizeList() {
|
|
|
|
return get(this.productDetail, 'goods_list[0].size_list', null);
|
|
...
|
...
|
@@ -191,6 +221,23 @@ export default { |
|
|
|
title() {
|
|
|
|
return get(this.productDetail, 'product_name', '商品详情');
|
|
|
|
},
|
|
|
|
price() {
|
|
|
|
let price = [];
|
|
|
|
|
|
|
|
if (this.productDetail.least_price) {
|
|
|
|
price.push(this.productDetail.least_price);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.productDetail.second_hand_least_price) {
|
|
|
|
price.push(this.productDetail.second_hand_least_price);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (price.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return Math.min(...price);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.$store.dispatch('getSysConfigQiugou');
|
|
...
|
...
|
@@ -221,7 +268,7 @@ export default { |
|
|
|
this.watchList = null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
asyncData({store, router}) {
|
|
|
|
asyncData({ store, router }) {
|
|
|
|
const productId = parseInt(router.params.productId, 10);
|
|
|
|
|
|
|
|
if (isNaN(productId)) {
|
|
...
|
...
|
@@ -237,7 +284,7 @@ export default { |
|
|
|
store.dispatch('product/setupInitialProductInfo', initialProductInfo);
|
|
|
|
}
|
|
|
|
|
|
|
|
return store.dispatch('product/fetchProductInfo', {productId});
|
|
|
|
return store.dispatch('product/fetchProductInfo', { productId });
|
|
|
|
},
|
|
|
|
activated() {
|
|
|
|
if (this.$refs.pageScroll) {
|
|
...
|
...
|
@@ -284,12 +331,12 @@ export default { |
|
|
|
|
|
|
|
if (yasParmas) {
|
|
|
|
if (yasParmas.P_NAME) {
|
|
|
|
yasParmas.FP_NAME = yasParmas.P_NAME
|
|
|
|
yasParmas.FP_NAME = yasParmas.P_NAME;
|
|
|
|
}
|
|
|
|
if (yasParmas.P_PARAM) {
|
|
|
|
yasParmas.FP_PARAM = yasParmas.P_PARAM
|
|
|
|
yasParmas.FP_PARAM = yasParmas.P_PARAM;
|
|
|
|
}
|
|
|
|
param = {...yasParmas, ...param};
|
|
|
|
param = { ...yasParmas, ...param };
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
...
|
...
|
@@ -303,7 +350,7 @@ export default { |
|
|
|
* @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点
|
|
|
|
* @ author: huzhiming
|
|
|
|
* @ date: 2019-11-13 19:58:50
|
|
|
|
* @ version: V1.0.5
|
|
|
|
* @ version: v1.0.0
|
|
|
|
*/
|
|
|
|
this.settingShareHandler();
|
|
|
|
});
|
|
...
|
...
|
@@ -333,6 +380,7 @@ export default { |
|
|
|
methods: {
|
|
|
|
...mapActions(['fetchProductInfo', 'fetchBrandTop', 'fetchFav', 'setupInitialProductInfo',
|
|
|
|
'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct', 'payment', 'resetSelectedSize']),
|
|
|
|
...mapSecondActions(['fetchStorageCount']),
|
|
|
|
historyBackGuard() {
|
|
|
|
for (let key of Object.keys(this.actionSheetCloseMap)) {
|
|
|
|
if (this[key]) {
|
|
...
|
...
|
@@ -386,13 +434,13 @@ export default { |
|
|
|
* 1.P_NAME：页面名称，XY_UFOProductDetail；
|
|
|
|
* 2.P_PARAM：页面参数；
|
|
|
|
* 3.I_INDEX：曝光顺序；
|
|
|
|
* 4.PRD_SKN：商品id
|
|
|
|
* 4.PRD_ID：商品id
|
|
|
|
* 5.POS_ID: 1：相关商品，2： 推荐推荐，3： 相关商品列表页面
|
|
|
|
*/
|
|
|
|
this.topList.slice(0, 3).forEach((value, i) => {
|
|
|
|
this.yasTargets[`topList${i}`] = {
|
|
|
|
el: elInfo,
|
|
|
|
yasParams: {...this.recommendYasParams, I_INDEX: i + 1, PRD_SKN: value.id, POS_ID: 1},
|
|
|
|
yasParams: { ...this.recommendYasParams, I_INDEX: i + 1, PRD_ID: value.id, POS_ID: 1 },
|
|
|
|
};
|
|
|
|
});
|
|
|
|
}
|
|
...
|
...
|
@@ -411,7 +459,7 @@ export default { |
|
|
|
offsetTop: productElList[i].offsetTop,
|
|
|
|
offsetHeight: productElList[i].offsetHeight,
|
|
|
|
},
|
|
|
|
yasParams: {...this.recommendYasParams, I_INDEX: i + 1, PRD_SKN: item.id},
|
|
|
|
yasParams: { ...this.recommendYasParams, I_INDEX: i + 1, PRD_ID: item.id },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
...
|
...
|
@@ -465,24 +513,52 @@ export default { |
|
|
|
|
|
|
|
const isFav = !this.isFav;
|
|
|
|
|
|
|
|
this.toggleFav({productId: this.productId, isFav}).then(() => {
|
|
|
|
this.toggleFav({ productId: this.productId, isFav }).then(() => {
|
|
|
|
const txt = isFav ? '收藏成功' : '取消收藏成功';
|
|
|
|
|
|
|
|
this.$createToast({
|
|
|
|
txt,
|
|
|
|
type: 'txt',
|
|
|
|
}).show();
|
|
|
|
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_GDS_DT_FAV',
|
|
|
|
param: {
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
FAVTYPE: isFav ? 1 : 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// 进入商品详情
|
|
|
|
gotoProduct(product) {
|
|
|
|
gotoProduct({product, index}) {
|
|
|
|
this.$router.push({
|
|
|
|
name: this.$route.name,
|
|
|
|
params: {
|
|
|
|
productId: product.id,
|
|
|
|
productInfo: product,
|
|
|
|
},
|
|
|
|
yasParams: {
|
|
|
|
P_NAME: 'XY_UFOProductDetail',
|
|
|
|
P_PARAM: this.productId,
|
|
|
|
POS_ID: 1,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_PRD_LIST_C',
|
|
|
|
param: {
|
|
|
|
P_NAME: 'XY_UFOProductDetail',
|
|
|
|
P_PARAM: this.productId,
|
|
|
|
POS_ID: 1,
|
|
|
|
I_INDEX: index + 1,
|
|
|
|
PRD_ID: product.id
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
...
|
...
|
@@ -534,6 +610,7 @@ export default { |
|
|
|
dest: 'OrderBuyConfirm',
|
|
|
|
type: 'buy',
|
|
|
|
title: '购买',
|
|
|
|
btnTitle: '现货'
|
|
|
|
};
|
|
|
|
this.showSizeSelectSheet = true;
|
|
|
|
},
|
|
...
|
...
|
@@ -549,15 +626,17 @@ export default { |
|
|
|
|
|
|
|
// 商品是否指定出售
|
|
|
|
const limitInfo = get(this.productDetail, 'limitInfo', {});
|
|
|
|
if(limitInfo.isLimit === '1') {
|
|
|
|
|
|
|
|
if (limitInfo.isLimit === '1') {
|
|
|
|
this.$createDialog({
|
|
|
|
type: "alert",
|
|
|
|
title: "商品出售限制",
|
|
|
|
type: 'alert',
|
|
|
|
title: '商品出售限制',
|
|
|
|
content: limitInfo.tip || '',
|
|
|
|
confirmBtn: { text: "我知道了" }
|
|
|
|
confirmBtn: { text: '我知道了' }
|
|
|
|
}).show();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 数据埋点
|
|
|
|
* 商品详情页点击出售/购买/求购按钮
|
|
...
|
...
|
@@ -579,6 +658,7 @@ export default { |
|
|
|
dest: 'OrderSellConfirm',
|
|
|
|
type: 'sell',
|
|
|
|
title: '出售',
|
|
|
|
btnTitle: '出售',
|
|
|
|
};
|
|
|
|
this.showSizeSelectSheet = true;
|
|
|
|
},
|
|
...
|
...
|
@@ -596,8 +676,11 @@ export default { |
|
|
|
* 2.PRD_SKU：商品SKU；
|
|
|
|
* 3.PRD_SIZE：尺码；
|
|
|
|
* 新增字段：
|
|
|
|
* 4.ORD_TYPE：订单类型；1-出售，2-购买，3-求购，4-变现；
|
|
|
|
* 4.ORD_TYPE：订单类型；1-出售，2-购买，3-求购，4-变现, 5-二手
|
|
|
|
*/
|
|
|
|
|
|
|
|
const isSecond = tradeProduct.type === 'second';
|
|
|
|
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
|
|
...
|
...
|
@@ -605,7 +688,7 @@ export default { |
|
|
|
PRD_ID: tradeProduct.productId,
|
|
|
|
PRD_SKU: tradeProduct.skup,
|
|
|
|
PRD_SIZE: tradeProduct.size_id,
|
|
|
|
ORD_TYPE: this.selectSizeConfig.type === 'buy' ? 2 : 1
|
|
|
|
ORD_TYPE: this.selectSizeConfig.type === 'buy' ? (isSecond ? 5 : 2) : 1
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
...
|
...
|
@@ -657,10 +740,39 @@ export default { |
|
|
|
|
|
|
|
this.showSizeSelectSheet = false;
|
|
|
|
|
|
|
|
this.$router.push({
|
|
|
|
name: this.selectSizeConfig.dest,
|
|
|
|
query: tradeProduct
|
|
|
|
});
|
|
|
|
if (isSecond) {
|
|
|
|
const { data: count } = await this.fetchStorageCount({ storageId: tradeProduct.storageId });
|
|
|
|
|
|
|
|
if (count === 1) {
|
|
|
|
// 跳转详情
|
|
|
|
this.$router.push({
|
|
|
|
name: 'SecondProductDetail',
|
|
|
|
params: {
|
|
|
|
skup: tradeProduct.skup,
|
|
|
|
yasParams: {
|
|
|
|
P_NAME: 'XY_UFO' + this.$route.name,
|
|
|
|
PRD_ID: tradeProduct.productId
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else if (count > 1) {
|
|
|
|
// 跳转列表
|
|
|
|
this.$router.push({
|
|
|
|
name: 'SecondSellList',
|
|
|
|
params: {
|
|
|
|
id: tradeProduct.storageId,
|
|
|
|
},
|
|
|
|
query: {
|
|
|
|
pid: tradeProduct.productId
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.$router.push({
|
|
|
|
name: this.selectSizeConfig.dest,
|
|
|
|
query: tradeProduct
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 添加尺寸
|
|
...
|
...
|
@@ -724,22 +836,23 @@ export default { |
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.$xianyu.goXianyuNewPage({url});
|
|
|
|
this.$xianyu.goXianyuNewPage({ url });
|
|
|
|
},
|
|
|
|
|
|
|
|
/*
|
|
|
|
* @ description: 配置打开闲鱼导航栏右上角分享按钮 && 配置分享信息 && 上报数据埋点
|
|
|
|
* @ author: huzhiming
|
|
|
|
* @ date: 2019-11-13 20:00:55
|
|
|
|
* @ version: V1.0.5
|
|
|
|
* @ version: v1.0.0
|
|
|
|
*/
|
|
|
|
async settingShareHandler() {
|
|
|
|
/*
|
|
|
|
* @ description: [数据上报]@hooks: 分享链接进入pv，查看闲鱼淘口令，地址栏会附带shareUserId参数，目前淘口令查看事件未知，后期若知道淘口令打开事件可调整此数据埋点
|
|
|
|
* @ author: huzhiming
|
|
|
|
* @ date: 2019-11-13 20:36:00
|
|
|
|
* @ version: V1.0.5
|
|
|
|
* @ version: v1.0.0
|
|
|
|
*/
|
|
|
|
if ( get(this.$route,'query.shareUserId','') !='' ) {
|
|
|
|
if (get(this.$route, 'query.shareUserId', '') !== '') {
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_SHARE_SUCCESS_L',
|
|
...
|
...
|
@@ -751,35 +864,36 @@ export default { |
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let image = this.sizeImg(get(this.imageList,'[0].image_url',''),200,200),
|
|
|
|
yasReportHandler = {
|
|
|
|
// [数据上报]@hooks: 拉起分享弹窗触发
|
|
|
|
XY_SHARE_PRODUCT: ()=>{
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_SHARE_PRODUCT',
|
|
|
|
param: {
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
SHARE_URL: location.href
|
|
|
|
}
|
|
|
|
let image = this.sizeImg(get(this.imageList, '[0].image_url', ''), 200, 200),
|
|
|
|
yasReportHandler = {
|
|
|
|
// [数据上报]@hooks: 拉起分享弹窗触发
|
|
|
|
XY_SHARE_PRODUCT: () => {
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_SHARE_PRODUCT',
|
|
|
|
param: {
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
SHARE_URL: location.href
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
// [数据上报]@hooks: 点击对应分享平台触发
|
|
|
|
XY_SHARE_TYPE: (data) =>{
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_SHARE_TYPE',
|
|
|
|
param: {
|
|
|
|
SHARE_TYPE: data.pluginKey,
|
|
|
|
SHARE_URL: location.href
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// [数据上报]@hooks: 点击对应分享平台触发
|
|
|
|
XY_SHARE_TYPE: (data) => {
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_SHARE_TYPE',
|
|
|
|
param: {
|
|
|
|
SHARE_TYPE: data.pluginKey,
|
|
|
|
SHARE_URL: location.href
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
await this.$xianyu.setNavRightItem({
|
|
|
|
this.$xianyu.setNavRightItem({
|
|
|
|
shareType: 'activity', // 类型，默认activity
|
|
|
|
image,
|
|
|
|
url: `${location.href}?isNeedRefresh=false`, // 分享链接
|
|
...
|
...
|
@@ -787,23 +901,59 @@ export default { |
|
|
|
title: `淘口令#${this.productDetail.product_name}`, // 分享标题
|
|
|
|
text: '' // 分享描述
|
|
|
|
}, yasReportHandler);
|
|
|
|
},
|
|
|
|
onVideoPlay() {
|
|
|
|
this.$refs.videoPlayer.parentHandleclick();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@import "./product-detail";
|
|
|
|
|
|
|
|
.video-mask {
|
|
|
|
z-index: 10;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.video-player {
|
|
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
opacity: 0;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
/deep/ .video-js {
|
|
|
|
padding: 0;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.video-resource {
|
|
|
|
margin-top: 30px;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cube-btn {
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-enter, .fade-leave-to {
|
|
|
|
.fade-enter,
|
|
|
|
.fade-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
|
|
.fade-enter-active,
|
|
|
|
.fade-leave-active {
|
|
|
|
transition: opacity 300ms linear;
|
|
|
|
}
|
|
|
|
|
...
|
...
|
|
