前端实现商品sku属性选择

时间:2021-12-19 16:33:15

一、效果图

前端实现商品sku属性选择

二、后台返回的数据格式

[{
"saleName": "颜色",
"dim": 1,
"saleAttrList": [{
"imagePath": null,
"saleValue": "白色",
"skuIds": [
1, 2, 3
]
},
{
"imagePath": null,
"saleValue": "黑色",
"skuIds": [
5, 6
]
}
]
}]

dim:代表维度,saleAttrList:代表该维度下商品标签的集合,skuIds:代表当前标签下同类商品skuId。

三、实现

一、进入商品详情页面

  1.获取后台数据,添加状态,当前sku为选中状态

  2.遍历计算出,同类sku对应的标签数组

    前端实现商品sku属性选择

  3.求所有存在的路径的组合的子集,生成所有存在的路径表

/**
* 求幂积
* @param {Object} arr
*/
function powerset(arr) {
var ps = [[]];
for (var i=0; i < arr.length; i++) {
for (var j = 0, len = ps.length; j < len; j++) {
ps.push(ps[j].concat(arr[i]));
}
}
return ps;
}

  前端实现商品sku属性选择

  4.把已选择的元素添加到一个数组,当用户所有维度都选择后,才进行跳转sku,否则提示,有未选择的维度。

二、用户选择商品属性的点击事件

  1.如果不可选,return

  2.选中

    至同一dim其他为未选中

    不同dim中如果选中,则不改变转态,其他设置为未选中

  3.未选中

    重置所有dim中如果选中,则不改变转态,其他设置为未选中

  4.用户所选路径,去查询路径表,如果当前路径不存在,则将当前元素置灰为不可选状态

  5.确定唯一sku,跳转

参考:Sku 多维属性状态判断算法