前端小程序中的sku展示仿制淘宝

Question

问题描述

想实现这样的效果。当选取空调类型当时候自动识别出颜色哪个不能被选择并置灰，同理当选择颜色当时候空调类型也自动识别出哪个不能被选并置灰。能不能选择受两个条件限制 1、看返回的数据mapping中的key有没有这一类2、stock这个属性是否为0

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
"{

"data":{
    "attributes":[
        {
            "attributes":[
                {
                    "check":false,
                    "index":1,
                    "value":"金色"
                },
                {
                    "check":true,
                    "index":2,
                    "value":"银色"
                },
                {
                    "check":false,
                    "index":3,
                    "value":"蓝色"
                }
            ],
            "index":1,
            "name":"颜色"
        },
        {
            "attributes":[
                {
                    "check":false,
                    "index":1,
                    "value":"单头吊灯"
                },
                {
                    "check":true,
                    "index":2,
                    "value":"吸吊两用-8头"
                },
                {
                    "check":false,
                    "index":3,
                    "value":"吸吊两用-10头"
                }
            ],
            "index":2,
            "name":"规格"
        }
    ],
    "mapping":[
        {
            "id":"1034745629549543424",
            "key":"1:1,2:1",
            "pic":"https://img.jxjia.net/pic/10083001200470C26000/CgMBKVuGcFKAOEi1AAQ7F0U_HPU821.jpg",
            "price":0.01,
            "sell":true,
            "stock":898,
            "sysName":"飞利浦 FLP-001 客厅吊灯 金色 单头吊灯"
        },
        {
            "id":"1034745629515988992",
            "key":"1:2,2:1",
            "pic":"https://img.jxjia.net/pic/10079008600150B99000/CgMBKVuGcCWAVKQsAADjHB9qVGc891.jpg",
            "price":1111,
            "sell":true,
            "stock":900,
            "sysName":"飞利浦 FLP-001 客厅吊灯 银色 单头吊灯"
        },
        {
            "id":"1034745629532766208",
            "key":"1:2,2:2",
            "pic":"https://img.jxjia.net/pic/10063006400290B90000/CgMBKFuGcCaACaWGAAIHAfKVaNc483.jpg",
            "price":900,
            "sell":true,
            "stock":900,
            "sysName":"飞利浦 FLP-001 客厅吊灯 银色 吸吊两用-8头"
        },
        {
            "id":"1034745629574709248",
            "key":"1:3,2:2",
            "pic":"https://img.jxjia.net/pic/10059006400920B35000/CgMBKFuGcDaACpYNAAOJ1cohrQA302.jpg",
            "price":2380,
            "sell":true,
            "stock":899,
            "sysName":"飞利浦 FLP-001 客厅吊灯 蓝色 吸吊两用-8头"
        },
        {
            "id":"1034745629553737728",
            "key":"1:1,2:2",
            "pic":"https://img.jxjia.net/pic/10046008800120B92000/CgMBKVuGcEiANfcVAAIHAfKVaNc367.jpg",
            "price":499,
            "sell":true,
            "stock":900,
            "sysName":"飞利浦 FLP-001 客厅吊灯 金色 吸吊两用-8头"
        },
        {
            "id":"1034745629541154816",
            "key":"1:1,2:3",
            "pic":"https://img.jxjia.net/pic/10065002800520B13000/CgMBKVuGcDCAX_wvAAL5O6GYHLM026.jpg",
            "price":0.02,
            "sell":true,
            "stock":899,
            "sysName":"飞利浦 FLP-001 客厅吊灯 金色 吸吊两用-10头"
        },
        {
            "id":"1034745629562126336",
            "key":"1:3,2:3",
            "pic":"https://img.jxjia.net/pic/10076001400720B35000/CgMBKFuGcECADgWxAAL77npUIn4821.jpg",
            "price":0.01,
            "sell":true,
            "stock":891,
            "sysName":"飞利浦 FLP-001 客厅吊灯 蓝色 吸吊两用-10头"
        },
        {
            "id":"1034745629499211776",
            "key":"1:2,2:3",
            "pic":"https://img.jxjia.net/pic/10012002400570B85000/CgMBKVuGcCKAHL_7AAAMDQVwR5I339.jpg",
            "price":0.01,
            "sell":true,
            "stock":891,
            "sysName":"飞利浦 FLP-001 客厅吊灯 银色 吸吊两用-10头"
        }
    ]
},
"errorCode":0,
"line":null,
"message":"成功",
"success":true

}"

你期待的结果是什么？实际看到的错误信息又是什么？

问题描述

问题出现的平台版本及自己尝试过哪些方法

看了一下sku算法还有GitHub上的一个例子 但是还是没有思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？