zhywpt-sp/subpackage/orders/components/evaluate-star.vue

<!-- 评价星级 -->
<template>
	<view class="evaluate-star">
		<view class="evaluate_title" v-if="title">{{title}}</view>
		<view class="star-row">
			<view class="star-box" v-for="(item,index) in total" @click="changeRate(index)" :key="index" :style="style">
				<image class="star-img" :src="`${$imgUrl}common/whole_star.png`" v-if="whole-0.5>index" />
				<image :class="['star-img',whole-0.5>index?'star-hide':'']" :src="`${$imgUrl}common/half_star.png`"
					v-if="half && whole>index" />
				<image class="star-img" :src="`${$imgUrl}common/empty_star.png`" v-if="whole<=index" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'

	const emits = defineEmits(['update:modelValue'])

	const props = defineProps({
		//双向绑定数据
		modelValue: {
			type: Number,
			default: 0
		},
		//评分总数
		total: {
			type: Number,
			default: 5
		},
		//评分名称
		title: {
			type: String,
			default: ''
		},
		//星星大小rpx
		size: {
			type: Number,
			default: 48
		}
	})

	const whole = ref(0)
	const half = ref(false)
	const sum = ref(0)
	let style = reactive({})

	onMounted(() => {
		style = {
			width: props.size + 'rpx',
			height: props.size + 'rpx',
		}
	})
	const changeRate = (e) => {
		var a = e++
		sum.value++

		if (sum.value === 1) {
			whole.value = e - 0.5
			half.value = true
			sum.value = -1
		} else {
			half.value = false
			whole.value = e++
		}
		emits('update:modelValue', whole.value)
	}
</script>

<style lang="scss">
	/* 点评星级 */
	.evaluate-star {
		width: 100%;
		display: flex;
		align-items: center;

		.evaluate_title {
			font-size: 28rpx;
			color: #333333;
			padding-right: 20rpx;
		}

		.star-row {
			display: flex;
			align-items: center;

			.star-box {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;

				.star-img {
					width: 100%;
					height: 100%;
				}

				.star-hide {
					display: none;
				}
			}
		}
	}
</style>