微信小程序之商品属性分类 -——- 微信小程序实战商城系列（4

.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;}

js：

数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化 demo，直接把一组数据放在 data 对象中。

Page({data: {firstIndex: -1,//准备数据//数据结构：以一组一组来进行设定 commodityAttr: [{priceId: 1,price: 35.0,"stock": 8,"attrValueList": [{"attrKey": "型号","attrValue": "2"},{"attrKey": "颜色","attrValue": "白色"},{"attrKey": "大小","attrValue": "小"},{"attrKey": "尺寸","attrValue": "S"}]},{priceId: 2,price: 35.1,"stock": 9,"attrValueList": [{"attrKey": "型号","attrValue": "1"},{"attrKey": "颜色","attrValue": "黑色"},{"attrKey": "大小","attrValue": "小"},{"attrKey": "尺寸","attrValue": "M"}]},{priceId: 3,price: 35.2,"stock": 10,"attrValueList": [{"attrKey": "型号","attrValue": "1"},{"attrKey": "颜色","attrValue": "绿色"},{"attrKey": "大小","attrValue": "大"},{"attrKey": "尺寸","attrValue": "L"}]},{priceId: 4,price: 35.2,"stock": 10,"attrValueList": [{"attrKey": "型号","attrValue": "1"},{"attrKey": "颜色","attrValue": "绿色"},{"attrKey": "大小","attrValue": "大"},{"attrKey": "尺寸","attrValue": "L"}]}],attrValueList: []},onShow: function () {this.setData({includeGroup: this.data.commodityAttr});this.distachAttrValue(this.data.commodityAttr);// 只有一个属性组合的时候默认选中// console.log(this.data.attrValueList);if (this.data.commodityAttr.length == 1) {for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;}this.setData({attrValueList: this.data.attrValueList});}},/* 获取数据 /distachAttrValue: function (commodityAttr) {/*将后台返回的数据组合成类似{attrKey:'型号',attrValueList:['1','2','3']}*/// 把数据对象的数据（视图使用），写到局部内 var attrValueList = this.data.attrValueList;// 遍历获取的数据 for (var i = 0; i < commodityAttr.length; i++) {for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);// console.log('属性索引', attrIndex);// 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于 0，表示已存在的属性名的位置 if (attrIndex >= 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 < attrVal

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

ueList.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:'型号',attrValueList:['1','2','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, index, key, value);}

}},/* 选中 */selectValue: function (attrValueList, index, key, value, unselectStatus) {// console.log('firstIndex', this.data.firstIndex);var includeGroup = [];if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选 var commodityAttr = this.data.commodityAttr;// 其他选中的属性值全都置空// console.log('其他选中的属性值全都置空', index, 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, index, key, 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, index, key, 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;}