LocalLivingServicesUniapp/pages/product/group.vue

<template>
	<view class="group">
		<view class="head">
			<view class="head_left">
				<span class="cuIcon-back" @click="back"></span>
			</view>
			<view class="case">
				商品详情
			</view>
		</view>
		<view class="content">
			<view class="center">
				<view class="title">
					组合套餐
				</view>
				<view class="list" v-for="(item,index) in groupList" :key="index">
					<view class="name">{{item.name}}</view>
					<view class="single" v-for="(row,ind) in item.singleList">
						<view class="single_name">
							{{row.name}}
						</view>
						<view class="single_price">
							{{row.num}}{{row.unit}}/{{row.price}}元
							<!-- <span class="cuIcon-deletefill"></span> -->
							<span @click="remove(index,ind)">删除</span>
						</view>
					</view>
					<view class="handle">
						<view class="delete" @click="deleteGroup(index)">
							删除
						</view>
						<view class="addSingle" @click="addSingle(item,index)">
							添加单品
						</view>
					</view>
				</view>
				<view class="add_group" @click="isAddGroup = true">
					<image src="/static/product/add.png" mode=""></image>
					添加商品组
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="save">
				保存
			</view>
		</view>
		<!-- 添加商品组 -->
		<view class="popup" v-if="isAddGroup">
			<view class="model">
				<view class="title">
					输入商品组名称
					<image src="/static/index/cut.png" mode="" @click="isAddGroup = false"></image>
				</view>
				<view class="inp">
					<u-input v-model="name" placeholder="限30字" />
				</view>
				<view class="btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="sub" @click="addGroup">确定</view>
				</view>
			</view>
		</view>
		<!-- 添加单品 -->
		<view class="popup" v-if="isAddSingle">
			<view class="model">
				<view class="title">
					添加单品
					<image src="/static/index/cut.png" mode="" @click="isAddSingle = false"></image>
				</view>
				<view class="inp">
					<view class="single">
						名称<u-input v-model="single.name" placeholder="请输入单品名称" />
					</view>
					<view class="single">
						数量<u-input v-model="single.num" placeholder="请输入数量" />
					</view>
					<view class="single">
						单位<u-input v-model="single.unit" placeholder="请输入单位" />
					</view>
					<view class="single">
						价格<u-input v-model="single.price" placeholder="请输入价格" />
					</view>
				</view>
				<view class="btn">
					<view class="cancel" @click="cancelSingle">取消</view>
					<view class="continue" @click="continu">确定并继续添加</view>
					<view class="subSingle" @click="subSingle">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				groupList: [],
				isAddGroup: false,
				isAddSingle: false,
				single: {
					name: '',
					num: '',
					unit: '',
					price: ''
				},
				singleIndex: null,//商品组下标
			}
		},
		methods: {
			//添加商品组
			addGroup() {
				if (this.name !== '') {
					this.isAddGroup = false
					this.groupList.push({
						name: this.name,
						singleList: []
					})
					this.name = ''
					this.isAddSingle = true
					this.singleIndex = this.groupList.length - 1
				}
			},
			//取消添加商品组
			cancel() {
				this.isAddGroup = false
				this.name = ''
			},
			//添加单品弹窗出现
			addSingle(item, index) {
				this.isAddSingle = true
				this.singleIndex = index
			},
			//继续添加单品
			continu() {
				this.subSingle()
			},
			//取消添加单品
			cancelSingle() {
				this.isAddSingle = false
				this.isAddGroup = false
				this.single = {
					name: '',
					num: '',
					unit: '',
					price: ''
				}
			},
			//确定添加单品
			subSingle() {
				this.groupList[this.singleIndex].singleList.push(this.single)
				this.isAddGroup = false
				this.isAddSingle = false
				this.single = {
					name: '',
					num: '',
					unit: '',
					price: ''
				}
			},
			//删除单品
			remove(index, ind) {
				this.groupList[index].singleList.splice(ind, 1)
			},
			//删除商品组
			deleteGroup(index){
					this.groupList.splice(index,1)
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//保存
			save(){
				console.log(this.groupList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #F7F8FC;

		.head {
			width: 100%;
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.head_left {
				font-size: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.content {
			width: 100%;
			flex: 1;
			padding: 20rpx;
			overflow-y: auto;

			.center {
				background-color: #fff;
				padding: 16rpx 20rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 20rpx;
				}
			}

			.add_group {
				width: 100%;
				height: 135rpx;
				margin: 20rpx auto 0px;
				background: #F7F8FC;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #449AFF;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}

			.list {
				width: 100%;
				// height: 70rpx;
				background: #F7F8FC;
				border-radius: 8rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				padding: 20rpx;

				.name {
					width: 100%;
					height: 40rpx;
					// padding: 20rpx;
					font-weight: 600;
					margin-bottom: 16rpx;
				}

				.single {
					width: 100%;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					margin-bottom: 16rpx;

					.single_name {
						width: 100%;
						font-size: 26rpx;
					}

					.single_price {
						font-size: 24rpx;
						color: #888888;
						display: flex;
						justify-content: space-between;
						align-items: center;

						span {
							display: block;
							width: 112rpx;
							height: 47rpx;
							background: #FFFFFF;
							border-radius: 4rpx;
							border: 1px solid #EEEEEE;
							text-align: center;
							line-height: 47rpx;
							font-size: 24rpx;
						}
					}
				}
				.handle{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.delete{
						width: 45%;
						height: 61rpx;
						background: rgba(243,79,79,0.1);
						border-radius: 12rpx;
						border: 1px solid #F34F4F;
						font-size: 28rpx;
						color: #F34F4F;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.addSingle {
						width: 45%;
						height: 61rpx;
						background: rgba(68, 154, 255, 0.1);
						border-radius: 12rpx;
						border: 1px solid #449AFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.foot {
			width: 100%;
			height: 112rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.operate {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0px 20rpx;
			
				.delete {
					width: 205rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
					border-radius: 49rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
					margin-left: 140rpx;
				}
			
				.all {
					width: 25%;
					// height: 60rpx;
					// border: 1px solid #999;
					display: flex;
					justify-content: center;
					align-items: center;
			
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}

			.btn {
				width: 672rpx;
				height: 76rpx;
				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
				border-radius: 75rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.4);
			display: flex;
			align-items: end;
			z-index: 99;

			.model {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 0rpx 24rpx;
				padding-bottom: 20rpx;

				.title {
					width: 100%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-bottom: 1px solid #eeeeee;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 0px;
					}
				}

				.inp {
					width: 100%;
					min-height: 68rpx;
					background: #F7F8FC;
					border-radius: 4rpx;

					//
					.single {
						width: 100%;
						padding: 0rpx 20rpx;
						display: flex;
						align-items: center;
						// justify-content: space-between;
						background-color: #eee;
						margin-bottom: 20rpx;
					}
				}

				.btn {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-top: 1px solid #eeeeee;
					margin-top: 24rpx;

					.cancel {
						width: 205rpx;
						height: 76rpx;
						border-radius: 54rpx;
						border: 1px solid #CCCCCC;
						font-size: 28rpx;
						color: #999999;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.sub {
						width: 443rpx;
						height: 76rpx;
						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
						border-radius: 53rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.continue {
						width: 232rpx;
						height: 76rpx;
						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
						border-radius: 53rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.subSingle {
						width: 232rpx;
						height: 76rpx;
						background: linear-gradient(90deg, #FFA05B 0%, #FF7918 100%);
						border-radius: 49rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	/deep/.u-input {
		text-align: right !important;
	}
</style>