uniapp 绘制五星评分 精确到半星

uniapp 绘制五星评分 精确到半星

1. 对比上一篇博客 这个很简单
2. 上组件

<template>
	<div :class="[imgType=='other'?'image-box':'image-box1']">
		<img :class="[imgType=='other'?'image':'image1']" v-for="(el,i) in value" :key="i" :src="el" alt="">
	</div>
</template>


<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1 // 总分5， 总分 100
			},
			score: {
				type: Number,
				default: 0 // 得分50，得分 100
			},
			imgType: {
				type: String,
				default: 'other' // wonder：奇观， other：其他
			}
		},
		data() {
			return {
				wonder: [
					'https://eshopfile.zhiyousx.com/173284619428810213.png',
					'https://eshopfile.zhiyousx.com/173284619428405733.png',
					'https://eshopfile.zhiyousx.com/173284619428491512.png'
				], //奇观
				other: [
					"https://eshopfile.zhiyousx.com/173284605868930990.png",
					"https://eshopfile.zhiyousx.com/173284605869004457.png",
					"https://eshopfile.zhiyousx.com/173284605868490597.png",
				], //其他
			};
		},
		computed: {
			// 转换得分
			value() {
				// 得分为0
				if (!this.score) {
					let newArr = []
					for (var i = 0; i < 5; i++) {
						newArr.push(this[this.imgType][2])
					}
					return newArr
				}
				// 得分不为0
				let value = this.type == 2 ? (this.score / 20).toFixed(1) : this.score;
				let arr = []
				// 空星 向后添加
				let empty = 5 - Math.ceil(value);
				for (let i = 1; i < 6; i++) {
					if (value >= i) {
						arr.push(this[this.imgType][0]); // 全星
					} else {
						if (value < i && Math.ceil(value) == i) {
							let num = this.getNumber(this.score) - 1
							console.log(num)
							arr.push(this[this.imgType][num]); // 半星

						} else {
							arr.push(this[this.imgType][2]); // 空星
						}
					}
				}
				return arr
			},
		},
		methods: {
			getNumber(input) {
				input = this.type == 2 ? (input / 20).toFixed(1) : input;
				const decimalPart = (input * 10 - Math.floor(input) * 10) / 10; // 获取小数部分
				if (decimalPart >= 0.1 && decimalPart <= 0.2) {
					return 3;
				} else if (decimalPart >= 0.3 && decimalPart <= 0.7) {
					return 2;
				} else if (decimalPart >= 0.8 && decimalPart <= 0.9) {
					return 1;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 2rpx;
	}
	.image1 {
		width: 28rpx;
		height: 28rpx;
		// margin-right: 2rpx;
	}
	.image-box {
		height: 30rpx;
		width: 130rpx;
		text-align: center;
	}
	.image-box1 {
		height: 30rpx;
		width: 140rpx;
		text-align: center;
	}
</style>

3. 组件使用

<template>
	<view class="external-box">
       <starRate :score="100" />
	</view>
</template>

<script>
	import starRate from "../components/starRateImg.vue";
	export default {
		components: {
			starRate,
		},
	};
</script>

<style lang="scss" scoped>

</style>

4. 该组件 判断规则 0-0.2 为 0星 0.3-0.7 半星 0.8-1 1星

对比上一个博客 该组件更简单 更直观 无适配问题 但精确度不够 可以增加图片 提高精度。

`