商品规格组件|spu,sku

387 阅读1分钟

1.spu和sku的概念

spu 相当于sku的集合,代表一个商品

sku 可选规格的任意组合,是库存单位的唯一标识。

2.思路

后端返回的商品详情中sku代表可用的sku集合。

我们需要获得有效sku的子集。通过bwPowerSet方法(已经给的)方法,获取所有子集。

但是子集无法使用,需要转换为路径字典。给每个sku的specs的有效子集全部取出构成一个新数组。然后遍历这个数组,如果这个数组的每个元素也是个数组,把它使用join("字符")转换为字符串。 并且把该字符串作为key值,然后加入路径字典中。

image.png

3.禁用效果实现思路

获取选中按钮值的数组: 首先要拿到选中的数组。 遍历specs,使用find找出selected为true的值。声明一个数组,索引为specs遍历时的index,如果find没找到为true的值,则数组添加空字符串‘’。反之,添加找出的那个元素的名字。

image.png

image.png

构建一个更新函数,目的是更新禁用状态。 遍历specs,调用选中按钮值的数组函数,返回一个函数。再遍历spec.values,当一个按钮没有被选中时,把该值添加进返回选中函数的index中。再经过过滤,把数组为空的值过滤出去。

再使用join把过滤后的数组使用*字符连接起来作为字符串。再判断该字符串是否在路径字典中作为key存在,如果不存在,则设置该按钮的disabled为false,反之,则设置为true。

代码如下:

image.png