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: "red, x"
},
{
id: "20",
price: "300.00",
stock: "29",
difference: "白色,x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "Black, x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "Black, xl"
},
{
id: "24",
price: "500.00",
stock: "10",
difference: "白色,xl"
}
],
specifications: [{
name: "Color"
item: [{
name: "White"
},
{
name: "Black"
},
{
name: "Red"
}
]
},
{
name: "Size"
item: [{
name: "x"
},
{
name: "xl"
}
]
}
]
},
selectArr: [], // storing the selected value
shopItemInfo: {}, // store data to be matched and the selected value
subIndex: [], // if selected because of the uncertainty is multi-standard or specification but, so here is defined array to determine
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]; // modify value after the data structure format, mode change key-value pairs, in a convenient and select match
}
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.n Game
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; // remove the selected color
}
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 = []; // define an array of values stored in the selected
for (var i in option) {
result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
}
for (var i in option) {
var last = result [i]; // The selected value is stored in the last string to
for (var k in option[i].item) {
result [i] = option [i] .item [k] .name; // assignment, there is a direct cover, there is no value entered name added
option [i] .item [k] .isShow = self.isMay (result); // add fields isShow to determine whether the data which can be selected
}
result [i] = last; // reduction, the purpose is to record point down value, to avoid being overwritten the next time through the loop to avoid
}
simulatedDATA.specifications = option
self.setData({
simulatedDATA: simulatedDATA
})
},
isMay(result) {
for (var i in result) {
if (result[i] == "") {
return true; // if the array of promising empty value, it returns true direct
}
}
return !this.data.shopItemInfo[result] ?
false :
this.data.shopItemInfo[result].stock == 0 ?
false :
true; // select the matching inventory data, returns true if empty, false and vice versa
},
})
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;
}