电商中的sku模块在项目中的实际运用(vue2)

最新推荐文章于 2024-06-05 09:34:33 发布

拾壹丨

最新推荐文章于 2024-06-05 09:34:33 发布

阅读量1.2k

点赞数 5

文章标签： 1024程序员节前端 javascript 开发语言

原文链接：https://juejin.cn/post/6991825260144721934

版权

本文章转载于 https://juejin.cn/post/6991825260144721934 (vue3)

仅此记录学习参考

1.SKU的基本了解

SkU（Stock Keeping Unit）：库存量单位，即库存进出计量的单位，可以使以件、盒、托盘为单位。

在点击某个商品之后会有与之相对应的产品型号，详细到是：什么颜色，什么尺寸，产地是什么，最后得到的组合就是SKU

举个例子：今天我买了个手机，手机描述的不够详细，这不能称之为SKU；我买了个手机，品牌是华为的mate50 pro plus，流光紫色，内存是512G的等等，将这些产品信息组合到一起称之为SKU

下面这张图片： 锅，黑色的，国产的，20cm尺寸就是它的SKU

而我们要做的就是根据这些类型，将每一种可能被用户选到的类型组合，都筛选出来；根据用户点击这几个按钮，能够得知用户选择了怎样的一款产品，这个产品的详细信息是什么？通过用户点击的按钮能显示出来，以及根据库存的数量，将那些对应没有库存的商品按钮禁用是我们要做的。

接下来会以这口锅为例继续

2. 查看请求回来商品的数

这段数据后端已经告诉我，这件商品的所有组合，共有12种

我们可以看到，这项商品对应的库存是没货的状态，在相应的按钮上就不应该让用户去点击

思路：

根据用户点击的按钮查找对应项的库存 ==> 根据后端的数据生成一份可以查找到目标的路径字典

当用户点击了蓝色锅，去右侧查找与蓝色相对应的数据，依次类推，当在字典中差找不到时，则说明无货，按钮不能点击

以黑色为例：黑色的组合为这些项，当用户再次点击中国时，查到的仅有10cm，而20cm于30cm的按钮就不可点击

3. 详细js代码：

首先用到了一个幂级算法：主要参考了如下

js算法库https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Ftrekhleb%2Fjavascript-algorithms 与幂集算法https://link.juejin.cn/?target=https%3A%2F%2Fraw.githubusercontent.com%2Ftrekhleb%2Fjavascript-algorithms%2Fmaster%2Fsrc%2Falgorithms%2Fsets%2Fpower-set%2FbwPowerSet.js

主要的功能实现：借助算法生成一个可查询的路径字典

下面是参考中的代码：单独将其封装到一个js文件中

/**
 * Find power-set of a set using BITWISE approach.
 *
 * @param {*[]} originalSet
 * @return {*[][]}
 */
export default function bwPowerSet (originalSet) {
  const subSets = []

  // We will have 2^n possible combinations (where n is a length of original set).
  // It is because for every element of original set we will decide whether to include
  // it or not (2 options for each set element).
  const numberOfCombinations = 2 ** originalSet.length

  // Each number in binary representation in a range from 0 to 2^n does exactly what we need:
  // it shows by its bits (0 or 1) whether to include related element from the set or not.
  // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to
  // include only "2" to the current set.
  for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {
    const subSet = []

    for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {
      // Decide whether we need to include current element into the subset or not.
      if (combinationIndex & (1 << setElementIndex)) {
        subSet.push(originalSet[setElementIndex])
      }
    }

    // Add current subset to the list of all subsets.
    subSets.push(subSet)
  }

  return subSets
}

3.2 生成字典

接下来：封装一个可以得到路径字典的方法，只需要传进去skus数据即可

这里注意数据层级关系，goodsData和skus属于同一层级，原作者的vue3中goodsData
（父）和skus是父子关系

