添加本地生活商品SKU组件

bundle_b/pages/local_shop/components/spec-popup.vue

@@ -0,0 +1,168 @@
+<template>
+	<view>
+		<u-popup v-model="showPopup" mode="bottom" height="80%">
+			<view class="spec">
+				<!-- 规格 -->
+				<view class="spec-name flex row-between p-20">
+					<u-input placeholder="请输入规格(最多添加3个)" class="spec-name-inupt border-bottom" v-model="specName"></u-input>
+					<u-button type="primary" size="medium" class="spec-name-btn" @click="addSpecName"
+						hover-class="none">添加</u-button>
+				</view>
+				
+				<!-- 规格项 -->
+				<view v-if="specList.length >= 1" class="p-20 ">
+					<text class="sm bold m-b-20">注：多个值请用空格分开 如: 红色 蓝色 紫色</text>
+					<view v-for="(item, index) in specList" :key="index" class="m-t-10">
+						<!-- 规格 -->
+						<view class="flex row-between">
+							<view class="bold">{{item.name}}</view>
+							<view @click="delSpecName(index)">
+								<u-icon name="trash" size="32"></u-icon>
+							</view>
+						</view>
+						<!-- 规格项 -->
+						<view class="spec-item">
+							<view class="spec-item-block" v-for="(value, i) in item.item" :key="i">
+								<view class="spec-item-value">{{value}}</view>
+								<view class="spec-item-del" @click="delSpecItem(index, i)">
+									<u-icon name="close-circle-fill" size="32"></u-icon>
+								</view>
+							</view>
+						</view>
+						<view>
+							<view class="border-bottom">
+								<u-input placeholder="请输入规格项值" v-model="specItemList[index]"></u-input>
+							</view>
+							<view class="text-center m-t-20 bold" @click="addSpecItem(item, index)">
+								+ 添加规格值
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 表格 -->
+				<view v-if="specList.length >= 1" class="p-20">
+					<u-table>
+						<u-tr class="u-tr">
+							<u-th class="u-th" v-for="(item, index) in specList" :key="index">
+								{{item.name}}
+							</u-th>
+							<u-th class="u-th">图片</u-th>
+							<u-th class="u-th">价格</u-th>
+						</u-tr>
+					</u-table>
+				</view>
+				
+				<button @click="createCartesian">查看</button>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				specName: '', // 规格名称
+				specList: [], // 规格和规格项集合
+				specItemList: [], // 规格项值
+			};
+		},
+		props: {
+			showPopup: {
+				type: Boolean,
+				default: false
+			},
+		},
+		methods: {			
+			// 添加规格名称
+			addSpecName() {
+				if (!this.specName) return this.$toast({
+					title: '请填写规格名称'
+				})
+
+				if (this.specList.length >= 3) return this.$toast({
+					title: '规格项只能添加3个'
+				})
+
+				const specData = {
+					name: this.specName,
+					item: []
+				}
+
+				this.specList.push(specData)
+				this.specName = ''
+			},
+				
+			// 删除规格
+			delSpecName(index) {
+				this.specList.splice(index, 1)
+			},
+			
+			// 添加规格项
+			addSpecItem(item, index) {
+				if (!this.specItemList[index]) return this.$toast({
+					title: '请填写规格项名称'
+				})
+				// let arr = 
+				// console.log(this.specItemList[index].split(" "))
+				// return false;
+				this.specItemList[index].split(" ").map((item) => {
+					this.specList[index].item.push(item)
+				})
+				// this.specList[index].item.push(this.specItemList[index])
+				this.specItemList[index] = ''
+			},
+			
+			// 删除规格项
+			delSpecItem(index, i) {
+				this.specList[index].item.splice(i, 1)
+			},
+			
+			// 生成笛卡尔集
+			createCartesian() {
+				const attributeValues = Object.values(this.specList).map(attr => attr.item);
+				const cartesianProduct = (...arrays) => arrays.reduce((acc, curr) =>
+				  acc.flatMap(a => curr.map(c => [...a, c]))
+				, [[]]);
+				const attributeCombinations = cartesianProduct(...attributeValues);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.spec-name-inupt {
+		width: 80%;
+		margin-right: 20rpx;
+	}
+	
+	.spec-item {
+		display: grid;
+		grid-template-columns: repeat(2, 48%);
+		grid-row-gap: 24rpx;
+		justify-content: space-between;
+	}
+	
+	.spec-item-block {
+		position: relative;
+		padding-top: 20rpx;
+	}
+	
+	.spec-item-value {
+		background-color: #ebebeb;
+		padding: 10rpx 0 10rpx 10rpx;
+		border-radius: 6rpx;
+		margin-right: 8rpx;
+	}
+	
+	.spec-item-del {
+		position: absolute;
+		right: 0;
+		top: 10rpx;
+	}
+	
+	.border-bottom {
+		border-bottom: 1px solid #ccc;
+	}
+</style>