SKU

这段时间在写商城和商家后台管理系统。 对SKU有点点模糊，现总结如下：

  <div>
    <div v-for="(v, i) in list" :key="i" class="mt-20">
      <b>{{ v.name }}：</b>
      <el-checkbox-group v-model="checkList[i].list">
        <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" />
      </el-checkbox-group>
    </div>
    <div class="mt-20">
      <el-button type="danger" @click="handleClick" plain>确定</el-button>
    </div>
    <div class="mt-20">
      <el-tag v-for="(item, index) in skuList" :key="index" style="margin:10px 10px;">{{ item }}</el-tag>
    </div>
  </div>

export default {
  data() {
    return {
      list: [
        { name: "型号", list: ["I9", "I7", "I5", "I3", "IAM"] },
        { name: "品牌", list: ["惠普", "三星", "华硕", "戴尔", "MacPro"] },
        { name: "配置", list: ["500GBSSD", "1TSSD", "2TSSD", "250GBSSD", "可定制"] },
      ],
      checkList: [
        { name: "型号", list: [] },
        { name: "品牌", list: [] },
        { name: "配置", list: [] },
      ],
      skuArray: [],
      skuList: [],
    };
  },
  methods: {
    handleClick() {
      // 先清空数据，
      this.skuArray = [];
      this.skuList = [];
      // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
      this.checkList.forEach((element) => {
        element.list.length > 0 ? this.skuArray.push(element.list) : "";
      });
      // 勾选了规格，才调用方法
      if (this.skuArray.length > 0) {
        this.getSkuData([], 0, this.skuArray);
      } else {
        this.$message.error("请先勾选规格");
      }
    },
    // 递归获取每条SKU数据
    getSkuData(skuArr = [], i, list) {
      for (let j = 0; j < list[i].length; j++) {
        if (i < list.length - 1) {
          skuArr[i] = list[i][j];
          this.getSkuData(skuArr, i + 1, list); /
        } else {
          this.skuList.push([...skuArr, list[i][j]]); 
        }
      }
    },
  },
};

let res = [
  {
content: "1000ma,2000ma,3000ma"
createPerson: null
createTime: "2020-07-27 22:25:45"
deleteFlag: 1
goodsId: 405
id: 523
projectId: 67
projectName: "电池含量"
updatePerson: null
updateTime: "2020-07-27 22:25:45"
 }  , 
{
content: "珍珠白,玫瑰金,耀黑色,美丽蓝"
createPerson: null
createTime: "2020-07-27 22:25:45"
deleteFlag: 1
goodsId: 405
id: 522
projectId: 66
projectName: "颜色"
updatePerson: null
updateTime: "2020-07-27 22:25:45"
}
]

   

      <div v-for="(item, index) in Guige" :key="index">

         

          <span style="min-45px">{{item.projectName}}</span>

                  <p

                    v-for="(item1, index1) in item.content"

                    :class="[item1.isShow?'':'noneActive',subIndex[index] == index1?'productActive':'']"

                    :key="index1"

                    @click="handleActive(item, index, item1.name, index1)"

                  >{{item1.name}}</p>

                </div>

 

 

 

　　// 选择商品规格

    handleActive(item, index, name, index1) {

      let self = this;

      let newObj = {

        projectName: item.projectName,

        name: name,

      };

      if (self.selectArr[index] != Object.is(newObj)) {

        self.selectArr[index] = newObj;

        self.subIndex[index] = index1;

      } else {

        self.selectArr[index] = "";

        self.subIndex[index] = -1; //去掉选中的颜色

      }

      this.selectArrIndex = index1;

      self.checkItem();

    },

checkItem() {

      var self = this;

      var option = self.Guige;

      var result = []; //定义数组储存被选中的值

      if (self.selectArr.length == option.length) {

        this.getSku();

      })

      self.$forceUpdate(); //重绘

    },

    async getSku() {

      let str = "";

      let arr = [];

      for (let item of this.selectArr) {

        arr.push(item.projectName + ":" + item.name);

      }

      str = arr.join(",");

      this.specifications = str;

      try {

        let data = {

          goodsId: this.goodsInfo.id,

          specifications: str,

        };

        let res = await httpGet("/pc/goods/getSku", data);

        if (res.code == 0) {

          if (res.data != null) {

            this.goodsPrice = res.data.goodsPrice;

            this.shopItemInfo = res.data;

            this.maxGoods = res.data.num;

          } else {

            this.specifications = "";

            this.$message({

              message: "库存不足,请重新选择",

              type: "error",

            });

          }

        }

      } catch (err) {

        console.log(err);

      }

    },

  async getSelectAttribute() {

      try {

        let data = {

          id: this.$route.query.id,

        };

        let res = await httpGet("/pc/goods/getSelectAttribute", data);

        let arr = [];

        if (res.code === 0 && res.data) {

          for (let item of res.data) {

            let content = item.content ? item.content.split(",") : "";

            let arr1 = [];

            for (let item1 of content) {

              arr1.push({

                name: item1,

                isShow: true,

              });

            }

            arr.push({

              content: arr1,

              goodsId: item.goodsId,

              id: item.id,

              projectId: item.projectId,

              projectName: item.projectName,

            });

          }

          this.Guige = arr;

        }

      } catch (err) {}

    },