vue3+ts 实现商品多规格组件

实现商品多规格组件可以分为以下几个步骤：

1. 定义数据结构

首先需要定义商品的数据结构，包括商品名称、价格、库存等基本信息，以及多个规格，每个规格包含规格名称、选项列表等信息。可以使用 TypeScript 的接口来定义数据结构。

interface Product {
  name: string;
  price: number;
  stock: number;
  specs: Spec[];
}

interface Spec {
  name: string;
  options: Option[];
}

interface Option {
  name: string;
  value: string;
}

2. 创建组件

创建一个商品多规格组件，包含商品信息和规格选择等界面元素。可以使用 Vue 3 的新特性 `setup()` 函数来创建组件。

<template>
  <div class="product-specs">
    <h2>{{ product.name }}</h2>
    <p>价格：{{ product.price }}</p>
    <p>库存：{{ product.stock }}</p>
    <div v-for="spec in product.specs" :key="spec.name">
      <h3>{{ spec.name }}</h3>
      <div v-for="option in spec.options" :key="option.value">
        <input type="radio" :name="spec.name" :value="option.value" v-model="selected[spec.name]">
        {{ option.name }}
      </div>
    </div>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Product, Spec } from './types';

export default defineComponent({
  name: 'ProductSpecs',
  props: {
    product: {
      type: Object as () => Product,
      required: true
    }
  },
  setup(props) {
    const selected = {} as Record<string, string>;

    function addToCart() {
      // TODO: add to cart
    }

    return {
      selected,
      addToCart
    };
  }
});
</script>

3. 实现选项选择

在组件的 `setup()` 函数中，定义一个 `selected` 对象来存储用户选择的规格选项。然后在模板中，使用 `v-for` 循环渲染规格和选项，并使用 `v-model` 指令将用户选择的选项绑定到 `selected` 对象中。

<template>
  <div class="product-specs">
    ...
    <div v-for="spec in product.specs" :key="spec.name">
      <h3>{{ spec.name }}</h3>
      <div v-for="option in spec.options" :key="option.value">
        <input type="radio" :name="spec.name" :value="option.value" v-model="selected[spec.name]">
        {{ option.name }}
      </div>
    </div>
    ...
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Product, Spec } from './types';

export default defineComponent({
  name: 'ProductSpecs',
  props: {
    product: {
      type: Object as () => Product,
      required: true
    }
  },
  setup(props) {
    const selected = {} as Record<string, string>;

    return {
      selected
    };
  }
});
</script>

4. 实现加入购物车

在组件的 `setup()` 函数中，定义一个 `addToCart()` 方法，当用户点击加入购物车按钮时，将选中的规格和数量添加到购物车中。可以使用 Vuex 管理购物车状态，或者通过事件派发通知父组件更新购物车状态。

<template>
  <div class="product-specs">
    ...
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Product, Spec } from './types';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'ProductSpecs',
  props: {
    product: {
      type: Object as () => Product,
      required: true
    }
  },
  setup(props) {
    const store = useStore();
    const selected = {} as Record<string, string>;

    function addToCart() {
      const specs = Object.entries(selected).map(([name, value]) => ({ name, value }));
      store.dispatch('cart/addItem', { product: props.product, specs });
    }

    return {
      selected,
      addToCart
    };
  }
});
</script>

5. 样式调整

最后，可以根据实际需求对组件的样式进行调整，使其更加美观和易用。可以使用 CSS 或者 UI 库来实现样式调整。

以上是一个简单的商品多规格组件的实现过程，可以根据实际需求进行修改和扩展。