微信小程序-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.处理点击函数

• 函数内部定义一个当前选项的Object，把选择的选项存储进去，然后在全局定义一个map
• 当点击选项的时候传递当前选项的类别和选项，使用map.set(${类别}, 当前选项)获取选择的结果，并通过Object.fromEntries(map)将map转为对象
  • 如果需要Object转Array使用Object.values(_selectListObj)
• 点击时直接遍历分配好的选项+库存把四个选项对应的库存拿到，保险起见可以在判断库存

5.处理初始化

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