商品中心 sku 排列

后台动态表单

型号:

iPhone 13iPhone 13 ProiPhone 13 ProMax

颜色:

黑色白色远峰蓝

容量:

128g256g512g

思路

把这样三个数组

let names = ['iPhone 13', 'iPhone 13 Pro']
let colors = ['黑色', '白色']
let storages = ['128g', '256g']

转换成:

[
  ["iPhone 13", "黑色", "128g"],
  ["iPhone 13", "黑色", "256g"],
  ["iPhone 13", "白色", "128g"],
  ["iPhone 13", "白色", "256g"],
  ["iPhone 13 Pro", "黑色", "128g"],
  ["iPhone 13 Pro", "黑色", "256g"],
  ["iPhone 13 Pro", "白色", "128g"],
  ["iPhone 13 Pro", "白色", "256g"]
]

const combine = function (...chunks) {
  let res = []
  let helper = function (chunkIndex, prev) {
    let chunk = chunks[chunkIndex]
    let isLast = chunkIndex === chunks.length - 1
    for (let val of chunk) {
      let cur = prev.concat(val)
      if (isLast) {
        res.push(cur)
      } else {
        helper(chunkIndex + 1, cur)
      }
    }
  }
  helper(0, [])

  return res
}

前端展示

当前选择的型号:

型号:iPhone 13iPhone 13 ProiPhone 13 ProMax

颜色:黑色白色远峰蓝

容量:128g256g512g

能选的sku

iPhone 13-黑色-128giPhone 13-黑色-256giPhone 13-黑色-512giPhone 13-白色-128giPhone 13-远峰蓝-128giPhone 13 Pro-黑色-512giPhone 13 Pro-白色-256giPhone 13 Pro-白色-512giPhone 13 Pro-远峰蓝-128giPhone 13 Pro-远峰蓝-256giPhone 13 Pro-远峰蓝-512giPhone 13 ProMax-白色-256giPhone 13 ProMax-远峰蓝-128giPhone 13 ProMax-远峰蓝-256giPhone 13 ProMax-远峰蓝-512g

不能选的sku

iPhone 13-白色-256giPhone 13-白色-512giPhone 13-远峰蓝-256giPhone 13-远峰蓝-512giPhone 13 Pro-黑色-128giPhone 13 Pro-黑色-256giPhone 13 Pro-白色-128giPhone 13 ProMax-黑色-128giPhone 13 ProMax-黑色-256giPhone 13 ProMax-黑色-512giPhone 13 ProMax-白色-128giPhone 13 ProMax-白色-512g