电商商品规格选择逻辑

最近两天在搞商品详情页规格选择逻辑，要被折腾死，在这里写下逻辑，第一次写有不对的地方还请指出-。-

例：商品A  

规格：（数据库存储一般是json+数组的形式）

颜色：红 蓝 黄

尺寸：M S L

套餐：1 2 3 

用户每次点击都会判断对应商品sku的库存

逻辑主要方式：置灰后对有库存的商品进行点亮操作

逻辑流程：

1.加载页面时进行初始化，所有规格选择框置灰后进行点亮

2.加载当前商品详情页的具体商品的规格选择（比如 红 L 3），进入逻辑B（进行模拟点击，依次点击红 L 3）

当用户改变选择或取消选择时（此时逻辑感觉也挺纠结的，不管啦~~biubiubiu），和上面一样，所有规格选择框置灰后进行点亮，然后进行模拟点击，进入逻辑B

所以我们只需要解决流程B

逻辑B：用户每模拟点击一次，调用一次逻辑B

所有的选择框有两种形态：已选择，未选择（比如此时选中只红 L）

未选择：将没有选择框被选中的spec栏下所有选择框置灰（此时为套餐栏），然后对现有的已选择的选择框整理出一个有库存goods数组（规格里存在红 L），对以上置灰区域进行点亮

已选择：将除当前点击（比如当前点击为红）选择框以外的存在已选选择框的spec栏下的所有选择框置灰（此时置灰为尺寸栏），然后对当前点击选择框的spec下非置灰（即有库存）的（如红蓝，黄因无库存置灰不参与）

整理出一个goods数组（即规格存在红蓝的goods），对以上置灰区域进行点亮

当然，还有当规格全部选中后的一系列逻辑，这个就不描述了

我是不是应该补一张axure图  -。-