小程序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，用作記錄