vue实现京东规格

Vue 实现京东规格选择功能

京东规格选择功能通常用于商品详情页，允许用户选择不同规格（如颜色、尺寸等）并实时更新价格和库存状态。以下是基于 Vue 的实现方法。

数据结构和组件设计

1. 数据结构
   规格数据通常是一个嵌套结构，包含规格类别（如颜色、尺寸）和对应的规格值（如红色、XL）。示例数据结构如下：

   data() {
     return {
       specs: [
         {
           name: '颜色',
           values: ['红色', '黑色', '白色']
         },
         {
           name: '尺寸',
           values: ['S', 'M', 'L', 'XL']
         }
       ],
       selectedSpecs: {},
       skus: [
         { id: 1, specs: { 颜色: '红色', 尺寸: 'S' }, price: 99, stock: 10 },
         { id: 2, specs: { 颜色: '红色', 尺寸: 'M' }, price: 109, stock: 5 }
       ]
     }
   }

2. 组件设计
   使用 v-for 渲染规格类别和规格值，并通过 v-model 绑定用户选择。

   <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: selectedSpecs[spec.name] === value }"
     >
       {{ value }}
     </button>
   </div>

选择规格逻辑

1. 处理用户选择
   更新 selectedSpecs 对象，记录用户选择的规格值。

   methods: {
     selectSpec(specName, value) {
       this.$set(this.selectedSpecs, specName, value)
       this.checkStock()
     }
   }

2. 验证库存和匹配 SKU
   遍历 SKU 列表，检查当前选择的规格是否匹配某个 SKU，并更新价格和库存状态。

   checkStock() {
     const matchedSku = this.skus.find(sku => {
       return Object.keys(this.selectedSpecs).every(
         key => sku.specs[key] === this.selectedSpecs[key]
       )
     })
     if (matchedSku) {
       this.currentPrice = matchedSku.price
       this.stock = matchedSku.stock
     } else {
       this.currentPrice = null
       this.stock = 0
     }
   }

动态样式和交互反馈

1. 高亮选中规格
   通过 :class 动态添加样式，提示用户当前选择的规格值。

   .active {
     background-color: #f00;
     color: #fff;
   }

2. 禁用无库存规格
   根据库存状态禁用不可选的规格按钮。

   isDisabled(specName, value) {
     return !this.skus.some(sku => {
       const tempSpecs = { ...this.selectedSpecs, [specName]: value }
       return Object.keys(tempSpecs).every(key => sku.specs[key] === tempSpecs[key])
     })
   }

完整示例代码

<template>
  <div>
    <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: selectedSpecs[spec.name] === value }"
        :disabled="isDisabled(spec.name, value)"
      >
        {{ value }}
      </button>
    </div>
    <div v-if="currentPrice">
      <p>价格: {{ currentPrice }}</p>
      <p>库存: {{ stock }}</p>
    </div>
    <div v-else>
      <p>请选择完整规格</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specs: [
        { name: '颜色', values: ['红色', '黑色', '白色'] },
        { name: '尺寸', values: ['S', 'M', 'L', 'XL'] }
      ],
      selectedSpecs: {},
      skus: [
        { id: 1, specs: { 颜色: '红色', 尺寸: 'S' }, price: 99, stock: 10 },
        { id: 2, specs: { 颜色: '红色', 尺寸: 'M' }, price: 109, stock: 5 }
      ],
      currentPrice: null,
      stock: 0
    }
  },
  methods: {
    selectSpec(specName, value) {
      this.$set(this.selectedSpecs, specName, value)
      this.checkStock()
    },
    checkStock() {
      const matchedSku = this.skus.find(sku => {
        return Object.keys(this.selectedSpecs).every(
          key => sku.specs[key] === this.selectedSpecs[key]
        )
      })
      if (matchedSku) {
        this.currentPrice = matchedSku.price
        this.stock = matchedSku.stock
      } else {
        this.currentPrice = null
        this.stock = 0
      }
    },
    isDisabled(specName, value) {
      return !this.skus.some(sku => {
        const tempSpecs = { ...this.selectedSpecs, [specName]: value }
        return Object.keys(tempSpecs).every(key => sku.specs[key] === tempSpecs[key])
      })
    }
  }
}
</script>

通过以上方法，可以实现类似京东的规格选择功能，包括动态更新价格、库存状态和交互反馈。