fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by yyq
Commit 6aa7f33224511cae9ae06420b089958564601c7d 1 parent 84be29cc

fix

Inline Side-by-side
Showing 3 changed files with 199 additions and 13 deletions
... ... @@ -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']),
... ... @@ -205,7 +210,7 @@ export default {
},
setYasParam: function(params) {
let {total, list} = this.productList;
if (params && typeof params === 'object' && Object.keys(params).length) {
let P_NAME = 'XY_UFOSearchList', TYPE_ID = 1, P_PARAM = '', PRD_LIST = [];
for (let item of list) {
... ... @@ -276,7 +281,7 @@ export default {
// this.$refs.scroll.forceUpdate();
// return;
// }
await this.fetchList(this.selectedCategory);
this.$refs.scroll.forceUpdate();
},
... ... @@ -455,7 +460,7 @@ export default {
position: relative;
z-index: 1;
}
.channel-no-item {
padding-top: 200px;
}
... ...
<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>
... ...