基于Vue的淘宝SKU组合算法

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

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

后台返回数据如下图：

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

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

this.goodsInfo.skuSpec.forEach(it => { // 重新组合skuit.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) {// 选取了所有的规格时 拿去skuIdlet str = ''this.selectArr.forEach(item => {str += '_' + item})str = str.slice(1)// 所有规格都选了时，进行匹配skuId，此处数据用于传给后台this.goodsInfo.skuList.forEach(item => { // 匹配skuIdif (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) returnskuSpec.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) returnlet 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) returnfor (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:掘金都是大神，不允许看不懂的情况，手动滑稽) 此方法完全还可以继续优化，也欢迎提出共同学习啊~ 如果有其他方法也欢迎分享

转载于:https://juejin.im/post/5c0e312ae51d4534655d937c

总结

以上是生活随笔为你收集整理的基于Vue的淘宝SKU组合算法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。