商品详情页尺码显示多张图 review by lea.guo

@@ -62,11 +62,9 @@ export default {
   activated() {
     let params = {...this.$route.query};
 
-    // if (this.yoho.direction === 'forword') {
     Object.assign(this.$data, this.$options.data());
     !params.order && (params.order = 'sale_desc');
     this.fetchData(params);
-    // }
   },
 
   computed: {

 <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 = [];
 
-        // let imageWidth = result.data.imageWidth || 750;
+        result.data.forEach(function(item) {
 
-        this.sizeImage.imageUrl = url + '?imageView2/2/w/750/q/60';
+          let url = item.imageUrl.split('?')[0];
+
+          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>

@@ -264,8 +264,8 @@ export default {
   },
 
   // 获取详情页尺码图片
-  async getProductSizeImage({state}, {product_id, brand_id}) {
-    let result = await this.$api.get('/api/ufo/product/sizeImage', {
+  async getProductSizeImages({state}, {product_id, brand_id}) {
+    let result = await this.$api.get('/api/ufo/product/sizeImages', {
       product_id,
       brand_id
     });

@@ -184,10 +184,10 @@ module.exports = {
   },
 
   // 获取详情页的尺码图片
-  '/api/ufo/product/sizeImage': {
+  '/api/ufo/product/sizeImages': {
     ufo: true,
     auth: false,
-    api: 'ufo.product.sizeImage',
+    api: 'ufo.product.sizeImages',
     params: {
       product_id: {type: Number},
       brand_id: {type: Number}