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 @click="show = true">
					<u-input v-model="form.categoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></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="specialCategoryId" label="特色分类" required borderBottom @click="showSpecial = true">
					<u-input v-model="form.specialCategoryName" class="form-input" disabled placeholder="去设置" height="41" inputAlign="right"></u-input>
					<u-icon slot="right" name="arrow-right" color="#C7C6CA"></u-icon>
				</u-form-item>
				
				<u-form-item prop="productImage" label="商品封面图" required labelPosition="top">
					<view class="upload-content">
						<view class="upload-tip">支持jpg、png格式，建议尺寸为750px*750px，上传1-4张</view>
						<Upload
							width="140"
							height="140"
							:maxCount="4"
							:multiple="true"
							:fileList.sync="fileList.cover"
							:previewFullImage="true"
							@complete="onUpload($event, 'cover')"
						/>
					</view>
				</u-form-item>

				<u-form-item prop="detailImages" label="商品详情图" required borderBottom labelPosition="top">
					<view class="upload-content">
						<view class="upload-tip">支持jpg、png格式，最多20张</view>
						<Upload
							width="140"
							height="140"
							:maxCount="20"
							:multiple="true"
							:fileList.sync="fileList.detail"
							:previewFullImage="true"
							@complete="onUpload($event, 'detail')"
						/>
					</view>
				</u-form-item>

				<u-form-item prop="price" label="团餐价" required borderBottom>
					<u-input type="digit" height="41" :clearable="false" 
						inputAlign="right"
						placeholder="请输入团餐价" 
						v-model.number="form.price"
						@input="onInput($event, 'price')"
					></u-input>
					<text slot="right" class="input-suffix">元</text>
				</u-form-item>
				
				<u-form-item prop="sellingPrice" label="售价" required :borderBottom="true">
					<u-input type="digit" height="41" :clearable="false" 
					 	inputAlign="right" placeholder="请输入商品售价"
						v-model.number="form.sellingPrice"
						@input="onInput($event, 'sellingPrice')"
					></u-input>
					<text slot="right" class="input-suffix">元</text>
				</u-form-item>
				
				<u-form-item prop="dailyStock" label="库存" required :borderBottom="true">
					<u-input type="number" height="41" :clearable="false" 
					 	inputAlign="right" placeholder="请输入每日库存"
						v-model="form.dailyStock"
					></u-input>
					<text slot="right" class="input-suffix">份</text>
				</u-form-item>
				<view class="tips">每日库存最大量的设置，当天售完后关闭该团餐</view>
			</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>
		<!-- 特色分类 -->
		<u-action-sheet :list="categoryList" v-model="showSpecial" @click="specialCategoryCallback"></u-action-sheet>
	</view>
</template>

