vue 实现商品多规格的sku

╰半夏微凉° 2022-12-16 13:16 424阅读 0赞

template

<div class="wrap wrap-sku">
        <div class="product-box">
          <div class="product-content">
            <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications">
              <p>{
       {ProductItem.name}}</p>
              <ul class="product-footerlist clearfix">
                <li v-for="(oItem,index) in ProductItem.item"
                  v-on:click="specificationBtn(oItem.name,n,$event,index)"
                  v-bind:class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']">
                  {
       {oItem.name}}
                </li>
              </ul>
            </div>
            <p v-if="price" class="price">¥{
       {price}}</p>
          </div>
          <div class="product-footer">
            <a href="javascript:" rel="external nofollow" >立即购买</a>
          </div>
        </div>
      </div>

export default {
        data() {
          return {
            simulatedDATA: { //模拟后台返回的数据 多规格
              "difference": [
                { //所有的规格可能情况都在这个数组里
                  "id": "19",
                  "price": "200.00",
                  "stock": "19",
                  "difference": "100,白色"
                },
                {
                  "id": "20",
                  "price": "100.00",
                  "stock": "29",
                  "difference": "200,白色"
                },
                {
                  "id": "21",
                  "price": "300.00",
                  "stock": "10",
                  "difference": "100,黑色"
                },
                {
                  "id": "22",
                  "price": "900.00",
                  "stock": "0",
                  "difference": "200,黑色"
                },
                {
                  "id": "23",
                  "price": "600.00",
                  "stock": "48",
                  "difference": "100,绿色"
                },
                {
                  "id": "24",
                  "price": "500.00",
                  "stock": "40",
                  "difference": "200,绿色"
                },
                {
                  "id": "25",
                  "price": "90.00",
                  "stock": "0",
                  "difference": "100,蓝色"
                },
                {
                  "id": "26",
                  "price": "40.00",
                  "stock": "20",
                  "difference": "200,蓝色"
                }
              ],
              "specifications": [
                { //这里是要被渲染字段
                  "name": "尺寸",
                  "item": [
                    {
                      "name": "100",
                    },
                    {
                      "name": "200",
                    }
                  ]
                },
                {
                  "name": "颜色",
                  "item": [
                    {
                      "name": "白色",
                    },
                    {
                      "name": "蓝色",
                    },
                    {
                      "name": "黑色",
                    },
                    {
                      "name": "绿色",
                    }
                  ]
                }
              ]
            },
            selectArr: [], //存放被选中的值
            shopItemInfo: {}, //存放要和选中的值进行匹配的数据
            subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
            price:'' //选中规格的价钱
          }
        },
        methods: {
          specificationBtn: function (item, n, event, index) {
            var self = this;
            if (self.selectArr[n] != item) {
              self.selectArr[n] = item;
              self.subIndex[n] = index;
            } else {
              self.selectArr[n] = "";
              self.subIndex[n] = -1; //去掉选中的颜色
            }
            self.checkItem();
          },
          checkItem: function () {
            var self = this;
            var option = self.simulatedDATA.specifications;
    		console.log(option)
            var result = []; //定义数组储存被选中的值
            for(var i in option){
              result[i] = self.selectArr[i] ? self.selectArr[i] : '';
            }
    		console.log(result)
            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; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
            }
            if(this.shopItemInfo[result]){
              this.price = this.shopItemInfo[result].price || ''
            }
            self.$forceUpdate(); //重绘
          },
          isMay: function (result) {
            for (var i in result) {
              if (result[i] == '') {
                return true; //如果数组里有为空的值，那直接返回true
              }
            }
            return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true
          }
        },
        created: function () {
          var self = this;
          for (var i in self.simulatedDATA.difference) {
            self.shopItemInfo[self.simulatedDATA.difference[i].difference] = self.simulatedDATA.difference[i]; 
          }
    	  console.log(self.shopItemInfo)
          self.checkItem();
        }
    }

css:

![8c90ef51f9b3323edf040bde03a82237.png][]

[8c90ef51f9b3323edf040bde03a82237.png]: /images/20221123/b1b7850a4bfe40a0a7dfa0d4f97a81c7.png