Authored by 邱骏

update

<template>
<!--推荐搭配9宫格图片-->
<div class="articles-wrapper" v-if="articleList">
<div class="articles-container">
<p class="title">推荐搭配({{articleTotal}})</p>
... ...
<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>
... ...
... ... @@ -216,6 +216,7 @@ export default {
return articleResult;
},
// 获取详情页尺码图片
async getProductSizeImage({state}, {product_id, brand_id}) {
let result = await this.$api.get('/api/ufo/product/sizeImage', {
product_id,
... ...