LocalLivingServicesUniapp/pages/groupMeal/users/settings.vue

<template>
	<view class="page-container">
		<u-navbar title="团餐设置" :autoBack="true" :placeholder="true" :border-bottom="false"></u-navbar>
		
		<u-form :model="form" :rules="rules" ref="formRef" labelPosition="left" labelWidth="auto">
			<template v-for="(meal, index) in form.mealTimes">
				<view class="meal-section" :key="index" v-if="isGroup(meal)">
					<view class="section-title">{{ meal.name }}</view>
					
					<u-form-item :label="`拼团最低起送量`" :prop="`mealTimes.${index}.minGroupSize`" borderBottom :required="isEdited(index)">
						<u-input v-model="meal.minGroupSize" type="number" placeholder="输入数量" height="41" inputAlign="right"></u-input>
					</u-form-item>
					
					<u-form-item :label="`开团时间`" :prop="`mealTimes.${index}.startTime`" borderBottom :required="isEdited(index)">
						<u-input v-model="meal.startTime" :clearable="false" placeholder="去设置" height="41" inputAlign="right" @click="openTimePicker(index, 'startTime')"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				
					<u-form-item :label="`闭团时间`" :prop="`mealTimes.${index}.endTime`" @click="openTimePicker(index, 'endTime')" :required="isEdited(index)">
						<u-input v-model="meal.endTime" :clearable="false" placeholder="去设置" height="41" inputAlign="right" @click="openTimePicker(index, 'endTime')"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>
			</template>
		</u-form>

		<view class="footer-bar">
			<u-button type="primary" 
				:disabled="isSubmitDisabled"
				@click="submit" 
			>提交</u-button>
		</view>

		<u-picker 
		 	mode="time"
			:params="{
				hour: true,
				minute: true,
				timestamp: true
			}"
			v-model="showPicker"
			@confirm="onTimeConfirm"
			@cancel="showPicker = false"
		></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				mealTimes: [
					{ id: 1, name: '早餐', minGroupSize: '', startTime: '', endTime: '' },
					{ id: 2, name: '午餐', minGroupSize: '', startTime: '', endTime: '' },
					{ id: 3, name: '晚餐', minGroupSize: '', startTime: '', endTime: '' },
				],
			},
			rules: {}, // 规则将动态生成
			query: {},
			showPicker: false,
			pickerValue: '',
			currentEditing: { // 记录当前正在编辑的时间
				index: null,
				field: ''
			},
		};
	},
	computed: {
		// 判断提交按钮是否应该被禁用
		isSubmitDisabled() {
			// 如果所有餐次的所有字段都为空，则禁用
			return this.form.mealTimes.every(meal => 
				!meal.minGroupSize && !meal.startTime && !meal.endTime
			);
		}
	},
	watch: {
		// 深度监听表单数据变化，动态设置校验规则
		'form.mealTimes': {
			handler() {
				// 使用 nextTick 确保在 DOM 更新后再设置规则，增加稳定性
				this.$nextTick(() => {
					this.updateValidationRules();
				});
			},
			deep: true
		}
	},
	onLoad(query) {
		this.query = query;
		if (query.isEnterprise) this.getData();
	},
	mounted() {
		// 页面加载完成后，为 u-form 实例设置初始规则
		this.$nextTick(() => {
			this.$refs.formRef.setRules(this.rules);
		});
	},
	methods: {
		getData() {
			let params = {
				isEnterprise: this.query.isEnterprise
			};
			this.$http.get('/groupmeal/gmMerchantSettings/getByIsEnterprise', {params}).then(res => {
				if (res.data.code === 200 && res.data.result.length > 0) {
					res.data.result.map(item => {
						let i = this.form.mealTimes.findIndex(mitem => mitem.id === item.category);
						if (i !== -1) {
							this.$set(this.form.mealTimes, i, {
								...this.form.mealTimes[i],
								id: item.category,  
								startTime: item.strStartTime, 
								endTime: item.strEndTime,
								minGroupSize: item.minGroupSize + '',
							});
						}
					});
				}
			});
		},
		isGroup(e) {
			let flag = true;
			if (this.query.isEnterprise == 2 && e.id != 2) flag = false;
			return flag;
		},
		// 判断一个餐次区块是否被编辑过
		isEdited(index) {
			const meal = this.form.mealTimes[index];
			return !!(meal.minGroupSize || meal.startTime || meal.endTime);
		},
		updateValidationRules() {
			// 确保 u-form 实例存在
			if (!this.$refs.formRef) {
				return;
			}
			
			const newRules = {};
			this.form.mealTimes.forEach((meal, index) => {
				if (this.isEdited(index)) {
					// 如果有任何一个字段被填写，则该餐次的所有字段都变为必填
					newRules[`mealTimes.${index}.minGroupSize`] = [{ required: true, message: '请输入起送量', trigger: ['blur', 'change'] }];
					newRules[`mealTimes.${index}.startTime`] = [
						{ required: true, message: '请设置开团时间', trigger: ['blur', 'change'] },
						{
							validator: (rule, value, callback) => {
								const endTime = this.form.mealTimes[index].endTime;
								let flag = endTime && value && value >= endTime;
								return !flag;
							},
							message: '开团时间必须早于闭团时间',
							trigger: ['change', 'blur'],
						}
					];
					newRules[`mealTimes.${index}.endTime`] = [
						{ required: true, message: '请设置闭团时间', trigger: ['blur', 'change'] },
						{
							asyncValidator: (rule, value, callback) => {
								const startTime = this.form.mealTimes[index].startTime;
								if (startTime && value && value <= startTime) {
									callback(new Error('闭团时间必须晚于开团时间'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					];
				}
			});
			this.rules = newRules;
			this.$refs.formRef.setRules(this.rules);
		},
		openTimePicker(index, field) {
			this.currentEditing = { index, field };
			this.pickerValue = this.form.mealTimes[index][field] || '08:00'; // 默认值
			this.showPicker = true;
		},
		onTimeConfirm(e) {
			const { value } = e;
			const { index, field } = this.currentEditing;
			this.form.mealTimes[index][field] = value;
			this.showPicker = false;
		},
		submit() {
			this.$refs.formRef.validate().then(res => {
				let params = {
					gmMerchantSettingsList: this.form.mealTimes.filter((item, index) => this.isEdited(index)).map(item => {
						return {
							category: item.id,
							merchantId: uni.getStorageSync('login_user_info').merchantId,
							minGroupSize: item.minGroupSize - 0,
							isEnterprise: this.query.isEnterprise - 0,
							strEndTime: item.endTime,
							strStartTime: item.startTime
						}
					})
				};
				console.log('表单校验成功', this.form, params);
				this.$http.post('/groupmeal/gmMerchantSettings/add', params).then(res => {
					if (res.data.code === 200) {
						this.$tip.success('设置成功');
					} else {
						this.$tip.error(res.data.message);
					}
				});
			}).catch(errors => {
				console.log('表单校验失败', errors);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 140rpx;
}
.meal-section {
	margin: 24rpx;
	padding: 20rpx 30rpx;
	border: 1rpx solid #F0F3F5;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx 0 rgba(214,225,237,0.1);
	background-color: #fff;
	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 0 16rpx;
	}
	::v-deep .u-form-item {
		padding: 16rpx 0;
		line-height: 1;
		.u-form-item--left__content {
			flex: none;
			.u-form-item--left__content--required {
				color: #fa3534; 
				left: auto;
				right: 0;
			}
		}
	}
}
.footer-bar {
	::v-deep .u-btn {
		width: 100%;
		height: 76rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 54rpx;
		background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
		&.u-btn--primary--disabled {
			background: #a0cfff;
		}
	}
}
</style>