微信小程序-sku算法

电商通用的选择该商品规格算法（sku最小存货）

• sku是会计学中的一个名词，被称为库存单元，即每一个但规格选项就是一个sku。
• 商品和sku属于一对多的关系

要求

• 没有库存的置灰
• 同一类别切换时，图片也要跟着切(这个看返回的数据结构图片在哪在思考，在点击选项时处理(示例省略))
• 默认不选的话给默认图(如果是有进来就要有图片的情况)，没有的默认选择每个类别的第一个规格

返回的数据结构

• 有两种数据结构
  • 第一种：已经分配好的选项+库存，如果没有用笛卡尔乘积算法处理，一般会有
  • 第二种：类别和它的子选项，没有需要自己处理，一般会有

实现思路一

1. 默认进来不选
2. 初始化数据：先处理后台返回的数据，初始化到一个数组skuMap中,skuMap的数据结构示例

   skuMap = [{
   	title: 颜色, --- 大类别
   	check: -1, --- 类别选中的item索引
   	sub: [{
   		name: 绿色,	--- 大类别下的item名称
   		disabled: false, 对应item的置灰情况
   	}]
   }]

3. 页面的加载：处理数组的过程让页面加载，数组处理完成再显示页面
4. 初始化库存stock，默认为0
5. 列举规格组合：写一个函数groupSku将所有可排列的规格一一列举出来，包括库存, groupSku的数据结构示例

   [
   	["绿色"，"xl","7天内发货", 23]
   ]

6. 处理点击当前选项函数handleCurrentChose：点击该规格的时候需要传递外层索引，内层索引和内层名称
   • 选项置灰处理：当前选项置灰时，同一大类初始化不选中并返回
   • 同一大类的选项切换判断：直接修改check值
   • 判断当前选项无库存的组合元素，并把对应的名称置灰
   • 判断是否选择完毕：查看每一个大类的check是否都不为-1
   • 选择完毕则通过groupSku找到对应组合获取最后一个选项库存并设置库存
7. 获取当前选项置灰的元素：
   • 先找到groupSku中所有库存为0且包含当前元素名称的组合noStockList
   • 初始化置灰元素列表
   • 遍历noStockList，去重并去除当前元素名称，最后其余元素存储到置灰元素列表中
   • 最后返回这个列表

实现思路二优化

已知两种数据结构，先把规格的结构处理了，展示在页面上，分配好的选项+库存不处理(其实可以通过id定位会更方便，不过这里没有)

1. 定义一个数组来存储处理好的规格

• 由于处理好的结构是Qbject,所以遍历使用

  Reflect.ownKeys(Object).map((key: string)=> {/* 使用shop[key]拿到这个键的值*/})

2. 由于定义的时候键为英文，而展示时是中文,则使用『枚举映射元组』的方法

   const shopMapTitle = {
     'colors': '颜色',
     'sizes': '尺寸', 
     'styles': '款式', 
     'delivery': '配送方式'
   }
   使用：shopMapTitle[key]

3. 选项要使用radio组件来实现,值得数组类型要根据radio的数据结构来定

4. 定义变量: 全局map, 存储选择选项得Object

5. 处理点击函数: 点击时传递当前选项的类别和选项, 并遍历已处理好的选项库存获取并判断库存

   • 获取选择结果:

     map.set(`${类别}`, 当前选项)

   • map转Object

     Object.fromEntries(map)

   • Object转Array

     Object.values(_selectListObj)

6. 处理初始化

   • 初始化的时候要先把遍历规格的格式处理好
   • 初始化置灰不可取，应该是选择一项后发现这一项的其它类别有库存为0 在置灰，点击其它恢复
     • 先把要判断的存到一个数组A，通过数组判断当前元素是否在这个数组A里，存在就将除这个类别的这一项item排除，其它数组A里的元素找到位置然后置灰，否则就全部不置灰