|
...
|
...
|
@@ -27,7 +27,7 @@ |
|
|
|
<div class="info-name"><div>{{productDetail.product_name}}</div></div>
|
|
|
|
</div>
|
|
|
|
<a class="banner" v-if="resource" @click.prevent="gotoNewPage(resource.url)">
|
|
|
|
<img-size :src="sizeImg(resource.src)"/>
|
|
|
|
<img-size ref="resourceImg" :src="sizeImg(resource.src)"/>
|
|
|
|
</a>
|
|
|
|
<div class="info">
|
|
|
|
<transition-group name="info-list" tag="div" class="info-list">
|
|
...
|
...
|
@@ -50,7 +50,7 @@ |
|
|
|
<img class="ref-img" v-lazy="prdDetailImage" />
|
|
|
|
|
|
|
|
<div class="recommend" v-if="recommend"><h2>相关推荐</h2>
|
|
|
|
<product-list :list="recommend" priceKey="price"/>
|
|
|
|
<product-list ref="recommendList" :list="recommend" priceKey="price" :yas-params="recommendYasParams"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
...
|
...
|
@@ -97,7 +97,7 @@ import TopList from './components/top-list'; |
|
|
|
import SquareImg from './components/square-img';
|
|
|
|
import stateShortCutsMixins from './mixins';
|
|
|
|
|
|
|
|
const { mapActions } = createNamespacedHelpers('product');
|
|
|
|
const { mapActions, mapState } = createNamespacedHelpers('product');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ProductDetail',
|
|
...
|
...
|
@@ -133,10 +133,23 @@ export default { |
|
|
|
showSizeSelectSheet: false,
|
|
|
|
showSizeRequestSheet: false,
|
|
|
|
selectSizeConfig: {},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 商品详情页-推荐商品曝光时
|
|
|
|
* XY_UFO_SHOW_EVENT
|
|
|
|
* 1.P_NAME：页面名称，UFOProductDetail_LIST；
|
|
|
|
* 2.P_PARAM：页面参数；
|
|
|
|
* 3.I_INDEX：曝光顺序；
|
|
|
|
* 4.PRD_SKN：商品id；
|
|
|
|
*/
|
|
|
|
recommendYasParams: {
|
|
|
|
P_NAME: 'UFOProductDetail_LIST',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters(['isQiugouEnabled']),
|
|
|
|
...mapState(['resourceContentCode']),
|
|
|
|
productDec() {
|
|
|
|
const goods = get(this.productDetail, 'goods_list[0]', {});
|
|
|
|
|
|
...
|
...
|
@@ -198,6 +211,31 @@ export default { |
|
|
|
|
|
|
|
this.loadData(this.productId);
|
|
|
|
this.refresh();
|
|
|
|
|
|
|
|
if (this._resourceImgWatcher) {
|
|
|
|
this._resourceImgWatcher();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.resource && this.resource.url) {
|
|
|
|
this.yasResourceVisible();
|
|
|
|
} else {
|
|
|
|
this._resourceImgWatcher = this.$watch(() => {
|
|
|
|
return this.resource && this.resource.url;
|
|
|
|
}, (url) => {
|
|
|
|
if (url) {
|
|
|
|
this._resourceImgWatcher && this._resourceImgWatcher();
|
|
|
|
this.yasResourceVisible();
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
immediate: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
deactivated() {
|
|
|
|
if (this._resourceImgWatcher) {
|
|
|
|
this._resourceImgWatcher();
|
|
|
|
this._resourceImgWatcher = null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
beforeRouteUpdate(to, from ,next) {
|
|
|
|
if (this.historyBackGuard() === false) {
|
|
...
|
...
|
@@ -228,6 +266,31 @@ export default { |
|
|
|
refresh() {
|
|
|
|
this.$refs.slide && this.$refs.slide.refresh && this.$refs.slide.refresh();
|
|
|
|
},
|
|
|
|
yasResourceVisible() {
|
|
|
|
/**
|
|
|
|
* 商品详情页中的资源位曝光
|
|
|
|
* XY_UFO_SHOW_EVENT
|
|
|
|
* 1.P_NAME：当前页面名称，XY_UFOProductDetail；
|
|
|
|
* 2.P_PARAM：当前页面资源位code；
|
|
|
|
* 3.PRD_ID：商品ID；
|
|
|
|
* 4.ACTION_URL：资源位跳转URL；
|
|
|
|
*/
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_SHOW_EVENT',
|
|
|
|
param: {
|
|
|
|
P_NAME: 'XY_UFOProductDetail',
|
|
|
|
P_PARAM: this.resourceContentCode,
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
ACTION_URL: this.resource.url,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (this._resourceImgWatcher) {
|
|
|
|
this._resourceImgWatcher();
|
|
|
|
this._resourceImgWatcher = null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
sizeImg(src, width = 360, height = 72) {
|
|
|
|
if (src) {
|
|
|
|
return getImgUrl(src, width, height);
|
|
...
|
...
|
@@ -344,19 +407,23 @@ export default { |
|
|
|
|
|
|
|
// 选择出售或购买
|
|
|
|
async onSelectTradeProduct(tradeProduct) {
|
|
|
|
/**
|
|
|
|
* 数据埋点
|
|
|
|
* 商品详情页点击出售/购买/求购按钮
|
|
|
|
* event: XY_UFO_PRD_DT_SALE_C
|
|
|
|
* params: 1.TAB_ID：1-出售，2-购买，3-求购；
|
|
|
|
* 2.PRD_ID：商品ID；
|
|
|
|
*/
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
|
|
|
|
param: {
|
|
|
|
TAB_ID: this.selectSizeConfig.type === 'buy' ? 2 : 1,
|
|
|
|
PRD_ID: tradeProduct.productId
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (this.selectSizeConfig.type === 'buy') {
|
|
|
|
//数据埋点
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
|
|
|
|
param: {
|
|
|
|
PRD_ID: tradeProduct.productId,
|
|
|
|
PRD_SKU: tradeProduct.skup,
|
|
|
|
PRD_SIZE: tradeProduct.size_name,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
try {
|
|
|
|
const info = await this.payment({
|
|
|
|
skup: tradeProduct.skup,
|
|
...
|
...
|
@@ -441,6 +508,21 @@ export default { |
|
|
|
|
|
|
|
// 资源位
|
|
|
|
gotoNewPage(url) {
|
|
|
|
/**
|
|
|
|
* 商品详情页中的资源位点击
|
|
|
|
* XY_UFO_GDS_DT_BANNER_C
|
|
|
|
* 1.PRD_ID：商品ID
|
|
|
|
* 2.ACTION_URL：跳转的URL
|
|
|
|
*/
|
|
|
|
this.$store.dispatch('reportYas', {
|
|
|
|
params: {
|
|
|
|
appop: 'XY_UFO_GDS_DT_BANNER_C',
|
|
|
|
param: {
|
|
|
|
PRD_ID: this.productId,
|
|
|
|
ACTION_URL: url,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.$xianyu.goXianyuNewPage({url});
|
|
|
|
},
|
|
|
|
},
|
|
...
|
...
|
@@ -559,7 +641,8 @@ export default { |
|
|
|
.info-price {
|
|
|
|
color: #d0021b;
|
|
|
|
font-size: 48px;
|
|
|
|
font-family: $num-font;
|
|
|
|
|
|
|
|
@include num;
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 56px;
|
|
|
|
height: 56px;
|
...
|
...
|
|
