uniapp 写一个多规格的产品发布页面比如小米手机 先新增型号和颜色然后下面这些信息都是新增动态的型号8+25612+256颜色：黑色紫色那么就会有小米手机8+256黑色小米手机8+256黑紫色小米手机12+256黑色小米手机12+256紫色这样的代码

<template>
  <view>
    <!-- 添加型号和颜色 -->
    <view>
      <view>型号:</view>
      <view v-for="(item,index) in models" :key="index">
        <checkbox-group v-model="modelCheck">
          <checkbox :value="item">{{item}}</checkbox>
        </checkbox-group>
      </view>
      <view>颜色:</view>
      <view v-for="(item,index) in colors" :key="index">
        <checkbox-group v-model="colorCheck">
          <checkbox :value="item">{{item}}</checkbox>
        </checkbox-group>
      </view>
    </view>
    <!-- 添加其他信息 -->
    <view v-for="(model,index) in modelCheck" :key="index">
      <view v-for="(color,idx) in colorCheck" :key="idx">
        <view>{{model}}{{color}}</view>
        <!-- 其他信息表单输入 -->
        <input v-model="price[model][color]" placeholder="请输入价格" />
        <input v-model="inventory[model][color]" placeholder="请输入库存" />
      </view>
    </view>
    <!-- 确认发布 -->
    <button @click="submit">确认发布</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      models: ["8+256", "12+256"],
      colors: ["黑色", "紫色"],
      modelCheck: [],
      colorCheck: [],
      price: {},
      inventory: {}
    };
  },
  methods: {
    // 点击确认发布按钮
    submit() {
      let data = [];
      for (let model of this.modelCheck) {
        for (let color of this.colorCheck) {
          // 构造发布数据
          let info = {
            model: model,
            color: color,
            price: this.price[model][color],
            inventory: this.inventory[model][color]
          };
          data.push(info);
        }
      }
      console.log(data);
    }
  }
};
</script