下面是一段模拟数据

 goodsData: {
        unit: "件", //商品单位
        goods_id: 436886, //商品id
        store_count: 158, //总库存量
        market_price: "10.00", //市场价格
        shop_price: "0.01", //商店价格
        cost_price: "10.00", //成本价
        goods_name: "磨砂锅", //商品名字
        original_img:
          "http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg", //商品图片  建议数组形式，方便存储多张图片
        specs: [
          {
            name: "颜色",
            values: [
              {
                name: "黑色",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "蓝色",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
          {
            name: "产地",
            values: [
              {
                name: "中国",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "日本",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
          {
            name: "尺寸",
            values: [
              {
                name: "30cm",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "20cm",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "10cm",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
        ],
      },
 skus: [
        {
          //规格商品
          id: 1018261,
          inventory: 10, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-001",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "30cm" },
          ],
        },
        {
          //规格商品
          id: 1018262,
          inventory: 20, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-002",
          specs: [
            { name: "颜色", valueName: "蓝色" },
            { name: "产地", valueName: "中国" },
            { name: "尺寸", valueName: "10cm" },
          ],
        },
        {
          //规格商品
          id: 1018263,
          inventory: 40, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-003",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "中国" },
            { name: "尺寸", valueName: "10cm" },
          ],
        },
        {
          //规格商品
          id: 1018264,
          inventory: 80, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-004",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "20cm" },
          ],
        },
        {
          //规格商品
          id: 1018265,
          inventory: 0, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-005",
          specs: [
            { name: "颜色", valueName: "蓝色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "20cm" },
          ],
        },
      ],

路径字典的方法：

import bwPowerSet from "@/common/adjoinArray";//此代码是上文封装的路径字典，别忘引入
data() {
    goodsData：{}，//模拟数据 
    skus: [],//模拟数据
    spliter: "★",//生成路径字典中的间隔字符 随意更改
    pathMap: null,// 路径字典初始化
    skuId: "",//可以根据skuId还原用户选中的规格
}
 methods: {
    getPathMap(skus) {
      // console.log(skus.forEach(it => { console.log(it) }))
      const pathMap = {};
      skus.forEach((sku) => {
        // 1. 过滤出有库存有效的sku
        if (sku.inventory) {
          // 2. 得到sku属性值数组
          const specs = sku.specs.map((spec) => spec.valueName);
          // 3. 得到sku属性值数组的子集
          const powerSet = bwPowerSet(specs);
          // console.log(specs)
          // console.log(powerSet)
          // 4. 设置给路径字典对象
          powerSet.forEach((set) => {
            const key = set.join(this.spliter);
            if (pathMap[key]) {
              // 已经有key往数组追加
              pathMap[key].push(sku.id);
            } else {
              // 没有key设置一个数组
              pathMap[key] = [sku.id];
            }
          });
        }
      });
      return pathMap;
    },
}，
  created() {
    this.initSelectedStatus(this.goodsData, this.skus, this.skuId); //后面有介绍
    this.pathMap = this.getPathMap(this.skus);//将所有的路径存储到this.pathMap中
    console.log(this.pathMap)
  },

通过以上方法查看最后得到的路径字典，得到的内容实际如下

4. 根据用户选中的内容查找

4.1 分析：按钮在什么时候就开始显示禁用效果

（1）组件创建完成时就要显示

（2）用户每点击一次按钮都要进行查找

4.2 封装函数

这个函数需要两个参数，字典（this.pathMap）和规格(this.goodsData.specs)

    updateDisabledStatus(pathMap, specs) {
      // 用户的选择[undefined,'中国',undefined]
      const _selectedArr = this.getSelectedArr(specs);
      console.log(_selectedArr);
      specs.forEach((spec, idx) => {
        const selectedArr = [..._selectedArr];
        spec.values.forEach((btn) => {
          // 已经选中的
          if (btn.name === selectedArr[idx]) {
            return;
          }
          // 将最后一选项填入用户选择的最后一项
          selectedArr[idx] = btn.name;

          // 去掉undefined拼接字符串,再去查询
          const key = selectedArr.filter((v) => v).join(this.spliter);
          // 若找不到 设置为true
          btn.disabled = !pathMap[key]; // （undefined取反）
        });
      });
    },

这个函数需要：商品的全部数据信息(this.goodsData , this.skus)和当前商品的id(this.skuId)

    // 根据skuId还原用户选中的规格
    initSelectedStatus(goodsData, skus, skuId) {
      const sku = skus.find((sku) => sku.id === skuId);
      if (sku) {
        const selectArr = sku.specs.map((it) => it.valueName);
        goodsData.specs.forEach((spec, idx) => {
          spec.values.forEach((value) => {
            value.selected = value.name === selectArr[idx];
          });
        });
      }
    },

4. 实现的功能代码（样式我没有写，具体逻辑已经实现，可自行分封装成组件（原作者介绍了封装））

<template>
  <div id="app">
    <div class="goods-sku">
      <dl v-for="(spec, idx) in goodsData.specs" :key="idx">
        <dt>{{ spec.name }}</dt>
        <dd>
          <div v-for="(value, index) in spec.values" :key="index">
            <img
              @click="clickSpecs(value, spec.values)"
              v-if="value.picture"
              :class="{ selected: value.selected, disabled: value.disabled }"
              :src="value.picture"
              :title="value.name"
            />
            <span
              v-else
              @click="clickSpecs(value, spec.values)"
              :class="{ selected: value.selected, disabled: value.disabled }"
              >{{ value.name }}</span
            >
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import bwPowerSet from "@/common/adjoinArray";
export default {
  name: "App",
  components: {},
  data() {
    return {
      goodsData: {
        unit: "件", //商品单位
        goods_id: 436886, //商品id
        store_count: 158, //总库存量
        market_price: "10.00", //市场价格
        shop_price: "0.01", //商店价格
        cost_price: "10.00", //成本价
        goods_name: "磨砂锅", //商品名字
        original_img:
          "http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg", //商品图片  建议数组形式，方便存储多张图片
        specs: [
          {
            name: "颜色",
            values: [
              {
                name: "黑色",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "蓝色",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
          {
            name: "产地",
            values: [
              {
                name: "中国",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "日本",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
          {
            name: "尺寸",
            values: [
              {
                name: "30cm",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "20cm",
                picture: "",
                selected: false,
                disabled: false,
              },
              {
                name: "10cm",
                picture: "",
                selected: false,
                disabled: false,
              },
            ],
          },
        ],
      },
      skus: [
        {
          //规格商品
          id: 1018261,
          inventory: 10, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-001",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "30cm" },
          ],
        },
        {
          //规格商品
          id: 1018262,
          inventory: 20, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-002",
          specs: [
            { name: "颜色", valueName: "蓝色" },
            { name: "产地", valueName: "中国" },
            { name: "尺寸", valueName: "10cm" },
          ],
        },
        {
          //规格商品
          id: 1018263,
          inventory: 40, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-003",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "中国" },
            { name: "尺寸", valueName: "10cm" },
          ],
        },
        {
          //规格商品
          id: 1018264,
          inventory: 80, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-004",
          specs: [
            { name: "颜色", valueName: "黑色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "20cm" },
          ],
        },
        {
          //规格商品
          id: 1018265,
          inventory: 0, //库存
          price: "10.00", //价格
          skuCode: "goods-sku-005",
          specs: [
            { name: "颜色", valueName: "蓝色" },
            { name: "产地", valueName: "日本" },
            { name: "尺寸", valueName: "20cm" },
          ],
        },
      ],
      spliter: "★",
      pathMap: null,
      skuId: "",
    };
  },
  methods: {
    getPathMap(skus) {
      // console.log(skus.forEach(it => { console.log(it) }))
      const pathMap = {};
      skus.forEach((sku) => {
        // 1. 过滤出有库存有效的sku
        if (sku.inventory) {
          // 2. 得到sku属性值数组
          const specs = sku.specs.map((spec) => spec.valueName);
          // 3. 得到sku属性值数组的子集
          const powerSet = bwPowerSet(specs);
          // console.log(specs)
          // console.log(powerSet)
          // 4. 设置给路径字典对象
          powerSet.forEach((set) => {
            const key = set.join(this.spliter);
            if (pathMap[key]) {
              // 已经有key往数组追加
              pathMap[key].push(sku.id);
            } else {
              // 没有key设置一个数组
              pathMap[key] = [sku.id];
            }
          });
        }
      });
      return pathMap;
    },
    // 1.获取用户已经选中的条件
    getSelectedArr(specs) {
      return specs.map((spec) => {
        // 找到这个属性下，用户的选择
        const value = spec.values.find((it) => it.selected === true);

        return value ? value.name : undefined;
      });
      // return [undefined,'中国',undefined]
    },
    // 2.对于每个按钮来说：在组合当前的按钮对应的
    // 更新按钮的禁用状态
    updateDisabledStatus(pathMap, specs) {
      // 用户的选择[undefined,'中国',undefined]
      const _selectedArr = this.getSelectedArr(specs);
      console.log(_selectedArr);
      specs.forEach((spec, idx) => {
        const selectedArr = [..._selectedArr];
        spec.values.forEach((btn) => {
          // 已经选中的
          if (btn.name === selectedArr[idx]) {
            return;
          }
          // 将最后一选项填入用户选择的最后一项
          selectedArr[idx] = btn.name;

          // 去掉undefined拼接字符串,再去查询
          const key = selectedArr.filter((v) => v).join(this.spliter);
          // 若找不到 设置为true
          btn.disabled = !pathMap[key]; // （undefined取反）
        });
      });
    },
    // 根据skuId还原用户选中的规格
    initSelectedStatus(goodsData, skus, skuId) {
      const sku = skus.find((sku) => sku.id === skuId);
      if (sku) {
        const selectArr = sku.specs.map((it) => it.valueName);
        goodsData.specs.forEach((spec, idx) => {
          spec.values.forEach((value) => {
            value.selected = value.name === selectArr[idx];
          });
        });
      }
    },
    clickSpecs(value, values) {
      // 如果是禁用状态则不做处理
      if (value.disabled) {
        return;
      }
      if (value.selected) {
        value.selected = false; // 已选中改为未选中
      } else {
        // 把兄弟全改为未选中
        values.forEach((it) => {
          it.selected = false;
        });
        value.selected = true; // 自己：未选中改为已选中
      }
      this.updateDisabledStatus(this.pathMap, this.goodsData.specs);
      this.tryEmit();
    },
    tryEmit() {
      const selectedArr = this.getSelectedArr(this.goodsData.specs).filter(
        (v) => v
      );
      if (selectedArr.length === this.goodsData.specs.length) {
        const skuIds = this.pathMap[selectedArr.join(this.spliter)];
        const sku = this.skus.find((sku) => sku.id === skuIds[0]);
        console.log(sku);//输出用户所选择的规格商品
      } else {
        // emit("change", {});
      }
    },
  },
  created() {
    this.initSelectedStatus(this.goodsData, this.skus, this.skuId);
    this.pathMap = this.getPathMap(this.skus);
  },
};
</script>

<style>
.disabled {
  background-color: red; //禁用显示红色
}
.selected {
  background-color: blue;//选中显示蓝色
}
</style>

结尾再次感谢原文章作者，使我受益匪浅