uniapp 多规格商品发布页面代码 - 可自定义规格，轻松增减内容

<template>
  <view class='container'>
    <view class='form-group'>
      <view class='form-label'>商品名称</view>
      <input type='text' v-model='name' />
    </view>
    <view class='form-group'>
      <view class='form-label'>商品描述</view>
      <textarea v-model='description'></textarea>
    </view>
    <view class='form-group'>
      <view class='form-label'>商品图片</view>
      <image-uploader v-model='images' />
    </view>
    <view class='form-group'>
      <view class='form-label'>商品规格</view>
      <view class='spec-list'>
        <view class='spec-item' v-for='(spec, index) in specs' :key='index'>
          <input type='text' v-model='spec.name' placeholder='规格名称' />
          <view class='spec-value-list'>
            <view class='spec-value-item' v-for='(value, valueIndex) in spec.values' :key='valueIndex'>
              <input type='text' v-model='value' placeholder='规格值' />
              <view class='spec-value-remove' @click='removeSpecValue(index, valueIndex)'>-</view>
            </view>
          </view>
          <view class='spec-value-add' @click='addSpecValue(index)'>+</view>
          <view class='spec-remove' @click='removeSpec(index)'>删除规格</view>
        </view>
      </view>
      <view class='spec-add' @click='addSpec'>增加规格</view>
    </view>
    <view class='form-group'>
      <view class='form-label'>商品价格</view>
      <view class='price-list'>
        <view class='price-item' v-for='(price, index) in prices' :key='index'>
          <input type='number' v-model='price.value' placeholder='价格' />
          <input type='text' v-model='price.spec' placeholder='规格' />
          <view class='price-remove' @click='removePrice(index)'>-</view>
        </view>
      </view>
      <view class='price-add' @click='addPrice'>增加价格</view>
    </view>
    <view class='form-group'>
      <button class='submit-button' @click='submit'>发布商品</button>
    </view>
  </view>
</template>
<script>
import ImageUploader from '@/components/ImageUploader'

export default {
  components: {
    ImageUploader,
  },
  data() {
    return {
      name: '',
      description: '',
      images: [],
      specs: [],
      prices: [],
    }
  },
  methods: {
    addSpec() {
      this.specs.push({
        name: '',
        values: [''],
      })
    },
    removeSpec(index) {
      this.specs.splice(index, 1)
    },
    addSpecValue(specIndex) {
      this.specs[specIndex].values.push('')
    },
    removeSpecValue(specIndex, valueIndex) {
      this.specs[specIndex].values.splice(valueIndex, 1)
    },
    addPrice() {
      this.prices.push({
        value: '',
        spec: '',
      })
    },
    removePrice(index) {
      this.prices.splice(index, 1)
    },
    submit() {
      // 提交数据逻辑
    },
  },
}
</script>
<style scoped>
.container {
  padding: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

textarea {
  width: 100%;
  height: 200rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
}

.spec-list {
  margin-top: 10rpx;
}

.spec-item {
  margin-bottom: 10rpx;
}

.spec-item input[type='text'] {
  width: 200rpx;
  margin-right: 10rpx;
}

.spec-value-list {
  display: inline-flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.spec-value-item {
  display: flex;
  align-items: center;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.spec-value-item input[type='text'] {
  width: 100px;
  margin-right: 10rpx;
}

.spec-value-remove,
.spec-remove {
  display: inline-block;
  margin-left: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
  color: #f00;
}

.spec-add,
.price-add {
  display: inline-block;
  margin-top: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
  color: #00f;
}

.price-list {
  margin-top: 10rpx;
}

.price-item {
  margin-bottom: 10rpx;
}

.price-item input[type='number'],
.price-item input[type='text'] {
  width: 200rpx;
  margin-right: 10rpx;
}

.price-remove {
  display: inline-block;
  margin-left: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
  color: #f00;
}

.submit-button {
  width: 100%;
  padding: 10rpx;
  background-color: #00f;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 32rpx;
  font-weight: bold;
  cursor: pointer;
}
</style>