uniapp 如何写一个多规格的商品发布页面涉及套餐一套餐二套餐一里面有颜色等然后对应配置价格帮我也一个页面代码

<p>以下是一个简单的多规格商品发布页面的代码示例：</p>
<template>
  <view class="container">
    <view class="form-group">
      <view class="label">商品名称</view>
      <input v-model="productName" type="text" placeholder="请输入商品名称" class="input"/>
    </view>
    <view class="form-group">
      <view class="label">商品描述</view>
      <input v-model="productDesc" type="text" placeholder="请输入商品描述" class="input"/>
    </view>
    <view class="form-group">
      <view class="label">商品图片</view>
      <image v-for="(image, index) in productImages" :key="index" :src="image" class="product-image" />
      <button @click="addProductImage" class="btn btn-primary">添加图片</button>
    </view>
    <view class="form-group">
      <view class="label">商品规格</view>
      <view class="spec-group" v-for="(spec, index) in productSpecs" :key="index">
        <view class="spec-name">{{ spec.name }}</view>
        <view class="spec-values">
          <view v-for="(value, valueIndex) in spec.values" :key="valueIndex" :class="{ 'active': selectedSpecValues[index] === value }" @click="selectSpecValue(index, value)">{{ value }}</view>
        </view>
      </view>
    </view>
    <view class="form-group">
      <view class="label">商品价格</view>
      <view class="price-group" v-for="(price, index) in productPrices" :key="index">
        <view class="price-name">{{ price.name }}</view>
        <input v-model="price.value" type="number" class="input"/>
      </view>
    </view>
    <button @click="submit" class="btn btn-primary">发布商品</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      productName: '',
      productDesc: '',
      productImages: [],
      productSpecs: [
        {
          name: '套餐',
          values: ['套餐一', '套餐二']
        },
        {
          name: '颜色',
          values: ['红色', '蓝色', '绿色']
        }
      ],
      selectedSpecValues: [],
      productPrices: [
        {
          name: '套餐一-红色',
          value: ''
        },
        {
          name: '套餐一-蓝色',
          value: ''
        },
        {
          name: '套餐一-绿色',
          value: ''
        },
        {
          name: '套餐二-红色',
          value: ''
        },
        {
          name: '套餐二-蓝色',
          value: ''
        },
        {
          name: '套餐二-绿色',
          value: ''
        }
      ]
    }
  },
  methods: {
    addProductImage() {
      // 添加商品图片
    },
    selectSpecValue(index, value) {
      // 选择规格值
      this.selectedSpecValues.splice(index, 1, value);
    },
    submit() {
      // 提交商品信息
    }
  }
}
</script>
<style>
.container {
  padding: 20rpx;
}
.form-group {
  margin-bottom: 20rpx;
}
.label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.input {
  font-size: 28rpx;
  width: 100%;
  padding: 10rpx;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}
.btn {
  font-size: 28rpx;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
}
.btn-primary {
  background-color: #007aff;
}
.product-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
.spec-group {
  display: flex;
  margin-bottom: 10rpx;
}
.spec-name {
  min-width: 80px;
  font-size: 28rpx;
  margin-right: 10rpx;
}
.spec-values {
  display: flex;
  flex-wrap: wrap;
}
.spec-values view {
  font-size: 28rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  cursor: pointer;
}
.spec-values view.active {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}
.price-group {
  display: flex;
  margin-bottom: 10rpx;
}
.price-name {
  min-width: 120px;
  font-size: 28rpx;
  margin-right: 10rpx;
}
.price-group input {
  font-size: 28rpx;
  width: 100%;
  padding: 10rpx;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}
</style>
<p>在这个示例中，我们定义了一个包含以下内容的数据模型：</p>
<ul>
<li>商品名称和描述</li>
<li>商品图片列表</li>
<li>商品规格列表，包括套餐和颜色</li>
<li>已选择的规格值列表</li>
<li>商品价格列表，包括不同规格的价格</li>
</ul>
<p>我们的页面包含以下组件：</p>
<ul>
<li>输入框和图片上传组件用于输入商品名称、描述和图片</li>
<li>规格选择组件，包含规格名称和规格值列表</li>
<li>价格输入框，用于输入不同规格的价格</li>
<li>发布商品按钮</li>
</ul>
<p>在选择规格值时，我们使用 selectedSpecValues 数组来跟踪已选择的规格值，并将其用于计算商品价格。在发布商品时，我们可以将这些信息提交到服务器，以创建一个具有多个规格的商品</p>