{"id":18409868,"url":"https://github.com/accforgit/sku-manager","last_synced_at":"2025-04-07T09:34:18.353Z","repository":{"id":57362487,"uuid":"225507894","full_name":"accforgit/sku-manager","owner":"accforgit","description":":seedling:电商 sku选择组件","archived":false,"fork":false,"pushed_at":"2019-12-03T06:06:38.000Z","size":39,"stargazers_count":12,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-08T16:43:12.887Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/accforgit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-03T01:58:16.000Z","updated_at":"2023-07-06T04:06:17.000Z","dependencies_parsed_at":"2022-09-26T16:32:10.403Z","dependency_job_id":null,"html_url":"https://github.com/accforgit/sku-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accforgit%2Fsku-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accforgit%2Fsku-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accforgit%2Fsku-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accforgit%2Fsku-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/accforgit","download_url":"https://codeload.github.com/accforgit/sku-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223276810,"owners_count":17118413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T03:27:44.638Z","updated_at":"2024-11-06T03:27:45.278Z","avatar_url":"https://github.com/accforgit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sku-manage\n\n![NPM](https://nodei.co/npm/sku-manager.png?downloads=true\u0026downloadRank=true\u0026stars=true)\n\n![img](https://img.shields.io/npm/v/sku-manager.svg) ![img](https://img.shields.io/bundlephobia/minzip/sku-manager.svg) ![img](https://img.shields.io/npm/dt/sku-manager.svg) ![img](https://img.shields.io/github/license/accforgit/sku-manager.svg)\n\n电商 sku选择组件，相关文章 [两万字长文-电商sku组合查询状态细究与实现](https://juejin.im/post/5d897919f265da03a53a775c)\n\n![img](img/1.png)\n\n## Live Demo\n\n[移动端查看效果更佳 Demo](https://accforgit.github.io/sku-manage/index.html)\n\n## Install\n\n```\nnpm i sku-manager -S\n```\n\n## Usage\n\n### 导入\n\n```js\nimport SkuManage, { joinKVStr, joinAttrStr } from 'sku-manager'\n```\n`SkuManage`是主类，通过 `new SkuManage`得到实例，`joinKVStr` 与 `joinAttrStr`是辅助分隔符\n\n### 实例\n\n```js\nconst skuManage = new SkuManage(skuParamVoList, skuRankList)\n```\n`skuParamVoList`的数据结构：\n```ts\ninterface ISkuParamVoList Array\u003c{\n  paramId: string\n  paramValue: string\n  valueList: Array\u003c{\n    valueId: string\n    valueValue: string\n  }\u003e\n}\u003e\n```\n就是 `sku`的组合结构，例如：\n```js\n[\n  \"paramId\": \"6977\",\n  \"paramValue\": \"成色\",\n  \"valueList\": [{\n      \"valueId\": \"1081969\",\n      \"valueValue\": \"全新\"\n  }, {\n      \"valueId\": \"1080699\",\n      \"valueValue\": \"仅拆封\"\n  }]\n]\n```\n`skuRankList`的数据结构：\n```ts\ninterface ISkuRankList Array\u003c{\n  spuDId: string\n  paramIdJoin: string\n  priceRange: Array\u003cstring\u003e\n  count: number\n}\u003e\n```\n就是一条完整的 `sku`：\n```js\n\"skuRankList\": [\n    {\n      \"spuDId\": '111111',\n      \"paramIdJoin\": '6977_1081969__6975_730004',\n      \"priceRange\": [6888, 7001],\n      \"count\": 19\n    }\n]\n```\n\n## 计算\n\n当用户切换 `sku`属性时，例如选中了 `颜色_银色`这个属性，那么需要都调用 实例 `skuManage`的 `excuteBySeleted`进行计算，得到当前用户选择状态下的 库存信息、置灰`sku`信息、价格范围等数据：\n```js\n// 例如，当前选中了 颜色_银色，即 6975_730004，实际场景中，此对象是根据用户选中的 sku属性得到\nconst activeSkuTagMap = {\n  6975: 730004\n}\nlet currentSelectSkuRst = skuManage.excuteBySeleted(activeSkuTagMap)\n// 输出选中后计算出来的信息（库存、价格范围，需要置灰的 sku）\nconsole.log(currentSelectSkuRst)\n```\n`currentSelectSkuRst` 的数据结构：\n```ts\ninterface ICurrentSelectSkuRst {\n  currentRst: {\n    priceArr: number[]\n    spuDIdArr: string[] | number[]\n    totalCount: number\n  }\n  nextEmptyKV: string[]\n}\n```\n`currentRst` 表示当前选中状态下的信息，`priceArr`表示价格范围，例如 `[6899, 9100, 9812]`，`spuDIdArr`表示 `spuDiD`集合（每一条完整的 `sku`组合就是一个 `spu`）,例如 `[1932394, 19123234, 19832345]`， `totalCount` 表示当前选中状态下的总库存，例如 `99`\n\n`nextEmptyKV`表示当前选中状态下需要置灰的 `sku`属性集合，例如 `[\"6977_1080699\"]`\n\n## Example\n\n```js\nimport SkuManage, { joinKVStr, joinAttrStr } from 'sku-manager'\n\n// mock 数据\nconst mockData = {\n  \"skuParamVoList\": [{\n      \"paramId\": \"6977\",\n      \"paramValue\": \"成色\",\n      \"valueList\": [{\n          \"valueId\": \"1081969\",\n          \"valueValue\": \"全新\"\n      }, {\n          \"valueId\": \"1080699\",\n          \"valueValue\": \"仅拆封\"\n      }]\n  }, {\n      \"paramId\": \"6975\",\n      \"paramValue\": \"颜色\",\n      \"valueList\": [{\n          \"valueId\": \"730004\",\n          \"valueValue\": \"银色\"\n      }, {\n          \"valueId\": \"730005\",\n          \"valueValue\": \"金色\"\n      }]\n  }],\n  \"skuRankList\": [\n    {\n      \"spuDId\": '111111',\n      \"paramIdJoin\": '6977_1081969__6975_730004',\n      \"priceRange\": [6888, 7001],\n      \"count\": 19\n    },\n    {\n      \"spuDId\": '222222',\n      \"paramIdJoin\": '6977_1081969__6975_730005',\n      \"priceRange\": [6888, 7001],\n      \"count\": 12\n    },\n    {\n      \"spuDId\": '333333',\n      \"paramIdJoin\": '6977_1080699__6975_730004',\n      \"priceRange\": [6888, 7001],\n      \"count\": 0\n    },\n    {\n      \"spuDId\": '444444',\n      \"paramIdJoin\": '6977_1080699__6975_730005',\n      \"priceRange\": [6888, 7001],\n      \"count\": 7\n    }\n  ]\n}\n// 实例\nconst skuManage = new SkuManage(mockData.skuParamVoList, mockData.skuRankList)\n// 例如，当前选中了 颜色_银色，即 6975_730004，实际场景中，此对象是根据用户选中的 sku属性得到\nconst activeSkuTagMap = {\n  6975: 730004\n}\nlet currentSelectSkuRst = skuManage.excuteBySeleted(activeSkuTagMap)\n// 输出选中后计算出来的信息（库存、价格范围，需要置灰的 sku）\nconsole.log(currentSelectSkuRst)\n```\n\n更加实际具体的 [例子参见](https://github.com/accforgit/blog-data/tree/master/%E7%94%B5%E5%95%86sku%E7%BB%84%E5%90%88%E7%8A%B6%E6%80%81%E6%9F%A5%E8%AF%A2)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccforgit%2Fsku-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccforgit%2Fsku-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccforgit%2Fsku-manager/lists"}