微信小程序商城项目之商品属性分类（4）

/全部属性的主盒子/
.commodity_attr_list {
background: #fff;
padding: 0 20rpx;
font-size: 26rpx;
overflow: hidden;
width: 100%;
}
/每组属性的主盒子/
.attr_box {
width: 100%;
overflow: hidden;
border-bottom: 1rpx solid #ececec;
}
/属性名/
.attr_name {
width: 20%;
float: left;
padding: 15rpx 0;
}
/属性值/
.attr_value_box {
width: 80%;
float: left;
padding: 15rpx 0;
overflow: hidden;
}
/每个属性值/
.attr_value {
float: left;
padding: 0 10rpx;
margin: 0 10rpx;
border: 1rpx solid #ececec;
}
/每个属性选中的当前样式/
.attr_value_active {
background: #FFCC00;
border-radius: 10rpx;
color: #fff;
padding: 0 10rpx;
}
/禁用属性/
.attr_value_disabled {
color: #ccc;
}

/button/
.btn-area {
margin: 1.17647059em 15px 0.3em;
}

.btn {
margin-top: 15px;
background-color:#FFCC00;
color: #fff;
}
.btn:first-child {
margin-top: 0;
}

= 0) { // 如果属性值数组中没有该值，push新值；否则不处理 if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue,attrValueList[attrIndex].attrValues)) { attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue); } } else { attrValueList.push({ attrKey: commodityAttr[i].attrValueList[j].attrKey,attrValues: [commodityAttr[i].attrValueList[j].attrValue] }); } } } // console.log('result',attrValueList) for (var i = 0; i < attrValueList.length; i++) { for (var j = 0; j < attrValueList[i].attrValues.length; j++) { if (attrValueList[i].attrValueStatus) { attrValueList[i].attrValueStatus[j] = true; } else { attrValueList[i].attrValueStatus = []; attrValueList[i].attrValueStatus[j] = true; } } } this.setData({ attrValueList: attrValueList }); },getAttrIndex: function (attrName,attrValueList) { // 判断数组中的attrKey是否有该属性值 for (var i = 0; i < attrValueList.length; i++) { if (attrName == attrValueList[i].attrKey) { break; } } return i < attrValueList.length ? i : -1; },isValueExist: function (value,valueArr) { // 判断是否已有属性值 for (var i = 0; i < valueArr.length; i++) { if (valueArr[i] == value) { break; } } return i < valueArr.length; },/* 选择属性值事件 */ selectAttrValue: function (e) { /* 点选属性值，联动判断其他属性值是否可选 { attrKey:'型号','3'],selectedValue:'1',attrValueStatus:[true,true,true] } console.log(e.currentTarget.dataset); */ var attrValueList = this.data.attrValueList; var index = e.currentTarget.dataset.index;//属性索引 var key = e.currentTarget.dataset.key; var value = e.currentTarget.dataset.value; if (e.currentTarget.dataset.status || index == this.data.firstIndex) { if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) { // 取消选中 this.disSelectValue(attrValueList,index,key,value); } else { // 选中 this.selectValue(attrValueList,value); }

}
},/ 选中 /
selectValue: function (attrValueList,value,unselectStatus) {
// console.log('firstIndex',this.data.firstIndex);
var includeGroup = [];
if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选
var commodityAttr = this.data.commodityAttr;
// 其他选中的属性值全都置空
// console.log('其他选中的属性值全都置空',this.data.firstIndex,!unselectStatus);
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
attrValueList[i].selectedValue = '';
}
}
} else {
var commodityAttr = this.data.includeGroup;
}

// console.log('选中',commodityAttr,value);
for (var i = 0; i < commodityAttr.length; i++) {
for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
includeGroup.push(commodityAttr[i]);
}
}
}
attrValueList[index].selectedValue = value;

// 判断属性是否可选
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
attrValueList[i].attrValueStatus[j] = false;
}
}
for (var k = 0; k < attrValueList.length; k++) {
for (var i = 0; i < includeGroup.length; i++) {
for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {
if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
attrValueList[k].attrValueStatus[m] = true;
}
}
}
}
}
}
// console.log('结果',attrValueList);
this.setData({
attrValueList: attrValueList,includeGroup: includeGroup
});

var count = 0;
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
if (attrValueList[i].selectedValue) {
count++;
break;
}
}
}
if (count < 2) {// 第一次选中，同属性的值都可选
this.setData({
firstIndex: index
});
} else {
this.setData({
firstIndex: -1
});
}
},/ 取消选中 /
disSelectValue: function (attrValueList,value) {
var commodityAttr = this.data.commodityAttr;
attrValueList[index].selectedValue = '';

// 判断属性是否可选
for (var i = 0; i < attrValueList.length; i++) {
for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
attrValueList[i].attrValueStatus[j] = true;
}
}
this.setData({
includeGroup: commodityAttr,attrValueList: attrValueList
});

for (var i = 0; i < attrValueList.length; i++) {
if (attrValueList[i].selectedValue) {
this.selectValue(attrValueList,i,attrValueList[i].attrKey,attrValueList[i].selectedValue,true);
}
}
},/ 点击确定 /
submit: function () {
var value = [];
for (var i = 0; i < this.data.attrValueList.length; i++) {
if (!this.data.attrValueList[i].selectedValue) {
break;
}
value.push(this.data.attrValueList[i].selectedValue);
}
if (i < this.data.attrValueList.length) {
wx.showToast({
title: '请完善属性',icon: 'loading',duration: 1000
})
} else {
wx.showToast({
title: '选择的属性：' + value.join('-'),icon: 'sucess',duration: 1000
})
}
}
})