uniapp 多规格商品配置代码示例 - 实现分类选择与价格计算

<template>
  <div>
    <div v-for="(input, index) in inputs" :key="index">
      <div>{{ input.name }}</div>
      <div>
        <button v-for="(value, valueIndex) in input.values" :key="valueIndex" @click="selectValue(index, valueIndex)" :class="{active: value.selected}">
          {{ value.name }}
        </button>
      </div>
    </div>
    <div>
      <div>价格: {{ price }}</div>
      <div>已选: {{ selectedValues }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputs: [
        {
          name: '型号',
          price: '',
          values: [
            { name: '华为', price: '1000', selected: false },
            { name: '小米', price: '900', selected: false },
            { name: '', price: '', selected: false },
          ],
        },
        {
          name: '配置',
          price: '',
          values: [
            { name: '8+128', price: '100', selected: false },
            { name: '8+256', price: '200', selected: false },
            { name: '', price: '', selected: false },
          ],
        },
        {
          name: '颜色',
          price: '',
          values: [
            { name: '黑色', price: '', selected: false },
            { name: '红色', price: '', selected: false },
            { name: '白色', price: '', selected: false },
          ],
        },
        {
          name: '',
          price: '',
          values: [{ name: '', price: '', selected: false }],
        },
      ],
      selectedValues: [],
      price: '',
    };
  },
  methods: {
    selectValue(inputIndex, valueIndex) {
      // 取消已选择的值
      this.inputs[inputIndex].values.forEach((value) => {
        value.selected = false;
      });
      this.inputs[inputIndex].values[valueIndex].selected = true;

      // 更新已选值
      let selectedValues = [];
      this.inputs.forEach((input) => {
        input.values.forEach((value) => {
          if (value.selected) {
            selectedValues.push(value.name);
          }
        });
      });
      this.selectedValues = selectedValues;

      // 更新价格
      let price = 0;
      this.inputs.forEach((input) => {
        input.values.forEach((value) => {
          if (value.selected) {
            price += Number(value.price);
          }
        });
      });
      this.price = price;
    },
  },
};
</script>