sku-manager

电商 sku选择组件

Usage no npm install needed!

<script type="module">
  import skuManager from 'https://cdn.skypack.dev/sku-manager';
</script>

README

sku-manage

NPM

img img img img

电商 sku选择组件,相关文章 两万字长文-电商sku组合查询状态细究与实现

img

Live Demo

移动端查看效果更佳 Demo

Install

npm i sku-manager -S

Usage

导入

import SkuManage, { joinKVStr, joinAttrStr } from 'sku-manager'

SkuManage是主类,通过 new SkuManage得到实例,joinKVStrjoinAttrStr是辅助分隔符

实例

const skuManage = new SkuManage(skuParamVoList, skuRankList)

skuParamVoList的数据结构:

interface ISkuParamVoList Array<{
  paramId: string
  paramValue: string
  valueList: Array<{
    valueId: string
    valueValue: string
  }>
}>

就是 sku的组合结构,例如:

[
  "paramId": "6977",
  "paramValue": "成色",
  "valueList": [{
      "valueId": "1081969",
      "valueValue": "全新"
  }, {
      "valueId": "1080699",
      "valueValue": "仅拆封"
  }]
]

skuRankList的数据结构:

interface ISkuRankList Array<{
  spuDId: string
  paramIdJoin: string
  priceRange: Array<string>
  count: number
}>

就是一条完整的 sku

"skuRankList": [
    {
      "spuDId": '111111',
      "paramIdJoin": '6977_1081969__6975_730004',
      "priceRange": [6888, 7001],
      "count": 19
    }
]

计算

当用户切换 sku属性时,例如选中了 颜色_银色这个属性,那么需要都调用 实例 skuManageexcuteBySeleted进行计算,得到当前用户选择状态下的 库存信息、置灰sku信息、价格范围等数据:

// 例如,当前选中了 颜色_银色,即 6975_730004,实际场景中,此对象是根据用户选中的 sku属性得到
const activeSkuTagMap = {
  6975: 730004
}
let currentSelectSkuRst = skuManage.excuteBySeleted(activeSkuTagMap)
// 输出选中后计算出来的信息(库存、价格范围,需要置灰的 sku)
console.log(currentSelectSkuRst)

currentSelectSkuRst 的数据结构:

interface ICurrentSelectSkuRst {
  currentRst: {
    priceArr: number[]
    spuDIdArr: string[] | number[]
    totalCount: number
  }
  nextEmptyKV: string[]
}

currentRst 表示当前选中状态下的信息,priceArr表示价格范围,例如 [6899, 9100, 9812]spuDIdArr表示 spuDiD集合(每一条完整的 sku组合就是一个 spu),例如 [1932394, 19123234, 19832345]totalCount 表示当前选中状态下的总库存,例如 99

nextEmptyKV表示当前选中状态下需要置灰的 sku属性集合,例如 ["6977_1080699"]

Example

import SkuManage, { joinKVStr, joinAttrStr } from 'sku-manager'

// mock 数据
const mockData = {
  "skuParamVoList": [{
      "paramId": "6977",
      "paramValue": "成色",
      "valueList": [{
          "valueId": "1081969",
          "valueValue": "全新"
      }, {
          "valueId": "1080699",
          "valueValue": "仅拆封"
      }]
  }, {
      "paramId": "6975",
      "paramValue": "颜色",
      "valueList": [{
          "valueId": "730004",
          "valueValue": "银色"
      }, {
          "valueId": "730005",
          "valueValue": "金色"
      }]
  }],
  "skuRankList": [
    {
      "spuDId": '111111',
      "paramIdJoin": '6977_1081969__6975_730004',
      "priceRange": [6888, 7001],
      "count": 19
    },
    {
      "spuDId": '222222',
      "paramIdJoin": '6977_1081969__6975_730005',
      "priceRange": [6888, 7001],
      "count": 12
    },
    {
      "spuDId": '333333',
      "paramIdJoin": '6977_1080699__6975_730004',
      "priceRange": [6888, 7001],
      "count": 0
    },
    {
      "spuDId": '444444',
      "paramIdJoin": '6977_1080699__6975_730005',
      "priceRange": [6888, 7001],
      "count": 7
    }
  ]
}
// 实例
const skuManage = new SkuManage(mockData.skuParamVoList, mockData.skuRankList)
// 例如,当前选中了 颜色_银色,即 6975_730004,实际场景中,此对象是根据用户选中的 sku属性得到
const activeSkuTagMap = {
  6975: 730004
}
let currentSelectSkuRst = skuManage.excuteBySeleted(activeSkuTagMap)
// 输出选中后计算出来的信息(库存、价格范围,需要置灰的 sku)
console.log(currentSelectSkuRst)

更加实际具体的 例子参见