aiot-app/pages/salesServiceManagement/workOrder/components/forWork/RatingComponent.vue

<template>
	<view class="rating-single">
		<text class="rating-label" v-if="label">{{ label }}</text>

		<view class="stars" @click.stop="handleClick">
			<!-- 修复：v-for 循环从 0 到 maxScore，共显示 maxScore 个星星 -->
			<text class="star" :class="{ active: currentScore >= index }" v-for="index in maxScore" :key="index"
				:data-index="index">★</text>
		</view>

		<text class="rating-text" v-if="showText">{{ getRatingText(currentScore) }}</text>
	</view>
</template>

<script>
	export default {
		name: "RatingSingle",
		model: {
			prop: "value",
			event: "change"
		},
		props: {
			label: {
				type: String,
				default: ""
			},
			value: {
				type: Number,
				default: 0
			},
			maxScore: {
				type: Number,
				default: 5
			},
			showText: {
				type: Boolean,
				default: false
			},
			textMap: {
				type: Array,
				default () {
					return ['非常不满意', '不满意', '一般', '满意', '非常满意'];
				}
			}
		},
		computed: {
			currentScore() {
				return Math.min(Math.max(this.value, 0), this.maxScore);
			}
		},
		methods: {
			getRatingText(score) {
				console.log(score, 'score')
				const index = Math.floor(score) - 1;
				return this.textMap[index] || "";
			},
			handleClick(e) {
				const target = e.target;
				const score = parseInt(target.dataset.index);

				if (!isNaN(score) && score >= 1 && score <= this.maxScore) {
					this.$emit("change", score);
				}
			}
		}
	};
</script>

<style scoped>
	.rating-single {
		display: flex;
		align-items: center;
		margin: 10px 0;
	}

	.rating-label {
		width: 80px;
		text-align: right;
		margin-right: 10px;
		color: #333;
	}

	.stars {
		display: flex;
		cursor: pointer;
	}

	.star {
		font-size: 20px;
		color: #e6e6e6;
		margin-right: 3px;
		transition: color 0.2s;
	}

	.star.active {
		/* color: #ffd700; */
		color: rgb(255, 202, 62);
	}

	.rating-text {
		margin-left: 8px;
		color: #666;
	}
</style>