LocalLivingServicesUniapp/pages/groupMeal/goods/form-step2.vue

<template>
	<view class="page-container">
		<u-navbar title="新建团餐" :autoBack="true" :placeholder="true"></u-navbar>

		<u-form :model="form" :rules="rules" ref="formRef" :error-type="['toast', 'border-bottom']">
			<u-collapse ref="collapseRef" :value="activeNames" @change="onCollapseChange">
				<u-collapse-item :class="{
						active: activeNames == category.id
					}" v-for="(category, catIndex) in form.dishCategories" :key="category.id" :name="category.id" @click="onClick">
					<view slot="title" class="collapse-title">
						<text>{{ category.name }}</text>
						<text class="num" v-if="isEditedShow(category)">({{ category.items.length }})</text>
						<u-switch v-if="false" size="20" activeColor="#3c9cff" :value="category.isActive"
							@change="onSwitchChange($event, category.id)"></u-switch>
					</view>

					<view class="collapse-content">
						<view class="dish-item" v-for="(dish, dishIndex) in category.items" :key="dish.id">
							<view class="dish-header">
								<view class="dish-title">
									<u-image width="32rpx" height="32rpx" src="/static/icon/icon_edit.png"></u-image>
									<text>{{ category.name }}{{ dishIndex + 1 }}</text>
								</view>

							</view>
							<view class="dish-form">
								<u-form-item label="名称" :prop="`dishCategories.${catIndex}.items.${dishIndex}.name`"
									:required="isEdited(dish)">
									<u-input v-model="dish.name" height="41" placeholder="请输入" inputAlign="right"></u-input>
								</u-form-item>
								<u-form-item label="价格" :prop="`dishCategories.${catIndex}.items.${dishIndex}.price`"
									:required="isEdited(dish)">
									<u-input v-model.number="dish.price" type="digit" height="41" placeholder="输入金额" :clearable="false"
										inputAlign="right"></u-input>
									<text slot="right" style="color: #333333;">元</text>
								</u-form-item>
								<u-form-item label="描述" :prop="`dishCategories.${catIndex}.items.${dishIndex}.description`"
									:required="isEdited(dish)">
									<u-input v-model="dish.description" height="41" placeholder="请描述菜品的使用素材" inputAlign="right"></u-input>
								</u-form-item>
								
							</view>
							<view class="dish-actions">
								<u-button v-if="category.items.length > 1" type="error" size="mini" hover-class="none" :custom-style="{
										color: '#FF6067',
										border: '1rpx solid #FF6067',
										background: 'rgba(255,96,103,0.1)',
									}" @click="removeDish(category.id, dish.id)">
									<view class="text">
										<u-image width="32rpx" height="32rpx" src="/static/icon/icon_del.png"></u-image>
										<text>删除</text>
									</view>
								</u-button>
								<u-button v-if="dishIndex === category.items.length - 1" type="primary" size="mini" hover-class="none"
									:custom-style="{
										color: '#2D88F4',
										border: '1rpx solid #2D88F4',
										background: 'rgba(45,136,244,0.1)',
									}" @click="addDish(category.id)">
									<view class="text">
										<u-image width="32rpx" height="32rpx" src="/static/icon/icon_plus.png"></u-image>
										<text>添加</text>
									</view>
								</u-button>
								
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</u-form>

		<view class="footer-bar">
			<u-button :custom-style="{
					width: '205rpx',
					fontWeight: '400',
					fontSize: '28rpx',
					color: '#449AFF',
					border: '1rpx solid #449AFF',
					background: '#fff',
					marginRight: '24rpx'
				}" @click="goBack">上一步</u-button>
			<u-button :custom-style="{
					fontWeight: '400',
					fontSize: '28rpx',
					color: '#FFFFFF',
					background: 'linear-gradient(90deg, #77B6FF 0%, #449AFF 100%)',
				}" @click="submit">提交审核</u-button>
		</view>
	</view>
</template>

