使用邻接矩阵实现商品SKU表单联动

什么是邻接矩阵

---

不了解邻接矩阵，请查看邻接矩阵

邻接矩阵是一个用来描绘顶点与边关系的数据结构。它的本质是一个二维数组，适合用来处理最小数据单元之间的关联关系。邻接矩阵有两种模式：无向图以及有向图。无向图主要的特点是不表示方向点与点之间可以双向流通，有向图则包含方向两点间可单向亦可双向。他们主要应用在迷宫、简单地图、级联表单等等图形化场景

先看看我们要实现效果

交互分析

• 当用户选择青芒色的规格时，所有青芒色相关的可选项均亮起
• 同规格可选项也为亮起状态，例如，选择青芒色时，所有颜色选项为亮起可选状态
• 当用户选择图案类型时，在颜色以及图案的公共作用下，部分规格亮起
• 最后用户选择尺码类型时，在颜色、图案以及尺码的公共作用下，产品规格确定更新
• 规格选择无顺序要求

如果让后端下发一个递归的树结构1：会产生非常多的数据囤余。2：导致传输的数据量级变大。3：计算放在服务器加大服务器开销。

实现思路

1、获取后端数据

这里以七月老师提供的商品数据为例，由于数据太长，我们只列出部分数据。

const product = {
    "id":2,
    ....
    "sku_list":[
        {
            "id":2,
            "price":77.76,
            "discount_price":null,
            "title":"金属灰·七龙珠",
            ....
            "specs":[
                {
                    "key_id":1,
                    "key":"颜色",
                    "value_id":45,
                    "value":"金属灰"
                },
                {
                    "key_id":3,
                    "key":"图案",
                    "value_id":9,
                    "value":"七龙珠"
                },
                {
                    "key_id":4,
                    "key":"尺码",
                    "value_id":14,
                    "value":"小号 S"
                }
            ],
            "code":"2$1-45#3-9#4-14",
            "stock":5
        },
        ....
    ],
    "spu_img_list":[
        {
            "id":165,
            ....
        }
    ],
    "spu_detail_img_list":[
        {
            "id":24,
            ....
        }
    ],
    "sketch_spec_id":1,
    "default_sku_id":2
}

观察效果图，我们还需要一个规格属性列表，数据结构如下：

[{
  key_id: 1,
  key: "颜色"
  list:[{
        value_id: 45,
        value: "金灰色",
        select: false,
        disable: true
    },
   ...
  ]

},
...
]

我们直接从后端数据提取数据就可以了，具体方法如下：

Page({
  data: {
    product: {},
    specsS: [],
    data: [],
    optionSpecs: [],
    commoditySpecs: [],
    shopAdjoin: null,
    selected: [],
    pIndex: 0
  },

  onLoad: function () {
    // 后端获取原始数据
    const product = { ... }
    // 商品sku列表
    const data = product.sku_list
    // 商品默认sku
    const