crmeb/app/pages/supply_chain/evaluation/index.vue

<template>
	<view class="evaluation-page">
		<view class="content">
			<!-- 食材选择 -->
			<view class="food-section">
				<view class="section-title">选择食材</view>
				<view class="food-list">
					<view class="food-item" v-for="(item, index) in foodList" :key="index" @click="selectFood(item)">
						<text class="food-name">{{ item.name }}</text>
						<text class="food-date">{{ item.date }}</text>
						<text class="iconfont" :class="selectedFood && selectedFood.id === item.id ? 'icon-duihao' : ''"></text>
					</view>
				</view>
			</view>
			
			<!-- 评分区域 -->
			<view class="rating-section" v-if="selectedFood">
				<view class="section-title">评分</view>
				<view class="rating-box">
					<view class="rating-item">
						<text class="rating-label">质量评分：</text>
						<view class="stars">
							<text class="iconfont" v-for="i in 5" :key="i" :class="i <= qualityRating ? 'icon-xingxing1' : 'icon-xingxing'" @click="qualityRating = i"></text>
						</view>
					</view>
					<view class="rating-item">
						<text class="rating-label">口感评分：</text>
						<view class="stars">
							<text class="iconfont" v-for="i in 5" :key="i" :class="i <= tasteRating ? 'icon-xingxing1' : 'icon-xingxing'" @click="tasteRating = i"></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评价意见 -->
			<view class="comment-section" v-if="selectedFood">
				<view class="section-title">评价意见</view>
				<textarea v-model="comment" placeholder="请输入您的评价意见..." maxlength="200"></textarea>
				<text class="count">{{ comment.length }}/200</text>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-section" v-if="selectedFood">
				<view class="submit-btn" @click="submitEvaluation">提交评价</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedFood: null,
			qualityRating: 0,
			tasteRating: 0,
			comment: '',
			foodList: [
				{ id: 1, name: '有机蔬菜', date: '2026-03-07' },
				{ id: 2, name: '新鲜水果', date: '2026-03-07' },
				{ id: 3, name: '肉类食材', date: '2026-03-06' },
				{ id: 4, name: '海鲜产品', date: '2026-03-06' }
			]
		};
	},
	methods: {
		selectFood(food) {
			this.selectedFood = food;
			this.qualityRating = 0;
			this.tasteRating = 0;
			this.comment = '';
		},
		submitEvaluation() {
			if (this.qualityRating === 0 || this.tasteRating === 0) {
				uni.showToast({
					title: '请完成评分',
					icon: 'none'
				});
				return;
			}
			
			// 模拟提交评价
			uni.showToast({
				title: '评价提交成功',
				icon: 'success'
			});
			
			// 重置表单
			setTimeout(() => {
				this.selectedFood = null;
				this.qualityRating = 0;
				this.tasteRating = 0;
				this.comment = '';
			}, 1500);
		}
	}
};
</script>

<style lang="scss">
.evaluation-page {
	.content {
		padding: 30rpx;
		
		.food-section {
			margin-bottom: 40rpx;
			
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				color: #333;
			}
			
			.food-list {
				.food-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 10rpx;
					padding: 20rpx;
					margin-bottom: 15rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					
					.food-name {
						flex: 1;
						font-size: 26rpx;
						color: #333;
					}
					
					.food-date {
						font-size: 22rpx;
						color: #999;
						margin-right: 20rpx;
					}
					
					.iconfont {
						font-size: 28rpx;
						color: #ddd;
					}
					
					.icon-duihao {
						color: #409EFF;
					}
				}
			}
		}
		
		.rating-section {
			margin-bottom: 40rpx;
			
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				color: #333;
			}
			
			.rating-box {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 30rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				
				.rating-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.rating-label {
						width: 160rpx;
						font-size: 26rpx;
						color: #666;
					}
					
					.stars {
						flex: 1;
						
						.iconfont {
							font-size: 36rpx;
							margin-right: 10rpx;
							color: #ddd;
						}
						
						.icon-xingxing1 {
							color: #FFD700;
						}
					}
				}
			}
		}
		
		.comment-section {
			margin-bottom: 40rpx;
			
			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				color: #333;
			}
			
			textarea {
				width: 100%;
				height: 200rpx;
				border: 1rpx solid #ddd;
				border-radius: 10rpx;
				padding: 20rpx;
				font-size: 24rpx;
				background-color: #fff;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			}
			
			.count {
				display: block;
				text-align: right;
				font-size: 20rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
		
		.submit-section {
			.submit-btn {
				height: 80rpx;
				background-color: #409EFF;
				color: #fff;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 600;
				box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
			}
		}
	}
}
</style>