当前位置: 首页 > news >正文

uniapp评价组件

在这里插入图片描述
在这里插入图片描述
组件目录 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不让点击

http://www.lqws.cn/news/457867.html

相关文章:

  • 音视频之H.264的可伸缩编码SVC
  • 1.21SQLCipher 简介
  • 鸿蒙uvc预览
  • .docx 和 .doc 都是 Word 文档格式的区别
  • HCIP-华为VRP系统基础
  • Sentinel实现原理
  • 使用docker-compose安装kafka
  • 计算机——硬盘分区和格式化
  • C++11 GC Interface:从入门到精通
  • docker基础入门于应用的实践
  • 使用 OpenCV 和传统机器学习实现工业开关状态识别
  • RAG 升级之路:如何让问答机器人真正“智能”起来
  • iOS应用启动时间优化:通过多工具协作提升iOS App性能表现
  • 异常的处理
  • 云计算与5G:如何利用5G网络优化云平台的性能
  • 芋道源码 - 添加反向代理, 通过公网域名访问静态资源图片
  • 【国产AI服务器】全国产PCIE5.0交换板,替代博通89104/89144,支持海光、龙芯等平台
  • 日常运维问题汇总-16
  • 西门子S7通信协议抓包分析应用
  • Tomcat项目本地部署(Servlet为例)
  • 详解Redis的热点key问题
  • linux线程同步
  • Rust 项目文档生成之旅:cargo doc
  • 字符编码(UTF-8,16,32 和GBK和ASCLL码)
  • AI Agent开发与安全
  • 数据结构-顺序表-求基数乘积
  • 《Go语言圣经》类型断言应用:高效类型判断
  • I排序算法.go
  • 如何轻松将照片从 iPhone 传输到 Android?
  • 【八股消消乐】Elasticsearch优化—检索Labubu