写点什么

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

用户头像
Android架构
关注
发布于: 9 小时前

{


"attrKey": "大小",


"attrValue": "小"


},


{


"attrKey": "尺寸",


"attrValue": "S"


}


]


},


{


priceId: 2,


price: 35.1,


"stock": 9,


"attrValueList": [


{


"attrKey": "型号",


"attrValue": "1"


},


{


"attrKey": "颜色",


"attrValue": "黑色"


},


{


"attrKey": "大小",


"attrValue":


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


"小"


},


{


"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 < 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:'型号',


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;


}


}


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


})


}


}


})


运行效果:



demo 地址:http://download.csdn.net/detail/michael_ouyang/9816438


原文作者:michael_ouyang


原文链接:https://blog.csdn.net/michael_ouyang/article/details/70209626

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
微信小程序之商品属性分类 —— 微信小程序实战商城系列(4