|
|
<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> |
...
|
...
|
|