使用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
原文地址: https://www.cveoy.top/t/topic/hiy5 著作权归作者所有。请勿转载和采集!