小程序SKU规格选择

1.数据结构如下：

{
    "CommodityID": 4429,
    "CommodityName": "201812111314",
    "Thumb": "http://localhost//TempUpload//Comp121121176.jpg",
    "RollingPhotos": "http://localhost/TempUpload//Comp121118921.jpg,http://localhost/TempUpload//Comp121118908.jpg,http://localhost/TempUpload//Comp121118955.jpg,http://localhost/TempUpload//Comp121119035.jpg,http://localhost/TempUpload//Comp121143445.jpg",
    "RollingPhoto": ["http://localhost/TempUpload//Comp121118921.jpg", "http://localhost/TempUpload//Comp121118908.jpg", "http://localhost/TempUpload//Comp121118955.jpg", "http://localhost/TempUpload//Comp121119035.jpg", "http://localhost/TempUpload//Comp121143445.jpg"],
    "Context": "<p><img src="http://localhost//TempUpload/2243969TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg" title="TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2243969TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg" title="TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/3028815TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg" title="TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg" title="TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg" title="TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2273686TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg" title="TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/4815196TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg" title="TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg"/></p><p><br/></p>",
    "RecommendSalePrice": 0.01,
    "MarketPrice": 28.01,
    "StockAmount": 100,
    "SalesAmount": 100,
    "IsUpShelf": true,
    "Property": "重量: 15KG, 颜色: 红, 高: 5M",
    "ShareMessageDescText": "",
    "FakeSoldCount": 100,
    "ExpectedOnShelfTime": null,
    "ExpectedOffShelfTime": null,
    "WarehouseName": "广州3号保税仓",
    "Freight": 0,
    "TaxTotalPrice": 0.161,
    "SellActivityCount": 0,
    "SPUID": 3,
    "MinNumber": 0,
    "SingleNumber": 0,
    "RespGoodsNature": [{
        "CommodityID": 4429,
        "CommodityName": "201812111314",
        "Thumb": "http://localhost//TempUpload//Comp121121176.jpg",
        "StockAmount": 100,
        "RecommendSalePrice": 0.01,
        "IsUpShelf": true,
        "MarketPrice": "28.01",
        "RollingPhotos": "http://localhost/TempUpload//Comp121118921.jpg,http://localhost/TempUpload//Comp121118908.jpg,http://localhost/TempUpload//Comp121118955.jpg,http://localhost/TempUpload//Comp121119035.jpg,http://localhost/TempUpload//Comp121143445.jpg",
        "RollingPhoto": ["http://localhost/TempUpload//Comp121118921.jpg", "http://localhost/TempUpload//Comp121118908.jpg", "http://localhost/TempUpload//Comp121118955.jpg", "http://localhost/TempUpload//Comp121119035.jpg", "http://localhost/TempUpload//Comp121143445.jpg"],
        "Context": "<p><img src="http://localhost//TempUpload/2243969TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg" title="TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2243969TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg" title="TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/3028815TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg" title="TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg" title="TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg" title="TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2273686TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg" title="TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/4815196TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg" title="TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg"/></p><p><br/></p>",
        "NatureDetails": "_8_5_9_",
        "NatureDetail": [{
            "CommodityID": 4429,
            "NatureID": 3,
            "NatureName": "高",
            "NatureOptionID": 8,
            "OptionValue": "5M",
            "ShowSort": 0,
            "Selected": 1
        }, {
            "CommodityID": 4429,
            "NatureID": 5,
            "NatureName": "颜色",
            "NatureOptionID": 5,
            "OptionValue": "红",
            "ShowSort": 1,
            "Selected": 1
        }, {
            "CommodityID": 4429,
            "NatureID": 6,
            "NatureName": "重量",
            "NatureOptionID": 9,
            "OptionValue": "15KG",
            "ShowSort": 1,
            "Selected": 1
        }]
    }, {
        "CommodityID": 4430,
        "CommodityName": "201812111314",
        "Thumb": "http://localhost//TempUpload//Comp121122889.jpg",
        "StockAmount": 98,
        "RecommendSalePrice": 0.02,
        "IsUpShelf": true,
        "MarketPrice": "28.02",
        "RollingPhotos": "http://localhost/TempUpload//Comp121118921.jpg,http://localhost/TempUpload//Comp121118908.jpg,http://localhost/TempUpload//Comp121118955.jpg,http://localhost/TempUpload//Comp121119035.jpg,http://localhost/TempUpload//Comp121143445.jpg",
        "RollingPhoto": ["http://localhost/TempUpload//Comp121118921.jpg", "http://localhost/TempUpload//Comp121118908.jpg", "http://localhost/TempUpload//Comp121118955.jpg", "http://localhost/TempUpload//Comp121119035.jpg", "http://localhost/TempUpload//Comp121143445.jpg"],
        "Context": "<p><img src="http://localhost//TempUpload/2243969TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg" title="TB1DznSelmWBuNkSndVXXcsApXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2243969TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg" title="TB1_bT2dpuWBuNjSspnXXX1NVXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/3028815TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg" title="TB1Z5kSX9tYBeNjSspaXXaOOFXa_!!0-item_pic.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg" title="TB2dGePg9tYBeNjSspaXXaOOFXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2557766TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg" title="TB2A3XnXTJYBeNjy1zeXXahzVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/2273686TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg" title="TB2DwvEXuSSBuNjy0FlXXbBpVXa_!!336016874.jpg"/></p><p><img src="http://localhost//TempUpload/4815196TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg" title="TB2E8KFdDlYBeNjSszcXXbwhFXa_!!336016874.jpg"/></p><p><br/></p>",
        "NatureDetails": "_8_6_9_",
        "NatureDetail": [{
            "CommodityID": 4430,
            "NatureID": 3,
            "NatureName": "高",
            "NatureOptionID": 8,
            "OptionValue": "5M",
            "ShowSort": 0,
            "Selected": 0
        }, {
            "CommodityID": 4430,
            "NatureID": 5,
            "NatureName": "颜色",
            "NatureOptionID": 6,
            "OptionValue": "黄",
            "ShowSort": 1,
            "Selected": 0
        }, {
            "CommodityID": 4430,
            "NatureID": 6,
            "NatureName": "重量",
            "NatureOptionID": 9,
            "OptionValue": "15KG",
            "ShowSort": 1,
            "Selected": 0
        }]
    }],
    "SpuNature": [
        [{
            "NatureID": 3,
            "NatureName": "高",
            "ShowSort": 0,
            "NatureOptionID": 8,
            "OptionValue": "5M",
            "Selected": 1,
            "Disabled": false
        }],
        [{
            "NatureID": 5,
            "NatureName": "颜色",
            "ShowSort": 1,
            "NatureOptionID": 5,
            "OptionValue": "红",
            "Selected": 1,
            "Disabled": false
        }, {
            "NatureID": 5,
            "NatureName": "颜色",
            "ShowSort": 1,
            "NatureOptionID": 6,
            "OptionValue": "黄",
            "Selected": 0,
            "Disabled": false
        }],
        [{
            "NatureID": 6,
            "NatureName": "重量",
            "ShowSort": 1,
            "NatureOptionID": 9,
            "OptionValue": "15KG",
            "Selected": 1,
            "Disabled": false
        }]
    ]
}

