uniapp添加多规格商品

最近写小程序的商城类项目遇到了一个需求，商家的管理的功能整合在在小程序里，所以就涉及到了添加商品规格的功能，下面是代码

template部分

<template>
	<view class="container">
		<view style="padding: 30rpx;background-color: white;">
			<view style="display: flex;align-items: center;justify-content: left;">
				<input type="text" v-model="skuName"
					style="border-bottom: 1rpx solid #eee;padding-bottom: 5rpx;width: 200rpx;" placeholder="请输入名称规格" />
				<view style="width: 180rpx;margin-left: 30rpx;">
					<button size="mini" @click="addSkuName">添加规格</button>
				</view>

			</view>
		</view>

		<view style="padding: 30rpx;background-color: white;margin-top: 30rpx;" v-if="attr_list.length > 0">
			<view style="border-bottom: 1rpx solid #e2e2e2;margin-bottom: 30rpx;" v-for="item,i in attr_list"
				:key="item.name">
				<view style="padding:30rpx;display: flex;align-items: center;">

					<view style="margin-right: 30rpx;font-weight: bold;">{{item.name}}</view>
					<view style="display: flex;width: 450rpx;">
						<button size="mini" @click="delSkuName(item,i)">删除规格</button>
						<view style="width: 30rpx;"></view>
						<button size="mini" @click="addSkuValue(item,i)">添加规格值</button>
					</view>
				</view>

				<view class="" style="display:flex;flex-wrap: wrap;margin-bottom: 15rpx;">
					<view style="padding:15rpx 30rpx;border:1rpx solid #e2e2e2;margin-right: 30rpx;position: relative;"
						v-for="value,index in item.item" :key="value">
						{{value}}
						<view
							style="width: 35rpx;height: 35rpx;text-align: center;line-height: 30rpx;border-radius: 50%;background: rgba(0,0,0,0.15);position: absolute;top: -10rpx;right: -10rpx;font-weight: bold;"
							@click="delSkuNameValue(item,index)">
							x</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" style="padding: 30rpx;background-color: white;" v-if="sku_list.length != 0">
			<view class="" style="margin-bottom: 30rpx;border-bottom: 1px solid #eee;" v-for="item in sku_list"
				:key="item.sku_id">
				<view style="font-weight: bold;margin-bottom: 20rpx;">{{item.sku_name}}</view>
				<view class="" style="display: flex;">
					<view
						style="width: 180rpx; border-right: 1rpx solid #eee;margin-right: 30rpx;border-bottom: 1rpx solid #eee;padding-bottom: 5rpx;">
						<view style="margin-bottom: 15rpx;">价格</view>
						<input type="number" :value="item.price" placeholder="请输入"
							@input="changeInput($event,item,'price')" />
					</view>
					<view
						style="width: 180rpx; border-right: 1rpx solid #eee;margin-right: 30rpx;border-bottom: 1rpx solid #eee;padding-bottom: 5rpx;">
						<view style="margin-bottom: 15rpx;">库存</view>
						<input type="number" :value="item.stock" placeholder="请输入"
							@input="changeInput($event,item,'stock')" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

js部分

<script>
	export default {
		data() {
			return {
				skuName: '',
				attr_list: [{
					id: '21323',
					name: '颜色',
					item: [
						'红色'
					]
				}],
				attr_list2: [],
				sku_list: []
			};
		},
		watch: {
			// 每次添加新的或者删除需要重新计算规格
			attr_list: {
				deep: true,
				// immediate: true,
				handler() {
					console.log("监听了");
					this.attr_list2 = JSON.parse(JSON.stringify(this.attr_list))
					// this.sku_list = this.countSku(this.attr_list2)
					this.$set(this, 'sku_list', this.countSku(this.attr_list2))
				}
			}
		},
		onLoad() {
			// 备份数据，每次计算用这组数据
			this.attr_list2 = JSON.parse(JSON.stringify(this.attr_list))

			// console.log('最后打印', this.countSku(this.attr_list2));
			this.sku_list = this.countSku(this.attr_list2)
		},
		methods: {
			changeInput(e, item, key) {
				console.log(e);
				console.log(item);
				item[key] = e.detail.value
				// this.$set(item, key, e.detail.value)
			},
			// 计算规格列表
			countSku(attr_list, sku_value = []) {
				let result = []
				// 获取第一规格 删除备份数据的第一条
				let oneSku = attr_list.splice(0, 1)
				// 如果没有规格值返回空对象
				if (!oneSku[0]) return []
				// if (oneSku[0].value.length == 0) {}

				// sku_value是已拼接的规格值
				if (sku_value && sku_value.length > 0) {
					console.log("222", sku_value, oneSku[0]);
					oneSku[0].item.forEach((item, i) => {

						sku_value.forEach(value => {
							result.push({
								...value,
								sku_id: this.getUuid(),
								[oneSku[0].name]: item,
								sku_name: `${value.sku_name};${[oneSku[0].name]}:${item}`,
								price: '',
								stock: '',
							})
						})
					})
				} else {
					console.log("111", oneSku);
					oneSku[0].item.forEach((item, i) => {
						result.push({
							sku_id: this.getUuid(),
							[oneSku[0].name]: item,
							price: '',
							stock: '',
							sku_name: `${[oneSku[0].name]}:${item}`
						})
					})

				}
				console.log(result, '每次执行完打印');
				// 递归，直到备份的数据值被删干净
				if (attr_list.length > 0) {
					result = this.countSku(attr_list, result)
				}
				return result

			},
			// 删除规格值
			delSkuNameValue(item, i) {
				console.log(item);
				uni.showModal({
					title: '提示',
					content: '确认删除此规格值吗？',
					success: (res) => {
						if (res.confirm) {
							item.item.splice(i, 1)
						}
					}
				})

			},
			// 删除规格
			delSkuName(item, i) {
				console.log(item);
				uni.showModal({
					title: '提示',
					content: '确认删除此规格吗？',
					success: (res) => {
						if (res.confirm) {
							this.attr_list.splice(i, 1)
						}
					}
				})

			},
			// 添加规格值
			addSkuValue(item) {
				uni.showModal({

					editable: true,
					placeholderText: '请输入规格值',
					success: (res) => {
						if (res.confirm) {
							if (!res.content) return this.showToast('请输入规格值')
							let obj = item.item?.find(e => e == res.content)
							if (obj) return this.showToast('重复规格值')

							item.item.push(res.content)
						}
					}
				})
			},
			// 添加规格
			addSkuName() {
				if (!this.skuName) return this.showToast('请输入规格名')
				let obj = this.attr_list.find(item => item.name == this.skuName)
				if (obj) return this.showToast('重复规格值')
				let skuData = {
					name: this.skuName,
					item: [],
					id: this.getUuid()
				}
				this.attr_list.push(skuData)
				this.skuName = ''
				this.addSkuValue(skuData)
			},
			// 提示
			showToast(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			// 获取唯一id
			getUuid(randomLength) {
				return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36)
			}
		}
	}
</script>

css部分图省事用的全是行内样式