<script>
	let dishIdCounter = 100; // 简单的唯一ID生成器
	export default {
		data() {
			return {
				// 数据
				form: {
					dishCategories: [{
							id: 1,
							name: '荤菜',
							isActive: false,
							items: [{
								id: dishIdCounter++,
								name: '',
								price: '',
								description: ''
							}]
						},
						{
							id: 2,
							name: '素菜',
							isActive: false,
							items: [{
								id: dishIdCounter++,
								name: '',
								price: '',
								description: ''
							}]
						},
						{
							id: 3,
							name: '主食',
							isActive: false,
							items: [{
								id: dishIdCounter++,
								name: '',
								price: '',
								description: ''
							}]
						},
						{
							id: 4,
							name: '汤',
							isActive: false,
							items: [{
								id: dishIdCounter++,
								name: '',
								price: '',
								description: ''
							}]
						},
						{
							id: 5,
							name: '其他',
							isActive: false,
							items: [{
								id: dishIdCounter++,
								name: '',
								price: '',
								description: ''
							}]
						}
					],
				},
				rules: {},
				activeNames: [1], // 控制折叠面板展开的name数组
			};
		},
		watch: {
			'form.dishCategories': {
				handler() {
					this.$nextTick(() => {
						this.updateValidationRules();
					});
				},
				deep: true
			}
		},
		onLoad() {
			const goods = uni.getStorageSync('gm_goods');
			if (goods.gmMerchantPackageDetails && goods.gmMerchantPackageDetails.length > 0) {
				this.form.dishCategories.map(a => {
					let items = goods.gmMerchantPackageDetails.filter(b => b.category == a.id);
					if (items.length > 0) a.items = items;
				});
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.formRef.setRules(this.rules);
			});
		},
		methods: {
			// 判断一个菜品是否被编辑过
			isEdited(dish) {
				return !!(dish.name || dish.price || dish.description);
			},
			isEditedShow(e) {
				const goods = uni.getStorageSync('gm_goods');
				return goods.gmMerchantPackageDetails && goods.gmMerchantPackageDetails.length > 0 && goods
					.gmMerchantPackageDetails.some(b => b.category == e.id);;
			},
			updateValidationRules() {
				if (!this.$refs.formRef) return;

				const newRules = {};
				this.form.dishCategories.forEach((category, catIndex) => {
					category.items.forEach((dish, dishIndex) => {
						if (this.isEdited(dish)) {
							// 如果菜品的任一字段被填写，则所有字段都变为必填
							const nameProp = `dishCategories.${catIndex}.items.${dishIndex}.name`;
							const priceProp = `dishCategories.${catIndex}.items.${dishIndex}.price`;
							const descProp = `dishCategories.${catIndex}.items.${dishIndex}.description`;

							newRules[nameProp] = [{
								required: true,
								message: '请输入名称',
								trigger: ['blur', 'change']
							}];
							newRules[priceProp] = [{
								required: true,
								type: 'number',
								message: '请输入价格',
								trigger: ['blur', 'change']
							}];
							newRules[descProp] = [{
								required: true,
								message: '请输入描述',
								trigger: ['blur', 'change']
							}];
						}
					});
				});

				this.rules = newRules;
				this.$refs.formRef.setRules(this.rules);
			},
			// Switch开关状态变化
			onSwitchChange(isActive, categoryId) {
				const index = this.activeNames.indexOf(categoryId);
				if (isActive) {
					if (index === -1) {
						this.activeNames.push(categoryId);
					}
				} else {
					if (index > -1) {
						this.activeNames.splice(index, 1);
					}
				}
			},
			// 折叠面板状态变化
			onCollapseChange(names) {
				console.log(names)
				this.activeNames = names;
			},
			// 添加菜品
			addDish(categoryId) {
				const category = this.form.dishCategories.find(c => c.id === categoryId);
				if (category) {
					category.items.push({
						id: dishIdCounter++,
						name: '',
						price: '',
						description: ''
					});
				}
			},
			// 删除菜品
			removeDish(categoryId, dishId) {
				const category = this.form.dishCategories.find(c => c.id === categoryId);
				if (category && category.items.length > 1) {
					const index = category.items.findIndex(d => d.id === dishId);
					if (index > -1) {
						category.items.splice(index, 1);
					}
				}
			},
			// 上一步
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 提交审核
			submit() {
				this.$refs.formRef.validate().then(res => {
					const goods = uni.getStorageSync('gm_goods');
					const activeCategories = this.form.dishCategories.filter(c => c.items.some(this.isEdited));
					const details = [];
					// 遍历一级分类
					activeCategories.forEach(category => {
						// 检查是否有items属性且为数组
						if (category.items && Array.isArray(category.items)) {
							// 遍历二级菜品
							category.items.forEach(item => {
								// 创建新对象，只保留需要的属性
								if (this.isEdited(item)) {
									details.push({
										category: category.id,
										name: item.name,
										price: item.price,
										description: item.description
									});
								}
							});
						}
					});
					let params = {
						...goods,
						gmMerchantPackageDetails: [...details]
					};
					console.log('表单校验成功, 提交的数据:', activeCategories, params);
					this.$http.post('/groupmeal/gmMerchantPackage/submit', params).then(res => {
						let type = res.data.code === 200 ? 'success' : 'error';
						this.$tip[type](res.data.message);
						if (res.data.code === 200) {
							// 清除
							uni.removeStorageSync('gm_goods');
							// 返回列表
							uni.navigateBack({
								delta: 3
							});
						}
					});
				}).catch(errors => {
					console.log('校验失败', errors);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 160rpx;

		::v-deep .u-collapse-item {
			margin-bottom: 16rpx;

			.u-collapse-head {
				padding: 20rpx 32rpx;
				background-color: #fff;
			}

			&.active {
				.u-collapse-body {
					height: auto !important;
				}
			}
		}

		.collapse-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num {
				padding: 0 10rpx;
			}
		}

		.collapse-content {
			.dish-item {
				margin-top: 16rpx;
				padding: 20rpx 32rpx;
				background: #FFFFFF;
				box-shadow: 0 2rpx 8rpx 0 rgba(214, 225, 237, 0.1);
				border: 1rpx solid #F0F3F5;
				border-radius: 16rpx;

				.dish-header {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.dish-title {
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
					}

				}

				.dish-form {
					padding: 6rpx 16rpx;
					border-radius: 8rpx;
					background: #F7F8FC;
				}

				::v-deep .u-form-item {
					padding: 16rpx 0;
					line-height: 1;

					.u-form-item--left__content {
						flex: none;
					}
				}
			}
		}
	}

	.dish-actions {
		width: 100%;
		text-align: end;
		margin-top: 16rpx;
		// display: flex;
		// align-items: center;
		// justify-content: end;
		// gap: 16rpx;
		

		::v-deep .u-btn {
			font-weight: 400;
			font-size: 22rpx;
			margin-left: 16rpx;
		}

		.text {
			display: flex;
			align-items: center;

			text {
				line-height: 1;
				margin-left: 4rpx;
			}
		}
	}

	.footer-bar {
		::v-deep .u-btn {
			width: 100%;
			height: 76rpx;
			border-radius: 54rpx;

			&::after {
				display: none;
			}
		}
	}
</style>