組件目錄 components/Evaluation.vue

<template><view class="evaluation-container"><!-- 綜合評價 --><view class="evaluation-item" @tap="parentTap"><text class="label label-1">綜合評價</text><view class="rating-icons"><imagev-for="(icon, index) in ratingIcons":key="index":class="['rating-icon', { active: icon.active }]":src="icon.active ? icon.selectedSrcDynamic : icon.unselectedSrc"@tap.stop="setRating(index)"/></view><text class="comment-text">{{ getCommentText(ratingIcons.filter(i => i.active).length) }}</text></view><!-- 描述相符 --><view class="evaluation-item" @tap="parentTap"><text class="label">描述相符</text><view class="heart-icons"><imagev-for="(heart, index) in descriptionHearts":key="index":class="['heart-icon', { active: heart.active }]":src="heart.active ? '/static/evaluate/heart-filled.png' : '/static/evaluate/heart-empty.png'"@tap.stop="setHeart(index, 'description')"/></view><text class="comment-text">{{ getCommentText(descriptionHearts.filter(i => i.active).length) }}</text></view><!-- 物流服務 --><view class="evaluation-item" @tap="parentTap"><text class="label">物流服務</text><view class="heart-icons"><imagev-for="(heart, index) in logisticsHearts":key="index":class="['heart-icon', { active: heart.active }]":src="heart.active ? '/static/evaluate/heart-filled.png' : '/static/evaluate/heart-empty.png'"@tap.stop="setHeart(index, 'logistics')"/></view><text class="comment-text">{{ getCommentText(logisticsHearts.filter(i => i.active).length) }}</text></view><!-- 服務態度 --><view class="evaluation-item" @tap="parentTap"><text class="label">服務態度</text><view class="heart-icons"><imagev-for="(heart, index) in serviceHearts":key="index":class="['heart-icon', { active: heart.active }]":src="heart.active ? '/static/evaluate/heart-filled.png' : '/static/evaluate/heart-empty.png'"@tap.stop="setHeart(index, 'service')"/></view><text class="comment-text">{{ getCommentText(serviceHearts.filter(i => i.active).length) }}</text></view></view>
</template><script>
export default {name: 'Evaluation',props: {defaultValues: {type: Object,default: () => ({})},readonly: {type: Boolean,default: false}},data() {return {ratingIcons: [{unselectedSrc: '/static/evaluate/face-very-bad-unselected.png',selectedSrc: '/static/evaluate/face-very-bad.png',selectedSrcDynamic: null,active: false},{unselectedSrc: '/static/evaluate/face-bad-unselected.png',selectedSrc: '/static/evaluate/face-bad.png',selectedSrcDynamic: null,active: false},{unselectedSrc: '/static/evaluate/face-neutral-unselected.png',selectedSrc: '/static/evaluate/face-neutral.png',selectedSrcDynamic: null,active: false},{unselectedSrc: '/static/evaluate/face-good-unselected.png',selectedSrc: '/static/evaluate/face-good.png',selectedSrcDynamic: null,active: false},{unselectedSrc: '/static/evaluate/face-very-good-unselected.png',selectedSrc: '/static/evaluate/face-very-good.png',selectedSrcDynamic: null,active: false}],descriptionHearts: Array(5).fill({ active: false }).map(h => ({ ...h })),logisticsHearts: Array(5).fill({ active: false }).map(h => ({ ...h })),serviceHearts: Array(5).fill({ active: false }).map(h => ({ ...h })),commentTexts: ['很差', '不滿意', '一般', '滿意', '超贊']};},mounted() {this.initEvaluation(this.defaultValues);},methods: {parentTap() {},setRating(index) {if (this.readonly) return;const selectedSrc = this.ratingIcons[index].selectedSrc;this.ratingIcons.forEach((icon, i) => {icon.active = i <= index;icon.selectedSrcDynamic = i <= index ? selectedSrc : null;});},setHeart(index, type) {if (this.readonly) return;const hearts = this[type + 'Hearts'];hearts.forEach((heart, i) => {heart.active = i <= index;});},getResult() {return {overall: this.ratingIcons.filter(i => i.active).length,description: this.descriptionHearts.filter(i => i.active).length,logistics: this.logisticsHearts.filter(i => i.active).length,service: this.serviceHearts.filter(i => i.active).length};},initEvaluation({ overall = 0, description = 0, logistics = 0, service = 0 }) {const selectedSrc = this.ratingIcons[overall - 1]?.selectedSrc || null;this.ratingIcons.forEach((icon, i) => {icon.active = i < overall;icon.selectedSrcDynamic = i < overall ? selectedSrc : null;});const setHearts = (arr, score) => {arr.forEach((item, i) => {item.active = i < score;});};setHearts(this.descriptionHearts, description);setHearts(this.logisticsHearts, logistics);setHearts(this.serviceHearts, service);},getCommentText(count) {if (count === 0) return '';return this.commentTexts[count - 1];}}
};
</script><style scoped>
.evaluation-container {/* padding: 20px; */
}
.evaluation-item {display: flex;align-items: center;margin-bottom: 28rpx;
}
.label{font-size: 28rpx;color: #2D2D2D;
}
.label-1{color: #0F1724;font-weight: 600;
}.rating-icons,
.heart-icons {display: flex;/* gap: 10px; */
}
.rating-icon,
.heart-icon {width: 60rpx;height: 60rpx;margin-left: 30rpx;
}/* 動畫效果 */
@keyframes bounce {0% {transform: scale(1);}40% {transform: scale(1.3);}100% {transform: scale(1);}
}.rating-icon.active,
.heart-icon.active {animation: bounce 0.3s ease;
}/* 文案樣式 */
.comment-text {margin-left: 24rpx;font-weight: 600;font-size: 28rpx;color: #0F1724;white-space: nowrap;
}
</style>

頁面使用

<template><view><Evaluationref="evaluation":default-values="{ overall: 0, description: 0, logistics: 0, service: 0 }":readonly="false"/><button @tap="submit">提交</button></view>
</template><script>
import Evaluation from '@/components/Evaluation.vue';export default {components: { Evaluation },methods: {submit() {const result = this.$refs.evaluation.getResult();console.log('提交評分結果', result);}}
};
</script>

readonly是否允許點擊一般詳情頁可以傳true不讓點擊