zh_order_food_xcx/components/en-utils/en-eva/en-eva.vue

<template>
	<view class="en-eva">
		<view class="en-eva-box" v-if="type">
			<view class="n-x">
				<image v-for="(item,i) in 5" :key="i"
				 src="@/static/img/index/xing-n.png" mode=""></image>
			</view>
			<view class="s-x">
				<image v-for="(item,i) in num" :key="i"
				 src="@/static/img/index/index-x.png" mode=""></image>
			</view>
		</view>
		
		<view class="en-eva-box" v-else>
			<view class="n-x">
				<image v-for="(item,i) in 5" :key="i" @click="select(i)"
				 src="@/static/img/index/xing-n.png" mode=""></image>
			</view>
			<view class="s-x">
				<image v-for="(item,i) in numList" :key="i" @click="select(i)"
				 src="@/static/img/index/index-x.png" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'en-eva',
		props:{
			// true 只做显示 false 可编辑
			type:{
				type: Boolean,
				default:true,
			},
			num:{
				type: Number,
				default:0,
			},
		},
		data(){
			return{
				numList:0,
			}
		},
		methods:{
			select(i){
				this.numList = i+1
				this.$nextTick();
				this.$emit('getEvaNum',this.numList)
			},
		},
	}
</script>

<style scoped lang="scss">
	.en-eva{
		width: 140rpx;
		height: 24rpx;
		.en-eva-box{
			width: 140rpx;
			height: 24rpx;
			position: relative;
			image{
				width: 19rpx;
				height: 19rpx;
				margin-right: 4rpx;
			}
			.n-x{
				display: flex;
				position: absolute;
				z-index: 1;
			}
			.s-x{
				display: flex;
				position: absolute;
				z-index: 2;
			}
		}
		
	}
</style>