一、效果图
二、后台返回的数据格式
[{ "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对应的标签数组
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; }
4.把已选择的元素添加到一个数组,当用户所有维度都选择后,才进行跳转sku,否则提示,有未选择的维度。
二、用户选择商品属性的点击事件
1.如果不可选,return
2.选中
至同一dim其他为未选中
不同dim中如果选中,则不改变转态,其他设置为未选中
3.未选中
重置所有dim中如果选中,则不改变转态,其他设置为未选中
4.用户所选路径,去查询路径表,如果当前路径不存在,则将当前元素置灰为不可选状态
5.确定唯一sku,跳转
原文地址:https://www.cnblogs.com/soul-wonder/p/9732921.html
时间: 2024-08-08 20:27:45