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


Posted in Javascript onApril 17, 2017

续上一篇的文章:微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
所提及的购物数量的加减,现在说说商品属性值联动选择。

为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分

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

现在就为大家介绍这个小组件,在小程序中,该如何去写
下图为本项目的图:

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

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?'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:

.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对象中。 

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 < 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 
 }) 
 } 
 } 
})

运行效果:

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

demo地址:微信小程序商城项目之商品属性值联动选择

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
JavaScript类的写法
Sep 17 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
巧用weui.topTips验证数据的实例
Apr 17 #Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
bootstrap select插件封装成Vue2.0组件
Apr 17 #Javascript
You might like
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python实现神经网络感知器算法
2017/12/20 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python如何对齐字符串
2020/07/30 Python
Python偏函数实现原理及应用
2020/11/20 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
考试退步检讨书
2014/01/15 职场文书
大学应届生的自我评价
2014/03/06 职场文书
法律七进实施方案
2014/03/15 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
产品调价通知函
2015/04/20 职场文书
歌舞青春观后感
2015/06/10 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python