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

<template>
	<view class="page-container">
		<u-navbar title="新建团餐" :autoBack="true" :placeholder="true"></u-navbar>
		
		<view class="form-card">
			<view class="section-title">基础信息</view>
			<u-form :model="form" ref="uForm" :rules="rules" 
				labelPosition="left" labelWidth="auto"
				:error-type="['toast', 'border-bottom']"
			> 
				<u-form-item prop="category" label="商品分类" required borderBottom>
					<u-input v-model="form.category" placeholder="去设置" height="41" inputAlign="right" @click="show = true"></u-input>
					<u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
				</u-form-item>
				
				<u-form-item prop="name" label="商品名称" required borderBottom>
					<u-input v-model="form.name" placeholder="输入商品名称" height="41" inputAlign="right"></u-input>
				</u-form-item>

				<u-form-item prop="coverImages" label="商品封面图" required labelPosition="top">
					<view class="upload-content">
						<view class="upload-tip">支持jpg、png格式，建议尺寸为300px*300px，上传1-4张</view>
						<u-upload
							name="cover"
							width="140"
							height="140"
							multiple
							:maxCount="4"
							:fileList="fileList.cover"
							:previewFullImage="true"
							@afterRead="afterRead($event, 'cover')"
							@delete="deletePic($event, 'cover')"
						></u-upload>
					</view>
				</u-form-item>

				<u-form-item prop="detailImages" label="商品详情图" required borderBottom labelPosition="top">
					<view class="upload-content">
						<view class="upload-tip">支持jpg、png格式，建议尺寸为300px*300px，最多20张</view>
						<u-upload
							name="detail"
							width="140"
							height="140"
							multiple
							:maxCount="20"
							:fileList="fileList.detail"
							:previewFullImage="true"
							@afterRead="afterRead($event, 'detail')"
							@delete="deletePic($event, 'detail')"
						></u-upload>
					</view>
				</u-form-item>

				<u-form-item prop="groupPrice" label="团餐价" required borderBottom>
					<u-input v-model="form.groupPrice" type="digit" height="41" :clearable="false" placeholder="请输入团餐价" inputAlign="right"></u-input>
					<text slot="right" class="input-suffix">元</text>
				</u-form-item>
				
				<u-form-item prop="salePrice" label="售价" required :borderBottom="false">
					<u-input v-model="form.salePrice" type="digit" height="41" :clearable="false" placeholder="商品售价" inputAlign="right"></u-input>
					<text slot="right" class="input-suffix">元</text>
				</u-form-item>
			</u-form>
		</view>

		<view class="footer-bar">
			<u-button type="primary" @click="goNextStep">下一步</u-button>
		</view>
		<!-- 商品分类选择 -->
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			form: {
				name: '',
				category: '',
				coverImages: [],
				detailImages: [],
				groupPrice: '',
				salePrice: '',
			},
			fileList: {
				cover: [],
				detail: [],
			},
			actionSheetList: [
				{
					text: '早餐'
				},
				{
					text: '午餐'
				},
				{
					text: '晚餐'
				}
			],
			rules: {
				name: [
					{
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					}
				],
				category: [
					{
						required: true,
						message: '请选择分类',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 分类选择，打开弹窗
		actionSheetCallback(index) {
			this.form.category = this.actionSheetList[index].text;
		},
		// 图片上传处理
		async afterRead(event, type) {
			let lists = [].concat(event.file);
			this.fileList[type].push(...lists);
			// 上传逻辑
			this.form[type === 'cover' ? 'coverImages' : 'detailImages'] = this.fileList[type].map(f => f.url);
		},
		deletePic(event, type) {
			this.fileList[type].splice(event.index, 1);
			this.form[type === 'cover' ? 'coverImages' : 'detailImages'] = this.fileList[type].map(f => f.url);
		},
		goNextStep() {
			// 表单校验
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('Form Data:', this.form);
					uni.navigateTo({
						url: '/pages/groupMeal/goods/form-step2'
					});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$uni-text-color: #303133;
$uni-color-primary: #2979ff;

.page-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	.section-title {
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
}

.form-card {
	margin: 24rpx;
	padding: 20rpx 24rpx;
	background-color: #fff;
	border-radius: 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;
			}
		}
	}

	.input-suffix {
		color: #232832;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.upload-content {
		width: 100%;

		.upload-tip {
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			margin-bottom: 20rpx;
		}

		::v-deep .u-add-tips {
			margin-top: 10rpx;
		}
	}
}

// 底部按钮
.footer-bar {
	::v-deep .u-btn {
		width: 100%;
		height: 76rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #449AFF;
		border-radius: 54rpx;
		border: 1rpx solid #449AFF;
		background: #FFFFFF;
	}
}

// 分类选择弹窗样式
.category-popup {
	padding: 30rpx;
	
	.popup-title {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: $uni-text-color;
		margin-bottom: 30rpx;
	}
	
	.category-list {
		max-height: 600rpx; // 限制高度，可滚动
	}
	
	.category-item {
		padding: 20rpx 0;
		font-size: 30rpx;
		color: $uni-text-color;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.selected {
			color: $uni-color-primary;
			font-weight: bold;
		}
	}
	
	.popup-footer {
		padding-top: 30rpx;
	}
}
</style>