rate.vue
2.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<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: '/static/rate/star.png'
},
star_empty: {
//暗星星
type: [String],
default: '/static/rate/star_empty.png'
},
score: {
type: Array,
default: function() {
return ['1分', '2分', '3分', '4分', '5分']
}
},
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: 30
},
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);
},
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;
.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;
}
}
}
// .rate-media-cell
</style>