Package Exports

sku-manager

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sku-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sku-manage

NPM

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

Live Demo

移动端查看效果更佳 Demo

Install

npm i sku-manager -S

Usage

导入

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

SkuManage是主类，通过 new SkuManage得到实例，joinKVStr 与 joinAttrStr是辅助分隔符

实例

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属性时，例如选中了 颜色_银色这个属性，那么需要都调用实例 skuManage的 excuteBySeleted进行计算，得到当前用户选择状态下的库存信息、置灰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)

更加实际具体的例子参见