前端實現商品屬性選擇

標籤：判斷   for   uid   dimens   返回   格式   target   數組   tps   

一、

二、後台返回的資料格式

[{    "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

　　

 　　4.把已選擇的元素添加到一個數組，當使用者所有維度都選擇後，才進行跳轉sku，否則提示，有未選擇的維度。

二、使用者選擇商品屬性的點擊事件

　　1.如果不可選，return

　　2.選中

　　　　至同一dim其他為未選中

　　　　不同dim中如果選中，則不改變轉態，其他設定為未選中

　　3.未選中

　　　　重設所有dim中如果選中，則不改變轉態，其他設定為未選中

　　4.使用者所選路徑，去查詢路徑表，如果當前路徑不存在，則將當前元素置灰為不可選狀態

　　5.確定唯一sku，跳轉

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

前端實現商品屬性選擇