<script>
import Upload from '@/components/upload/index.vue';
import configService from '@/common/service/config.service';
export default {
	components: {
		Upload,
	},
	data() {
			return {
				show: false,
				showSpecial: false,
				form: {
					name: '',
					category: '',
					categoryName: '',
					specialCategoryId: '',
					specialCategoryName: '',
					productImage: 'https://test.baoxianzhanggui.com/locallive-java/product/企业微信截图_1781494923590_1781494943931.png',
					detailImages: 'https://test.baoxianzhanggui.com/locallive-java/product/企业微信截图_1781494923590_1781494943931.png',
					price: '',
					sellingPrice: '',
					dailyStock:null,
					saleDays:''
				},
			categoryList:[],
			query: {},
			fileList: {
				cover: [],
				detail: [],
			},
			actionSheetList: [
				{
					text: '早餐',
					value: '1'
				},
				{
					text: '午餐',
					value: '2'
				},
				{
					text: '晚餐',
					value: '3'
				}
			],
			rules: {
				name: [
					{
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					}
				],
				category: [
					{
						required: true,
						message: '请选择商品分类',
						trigger: ['blur', 'change']
					}
				],
				specialCategoryId: [
					{
						required: true,
						message: '请选择特色分类',
						trigger: ['blur', 'change']
					}
				],
				price: [
					{
						required: true,
						type: 'number',
						message: '请输入团餐价格',
						trigger: ['blur', 'change']
					},
					{
						asyncValidator: (rule, value, callback) => {
							if (this.form.sellingPrice && value > this.form.sellingPrice) {
								callback(new Error('团餐价格不能大于商品售价'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					},
				],
				sellingPrice: [
					{
						required: true,
						type: 'number',
						message: '请输入商品售价',
						trigger: ['blur', 'change']
					},
					{
						asyncValidator: (rule, value, callback) => {
							if (this.form.price && value < this.form.price) {
								callback(new Error('商品售价不能小于团餐价格'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					},
				],
				productImage: [
					{
						required: true,
						message: '请上传商品封面图',
						trigger: ['blur', 'change']
					}
				],
				detailImages: [
					{
						required: true,
						message: '请上传商品详情图片',
						trigger: ['blur', 'change']
					}
				],
				dailyStock:[
					{
						required: true,
						type: 'number',
						message: '请填写库存',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	async onLoad(query) {
			
		if (query.id) {
			this.query = query;
		  await	this.getCategoryList()
			await this.getData();
		}
		// 清除
		uni.removeStorageSync('gm_goods');
		// 获取餐品分类
		this.getClassData();
		
	},
	onShow() {
		
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//获取特色分类
		getCategoryList(){
			this.$http.get('/groupmeal/gmSpecialCategory/listAll').then(res => {
				if (res.data.code === 200 && res.data.result) {
					this.categoryList = res.data.result.map(item => {
						return {
							text: item.categoryName,
							value: item.id 
						}
					})
				}
			})
		},
		// 编辑数据
		getData() {
			this.$http.get('/groupmeal/gmCustomerPackage/queryById', { params: { id: this.query.id } }).then(res => {
				if (res.data.code === 200) {
					let data = res.data.result;
					// 查找商品分类名称
					const categoryItem = this.actionSheetList.find(item => item.value == data.category);
					// 查找特色分类名称
					const specialCategoryItem = this.categoryList.find(item => item.value == data.specialCategoryId);
					console.log(specialCategoryItem)
					this.form = {
						...data,
						categoryName: categoryItem ? categoryItem.text : '',
						specialCategoryId: data.specialCategoryId+'',
						specialCategoryName: specialCategoryItem ? specialCategoryItem.text : ''
					};
					this.fileList = {
						cover: data.productImage.split(',').map(item => {
							return {
								url: item
							}
						}),
						detail: data.detailImages.split(',').map(item => {
							return {
								url: item
							}
						}),
					};
				}
			});
		},
		// 餐品分类
		getClassData() {
			this.$http.get('/groupmeal/gmMerchantPackage/getGroupMealCategory', {}).then(res => {
				if (res.data.code === 200) {
					this.actionSheetList = res.data.result.map(item => {
						return {
							text: item.name,
							value: item.code
						}
					})
				}
			});
		},
		// 商品分类选择回调
		actionSheetCallback(e) {
			this.form.category = e.value;
			this.form.categoryName = e.text;
		},
		// 特色分类选择回调
		specialCategoryCallback(e) {
			console.log(e)
			this.form.specialCategoryId = e.value;
			this.form.specialCategoryName = e.text;
		},
		// 价格数值处理
		onInput(value, key) {
			// 过滤所有非数字和非小数点的字符
			let filtered = value.replace(/[^\d.]/g, '');
			
			// 处理多个小数点（只保留第一个）
			filtered = filtered.replace(/^\./g, ''); // 移除开头的小数点（避免 ".123" 情况）
			filtered = filtered.replace(/\.{2,}/g, '.'); // 多个小数点只保留第一个
			
			// 分割整数和小数部分，限制小数最多两位
			const parts = filtered.split('.');
			if (parts.length > 1) {
				// 小数部分只保留前两位
				filtered = parts[0] + '.' + (parts[1].slice(0, 2) || '');
			}
			
			// 处理特殊情况（如 "000" 转为 "0"，但价格允许 "0.00"）
			// 若需要严格限制整数部分首位不为0（非必须，根据业务决定）：
			// if (parts.length === 1 && filtered.length > 1 && filtered[0] === '0') {
			//   filtered = filtered.replace(/^0+/, '0');
			// }
			
			// 更新绑定值
			this.$nextTick(() => {
				this.form[key] = !filtered ? filtered : filtered - 0;
			});
		},
		// 图片处理
		onUpload(event, type) {
			this.fileList[type] = event;
			this.form[type == 'cover' ? 'productImage' : 'detailImages'] = this.fileList[type].map(f => f.url).join();
		},
		// 下一步
		goNextStep() {
			// 表单校验
			this.$refs.uForm.validate(valid => {
				if (valid) {
					const { categoryName, specialCategoryName, ...form } = this.form;
					uni.setStorageSync('gm_goods', form);
					uni.navigateTo({
						url: '/pages/groupMeal/goods/form-day'
					});
				} 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;
		margin-bottom: 32rpx;
	}
}

.form-card {
	margin: 24rpx;
	padding: 16rpx 16rpx;
	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__label {
				font-weight: 600;
			}
			.u-form-item--left__content--required {
				color: #fa3534; 
				left: auto;
				right: 0;
			}
		}
	}

	.form-input {
		pointer-events: none;
	}
	::v-deep .uni-input-input:disabled {
		pointer-events: none;
	}

	.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 {
			display: none !important;
		}

		::v-deep .u-add-wrap {
			background: url('/static/groupMeal/upload.png') center center / 100% 100% no-repeat !important;
			border: none !important;
		}

		::v-deep .u-add-btn {
			display: none !important;
		}
	}
}
.tips{
	
	width: 100%;
	font-weight: 400;
	font-size: 20rpx;
	color: #999999;
	margin-top: 66rpx;
	text-align: center;
}

// 底部按钮
.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>