vue实现商品规格

Vue 实现商品规格功能

商品规格功能通常包括规格选择、价格联动、库存联动等。以下是实现商品规格的常见方法：

数据结构设计

商品规格数据通常采用树形结构，例如：

data() {
  return {
    specs: [
      {
        name: '颜色',
        values: ['红色', '蓝色', '绿色']
      },
      {
        name: '尺寸',
        values: ['S', 'M', 'L']
      }
    ],
    skus: [
      { color: '红色', size: 'S', price: 100, stock: 10 },
      { color: '红色', size: 'M', price: 120, stock: 5 }
    ]
  }
}

规格选择组件实现

创建可交互的规格选择组件：

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

<script>
export default {
  data() {
    return {
      selected: {}
    }
  },
  methods: {
    selectSpec(name, value) {
      this.$set(this.selected, name, value)
      this.$emit('change', this.selected)
    },
    isSelected(name, value) {
      return this.selected[name] === value
    }
  }
}
</script>

价格和库存联动

根据选择的规格匹配SKU数据：

computed: {
  currentSku() {
    const selectedValues = Object.values(this.selected)
    if (selectedValues.length !== this.specs.length) return null

    return this.skus.find(sku => {
      return this.specs.every(spec => {
        return sku[spec.name.toLowerCase()] === this.selected[spec.name]
      })
    })
  }
}

完整示例

整合以上功能的完整示例：

<template>
  <div>
    <spec-selector 
      :specs="specs" 
      @change="onSpecChange"
    />

    <div v-if="currentSku">
      <p>价格: {{ currentSku.price }}</p>
      <p>库存: {{ currentSku.stock }}</p>
    </div>
    <div v-else>
      <p>请选择完整规格</p>
    </div>
  </div>
</template>

<script>
import SpecSelector from './SpecSelector.vue'

export default {
  components: { SpecSelector },
  data() {
    return {
      specs: [
        { name: '颜色', values: ['红色', '蓝色'] },
        { name: '尺寸', values: ['S', 'M'] }
      ],
      skus: [
        { color: '红色', size: 'S', price: 100, stock: 10 },
        { color: '红色', size: 'M', price: 120, stock: 5 }
      ],
      selected: {}
    }
  },
  computed: {
    currentSku() {
      const selectedValues = Object.values(this.selected)
      if (selectedValues.length !== this.specs.length) return null

      return this.skus.find(sku => {
        return this.specs.every(spec => {
          const specName = spec.name.toLowerCase()
          return sku[specName] === this.selected[spec.name]
        })
      })
    }
  },
  methods: {
    onSpecChange(selected) {
      this.selected = selected
    }
  }
}
</script>

高级功能扩展

1. 禁用无库存规格：

   computed: {
   disabledSpecs() {
    const disabled = {}
    this.specs.forEach(spec => {
      disabled[spec.name] = {}
      spec.values.forEach(value => {
        disabled[spec.name][value] = !this.hasStockForSpec(spec.name, value)
      })
    })
    return disabled
   }
   },
   methods: {
   hasStockForSpec(specName, specValue) {
    return this.skus.some(sku => {
      return sku[specName.toLowerCase()] === specValue && sku.stock > 0
    })
   }
   }

2. 规格图片展示：

   

   data() {
   return {
    specs: [
      {
        name: '颜色',
        values: [
          { name: '红色', image: 'red.jpg' },
          { name: '蓝色', image: 'blue.jpg' }
        ]
      }
    ]
   }
   }

注意事项

• 确保数据结构一致性，规格名称和SKU属性对应
• 处理异步数据加载时的状态
• 移动端适配需要考虑触摸交互
• 复杂的规格组合可能需要后端配合处理逻辑

以上实现方式可以根据实际项目需求进行调整，核心思路是通过组件化分离规格选择和SKU匹配逻辑，利用Vue的响应式特性实现联动效果。