市面上大多数的sku算法实现方式 都是把sku转换成对象的方式
而我这个是让它自己找 不需要你写什么算法 也没有复杂的嵌套逻辑 非常简单
1.代码结构
{
"id":"1240167138390765568",
"typeCode":"sj",
"typeName":"手机",
"name":"Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
"title":"建议选购换修无忧月付版首月免费，送杀菌率99.9%手机消毒片！自动订阅，随时可取消！",
"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":"中国华强北",
"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 暗夜绿色 移动联通电信4G手机 双卡双待",
"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 暗夜绿色 移动联通电信4G手机 双卡双待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 暗夜绿色 移动联通电信4G手机 双卡双待",
"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 暗夜绿色 移动联通电信4G手机 双卡双待",
"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 暗夜绿色 移动联通电信4G手机 双卡双待",
"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 暗夜绿色 移动联通电信4G手机 双卡双待",
"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字段来控制对应的sku展示
skuLevel对应你要读取farmGoodsSkuList数组中每个对象的a,b,c字段 按照长度来分割
// 这里就是将筛选出来的数据进行合并的地方
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的数据以后 然后将数据进行合并处理
// 如 我筛选出来全部包含2gb的规格 但是这些规格分别包含在
groupa,groupb,groupc这几个字段里面 我需要根据skuLevel将这些字段进行合并
变成['黑色','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将每一行的数据进行合并 得到一个去重以后的行数据
比如一行里面有两个2GB会将其进行合并
const filterData = uniqBy(list, 'group' + name)
return filterData.map((e) => (
{
...e,
// 合并以后 你就可以根据当前所在规格是第几行拿对应数据的skuName
name: e['group' + name],
// 这里是整个算法的核心
// 这里实现的非常简单 就是通过自己skuName 然后在list里面找 只要跟这个名字相关的 我就认为这个肯定是跟sku绑定的如 我现在所在的sku规格是2gb的 那么我只要搜索出所有跟2gb有关的规格 那么必定就是有效的 在后面判断是否禁用非常有用
skuData: this.getFilterSkuItemList({ list, item: e, name, skuLevel })
}
))
}
//2.上一步拿到分组以后 在这里解析分组结构 因为已经知道每个分组是属于a,b,c哪一行了 所以这边直接遍历指定行就能拿到对应标题跟每一行的数据
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并且使用数组截取的方式来遍历得到一个分组
return ['a', 'b', 'c'].slice(0, skuLevel).map((e, i) => this.findSkuData(e, data, i == skuLevel - 1, skuLevel))
}
上面的东西简单几步就是
1.筛选出你的规格楼层
2.根据你的规格楼层每一个子项的skuName 筛选出所有包含这个skuName的规格
3.然后将规格进行重组变成一个数组并保存起来
4.每次点击的时候 将你当前已经被选中的skuName跟每个item的skuData比较
如你的skuData是['黑色','2gb','256'] 你当前选了['黑色','','']
那么将你的选中的结果去空以后 变成['黑色'] 然后跟['黑色','2gb','256'] 比较 只要黑色包含在里面 我就认为你这个skuItem是不需要禁用的 否则应该禁用
代码如下
// skuData就是每个skuItem所保存的符合条件的值
getSkuButtonDisable = (skuData) => {
const { skuText = '' } = this.state
// 先进行一下去空
const skuTextArr = skuText.split(',').filter((e)=>e)
if (skuTextArr.length == 0) return false
return !skuData.some((e) => {
if (skuText) {
//转换skuData的每一项为数组 并且跟skuTextArr做比较 如果有任意一个条件在里面的话 就变成可用 反之全部禁用
return e.split(',').some((e) => skuTextArr.indexOf(e) !== -1)
} else {
return true
}
})
}
至此所有的sku功能全部就实现了 包括了禁用启用跟sku的选中之类的整套流程
代码不多 如果有问题 可以加我qq:469373256