Authored by yyq

fix

... ... @@ -138,6 +138,12 @@ export default {
this.sortItem = item;
let id = item.id;
let name = item.name;
let subList ;
if (id === '-1') {
subList = this.fetchBrandList({ id });
} else {
subList = this.fetchCategorySubList({ id, name });
}
this.$store.dispatch('reportYas', {
params: {
... ... @@ -148,13 +154,7 @@ export default {
}
}
});
this.reportYas(scrollHeight);
let subList ;
if (id === '-1') {
subList = this.fetchBrandList({ id });
} else {
subList = this.fetchCategorySubList({ id, name });
}
this.reportYas();
}
},
goProductList(item, index, itemSub) {
... ...
... ... @@ -112,15 +112,17 @@ export default {
computed: {
...mapState(['channelList']),
navList() {
this.$nextTick(() => {
this.refreshProductList(this.active);
});
return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
}
},
watch: {
'channelList.list': function() {
this.init();
},
navList() {
this.$nextTick(() => {
this.refreshProductList(this.active);
});
}
},
activated() {
... ... @@ -140,6 +142,9 @@ export default {
async serverPrefetch() {
return this.fetchChannelList();
},
mounted() {
this.refreshProductList(this.active);
},
methods: {
...mapActions(['fetchChannelList']),
...mapActionsList(['fetchProductList']),
... ...
<template>
<div class="bg">
<div class="product-list-item" @click="goDetail(product, itemIndex)"
:key="itemIndex" :class="(itemIndex) % 2 === 0 && 'magrin-right'">
<div class="item-top">
<div class="item-price">
<span class="price-flag">{{product[priceKey] && '¥'}}</span><span>{{product[priceKey] || ' '}}</span>
</div>
<div class="item-sales">{{product.sales && product.sales + '人付款'}}</div>
</div>
<ImgSize class="item-imge" :src="product.default_images" :width="274" :height="274"/>
<div class="item-name">{{product.product_name}}</div>
</div>
</div>
</template>
<script>
import {Scroll} from 'cube-ui';
import ImgSize from '../../../components/img-size';
export default {
props: {
list: Array,
product: Object,
itemIndex: Number,
yasParams: Object,
priceKey: {
type: String,
default: 'available_now_price',
},
},
data: function() {
return {
yasFirstId: 0,
};
},
methods: {
goDetail(product, index) {
if (this.yasParams && Object.keys(this.yasParams).length) {
this.yasDetail(product.id, index);
}
this.$router.push({
name: 'ProductDetail',
params: {
productId: product.id,
}
});
},
yasShowEvent(height) {
// 获取列表单个元素高度
let index = 0;
if (height) {
// 获取第一个曝光元素
let item = document.querySelector('.product-list-item');
let itemHeight = item.offsetHeight;
let row = parseInt((height - 12) / itemHeight) + 1;
index = row * 2 - 2;
}
// 获取曝光列表
let list = [];
for (let i = 0; i < 6; i++) {
if (this.list[i + index]) {
list.push(this.list[i + index]);
}
}
// 判断是否是重复曝光
if (list.length && list[0].id !== this.yasFirstId) {
this.yasFirstId = list[0].id;
// 1.P_NAME:页面名称,XY_UFOSearchList,XY_UFOSeriesList,XY_UFOBrandList、XY_UFOProductPoolList等;
// 2.TYPE_ID:列表页入口类型,1-搜索结果页,2-系列,3-品牌,4-商品池;
// 3.P_PARAM:页面参数,搜索关键词,系列ID,品牌ID,商品池ID;
// 4.TAB_ID:tab切id,1-人气,2-价格,3-新品;
// 5.TAB_NAME:tab切名称,人气,价格,新品;
// 6.I_INDEX:曝光顺序;
// 7.PRD_ID:商品id;
let DATA = [];
list.map((value, i) => {
DATA.push({...this.yasParams, I_INDEX: i + index, PRD_ID: value.id});
});
this.$store.dispatch('reportYas', {
params: {
param: {DATA},
appop: 'XY_UFO_SHOW_EVENT'
}
});
}
},
yasDetail(id, index) {
// XY_UFO_PRD_LIST_C
// 1.P_NAME:页面名称,XY_UFOSearchList,XY_UFOSeriesList,XY_UFOBrandList、XY_UFOProductPoolList等;
// 2.TYPE_ID:列表页入口类型,1-搜索结果页,2-系列,3-品牌,4-商品池;
// 3.P_PARAM:页面参数,搜索关键词,系列ID,品牌ID,商品池ID;
// 4.TAB_ID:tab切id,1-人气,2-价格,3-新品;
// 5.TAB_NAME:tab切名称,人气,价格,新品;
// 6.I_INDEX:商品顺序号,从1开始递增;
// 7.PRD_ID:商品id
this.$store.dispatch('reportYas', {
params: {
param: {...this.yasParams, I_INDEX: index, PRD_ID: id },
appop: 'XY_UFO_PRD_LIST_C'
}
});
}
},
components: {
ImgSize,
Scroll,
}
};
</script>
<style lang="scss" scoped>
.magrin-right {
margin-right: 14px;
}
.product-list-item {
border-radius: 16px;
width: 344px;
padding: 24px 24px 32px;
// height: 498px;
background: #fff;
margin-bottom: 16px;
}
.item-top {
height: 40px;
display: flex;
justify-content: space-between;
margin-bottom: 32px;
align-items: center;
}
.item-price {
color: #d0021b;
font-size: 32px;
vertical-align: center;
}
.item-imge {
width: 274px;
height: 274px;
margin: 0 10px;
}
.item-name {
font-size: 24px;
color: #000;
letter-spacing: 0;
line-height: 40px;
margin-top: 14px;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-sales {
font-size: 22px;
color: #999;
}
.price-flag {
font-size: 24px;
}
.bg {
padding: 24px;
display: flex;
flex-wrap: wrap;
}
</style>
... ...