vue实现sku组合

Vue 实现 SKU 组合的方法

在电商系统中，SKU（Stock Keeping Unit）是商品的最小库存单位，通常由多个属性组合而成。例如，一件衣服可能有颜色和尺寸两个属性，每种颜色和尺寸的组合就是一个 SKU。以下是使用 Vue 实现 SKU 组合的几种方法。

数据结构设计

SKU 组合的核心是管理属性和 SKU 之间的关系。通常需要以下数据结构：

data() {
  return {
    attributes: [
      { name: '颜色', values: ['红色', '蓝色', '绿色'] },
      { name: '尺寸', values: ['S', 'M', 'L'] }
    ],
    skus: [
      { id: 1, price: 100, stock: 10, combinations: { '颜色': '红色', '尺寸': 'S' } },
      { id: 2, price: 110, stock: 5, combinations: { '颜色': '蓝色', '尺寸': 'M' } }
    ]
  }
}

动态生成 SKU 组合

根据属性动态生成所有可能的 SKU 组合：

methods: {
  generateAllCombinations() {
    const combinations = [];
    const generate = (current, remainingAttrs) => {
      if (remainingAttrs.length === 0) {
        combinations.push(current);
        return;
      }
      const [attr, ...rest] = remainingAttrs;
      attr.values.forEach(value => {
        generate({ ...current, [attr.name]: value }, rest);
      });
    };
    generate({}, this.attributes);
    return combinations;
  }
}

处理用户选择

用户选择属性时，需要实时更新可选的 SKU：

data() {
  return {
    selected: {}
  }
},
computed: {
  availableSkus() {
    return this.skus.filter(sku => {
      return Object.entries(this.selected).every(
        ([attr, value]) => sku.combinations[attr] === value
      );
    });
  }
}

禁用不可选属性

某些属性组合可能没有对应的 SKU，需要禁用这些选项：

computed: {
  disabledOptions() {
    const disabled = {};
    this.attributes.forEach(attr => {
      disabled[attr.name] = {};
      attr.values.forEach(value => {
        const tempSelected = { ...this.selected, [attr.name]: value };
        disabled[attr.name][value] = !this.skus.some(sku =>
          Object.entries(tempSelected).every(
            ([a, v]) => sku.combinations[a] === v
          )
        );
      });
    });
    return disabled;
  }
}

完整示例

以下是一个完整的 Vue 组件示例：

<template>
  <div>
    <div v-for="attr in attributes" :key="attr.name">
      <h3>{{ attr.name }}</h3>
      <button
        v-for="value in attr.values"
        :key="value"
        @click="select(attr.name, value)"
        :disabled="disabledOptions[attr.name][value]"
        :class="{ selected: selected[attr.name] === value }"
      >
        {{ value }}
      </button>
    </div>
    <div v-if="availableSkus.length">
      <h3>可选的 SKU</h3>
      <ul>
        <li v-for="sku in availableSkus" :key="sku.id">
          {{ sku.combinations }} - 价格: {{ sku.price }}, 库存: {{ sku.stock }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attributes: [
        { name: '颜色', values: ['红色', '蓝色', '绿色'] },
        { name: '尺寸', values: ['S', 'M', 'L'] }
      ],
      skus: [
        { id: 1, price: 100, stock: 10, combinations: { '颜色': '红色', '尺寸': 'S' } },
        { id: 2, price: 110, stock: 5, combinations: { '颜色': '蓝色', '尺寸': 'M' } }
      ],
      selected: {}
    };
  },
  computed: {
    availableSkus() {
      return this.skus.filter(sku => {
        return Object.entries(this.selected).every(
          ([attr, value]) => sku.combinations[attr] === value
        );
      });
    },
    disabledOptions() {
      const disabled = {};
      this.attributes.forEach(attr => {
        disabled[attr.name] = {};
        attr.values.forEach(value => {
          const tempSelected = { ...this.selected, [attr.name]: value };
          disabled[attr.name][value] = !this.skus.some(sku =>
            Object.entries(tempSelected).every(
              ([a, v]) => sku.combinations[a] === v
            )
          );
        });
      });
      return disabled;
    }
  },
  methods: {
    select(attr, value) {
      this.$set(this.selected, attr, value);
    }
  }
};
</script>

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

优化性能

对于属性较多的场景，可以使用算法优化，如回溯法或动态规划，减少不必要的计算。也可以使用缓存机制，避免重复计算禁用状态。

以上方法可以帮助实现 Vue 中的 SKU 组合功能，根据实际需求调整数据结构和逻辑即可。