前端实现商品sku属性选择

前端实现商品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;

        }

　　

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

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

　　1.如果不可选，return

　　2.选中

　　　　至同一dim其他为未选中

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

　　3.未选中

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

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

　　5.确定唯一sku，跳转

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