Package Exports

sku-util

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-util) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sku-util

电商sku组合选择工具

支持目前主流三大MVVM框架（React、Vue、Angular）按照该工具的编码规范可以快速让你的项目呈现sku组合选择模块，大大减少开发成本。

Effect Picture

Feature

支持规格属性不可选置灰
支持获取规格价格区间
支持获取规格库存
样式逻辑分离，可自定义样式结合该模块

Install

npm install sku-util
yarn add sku-util

Usage

import SkuUtil from 'sku-util'

Step1

约定好传入SkuUtil的sku数据结构（字段名必须一样），一个object，两个key的数据分别代表可选的sku列表和该商品所有的规格列表

{
  "skuList": {
    "101;201;302": {
      "price": 200,
      "stock": 10
    },
    "101;201;303": {
      "price": 150,
      "stock": 6
    },
    "102;201;302": {
      "price": 101,
      "stock": 10
    }
  },
  "skuSpec": [
    {
      "id": 262,
      "goodsId": 13,
      "specName": "尺寸",
      "specAttrList": [
        { id: 101, specId: 262, name: '4.7寸' },
        { id: 102, specId: 262, name: '5.5寸' },
        { id: 103, specId: 262, name: '6.0寸' },
      ]
    },
    {
      "id": 263,
      "goodsId": 13,
      "specName": "内存",
      "specAttrList": [
        { id: 201, specId: 263, name: '16G' },
        { id: 202, specId: 263, name: '32G' },
        { id: 203, specId: 263, name: '64G' },
      ]
    },
    {
      "id": 264,
      "goodsId": 13,
      "specName": "颜色",
      "specAttrList": [
        { id: 301, specId: 264, name: '黑色' },
        { id: 302, specId: 264, name: '红色' },
        { id: 303, specId: 264, name: '黄色' },
      ]
    }
  ]
}

Step2

组件渲染前初始化该类，确保只初始化一次，初始化渲染规格dom节点列表数组和已选中的规格属性数组

// 如果在react hook组件中：
const [ specList ] = useState(data.skuSpec);
const [ specListData, setSpecListData] = useState([]);
useMemo(() =>  SkuUtil.initSku(data.skuList), []);
// 如果在react class component中
constructor() {
  SkuUtil.initSku(data.skuList)
  this.state = {
    specList: data.skuSpec,
    specListData: []
  }
}

Step3

render函数中循环遍历规格的时候，通过每个规格属性传入SkuUtil内置的方法即可（请参照如下的Example）

Example

https://github.com/jayantchens/sku-util-example

Api

SkuUtil.initSku(fetchData)

描述：初始化sku可选数据集合，会返回如下类似结构
参数： {Object} fetchData 后端获取的sku数据结构

  {
    101:{ 
      price:[150, 200], stock: 16
    },
    101:201:{ 
      price:[200], stock: 10
    },
    101:201:302:{
      price:[200], stock: 20
    }
  }

SkuUtil.getActionSpecList(specListData, item, index)

描述：处理规格属性点击的操作
参数：
- {Array} specListData 已选中的规格列表
- {Object} item 该规格属性数据对象
- {Number} index 该规格属性所属规格类别的index位置
返回：
- {Array} 点击操作后的规格数据列表

SkuUtil.checkSpecAttrDisabled(specListData, id, index)

描述：处理规格属性是否置灰
参数：
- {Array} specListData 已选中的规格列表
- {Number|String} id 该规格属性id
- {Number} index 该规格属性所属规格类别的index位置
返回：
- {Boolean} 是否置灰

SkuUtil.checkSpecAttrActive(specListData, id)

描述：处理规格属性是否选中状态
参数：
- {Array} specListData 已选中的规格列表
- {Number|String} id 该规格属性id
返回：
- {Boolean} 是否选中

SkuUtil.getPrice(specListData)

描述：获取已选中规格价格区间
参数：
- {Array} specListData 已选中的规格列表
返回：
- {minPrice: [Number], maxPrice: [Number]} 价格对象

SkuUtil.getStock(specListData)

描述：获取已选中规格库存
参数：
- {Array} specListData 已选中的规格列表
返回：
- {Number} 库存数量