Authored by 陈峰

Merge branch 'hotfix/brand-error-channel' into 'gray'

Hotfix/brand error channel

1、商品详情页优化

See merge request !30
<template>
<div class="image-swipe" v-if="allLoaded">
<div class="image-swipe" v-if="showSwiper">
<div class="swipe-wrap" @click.prevent="showcase()">
<swiper :options="swiperOption" ref="swiper">
<swiper-slide v-for="item in goodsList" :key="item.title">
... ... @@ -41,7 +41,7 @@
vm.setActiveSlide(swiper.realIndex)
}
},
allLoaded: false
showSwiper: false
};
},
components: {
... ... @@ -59,49 +59,12 @@
let temp = val.slice();
const len = temp.length;
if (len > 1 && len < 4) {
if (len > 1) {
temp.unshift(temp.splice(len - 1)[0]);
}
if (len >= 4) {
const sp = temp.splice(0, 2);
temp.push(sp[0]);
temp.push(sp[1]);
}
this.goodsList = temp;
this.slideCount = this.goodsList.length;
},
goodsList(goods) {
const preloadImg = (list, loaded) => {
loaded = loaded || [];
// 加载完成
if(list.length === 0) {
let $ssr = document.getElementById('ssr');
$ssr && $ssr.remove();
this.allLoaded = true;
return;
}
let img = new Image();
img.src = util.getImgUrl(list[0].image_url, '580', '770');
if(img.complete) {
loaded.push(img);
list.shift();
preloadImg(list, loaded);
}
else {
img.onload = function() {
loaded.push(img);
list.shift();
preloadImg(list, loaded);
};
}
};
preloadImg(goods[0].images_list);
}
},
methods: {
... ... @@ -122,25 +85,10 @@
this.activeIndex = this.calcIndex(idx);
},
calcIndex(realIdx){
const len = this.goods.length;
if (len >= 4) {
if (realIdx === len -1) {
realIdx = 0;
} else {
realIdx += 1;
}
if (realIdx < len -2) {
realIdx += 2;
} else if (realIdx === len -2) {
realIdx = 0;
} else {
realIdx = 1;
}
}
return realIdx;
},
show() {
this.showSwiper = true;
}
}
};
... ...
... ... @@ -2,7 +2,7 @@
<div>
<top-nav v-if="isApp"></top-nav>
<show-box :is-first="true" class="carousel">
<image-swiper :goods="entity.goods_list"></image-swiper>
<image-swiper :goods="entity.goods_list" ref="imageSwiper"></image-swiper>
</show-box>
<show-box :zero-top-margin="true" class="action">
<operation-bar :entity="entity" :brand="brand" :share-title="entity.product_name"
... ... @@ -374,6 +374,11 @@
$.get('/product/mightLike', {skn, shopId}).then(res => {
this.preferList = res.data || [];
});
},
dataLoaded() {
this.$refs.imageSwiper.show();
document.querySelector('#ssr').remove();
}
},
created() {
... ... @@ -391,6 +396,7 @@
return;
}
this.entity = result.data;
this.dataLoaded();
this.brand = result.data.brand_info;
if (this.entity.storage === 0 || this.entity.status === 0) {
this.isSoldOut = true;
... ...