|
|
<template>
|
|
|
<!--尺码图片展示-->
|
|
|
<div v-if="sizeImage" class="size-img-container" :data-bid="brandId" :data-pid="productId">
|
|
|
<img v-lazy="sizeImage">
|
|
|
<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>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -28,15 +28,24 @@ export default { |
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
sizeImage: ''
|
|
|
sizeImage: {
|
|
|
imageUrl: '',
|
|
|
imageWidth: '100%',
|
|
|
imageHeight: 'auto'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
activated() {
|
|
|
this.getProductSizeImage({brand_id: this.brandId, product_id: this.productId}).then(result => {
|
|
|
if (result.code === 200 && result.data) {
|
|
|
let url = result.data.split('?')[0];
|
|
|
if (result.code === 200 && result.data && result.data.imageUrl) {
|
|
|
let url = result.data.imageUrl.split('?')[0];
|
|
|
|
|
|
// let imageWidth = result.data.imageWidth || 750;
|
|
|
|
|
|
this.sizeImage.imageUrl = url + '?imageView2/2/w/750/q/60';
|
|
|
|
|
|
this.sizeImage = url + '?imageView2/2/w/750/q/60';
|
|
|
// this.sizeImage.imageWidth = imageWidth ? (imageWidth / 40) + 'rem' : '100%';
|
|
|
// this.sizeImage.imageHeight = imageHeight ? (imageHeight / 40) + 'rem' : 'auto';
|
|
|
}
|
|
|
});
|
|
|
},
|
...
|
...
|
@@ -49,14 +58,14 @@ export default { |
|
|
<style lang="scss" scoped>
|
|
|
.size-img-container {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
width: 750px;
|
|
|
align-items: center;
|
|
|
padding: 0 40px;
|
|
|
margin: 30px auto;
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
max-width: 100%;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|