市面上大多數(shù)的sku算法實(shí)現(xiàn)方式 都是把sku轉(zhuǎn)換成對象的方式
而我這個是讓它自己找 不需要你寫什么算法 也沒有復(fù)雜的嵌套邏輯 非常簡單
1.代碼結(jié)構(gòu)
{
"id":"1240167138390765568",
"typeCode":"sj",
"typeName":"手機(jī)",
"name":"Apple iPhone 11 (A2223) 128GB 黑色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"title":"建議選購換修無憂月付版首月免費(fèi)攒霹，送殺菌率99.9%手機(jī)消毒片！自動訂閱八孝，隨時可取消签赃！",
"pic":"[http://img2.sunf.xyz/upload/ohcimeqe/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ohcimeqe/1240161785334788098.jpg)",
"shareImg":"[http://img2.sunf.xyz/upload/krdl91zg/1240161785334788098.jpg](http://img2.sunf.xyz/upload/krdl91zg/1240161785334788098.jpg)",
"img":"[http://img2.sunf.xyz/upload/ubxhp6ov/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ubxhp6ov/1240161785334788098.jpg)",
"prodArea":"中國華強(qiáng)北",
"price":1,
"marketPrice":1,
"content":null,
"upDown":"0",
"shopId":"1239475068401594368",
"shopName":"測試店鋪",
"stock":9987,
"sales":14,
"activity":"0",
"sort":1,
"skuLevel":3,
"labels":"",
"groupaName":"顏色",
"groupbName":"容量",
"groupcName":"購買方式",
"version":null,
"area":"330203,330206,330212,330282",
"farmGoodsSkuList":[
{
"id":"1240168206289924096",
"name":"Apple iPhone 11 Pro Max (A2220) 64GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"pic":"[http://img2.sunf.xyz/upload/1kf2kx9g/1240161785334788098.jpg](http://img2.sunf.xyz/upload/1kf2kx9g/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"64GB",
"groupc":"公開版",
"groupProp":null,
"oriPrice":9599,
"marketPrice":9599,
"price":9599,
"stock":9999,
"sales":0,
"sort":1,
"saleNum":null
},
{
"id":"1240168339316469760",
"name":"Apple iPhone 11 Pro Max (A2220) 256GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待Apple iPhone 11 Pro Max (A2220) 256GB 暗夜",
"pic":"[http://img2.sunf.xyz/upload/r454molf/1240161785334788098.jpg](http://img2.sunf.xyz/upload/r454molf/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"256GB",
"groupc":"公開版",
"groupProp":null,
"oriPrice":10899,
"marketPrice":10899,
"price":10899,
"stock":9999,
"sales":0,
"sort":2,
"saleNum":null
},
{
"id":"1240168541117018112",
"name":"Apple iPhone 11 Pro Max (A2220) 256GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"pic":"[http://img2.sunf.xyz/upload/gs3u46ii/1240161785334788098.jpg](http://img2.sunf.xyz/upload/gs3u46ii/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"512GB",
"groupc":"公開版",
"groupProp":null,
"oriPrice":10899,
"marketPrice":10899,
"price":10899,
"stock":9999,
"sales":0,
"sort":3,
"saleNum":null
},
{
"id":"1240169698619092992",
"name":"【換修無憂月付版】Apple iPhone 11 Pro Max (A2220) 256GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"pic":"[http://img2.sunf.xyz/upload/ys7132fi/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ys7132fi/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"256GB",
"groupc":"換修無憂月付版",
"groupProp":null,
"oriPrice":10899,
"marketPrice":10899,
"price":10899,
"stock":9987,
"sales":14,
"sort":3,
"saleNum":null
},
{
"id":"1240170089565974528",
"name":"【換修無憂月付版】Apple iPhone 11 Pro Max (A2220) 64GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"pic":"[http://img2.sunf.xyz/upload/b3znfnn8/1240161785334788098.jpg](http://img2.sunf.xyz/upload/b3znfnn8/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"64GB",
"groupc":"換修無憂月付版",
"groupProp":null,
"oriPrice":9599,
"marketPrice":9599,
"price":9599,
"stock":9999,
"sales":0,
"sort":3,
"saleNum":null
},
{
"id":"1240170377114873856",
"name":"【換修無憂月付版】Apple iPhone 11 Pro Max (A2220) 512GB 暗夜綠色 移動聯(lián)通電信4G手機(jī) 雙卡雙待",
"pic":"[http://img2.sunf.xyz/upload/emkvnfbx/1240161785334788098.jpg](http://img2.sunf.xyz/upload/emkvnfbx/1240161785334788098.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜綠色",
"groupb":"512GB",
"groupc":"換修無憂月付版",
"groupProp":null,
"oriPrice":12699,
"marketPrice":12699,
"price":12699,
"stock":9999,
"sales":0,
"sort":4,
"saleNum":null
},
{
"id":"1242629772762685440",
"name":"暗夜紅",
"pic":"[http://img2.sunf.xyz/upload/alxesi0k/1241972007737212930.jpg](http://img2.sunf.xyz/upload/alxesi0k/1241972007737212930.jpg)",
"goodsId":"1240167138390765568",
"groupa":"暗夜紅",
"groupb":"1",
"groupc":"貸款",
"groupProp":null,
"oriPrice":1,
"marketPrice":1,
"price":1,
"stock":9999,
"sales":0,
"sort":1,
"saleNum":null
}
],
"farmShop":null
},
后臺通過返回一個
skuLevel跟farmGoodsSkuList字段來控制對應(yīng)的sku展示
skuLevel對應(yīng)你要讀取farmGoodsSkuList數(shù)組中每個對象的a,b,c字段 按照長度來分割
// 這里就是將篩選出來的數(shù)據(jù)進(jìn)行合并的地方
getSkuGroup = (list, skuLevel) => {
return list.map((e) => {
const arr = ['a', 'b', 'c'].slice(0, skuLevel)
return arr.reduce((a, b,index) => {
return a + e['group' + b] + ((index <= skuLevel - 1 ) ? ',' : '' )
}, '')
})
}
// 4.從列表篩選出包含skuName的數(shù)據(jù)以后 然后將數(shù)據(jù)進(jìn)行合并處理
// 如 我篩選出來全部包含2gb的規(guī)格 但是這些規(guī)格分別包含在
groupa,groupb,groupc這幾個字段里面 我需要根據(jù)skuLevel將這些字段進(jìn)行合并
變成['黑色','2gb','256gb']
getFilterSkuItemList = ({ list, item, name, skuLevel } = {}) => {
const data = this.getSkuGroup(list.filter((el) => el['group' + name] == item['group' + name]), skuLevel)
return data
}
getSkuItemData = (name, list, isEnd, skuLevel) => {
// 3.這里使用lodash將每一行的數(shù)據(jù)進(jìn)行合并 得到一個去重以后的行數(shù)據(jù)
比如一行里面有兩個2GB會將其進(jìn)行合并
const filterData = uniqBy(list, 'group' + name)
return filterData.map((e) => (
{
...e,
// 合并以后 你就可以根據(jù)當(dāng)前所在規(guī)格是第幾行拿對應(yīng)數(shù)據(jù)的skuName
name: e['group' + name],
// 這里是整個算法的核心
// 這里實(shí)現(xiàn)的非常簡單 就是通過自己skuName 然后在list里面找 只要跟這個名字相關(guān)的 我就認(rèn)為這個肯定是跟sku綁定的如 我現(xiàn)在所在的sku規(guī)格是2gb的 那么我只要搜索出所有跟2gb有關(guān)的規(guī)格 那么必定就是有效的 在后面判斷是否禁用非常有用
skuData: this.getFilterSkuItemList({ list, item: e, name, skuLevel })
}
))
}
//2.上一步拿到分組以后 在這里解析分組結(jié)構(gòu) 因?yàn)橐呀?jīng)知道每個分組是屬于a,b,c哪一行了 所以這邊直接遍歷指定行就能拿到對應(yīng)標(biāo)題跟每一行的數(shù)據(jù)
findSkuData = (name, findData, isEnd, skuLevel) => {
return {
title: findData['group' + name + 'Name'],
data: this.getSkuItemData(name, findData.farmGoodsSkuList, isEnd, skuLevel)
}
}
getSkuList = (data) => {
const { skuLevel } = data
// 1.這里通過skuLevel并且使用數(shù)組截取的方式來遍歷得到一個分組
return ['a', 'b', 'c'].slice(0, skuLevel).map((e, i) => this.findSkuData(e, data, i == skuLevel - 1, skuLevel))
}
上面的東西簡單幾步就是
1.篩選出你的規(guī)格樓層
2.根據(jù)你的規(guī)格樓層每一個子項(xiàng)的skuName 篩選出所有包含這個skuName的規(guī)格
3.然后將規(guī)格進(jìn)行重組變成一個數(shù)組并保存起來
4.每次點(diǎn)擊的時候 將你當(dāng)前已經(jīng)被選中的skuName跟每個item的skuData比較
如你的skuData是['黑色','2gb','256'] 你當(dāng)前選了['黑色','','']
那么將你的選中的結(jié)果去空以后 變成['黑色'] 然后跟['黑色','2gb','256'] 比較 只要黑色包含在里面 我就認(rèn)為你這個skuItem是不需要禁用的 否則應(yīng)該禁用
代碼如下
// skuData就是每個skuItem所保存的符合條件的值
getSkuButtonDisable = (skuData) => {
const { skuText = '' } = this.state
// 先進(jìn)行一下去空
const skuTextArr = skuText.split(',').filter((e)=>e)
if (skuTextArr.length == 0) return false
return !skuData.some((e) => {
if (skuText) {
//轉(zhuǎn)換skuData的每一項(xiàng)為數(shù)組 并且跟skuTextArr做比較 如果有任意一個條件在里面的話 就變成可用 反之全部禁用
return e.split(',').some((e) => skuTextArr.indexOf(e) !== -1)
} else {
return true
}
})
}
至此所有的sku功能全部就實(shí)現(xiàn)了 包括了禁用啟用跟sku的選中之類的整套流程
代碼不多 如果有問題 可以加我qq:469373256
