ykz-wx/pages/index/CfAppraiseStar.vue

<template>
	<view class="appraise-star">
		<view class="appraise-star-title">{{title}}</view>
		<view class="appraise-star-star" v-for="item in 5" :key="item" @click="onClickStar(item)">
			<text class="iconfont" :class="item<=starval?'is-active':''">&#xe652;</text>
		</view>
		<view class="appraise-star-text" v-if="starText&&starval">{{starText[starval]}}</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted, computed } from 'vue'

	const emit = defineEmits(['update:starval'])
	const props = defineProps({
		isEdit: Boolean,
		title: String,
		starval: Number,
		starText: {
			type: Array as PropType<string[]>
		},
	})

	const starval = computed({
		get() {
			return props.starval
		},
		set(val) {
			emit('update:starval', val)
		},
	})

	const onClickStar = (cur : number) => {
		if (props.isEdit) return
		starval.value = cur
		console.log("curVal.value", starval.value)
	}

	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	.appraise-star {
		@include flex;
		margin-top: 32rpx;

		.appraise-star-star {
			margin-left: 24rpx;

			.iconfont {
				font-size: 48rpx;
				background: linear-gradient(180deg, #B3B5B9 0%, #899AB9 100%);
				background-clip: text;
				text-fill-color: transparent;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				&.is-active {
					background: linear-gradient(180deg, #46ACFF 0%, $uni-color-primary 100%);
					background-clip: text;
					text-fill-color: transparent;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.appraise-star-text {
			margin-left: 24rpx;
		}
	}
</style>