|
...
|
...
|
@@ -2,7 +2,10 @@ |
|
|
|
<div class="layout">
|
|
|
|
<LayoutHeader class="layout-header" :show-back="true" :title="'\u200E'"></LayoutHeader>
|
|
|
|
<div class="layout-context fixscroll">
|
|
|
|
<div class="cube-scroll-wrapper" ref="pageScroll">
|
|
|
|
<LayoutScroll
|
|
|
|
ref="pageScroll"
|
|
|
|
class="cube-scroll-wrapper"
|
|
|
|
@scroll-end="scrollEndHandler">
|
|
|
|
<div class="slide">
|
|
|
|
<cube-slide ref="slide" :data="imageList">
|
|
|
|
<cube-slide-item v-for="(item, index) in imageList" :key="index">
|
|
...
|
...
|
@@ -27,8 +30,8 @@ |
|
|
|
</div>
|
|
|
|
<div class="info-name"><div>{{productDetail.product_name}}</div></div>
|
|
|
|
</div>
|
|
|
|
<a class="banner" @click.prevent="gotoNewPage">
|
|
|
|
<img-size v-if="resource" ref="resourceImg" :src="sizeImg(resource.src)"/>
|
|
|
|
<a class="banner" v-show="resource" @click.prevent="gotoNewPage">
|
|
|
|
<img-size ref="resourceImg" :src="sizeImg(resource.src)"/>
|
|
|
|
</a>
|
|
|
|
<div class="info">
|
|
|
|
<transition-group name="info-list" tag="div" class="info-list">
|
|
...
|
...
|
@@ -44,7 +47,8 @@ |
|
|
|
<div class="info-list-value">{{desc.value}}</div>
|
|
|
|
</div>
|
|
|
|
</transition-group>
|
|
|
|
<top-list 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>
|
|
|
|
|
|
...
|
...
|
@@ -53,7 +57,7 @@ |
|
|
|
<div class="recommend" v-if="recommend"><h2>相关推荐</h2>
|
|
|
|
<product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</LayoutScroll>
|
|
|
|
<div class="footer">
|
|
|
|
<div class="fav">
|
|
|
|
<div class="icon-fav" @click="_toggleFav">
|
|
...
|
...
|
@@ -240,6 +244,28 @@ export default { |
|
|
|
immediate: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// yas
|
|
|
|
/**
|
|
|
|
* 商品详情页打开时
|
|
|
|
* XY_UFO_PRD_DT_INFO
|
|
|
|
* 1.FP_NAME：来源页面名称；eg：XY_UFOSearchList，XY_UFOSeriesList，XY_UFOBrandList、XY_UFOProductPoolList、UFOProductDetail_LIST等；
|
|
|
|
* 2.FP_PARAM：页面参数；搜索关键词，系列ID，品牌ID，商品池ID；
|
|
|
|
* 3.TAB_ID：tab切id，1-人气，2-价格，3-新品；
|
|
|
|
* 4.TAB_NAME：tab切名称，人气，价格，新品；
|
|
|
|
* 5.PRD_ID：商品id；
|
|
|
|
*/
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_PRD_DT_INFO',
|
|
|
|
param: {
|
|
|
|
FP_NAME: `XY_${this.$route.name}`,
|
|
|
|
FP_PARAM: this.productId,
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
...this.$route.params.yasParams
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
deactivated() {
|
|
|
|
if (this._resourceImgWatcher) {
|
|
...
|
...
|
@@ -247,7 +273,7 @@ export default { |
|
|
|
this._resourceImgWatcher = null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
beforeRouteUpdate(to, from ,next) {
|
|
|
|
beforeRouteUpdate(to, from, next) {
|
|
|
|
if (this.historyBackGuard() === false) {
|
|
|
|
return next(false);
|
|
|
|
}
|
|
...
|
...
|
@@ -277,6 +303,49 @@ export default { |
|
|
|
refresh() {
|
|
|
|
this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
|
|
|
|
},
|
|
|
|
scrollEndHandler({y}) {
|
|
|
|
const scrollTop = Math.abs(y);
|
|
|
|
const pageScrollHeight = this.$refs.pageScroll.$el.offsetHeight;
|
|
|
|
|
|
|
|
// 相关商品
|
|
|
|
if (!this._topListYas && this.$refs.topList) {
|
|
|
|
if (this._topListTop === undefined) {
|
|
|
|
this._topListTop = this.$refs.topList.$el.offsetTop;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (scrollTop < this._topListTop && (scrollTop + pageScrollHeight) > this._topListTop) {
|
|
|
|
const DATA = this.topList.slice(0, 3).map((value, i) => {
|
|
|
|
return {...this.recommendYasParams, I_INDEX: i, PRD_ID: value.id, PRD_SKN: value.id};
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
param: {DATA},
|
|
|
|
appop: 'XY_UFO_SHOW_EVENT'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this._topListYas = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 推荐商品
|
|
|
|
if (this._productItemHeight === undefined) {
|
|
|
|
let item = document.querySelector('.product-list-item');
|
|
|
|
|
|
|
|
if (item) {
|
|
|
|
this._productItemHeight = item.offsetHeight;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.$refs.recommendList) {
|
|
|
|
const listTop = this.$refs.recommendList.$el.offsetTop;
|
|
|
|
const productListScrollTop = scrollTop + pageScrollHeight - listTop - this._productItemHeight;
|
|
|
|
|
|
|
|
if (productListScrollTop > 0) {
|
|
|
|
this.$refs.recommendList.yasShowEvent(productListScrollTop);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yasResourceVisible() {
|
|
|
|
/**
|
|
|
|
* 商品详情页中的资源位曝光
|
|
...
|
...
|
@@ -675,7 +744,6 @@ export default { |
|
|
|
i {
|
|
|
|
font-style: normal;
|
|
|
|
font-size: 36px;
|
|
|
|
vertical-align: text-bottom;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -781,11 +849,10 @@ export default { |
|
|
|
width: 3em;
|
|
|
|
color: #888;
|
|
|
|
font-size: 22px;
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
|
|
.icon-star-fill,
|
|
|
|
.icon-star-outline {
|
|
|
|
font-size: 48px;
|
|
|
|
font-size: 42px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-star-outline {
|
...
|
...
|
|
