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: {}, //存放要和選中的值進行匹配的數(shù)據(jù)
? ? subIndex: [], //是否選中 因為不確定是多規(guī)格還是但規(guī)格宝剖，所以這里定義數(shù)組來判斷
? ? 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]; //修改數(shù)據(jù)結(jié)構(gòu)格式，改成鍵值對的方式蹦玫，以方便和選中之后的值進行匹配
? ? }
? ? 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 = []; //定義數(shù)組存儲被選中的值
? ? 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); //在數(shù)據(jù)里面添加字段isShow來判斷是否可以選擇
? ? ? }
? ? ? result[i] = last; //還原然磷，目的是記錄點下去那個值郑趁，避免下一次執(zhí)行循環(huán)時避免被覆蓋
? ? }
? ? simulatedDATA.specifications = option
? ? self.setData({
? ? ? simulatedDATA: simulatedDATA
? ? })
? },
? isMay(result) {
? ? for (var i in result) {
? ? ? if (result[i] == "") {
? ? ? ? return true; //如果數(shù)組里有為空的值，那直接返回true
? ? ? }
? ? }
? ? return !this.data.shopItemInfo[result] ?
? ? ? false :
? ? ? this.data.shopItemInfo[result].stock == 0 ?
? ? ? false :
? ? ? true; //匹配選中的數(shù)據(jù)的庫存姿搜，若不為空返回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;
}
