How to realize SKU screening of goods by applet

1 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"
          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>

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

}

3 js

Page({

  data: {

    simulatedDATA: {
      // s
      difference: [{

        id: "19",

        price: "200.00",

        stock: "19",

        difference: " Red ,x"

      },

      {

        id: "20",

        price: "300.00",

        stock: "29",

        difference: " white ,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: " white ,xl"

      }

      ],
      // attr 
      specifications: [{

        name: " Color ",

        item: [{

          name: " white "

        },

        {

          name: " black "

        },

        {

          name: " Red "

        }

        ]

      },

      {

        name: " Size ",

        item: [{

          name: "x"

        },

        {

          name: "xl"

        }

        ]

      }

      ]

    },

    selectArr: [], // Store the selected value 

    shopItemInfo: {}, // Store the data to match the selected value 

    subIndex: [], // Is it checked?   Because I'm not sure whether it's multi specification or multi specification , So here we define an array to judge 

    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 data structure format , Change to key value pairs , To facilitate matching with the selected value 

    }

    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) {
      console.log('213')
      selectArr[n] = item;

      subIndex[n] = index;

    } else {
      console.log('456')

      // 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 to store the selected values 

    for (var i in option) {

      result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";

    }

    for (var i in option) {

      var last = result[i]; // Store the selected value in the string last Go to 

      for (var k in option[i].item) {

        result[i] = option[i].item[k].name; // assignment , There is direct coverage , There is no need to add name value 

        option[i].item[k].isShow = self.isMay(result); // Add fields to the data isShow To determine whether you can choose 

      }

      result[i] = last; // Restore , The purpose is to record the value , Avoid being overwritten the next time the loop is executed 

    }

    simulatedDATA.specifications = option

    self.setData({

      simulatedDATA: simulatedDATA

    })


  },

  isMay(result) {

    for (var i in result) {

      if (result[i] == "") {

        return true; // If there is an empty value in the array , Then go straight back to true

      }

    }
    console.log("123”", result)
    return !this.data.shopItemInfo[result] ?

      false :

      this.data.shopItemInfo[result].stock == 0 ?

        false :

        true; // Inventory matching the selected data , If not null, return true Instead, return to false

  },

})

** 4 design sketch **