wangluohuoyun-huozhuapp/common/components/uni-rate.vue

<template>
	<view class="rate-media">
		<view class="rate-media-body">
			<view class="rate-media-cell"
				  v-for="(item,index) in max"
				  :key="index"
				  @click="clickStars(index)">
				<img :style="{'width': size + 'rpx','height':size+'rpx','margin':margin+'rpx'}" :src="valueSync>index?star_fill:star_empty"/>
			</view>
		</view>
		<view class="rate-media-info" v-if="is_score||is_attitude">
			<view v-if="is_score">{{is_infos_text()}}</view>
			<view v-if="is_attitude">{{rateScoreText}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'rate',
		props:{
			star_fill: {
				//亮星星
				type: [String],
				default: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/star.png'
			},
			star_empty: {
				//暗星星
				type: [String],
				default: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/star1.png'
			},
			score:{
				type:Array,
				default:function(){
					return ['极差','差','一般','较好','非常好']
				}
			},
			is_score:{
				type: [Boolean, String],
				default: false
			},
			attitude:{
				type: Array,
				default:function(){
					return ['非常不满意，各方面都很差', '不满意，比较差', '一般，还需改善', '比较满意，仍可改善', '非常满意,无可挑剔']
				}
			},
			is_attitude:{
				type: [Boolean, String],
				default: false
			},
			size: {
				// 星星的大小
				type: [Number, String],
				default: 48
			},
			value: {
				// 当前评分
				type: [Number, String],
				default: 0
			},
			max: {
				// 最大评分
				type: [Number, String],
				default: 5
			},
			disabled: {
				// 是否可点击
				type: [Boolean, String],
				default: false
			},
			margin: {
				// 星星的间距
				type: [Number, String],
				default: '0 5'
			},
		},
		data() {
			return {
				valueSync: 0,
				rateScoreText:"",
			};
		},
		created() {
			this.valueSync = Number(this.value);
		},
		mounted() {
			this.valueSync = Number(this.value);
		},
		
		watch: {
		　　value: {
		　　　　handler(newValue, oldValue) {
		　　　　　　//do ...
					this.valueSync = Number(this.value);
		　　　　},
		　　　　deep: true
		　　}
		},
		methods: {
			clickStars(i){
			  if (this.disabled) {
			  	return;
			  }
			  this.rateScoreText = this.attitude[i]||''
			  this.valueSync = i+1
			  this.$emit("change", {
			  	value: this.valueSync,
				attitude: this.attitude[i]||'',
				score: this.score[i]||''
			  });
			},
			is_infos_text(){
				return this.score[this.valueSync-1||0]||''
			},
			// is_score_text(index){
			// 	return this.score[index]
			// }
		}
	}
</script>

<style lang="scss">
	.rate-media{
		display: flex;
		line-height: 1;
		justify-content: space-between;
		.rate-media-body{
			display: flex;
			
		}
		.rate-media-info{
			display: flex;
			align-items: center;
			color: #999;
			font-size: 30rpx;
			view:nth-child(1){
				margin:0 20rpx;
			}
			
		}
	}
</style>