实现思路： 例如：当选择蓝色时，进行循环遍历组合。组合结果为: 蓝黑，蓝5.5寸，蓝6.0寸，再进行校验，拿出对应组合的库存，判断库存为0时禁选
第一步： 对当前显示在页面上的spu进行重新组合
体验AI代码助手
代码解读
复制代码
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的索引
体验AI代码助手
代码解读
复制代码
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')
}
AI写代码
python
运行
第三步： 进行循环判断哪些sku组合库存为空
体验AI代码助手
代码解读
复制代码
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')
}
AI写代码
python
运行
第四步 拿出我们需要的组合类型
体验AI代码助手
代码解读
复制代码
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 }) }) }
AI写代码
python
运行
第五步 根据我们拿到的组合进行查询库存
体验AI代码助手
代码解读
复制代码
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:掘金都是大神，不允许看不懂的情况，手动滑稽) 此方法完全还可以继续优化，也欢迎提出共同学习啊~ 如果有其他方法也欢迎分享
