Mise en œuvre de la classification des attributs des produits dans le projet de mini-centre commercial WeChat

Cet article présente principalement en détail la sélection de liaison de valeur d'attribut de produit du projet de mini-centre commercial WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Suite de l'article précédent Article : Ajout et. soustraire la quantité d'achats dans l'applet WeChat

a mentionné l'ajout et la soustraction de la quantité d'achats, parlons maintenant de la sélection de liens de la valeur de l'attribut du produit.

Afin de donner aux étudiants une compréhension intuitive, je suis allé sur le site de commerce électronique et j'ai pris une capture d'écran, qui est la partie affichée dans le cercle rouge

Maintenant, je vais vous présenter ce petit composant. Dans le petit programme, comment écrire
L'image suivante est l'image de ce projet :

wxml :

<view class="title">商品属性值联动选择</view> 
<!--options--> 
<view class="commodity_attr_list"> 
 <!--每组属性--> 
 <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex"> 
 <!--属性名--> 
 <view class="attr_name">{{attrValueObj.attrKey}}</view> 
 <!--属性值--> 
 <view class="attr_value_box"> 
 <!--每个属性值--> 
 <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?&#39;attr_value_active&#39;:&#39;&#39;):&#39;attr_value_disabled&#39;}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}" 
 data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view> 
 </view> 
 </view> 
</view> 
<!--button--> 
<view class="weui-btn-area"> 
 <button class="weui-btn" type="primary" bindtap="submit">确定</button> 
</view>

wxss :

.title { 
 padding: 10rpx 20rpx; 
 margin: 10rpx 0; 
 border-left: 4rpx solid #ccc; 
} 
 
/*全部属性的主盒子*/ 
.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; 
}

js :

Dans la partie données, les données sont généralement obtenues via l'interface d'accès. L'accès réseau n'est pas utilisé ici Afin de simplifier la démo, un ensemble de données est utilisé. directement placé dans l'objet de données.

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:&#39;型号&#39;, 
 attrValueList:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;] 
 } 
 */ 
 // 把数据对象的数据（视图使用），写到局部内 
 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(&#39;属性索引&#39;, 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(&#39;result&#39;, 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:&#39;型号&#39;, 
 attrValueList:[&#39;1&#39;,&#39;2&#39;,&#39;3&#39;], 
 selectedValue:&#39;1&#39;, 
 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(&#39;firstIndex&#39;, this.data.firstIndex); 
 var includeGroup = []; 
 if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选 
 var commodityAttr = this.data.commodityAttr; 
 // 其他选中的属性值全都置空 
 // console.log(&#39;其他选中的属性值全都置空&#39;, 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 = &#39;&#39;; 
 } 
 } 
 } else { 
 var commodityAttr = this.data.includeGroup; 
 } 
 
 // console.log(&#39;选中&#39;, 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(&#39;结果&#39;, 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 = &#39;&#39;; 
 
 // 判断属性是否可选 
 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: &#39;请完善属性&#39;, 
 icon: &#39;loading&#39;, 
 duration: 1000 
 }) 
 } else { 
 wx.showToast({ 
 title: &#39;选择的属性：&#39; + value.join(&#39;-&#39;), 
 icon: &#39;sucess&#39;, 
 duration: 1000 
 }) 
 } 
 } 
})

Effet de fonctionnement :

Ce qui précède est tout le contenu de cet article, je J'espère que cela sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre des effets de classification de la barre latérale dans WeChat Mini Program Mall

WeChat Mini Program Mall Project Quantité d'achats addition et soustraction

Outils requis pour le développement du système de centre commercial du mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!