vue实现商品规格

Vue 实现商品规格功能

商品规格功能通常包括规格选择、联动更新价格/库存、动态展示规格组合等。以下是实现方案：

数据结构设计

规格数据通常采用嵌套结构：

specs: [
  {
    name: "颜色",
    values: ["红色", "黑色"]
  },
  {
    name: "内存",
    values: ["64G", "128G"]
  }
]

商品SKU数据示例：

skus: [
  {
    specs: ["红色", "64G"],
    price: 599,
    stock: 10
  }
]

规格选择组件

创建可复用的规格选择组件：

<template>
  <div v-for="spec in specs" :key="spec.name">
    <h4>{{ spec.name }}</h4>
    <button 
      v-for="value in spec.values"
      :key="value"
      @click="selectSpec(spec.name, value)"
      :class="{ active: isSelected(spec.name, value) }"
    >
      {{ value }}
    </button>
  </div>
</template>

规格联动逻辑

实现规格选择后的联动效果：

methods: {
  selectSpec(specName, value) {
    this.selectedSpecs[specName] = value
    this.updateAvailableSpecs()
  },

  updateAvailableSpecs() {
    // 根据已选规格过滤可选规格
    this.specs.forEach(spec => {
      spec.values.forEach(value => {
        // 检查规格组合是否存在
        const available = this.checkSpecCombination(spec.name, value)
        // 更新UI状态
      })
    })
  }
}

价格库存更新

根据选择的规格组合显示对应SKU信息：

computed: {
  currentSku() {
    const selectedValues = Object.values(this.selectedSpecs)
    return this.skus.find(sku => 
      sku.specs.every(spec => selectedValues.includes(spec))
    )
  }
}

完整示例

整合所有功能的完整示例：

<template>
  <div>
    <SpecSelector 
      :specs="specs"
      @select="handleSpecSelect"
    />

    <div v-if="currentSku">
      <p>价格: {{ currentSku.price }}</p>
      <p>库存: {{ currentSku.stock }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedSpecs: {},
      specs: [], // 规格数据
      skus: []   // SKU数据
    }
  },

  computed: {
    currentSku() {
      const values = Object.values(this.selectedSpecs)
      return this.skus.find(sku => 
        values.length === sku.specs.length &&
        values.every(v => sku.specs.includes(v))
      )
    }
  },

  methods: {
    handleSpecSelect(spec) {
      this.selectedSpecs = { ...this.selectedSpecs, ...spec }
    }
  }
}
</script>

注意事项

1. 确保规格数据完整性和一致性
2. 处理未选择完整规格时的边界情况
3. 考虑添加规格不可选状态的视觉反馈
4. 对于复杂规格组合，建议使用算法优化匹配性能

扩展功能

1. 规格图片展示
2. 规格组合缺货提示
3. 多规格快速切换
4. 规格记忆功能（记录上次选择）