小程序 商城多规格选择 购物车 sku 添加 简易demo
<view >
<view class='productConten'>
<view class="productDelcom" wx:for="{{simulatedDATA.specifications}}" wx:for-index='n' wx:for-item="ProductItem">
<view class='p'>{{ProductItem.name}}</view>
<ul class="productFooterlist clearfix">
<li wx:for="{{ProductItem.item}}" wx:for-item="oItem" bindtap="specificationBtn" data-show="{{oItem.isShow}}" class="{{oItem.isShow?'':'noneActive'}} {{subIndex[n] == index?'productActive':''}}" data-ol="{{subIndex[n]}}" data-name="{{oItem.name}}" data-n="{{n}}" data-index="{{index}}">{{oItem.name}}</li>
</ul>
</view>
</view>
<view wx:if="{{boxArr.id}}">
{{boxArr.id+'--'+boxArr.price}}
</view>
</view>
js
Page({
data: {
simulatedDATA: {
difference: [{
id: "19",
price: "200.00",
stock: "19",
difference: "红色,x"
},
{
id: "20",
price: "300.00",
stock: "29",
difference: "白色,x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,xl"
},
{
id: "24",
price: "500.00",
stock: "10",
difference: "白色,xl"
}
],
specifications: [{
name: "颜色",
item: [{
name: "白色"
},
{
name: "黑色"
},
{
name: "红色"
}
]
},
{
name: "尺码",
item: [{
name: "x"
},
{
name: "xl"
}
]
}
]
},
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
content: "",
specifications:'',
boxArr: {},
},
onLoad() {
var self = this
var simulatedDATA = self.data.simulatedDATA
var difference = self.data.simulatedDATA.difference
var shopItemInfo = self.data.shopItemInfo
var specifications = self.data.simulatedDATA.specifications
for (var i in difference) {
shopItemInfo[difference[i].difference] =
difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
for (var i = 0; i < specifications.length; i++) {
for (var o = 0; o < specifications[i].item.length; o++) {
specifications[i].item[o].isShow = true
}
}
simulatedDATA.specifications = specifications
self.setData({
simulatedDATA: simulatedDATA,
shopItemInfo: shopItemInfo,
specifications: specifications
})
},
onShow() {
},
specificationBtn(e) {
var n=e.currentTarget.dataset.n
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.name
var self = this;
var selectArr = self.data.selectArr
var subIndex = self.data.subIndex
var boxArr = self.data.boxArr
var shopItemInfo = self.data.shopItemInfo
if (selectArr[n] != item) {
selectArr[n] = item;
subIndex[n] = index;
} else {
// self.selectArr[n] = "";
// self.subIndex[n] = -1; //去掉选中的颜色
}
self.checkItem();
var arr = shopItemInfo[selectArr];
if (arr) {
boxArr.id = arr.id;
boxArr.price = arr.price;
}
self.setData({
selectArr: selectArr, subIndex: subIndex, boxArr: boxArr, shopItemInfo: shopItemInfo
})
console.log(boxArr)
},
checkItem() {
var self = this;
var simulatedDATA=self.data.simulatedDATA
var option = self.data.simulatedDATA.specifications;
var result = []; //定义数组存储被选中的值
for (var i in option) {
result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].item) {
result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
simulatedDATA.specifications = option
self.setData({
simulatedDATA: simulatedDATA
})
},
isMay(result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，那直接返回true
}
}
return !this.data.shopItemInfo[result] ?
false :
this.data.shopItemInfo[result].stock == 0 ?
false :
true; //匹配选中的数据的库存，若不为空返回true反之返回false
},
})
css
#vmsimulatedDATA {
background: #fff;
}
#vmsimulatedDATA .clearfix:after {
display: block;
overflow: hidden;
clear: both;
height: 0;
visibility: hidden;
content: "";
}
#vmsimulatedDATA .productConten {
margin-bottom: 10px;
}
#vmsimulatedDATA .productDelcom {
padding: 5px 20px;
color: #323232;
font-size: 12px;
}
#vmsimulatedDATA .productDelcom .p {
padding: 10px 0;
font-size: 14px;
}
#vmsimulatedDATA .productFooterlist li {
border: 1px solid #f4f4f4;
border-radius: 2px;
color: #606060;
text-align: center;
float: left;
min-width: 30px;
margin-right: 5px;
padding: 2px 5px;
margin-bottom: 5px;
}
#vmsimulatedDATA .productFooterlist li.productActive {
background-color: #c41e3a;
color: #fff;
border: 1px solid #c41e3a;
}
#vmsimulatedDATA .productFooterlist li.noneActive {
background-color: #ccc;
opacity: 0.4;
color: #000;
pointer-events: none;
}