前端實現商品sku屬性選擇

1、效果圖

2、後臺返回的數據格式

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

dim：表明維度，saleAttrList：表明該維度下商品標籤的集合，skuIds：表明當前標籤下同類商品skuId。

3、實現

1、進入商品詳情頁面

　　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

　　

 　　4.把已選擇的元素添加到一個數組，當用戶全部維度都選擇後，才進行跳轉sku，不然提示，有未選擇的維度。

2、用戶選擇商品屬性的點擊事件

　　1.若是不可選，return

　　2.選中

　　　　至同一dim其餘爲未選中

　　　　不一樣dim中若是選中，則不改變轉態，其餘設置爲未選中

　　3.未選中

　　　　重置全部dim中若是選中，則不改變轉態，其餘設置爲未選中

　　4.用戶所選路徑，去查詢路徑表，若是當前路徑不存在，則將當前元素置灰爲不可選狀態

　　5.肯定惟一sku，跳轉

參考：Sku 多維屬性狀態判斷算法