1、sku多层图片加载

src/views/modules/prod/post-product/postProduct.vue

@@ -40,6 +40,7 @@
             @changeCategory="changeCategory"
             @updataProdDataForm="updataProdDataForm"
             @changeWriteOffTime="changeWriteOffTime"
+            @updateSkuTags="updateSkuTags"
           />
         </div>
 
@@ -125,6 +126,7 @@ export default {
 
         useLang: 0 // 0中文 1中英文
       },
+      skuTags:[],
 
       // 平台选定分类名称
       platCategoryName: '',
@@ -168,6 +170,9 @@ export default {
   },
 
   methods: {
+    updateSkuTags(skuTags){
+      this.skuTags = skuTags;
+    },
     /**
      * 获取产品详情数据
      */
@@ -394,6 +399,7 @@ export default {
 
     // 表单提交
     dataFormSubmit () {
+      console.log(this.skuTags);
       if (!this.dataForm.categoryId || !this.dataForm.shopCategoryId) {
         // 请选择商品分类
         this.errorMsg(this.$i18n.t('product.thisProduCategroy'))
@@ -408,6 +414,13 @@ export default {
         })
         return
       }
+      //skuMap拼接
+      let skuPicMapArr = this.cartesianProduct(this.skuTags);
+
+      for(let i = 0; i < this.dataForm.skuList.length; i++){
+        this.dataForm.skuList[i].skuPicMap = skuPicMapArr[i]
+        this.dataForm.skuList[i].pic = skuPicMapArr[i].split(",")[0]
+      }
       this.dataForm.prodName = this.dataForm.prodNameCn
       this.dataForm.brief = this.dataForm.briefCn
       let param = Object.assign({}, this.dataForm)
@@ -501,6 +514,29 @@ export default {
       }).catch((e) => {
         this.isSubmit = false
       })
+    },
+    //求skutag笛卡尔值组成sku图片映射
+    cartesianProduct(skuTags) {
+      let result = [];
+      if (skuTags.length === 0) {
+        return result;
+      } else {
+        let tempResult = skuTags[0].tagItems.map(item => item.pic);
+        for (let i = 1; i < skuTags.length; i++) {
+          let newResult = [];
+          tempResult.forEach(arr =>{
+            skuTags[i].tagItems.forEach(item =>{
+              if(!item.pic){
+                item.pic = 'null'
+              }
+              let newArr = arr.concat(',').concat(item.pic);
+              newResult.push(newArr);
+            })
+          })
+          tempResult = newResult;
+        }
+        return tempResult;
+      }
     }
   }
 }

src/views/modules/prod/post-product/posting-edit-product.vue

@@ -259,6 +259,7 @@
             @change="skuTagChangeSkuHandler"
             @changeSkuImg="changeSkuImgHandler"
             @clearSkuImg="clearSkuImg"
+            @updateSkuTags="updateSkuTags"
             :skuList="dataForm.skuList"
           ></sku-tag>
 
@@ -824,6 +825,10 @@ export default {
   },
 
   methods: {
+    updateSkuTags(skuTags){
+      this.skuTags = skuTags;
+      this.$emit('updateSkuTags', this.skuTags)
+    },
     querySearch (queryString, cb) {
       var restaurants = this.thirdProdNameLisk
       var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
@@ -1077,14 +1082,16 @@ export default {
       this.dataForm.skuList = skuList
       this.skuTags = skuTags
     },
-    changeSkuImgHandler (propValue, img) {
+    changeSkuImgHandler (propValue, img, skuTags) {
       this.$nextTick(() => {
         this.$refs.skuTable.changeSkuImg(propValue, img)
+        this.$emit('updateSkuTags', skuTags)
       })
     },
     clearSkuImg () {
       this.$nextTick(() => {
         this.$refs.skuTable.clearSkuImg()
+        this.$emit('updateSkuTags', this.skuTags)
       })
     },
 
@@ -1396,7 +1403,6 @@ export default {
         }
       }
       for (let i = 0; i < data.length; i++) {
-        // debugger
         if (this.curLang.includes(2)) {
           if (!String(data[i]['parameterKey']).trim() && !String(data[i]['parameterValue']).trim() && !String(data[i]['parameterKeyEn']).trim() && !String(data[i]['parameterValueEn']).trim()) {
             return true

src/views/modules/prod/sku-tag.vue

@@ -430,6 +430,7 @@ export default {
         let propertiesArray = sku.properties.split(';')
         let propertiesArrayEn = sku.propertiesEn.split(';')
         const imgSrc = sku.pic
+        const picMapArr = sku.skuPicMap ? sku.skuPicMap.split(","): [];
         isIncludeImg = (imgSrc && imgSrc !== '') || isIncludeImg
         for (let j in propertiesArray) {
           let cnProperties = propertiesArray[j].split(':')
@@ -444,9 +445,10 @@ export default {
           }
           let tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName.propValue === cnProperties[1])
           if (tagItemNameIndex === -1) {
-            const extarlInfo = +j === propertiesArray.length - 1 ? { pic: imgSrc } : {}
+            const extarlInfo = +j === propertiesArray.length - 1 ? { pic: picMapArr[j] } : {}
             // const extarlInfo = +j === 0 ? { pic: imgSrc } : {}
             skuTags[j].tagItems.push({
+              pic: picMapArr[j],
               propValue: cnProperties[1],
               propValueEn: cnPropertiesEn[1],
               ...extarlInfo
@@ -785,7 +787,7 @@ export default {
             this.skuList[i].pic = value
           }
         }
-        this.$emit('changeSkuImg', skuTagItem.propValue, value)
+        this.$emit('changeSkuImg', skuTagItem.propValue, value, this.skuTags)
       }
     },
     delTagItemPic (tagIndex, tagItemIndex) {
@@ -794,6 +796,7 @@ export default {
       this.changeTagItemPic('', skuTagItem, tagIndex, tagItemIndex)
       this.changeImg = true
       this.type = 5
+      this.$emit('updateSkuTags', this.skuTags)
     },
     /**
      * 获取对应规格名下的规格值列表