|
|
<template>
|
|
|
<!--尺码图片展示-->
|
|
|
<div v-if="sizeImage.imageUrl" class="size-img-container" :data-bid="brandId" :data-pid="productId">
|
|
|
<img v-lazy="sizeImage.imageUrl" :style="{width: sizeImage.imageWidth, height: sizeImage.imageHeight}">
|
|
|
<div v-if="sizeImageList.length">
|
|
|
<div v-for="item in sizeImageList" :key="item.imageUrl" class="size-img-container" :data-bid="brandId" :data-pid="productId">
|
|
|
<img v-lazy="item.imageUrl" :style="{width: item.imageWidth, height: item.imageHeight}">
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -28,29 +30,28 @@ export default { |
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
sizeImage: {
|
|
|
imageUrl: '',
|
|
|
imageWidth: '100%',
|
|
|
imageHeight: 'auto'
|
|
|
}
|
|
|
sizeImageList: []
|
|
|
};
|
|
|
},
|
|
|
activated() {
|
|
|
this.getProductSizeImage({brand_id: this.brandId, product_id: this.productId}).then(result => {
|
|
|
if (result.code === 200 && result.data && result.data.imageUrl) {
|
|
|
let url = result.data.imageUrl.split('?')[0];
|
|
|
this.getProductSizeImages({brand_id: this.brandId, product_id: this.productId}).then(result => {
|
|
|
if (result.code === 200 && result.data) {
|
|
|
|
|
|
let listArr = [];
|
|
|
|
|
|
result.data.forEach(function(item) {
|
|
|
|
|
|
// let imageWidth = result.data.imageWidth || 750;
|
|
|
let url = item.imageUrl.split('?')[0];
|
|
|
|
|
|
this.sizeImage.imageUrl = url + '?imageView2/2/w/750/q/60';
|
|
|
listArr.push({imageUrl: url + '?imageView2/2/w/750/q/60', imageWidth: '100%', imageHeight: 'auto'});
|
|
|
});
|
|
|
|
|
|
// this.sizeImage.imageWidth = imageWidth ? (imageWidth / 40) + 'rem' : '100%';
|
|
|
// this.sizeImage.imageHeight = imageHeight ? (imageHeight / 40) + 'rem' : 'auto';
|
|
|
this.sizeImageList = listArr;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(['getProductSizeImage'])
|
|
|
...mapActions(['getProductSizeImages'])
|
|
|
}
|
|
|
};
|
|
|
</script>
|
...
|
...
|
|