​

<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;

}