HTML
<view id="vmsimulatedDATA">
<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;
}