基于Vue的淘宝SKU组合算法-CSDN博客

现有需求，当点击颜色时进行校验，若蓝色6.0寸无库存时禁选。先上效果截图：

当前规格组合中蓝色6寸和黑色中6寸的库存均为0.

后台返回数据如下图：

实现思路： 例如：当选择蓝色时，进行循环遍历组合。组合结果为: 蓝黑，蓝5.5寸，蓝6.0寸，再进行校验，拿出对应组合的库存，判断库存为0时禁选

第一步： 对当前显示在页面上的spu进行重新组合

    this.goodsInfo.skuSpec.forEach(it => { // 重新组合sku
        it.goodsSpecVals.forEach(i => {
            this.$set(i, 'children', [])
            this.goodsInfo.skuList.forEach(item => {
              if (item.skuName.includes(i.goodsSkuSpecValName)) {
                i.children.push(item.skuName)
              }
            })
        })
    })
    解析：sku组合中含有spu，就将将该条sku信息拼入spu对象里，键为children 如图：
复制代码

第二步： 此时已经循环展示在页面上了，要做的是点击进行处理, 此处it为当前的goodsSpecVals中的一项，index为skuSpec层中的索引，idx为当前goodsSpecVals的索引

chooseSku(it, index, idx) {
    if (it.stock === 0) return // 判断库存为0时返回
    // 选中的规格数组组成:[蓝色，5.5寸]
    if (this.selectArr[index] === it.goodsSkuSpecValName) {
        // 再次点击时取消选中
        this.$set(this.selectArr, index, '')
        this.formData.skuId = '' // 清空将要传给后台的skuId
    } else this.$set(this.selectArr, index, it.goodsSkuSpecValName)
    if (this.selectArr.length === this.goodsInfo.skuSpec.length) {
        // 选取了所有的规格时 拿去skuId
        let str = ''
        this.selectArr.forEach(item => {
            str += '_' + item
        })
        str = str.slice(1)
        // 所有规格都选了时，进行匹配skuId，此处数据用于传给后台
        this.goodsInfo.skuList.forEach(item => { // 匹配skuId
            if (item.skuName === str) this.formData.skuId = item.id
        })
    }
    this.getData(this.selectArr, this.goodsInfo.skuSpec, this.goodsInfo.skuList) // 校验库存
}
复制代码

第三步： 进行循环判断哪些sku组合库存为空

getData(selectArr, skuSpec, skuList) {
  console.log(skuSpec)
  let checkLen = skuSpec.length - 1 
  // 3行规格 选2行时校验，2行规格，选1行时校验
  if (selectArr < checkLen) return
  skuSpec.forEach((item, index) => {
    item.goodsSpecVals.forEach((it, idx) => {
      let c = this._deepCopy(selectArr)
      // 这里进行循环组合， 例如：红色_5.5寸，红色_6.0寸
      c[index] = it.goodsSkuSpecValName
      // 拿到我们想要的sku组合，例如：红色_5.5寸 
      let skuName = this.getCid(c, skuSpec, skuList)
      console.log(skuName, 'skuNameskuNameskuName')
      // 根据我们拿到的sku组合 红色_5.5寸进行查库存
      let stock = this.getStock(skuName, skuSpec, skuList)
      it.stock = stock
    })
  })
}
复制代码

第四步 拿出我们需要的组合类型

getCid(c, skuSpec, skuList) {
    // 首先进行判断，避免单纯的红色，蓝色也进行循环。
    if (c.length !== skuSpec.length) return
    let cStr = c.join('_')
    // 对后台传来的sku组合进行循环遍历,若匹配上，则返回这个组合的skuName，例如：红色_5.5寸 
    for (let i in skuList) {
        if (skuList[i].skuName === cStr) {
        return skuList[i].skuName
        }
    }
}
复制代码

第五步 根据我们拿到的组合进行查询库存

getStock(skuName, skuSpec, skuList) {
    console.log(skuName, 'skuName')
    if (!skuName) return
    for (let a in skuSpec) { // 我们拼接的数组，见第三张图
        for (let b in skuSpec[a].goodsSpecVals) {
            // 对每项Spu中children进行循环，若此children中包含skuName，则返回当前组合的库存到当前Spu中
            // 例如点击红色时，遍历匹配到红色_5.5寸，红色库存则为红色_5.5寸的库存 300,5.5寸此时库存也为300。以此类推可以得出6.0寸的库存。
            if (skuSpec[a].goodsSpecVals[b].children.indexOf(skuName) !== -1) {
                for (let i in skuList) {
                    if (skuList[i].skuName === skuName) {
                        console.log(skuList[i], 'skusku')
                        return skuList[i].stock
                    }
                }
            }
        }
    }
  console.log(skuSpec, 'skuSpecskuSpec')
}
复制代码

第六步 最后就比较简单了，在页面上我们循环判断下当前的库存是否为0就OK啦

文章的最后

初次写文章，请多多包涵，有不明白的欢迎留言指出(ps:掘金都是大神，不允许看不懂的情况，手动滑稽) 此方法完全还可以继续优化，也欢迎提出共同学习啊~ 如果有其他方法也欢迎分享