电商项目多规格SKU本地库存计算
在具有多规格选择的电商项目中,往往需要根据当前选中的规格来确定库存数,以及限制用户选择无库存的属性,将该操作放在前端处理,可以很大程度的优化用户体验。
之前有写过OC版本,最近刚更新了小程序版本,Demo。
由于近期项目需求,又把代码翻出来看了一下,整理了一个小程序版本的,做了两次之后,整体思路也比较明确,所以,写点东西记录一下,也希望能帮助到有需要的朋友。
OC版本效果预览 小程序版本效果预览下面以小程序版本为例简单讲解一下
数据格式分为两部分:
1、商品的规格属性列表
2、商品的sku组合以及其对应的商品id,价格,库存数
一、处理数据,获取结果集
对商品的sku数据进行处理,获取到sku所有可能的组合方式,得到一个结果集,引入sku.js中的createDateSource方法,调用该方法即可得到需要的结果集。
const { createDateSource } = require('../../config/sku.js');
var skuResult = createDateSource(skuData);
二、渲染页面布局
使用商品的规格属性列表数据渲染UI。
数据中的isSelect代表:-1(不可选),0(未选中),1(选中)。
三、处理初始的选中状态
selectedIdArray 存放选中属性id的数组。
根据isSelect获取selectedIdArray中的元素,如果当前项未选中,则在selectedIdArray中插入一个空字符串占位,如果是选中状态,就把该项的id插入到selectedIdArray的对应位置。
例如:demo中的属性为5种,那么如果初始5项均为未选中,那么selectedIdArray的值为
['','','','','']
假如第二项是选中状态,那么selectedIdArray的值为
['','选中项的id','','','']
四、处理点击属性的事件
处理跟第三步类似,如果当前项是可点击的,就将该项的id替换到selectedIdArray对应的位置即可,如果是取消选中,则在该位置插入空字符串占位。
五、处理不可选的属性项
遍历属性列表,将属性列表中的每一项的id插入到selectedIdArray对应的位置,移除selectedIdArray中的空字符串,将其中的对象排序后用 ";" 拼接,得到一个临时组合,如果第一步获取到的所有组合方式(skuResult)中没有该组合,表示当前项不可选。
六、获取价格区间、库存数以及商品id
重复第五步获取id组合的方法,获取到当前选中的组合的key,然后从skuResult即可获取当前组合的价格区间,库存数,当所有项均选中时,就可以得到唯一的商品id。
Over。