前端實現商品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 多維屬性狀態判斷算法