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，用作记录