推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 894|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(32) : 微信小程序之商品屬性分類

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 17:02:35 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

續上一篇的文章:微信小程序之購物數量加減 —— 微信小程序實戰商城系列(3)

所提及的購物數量的加減,現在說說商品屬性值聯動選擇。


為了讓同學們有個直觀的了解,到電商網截了一個圖片,就是紅圈所示的部分




現在就為大家介紹這個小組件,在小程序中,該如何去寫

下圖為本項目的圖:




wxml:

[html] view plain copy


  • <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?'attr_value_active':''):'attr_value_disabled'}}" 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:

[css] view plain copy


  • .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:

數據部分,一般情況都是訪問接口獲取數據的,這里并沒有使用網絡訪問,為了簡化demo,直接把一組數據放在data對象中。


[javascript] view plain copy


  • 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.selectedValue = this.data.commodityAttr[0].attrValueList.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.attrValueList.length; j++) {  
  •         var attrIndex = this.getAttrIndex(commodityAttr.attrValueList[j].attrKey, attrValueList);  
  •         // console.log('屬性索引', attrIndex);   
  •         // 如果還沒有屬性索引為-1,此時新增屬性并設置屬性值數組的第一個值;索引大于等于0,表示已存在的屬性名的位置  
  •         if (attrIndex >= 0) {  
  •           // 如果屬性值數組中沒有該值,push新值;否則不處理  
  •           if (!this.isValueExist(commodityAttr.attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {  
  •             attrValueList[attrIndex].attrValues.push(commodityAttr.attrValueList[j].attrValue);  
  •           }  
  •         } else {  
  •           attrValueList.push({  
  •             attrKey: commodityAttr.attrValueList[j].attrKey,  
  •             attrValues: [commodityAttr.attrValueList[j].attrValue]  
  •           });  
  •         }  
  •       }  
  •     }  
  •     // console.log('result', attrValueList)  
  •     for (var i = 0; i < attrValueList.length; i++) {  
  •       for (var j = 0; j < attrValueList.attrValues.length; j++) {  
  •         if (attrValueList.attrValueStatus) {  
  •           attrValueList.attrValueStatus[j] = true;  
  •         } else {  
  •           attrValueList.attrValueStatus = [];  
  •           attrValueList.attrValueStatus[j] = true;  
  •         }  
  •       }  
  •     }  
  •     this.setData({  
  •       attrValueList: attrValueList  
  •     });  
  •   },  
  •   getAttrIndex: function (attrName, attrValueList) {  
  •     // 判斷數組中的attrKey是否有該屬性值  
  •     for (var i = 0; i < attrValueList.length; i++) {  
  •       if (attrName == attrValueList.attrKey) {  
  •         break;  
  •       }  
  •     }  
  •     return i < attrValueList.length ? i : -1;  
  •   },  
  •   isValueExist: function (value, valueArr) {  
  •     // 判斷是否已有屬性值  
  •     for (var i = 0; i < valueArr.length; i++) {  
  •       if (valueArr == 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.attrValues.length; j++) {  
  •           attrValueList.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.attrValueList.length; j++) {  
  •         if (commodityAttr.attrValueList[j].attrKey == key && commodityAttr.attrValueList[j].attrValue == value) {  
  •           includeGroup.push(commodityAttr);  
  •         }  
  •       }  
  •     }  
  •     attrValueList[index].selectedValue = value;  
  •   
  •     // 判斷屬性是否可選  
  •     for (var i = 0; i < attrValueList.length; i++) {  
  •       for (var j = 0; j < attrValueList.attrValues.length; j++) {  
  •         attrValueList.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.attrValueList.length; j++) {  
  •           if (attrValueList[k].attrKey == includeGroup.attrValueList[j].attrKey) {  
  •             for (var m = 0; m < attrValueList[k].attrValues.length; m++) {  
  •               if (attrValueList[k].attrValues[m] == includeGroup.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.attrValues.length; j++) {  
  •         if (attrValueList.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.attrValues.length; j++) {  
  •         attrValueList.attrValueStatus[j] = true;  
  •       }  
  •     }  
  •     this.setData({  
  •       includeGroup: commodityAttr,  
  •       attrValueList: attrValueList  
  •     });  
  •   
  •     for (var i = 0; i < attrValueList.length; i++) {  
  •       if (attrValueList.selectedValue) {  
  •         this.selectValue(attrValueList, i, attrValueList.attrKey, attrValueList.selectedValue, true);  
  •       }  
  •     }  
  •   },  
  •   /* 點擊確定 */  
  •   submit: function () {  
  •     var value = [];  
  •     for (var i = 0; i < this.data.attrValueList.length; i++) {  
  •       if (!this.data.attrValueList.selectedValue) {  
  •         break;  
  •       }  
  •       value.push(this.data.attrValueList.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


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 北京快中彩开奖结果 3d开奖试机号 10分彩技巧群 登山赛车怎么快速赚 内蒙古快3官方走势图 安徽11选5的玩法介绍 詹天佑3d预测号 大赢家比分即时比分90 贵州闲来麻将下 永利棋牌游戏网站网页 秒速快三精准快三 青海11选5预测