2.设置全局变量和当前默认选择的商品：

　　　　　　let selectedGoods = {}; //默认选择的商品
          let selectOptionValue = [],
            selectOption = []; //默认选中的属性
          let isInvalid = false;
          let filterList = _self.data.goodsList.filter(function(fItem, fIndex) {
            return fItem.CommodityID == commodityID;
          }); //当前商品的ID是默认选择的商品ID
          if (filterList.length > 0) {
            selectedGoods = filterList[0];
            if (_self.data.natureOptions) {
              _self.data.natureOptions.forEach(function(nature, natureindex) {
                nature.forEach(function(option, optionIndex) {
                  if (option.Selected) {
                    selectOptionValue.push(option.OptionValue);
                    selectOption.push(option.NatureOptionID);
                  }
                })
              })
            }
          }
          //判断是否已售罄
          if (selectedGoods.StockAmount > 0 && selectedGoods.IsUpShelf) {
            isInvalid = false
          } else {
            isInvalid = true
          }
          _self.setData({
            selectedGoods: selectedGoods,
            selectOption: selectOption,
            selectOptionValue: selectOptionValue,
            isInvalid: isInvalid,
            goodNum: 1
          });

3.选择属性，不能选择的置灰：

  selectGuige: function(e) {
    // 定义变量 start
    let natureIndex = e.currentTarget.dataset.natrueindex, //此时点击的属性索引
      selectOptionValue = this.data.selectOptionValue, //已选择的商品属性值
      selectOption = this.data.selectOption, //已选择的商品属性
      optionID = e.currentTarget.dataset.id, //此时被点击的属性规格值
      optionIndex = e.currentTarget.dataset.opindex, //此时被点击的属性规格值索引
      preSelectGoodsList = [], //可能会被选中的商品
      natureOptions = this.data.natureOptions, //所有规格属性
      goodsList = this.data.goodsList, //商品列表
      disableList = [], //不可选值
      selectedGoods = {}, //选中的商品
      isInvalid = this.data.isInvalid //按钮是否可用
    ;
    // 定义变量 end

    //有此规格属性值的商品列表
    preSelectGoodsList = goodsList.filter(function(fItem, fIndex) {
      return fItem.NatureDetails.indexOf('_' + optionID + '_') > -1;
    })
    natureOptions[natureIndex].forEach(function(options) {
      if (options.NatureOptionID == optionID) { //属性值==当前选中的属性
        options.Selected = 1; //修改选中状态
        selectOptionValue.splice(natureIndex, 1, options.OptionValue); //记录选中的属性值
        selectOption.splice(natureIndex, 1, options.NatureOptionID); //记录选中的属性
      } else {
        options.Selected = 0; //修改选中状态
      }
    })

    var temp = [];
    natureOptions.forEach(function(nature, nIndex) {
      if (natureIndex != nIndex)
        temp.push(nature)
    })


    natureOptions.forEach(function (nature, naIndex) {
      let isBreak = false;
      for (let opIndex = 0; opIndex < nature.length; opIndex++) {
        let options = nature[opIndex];
        if (naIndex != natureIndex) { //父级ID值！=当前选择的父级 
          disableList = preSelectGoodsList.filter(function (fItem) {
            return fItem.NatureDetails.indexOf('_' + options.NatureOptionID + '_') == -1;
          })

          //当前属性不在预选商品中，则为disabeld
          if (disableList.length == preSelectGoodsList.length) {
            options.Disabled = true;
            if (options.Selected == 1) {
              selectOptionValue.splice(naIndex, 1, '');
              selectOption.splice(naIndex, 1, 0);
            }
            options.Selected = 0;
          } else {
            options.Disabled = false;
          }
        }
      }
      let selectNature = nature.filter(function (fItem) {
        return fItem.Selected == 1
      });
      if (selectNature.length > 0) {
        if (nature[0].NatureID != temp[temp.length - 1][0].NatureID) {
          preSelectGoodsList = preSelectGoodsList.filter(function (fItem, fIndex) {
            return fItem.NatureDetails.indexOf('_' + selectNature[0].NatureOptionID + '_') > -1;
          })
        }
      }
    })

    //当匹配到的规格可以选中唯一商品时，给选中商品赋值
    for (let i = 0; i < selectOption.length; i++) {
      if (selectOption[i] != 0) {
        goodsList = goodsList.filter(function(fItem) {
          return fItem.NatureDetails.indexOf("_" + selectOption[i] + "_") > -1;
        })
        if (goodsList.length == 1) {
          break;
        }
      }
    }

    if (goodsList.length == 1) {
      selectedGoods = goodsList[0]
      //判断库存是否大于0
      if (selectedGoods.StockAmount > 0)
        isInvalid = false;
      else
        isInvalid = true;
      this.setData({
        selectedGoods: selectedGoods
      })
    } else {
      isInvalid = true;
    }
    console.log(selectedGoods)
    this.setData({
      natureOptions: natureOptions,
      selectOption: selectOption,
      selectOptionValue: selectOptionValue,
      isInvalid: isInvalid
    })
  }

备注：可能会有BUG，用作记录