商店多级sku选择的实现和算法

[iscarecrow]

目录

• 选择问题描述
• 选择思路及问题难点
• 代码实现
• 算法分析
• 产品实现的一些想法
• QA

代码demo

sku-select

问题描述

一个商品由多个维度构成，可以选择或者取消任意一个维度。所有维度选择结束决定此时特定的商品

选择方案及问题解决思路

选择方案

• 全部维度选择完毕，提交该商品让后端判断此时的商品状态，售罄，可售卖，待上架等 （京东pc）
• 任意维度的一次选择和取消，需要判断出其他哪些维度不可选择（置灰不可选择状态），本demo采用此方案

问题解决思路

问题难点在于: 每个维度选择和取消后，需要判断任意其他维度的商品属性是否可选

流程

1. 数据准备，需要有 默认的default_tag，全部的tag_groups集合，还是有可用的tags集合
2. 数据初始化,使用tag_groups渲染页面，使用default_tag初始化默认状态。数据处理
3. 点击过程，有两个动作，判断当前属性状态（选择） 和其他所有属性状态（不可用）。属性包括不可用,已选
4. 所有属性确认完毕，发起请求，获取该商品详情

所以关键要解决的问题就是 选择后不可用的判断和当前状态已选

代码实现（之后补充）

可先看demo
关键点分析，如何识别哪些不可用

disableTags(tag_groups,default_tag) {
    let tagLength = tag_groups.length;
    let tagArrayIndex = [];
    let default_tag_key_array = Object.keys(default_tag);
    remove(default_tag_key_array, n => n == 'inventory');
    for (let i in default_tag_key_array) {tagArrayIndex.push(i)};
      
    for (let i in tag_groups) {
      let tagsFilter = cloneDeep(this.tags);
      let tagsFilterArray = cloneDeep(tagArrayIndex);
      let idx = tagLength-1-i;
      remove(tagsFilterArray, n => n == idx);
      for (let v of tagsFilterArray) {
        if  (default_tag[tag_groups[v].name] !== '') {
          tagsFilter = tagsFilter.filter(item => {
            return item[tag_groups[v].name] === default_tag[tag_groups[v].name]
          });
        }
      }
      if (tag_groups[idx].length !== tagsFilter.length) {
        let arrN1 = keyBy(tagsFilter, tag_groups[idx].name);
        let keysN1 = Object.keys(arrN1);
        for (let c of tag_groups[idx].tags) { 
          c.isDisable = !keysN1.includes(c.tag);
        }
      }
    }    
    return tag_groups;

待补充 tobeContinued

[kyangc]

牛了个逼

[drinking]

牛了个逼