【微信小程序】商品多规格的sku组件完整代码

一、效果图：

二、使用：

页面使用组件：

<!-- 规格 -->
<view class="specification"><view class="title">选择规格</view><commodity-sku skuNameArr="{{detailData.specList}}" skuInfoArr="{{detailData.specInfo}}"bind:getResultObj="getResultObj"></commodity-sku>
</view>

记得注册组件：

{"usingComponents": {"commodity-sku": "/components/commodity-sku/commodity-sku"}
}

三、完整组件：

commodity-sku.wxml

<!-- sku组件 -->
<view class="container"><view class="sku-item" wx:for="{{skuNameArr}}" wx:for-item="item" wx:key="index"><view class='spec-name'>{{item.specName}}</view><view class="spec-right"><view wx:for="{{item.attrList}}" wx:for-item="subItem" wx:for-index='subIndex' wx:key="subIndex"bindtap="changeItem" data-show="{{subItem.isShow}}"class="{{subItem.isShow?'':'no-active'}} {{subIndexArr[index] == subIndex?'active':''}}"data-ol="{{subIndex[index]}}" data-name="{{subItem.attrName}}" data-index="{{index}}"data-subindex="{{subIndex}}">{{subItem.attrName}}<!-- 勾选的图片没有可以不要 --><image class="tags-img" wx:if="{{subIndexArr[index] == subIndex}}" src="/mall-pages/images/commodity/sel.png" /></view></view></view><view wx:if="{{resultObj.price}}">该组合价格为 {{resultObj.price}} </view>
</view>

commodity-sku.js

page({properties: {// 规格名称数组skuNameArr: {type: Array,value: []},// 规格匹配信息skuInfoArr: {type: Array,value: []}},data: {//存放被选中的值selectArr: [],//存放要和选中的值进行匹配的数据selItemObj: {},//是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断subIndexArr: [],//最终匹配到的规格信息结果resultObj: {},},methods: {// 切换规格changeItem(e) {var index = e.currentTarget.dataset.indexvar subindex = e.currentTarget.dataset.subindexvar item = e.currentTarget.dataset.namevar selectArr = this.data.selectArrvar subIndexArr = this.data.subIndexArrvar selItemObj = this.data.selItemObjif (selectArr[index] != item) {selectArr[index] = item;subIndexArr[index] = subindex;} else {//去掉选中的颜色// this.selectArr[index] = "";// this.subIndexArr[index] = -1;}this.filterSkuNameArr();var obj = selItemObj[selectArr];this.setData({selectArr: selectArr,subIndexArr: subIndexArr,resultObj: obj,selItemObj: selItemObj})console.log(obj)this.triggerEvent('getResultObj', obj)},// 过滤每一组是否可选 isShowfilterSkuNameArr() {var self = this;var arr = self.data.skuNameArr;var result = []; //定义数组存储被选中的值for (var i in arr) {result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";}for (var i in arr) {var last = result[i]; //把选中的值存放到字符串last去for (var j in arr[i].attrList) {result[i] = arr[i].attrList[j].attrName; //赋值，存在直接覆盖，不存在往里面添加name值arr[i].attrList[j].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择}result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖}self.setData({skuNameArr: arr})console.log(arr);},// 判断是否可选 isMay(result) {for (var i in result) {if (result[i] == "") {//如果数组里有为空的值，那直接返回truereturn true;}}//匹配选中的数据的库存，若不为空返回true反之返回falsereturn !this.data.selItemObj[result] ? false : this.data.selItemObj[result].stockNum == 0 ? false : true;},},lifetimes: {ready() {console.log(this.data.skuNameArr);console.log(this.data.skuInfoArr);var skuInfoArr = this.data.skuInfoArrvar selItemObj = this.data.selItemObjvar skuNameArr = this.data.skuNameArrfor (var i in skuInfoArr) {//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配selItemObj[skuInfoArr[i].wholeSpecName] = skuInfoArr[i];}for (var i = 0; i < skuNameArr.length; i++) {for (var o = 0; o < skuNameArr[i].attrList.length; o++) {skuNameArr[i].attrList[o].isShow = true}}this.setData({skuInfoArr: skuInfoArr,selItemObj: selItemObj,skuNameArr: skuNameArr})}}
})

commodity-sku.wxss

.sku-item {margin-top: 30rpx;display: flex;
}.spec-name {position: relative;top: 15rpx;width: 22%;font-size: 24rpx;font-weight: 600;word-break: break-all;
}.spec-right view {margin-right: 16rpx;margin-bottom: 16rpx;padding: 0 16rpx;line-height: 60rpx;background: #FFFFFF;border-radius: 8rpx;border: 2rpx solid #DDDDDD;display: inline-block;font-size: 24rpx;-webkit-border-radius: 8rpx;-moz-border-radius: 8rpx;-ms-border-radius: 8rpx;-o-border-radius: 8rpx;position: relative;overflow: hidden;word-break: break-all;min-height: 42rpx;
}.spec-right .active {background: #FFF7F0;border: 2rpx solid #FF6526;
}.spec-right .no-active {color: #9DA0A6;pointer-events: none;
}
.tags-img {position: absolute;width: 26rpx;height: 20rpx;right: -4rpx;bottom: 0;
}

遇到Bug需要帮助，
欢迎加wx：
xmzl1988
备注"csdn博客“
温馨提示此为有偿服务;

【微信小程序】商品多规格的sku组件完整代码相关推荐

【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...
java 走马灯程序,详解微信小程序实现跑马灯效果（附完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...

【微信小程序】商品多规格的sku组件完整代码

一、效果图：

二、使用：

三、完整组件：

【微信小程序】商品多规格的sku组件完整代码相关推荐

最新文章

热门文章