前端实现商品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对应的标签数组

　　　　

　　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;
        }

View Code