# 11.3 评分(Rate)

1、列表中仅展示用
2、可操作给与评分;例如食谱食物等



# 基本样式

分为大(32px)、中(28px)、小(16px)三个尺寸
1、小号16px:只可查看无点击操作功能;多用于搜索结果等列表中展示
2、中号28px:可点击操作;多用于穿插展示的评分模快;
3、大号32px:可点击操作;多用于重点展示的评分页面


# 示例

<template>
  <div class="wrapper">
    <dof-minibar title="评价星星组件"> </dof-minibar>
    <SwitchTheme />
    <scroller class="scroller">
      <div class="container">
        <text class="text">各评分等级-小号16px</text>
        <div v-for="i in 11" :key="i + 20" class="rate">
          <dof-rate :cur-score="(i - 1) * 0.5" size="small" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <text class="text">各评分等级-中号28px</text>
        <div v-for="i in 11" :key="i + 100" class="rate">
          <dof-rate :cur-score="(i - 1) * 0.5" size="mid" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <text class="text">各评分等级-大号32px</text>
        <div v-for="i in 11" :key="i" class="rate">
          <dof-rate :cur-score="(i - 1) * 0.5" size="big" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <text class="text">组件支持</text>
        <div class="suport-text-div">
          <text class="suport-text">1、支持可操作和不可操作只展示的两种情况;</text>
          <text class="suport-text">2、支持按住屏幕左右滑动;</text>
          <text class="suport-text">3、左右滑动支持半颗心; 另外是否需要半颗心支持可选择;</text>
        </div>
        <!-- <text class="text">支持半星操作</text>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" size="small" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" size="mid" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <text class="text">不支持半星操作</text>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" size="small" :allow-half="false" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" size="mid" :allow-half="false" @setScore="emitSetTimeScore"></dof-rate>
        </div>
        <div class="star-rate">
          <dof-rate :cur-score="timeScore" :allow-half="false" @setScore="emitSetTimeScore"></dof-rate>
        </div> -->

        <text class="text">应用示例-食谱列表</text>
        <div class="itemList">
          <image class="img" :src="food"></image>
          <div class="rightContent">
            <div>
              <text class="food-title">烤牛肉</text>
              <div style="flex-direction: row; margin-top:16px">
                <dof-rate :curScore="2.5" size="small"></dof-rate>
                <text class="food-rate">2.5</text>
              </div>
            </div>
            <div class="bottomTitle">
              <image class="simg" :src="food"></image>
              <text style="font-size:24px; color:rgba(255,255,255,0.40); margin-left:8px">广东食神本神</text>
            </div>
          </div>
        </div>

        <text class="text">应用示例-食谱评分</text>
        <div style="flex-direction:row; justify-content: space-between; align-items:center;">
          <div style="flex-direction:row; justify-content: flex-start; align-items:center;">
            <text class="food-rate2">全网评分</text>
            <dof-rate :curScore="2.5" size="small"></dof-rate>
            <text class="food-rate">2.5</text>
          </div>
          <text class="food-rate" style="color: rgba(255,255,255,0.20);margin-right: 62px;">5.8万个评分</text>
        </div>
        <div class="bottomContent">
          <text class="food-text" style="margin-bottom:16px">我的评分</text>
          <text style="font-size:24px; color: rgba(255,255,255,0.40);margin-bottom:32px;">为你喜爱的食谱打个分吧</text>
          <dof-rate cur-score="4" size="mid"></dof-rate>
        </div>

        <text class="text">应用示例-服务评分</text>
        <div class="bottomContent">
          <text class="food-text" style="margin-bottom:28px">请对本次服务打分</text>
          <dof-rate :cur-score="serviceScore" size="big" @setScore="emitSetServiceScore"></dof-rate>
          <text style="font-size:24px; color:rgba(255,255,255,0.40);margin-top:16px;"
            >{{ serviceScore }}星 {{ serviceScore | formatStarDesc }}</text
          >
        </div>

        <text class="text">应用示例-专业度评分</text>
        <div class="bottomContent ai-start">
          <text style="font-size:32px;color:rgba(255, 255, 255, 0.8)">专业度评价</text>
          <text style="font-size:24px; color:#8A8A8A; margin-bottom:32px;margin-top:20px;"
            >您的评价有助于我们提供更好的服务</text
          >
          <div class="scoreItem" v-for="(item, index) in serviceType" :key="index">
            <text style="font-size:24px; color:#666666; margin-right:16px">{{ item.text }}</text>
            <dof-rate
              :cur-score="item.score"
              size="big"
              :allow-half="false"
              @setScore="emitSetListScore($event, index)"
            ></dof-rate>
            <text style="font-size:24px; color:#8A8A8F; margin-left:16px">{{ item.score | formatStarDesc }}</text>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #131415;
  font-family: PingFangSC-Regular;
}
.suport-text-div {
  margin: 32px;
  padding: 32px;
  background: rgba(177, 193, 234, 0.05);
}
.suport-text {
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 48px;
}
.scroller {
  flex: 1;
}
.container {
  padding-bottom: 120px;
}

.rate {
  margin-left: 32px;
}
.star-rate {
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 32px;
}

.text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 100px;
  margin-bottom: 36px;
  margin-left: 32px;
}
.itemList {
  flex-direction: row;
  margin-left: 32px;
  margin-right: 32px;
  background: rgba(177, 193, 234, 0.05);
}
.rightContent {
  flex-direction: column;
  justify-content: space-between;
  margin-left: 32px;
}
.food-title {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 44px;
}
.food-rate {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
}
.food-rate2 {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 64px;
}
.food-text {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
}
.img {
  width: 312px;
  height: 240px;
  background: rgba(255, 255, 255, 0.1);
}
.simg {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
}
.bottomTitle {
  flex-direction: row;
  align-items: center;
  margin-bottom: 28px;
}
.bottomContent {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 688px;
  /* height: 240px; */
  margin-left: 32px;
  margin-right: 30px;
  margin-top: 20px;
  padding-top: 44px;
  padding-bottom: 32px;
  background-color: rgba(177, 193, 234, 0.05);
}

.serviceContent {
  width: 686px;
  height: 250px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.scoreList {
  flex-direction: column;
  justify-content: space-around;
  width: 686px;
  height: 568px;
  margin-left: 32px;
}
.scoreItem {
  flex-direction: row;
  align-items: center;
}
.ai-start {
  align-items: flex-start;
}
</style>

<script>
import Category from 'src/_mods/catalog'
import Title from 'src/_mods/title.vue'
import { DofMinibar, DofRate } from 'dolphin-weex-ui'
import SwitchTheme from 'src/components/SwitchTheme.vue'
export default {
  components: { DofMinibar, Category, Title, DofRate, SwitchTheme },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    timeScore: 3.6,
    food: '../../assets/image/platform/platform-search/food2.jpg',
    serviceScore: 3.5,
    serviceType: [
      { text: '服务形象', score: 3 },
      { text: '服务时效', score: 3 },
      { text: '服务技能', score: 3 },
      { text: '服务态度', score: 3 },
      { text: '工具使用', score: 3 }
    ]
  }),
  methods: {
    minibarRightButtonClick() {
      const home = 'index.js'
      this.$MID.platform.name.toLowerCase() !== 'web' && this.$MID.route.push(home)
    },
    back() {},
    emitSetTimeScore(data) {
      let score = data.score
      let type = data.type
      if (type == 'touchMove') {
        //滑动过程中只更新点了星星数
        this.timeScore = score
      } else {
        //点击且星星数变化或者滑动结束,才更新星星和标签
        if ((type == 'click' && score != this.timeScore) || type == 'touchEnd') {
          this.timeScore = score
        }
      }
    },

    emitSetServiceScore(data) {
      let score = data.score
      let type = data.type
      if (type == 'touchMove') {
        //滑动过程中只更新点了星星数
        this.serviceScore = score
      } else {
        //点击且星星数变化或者滑动结束,才更新星星和标签
        if ((type == 'click' && score != this.serviceScore) || type == 'touchEnd') {
          this.serviceScore = score
        }
      }
    },

    emitSetListScore(data, index) {
      let score = data.score
      let type = data.type
      if (type == 'touchMove') {
        //滑动过程中只更新点了星星数
        this.serviceType[index].score = score
      } else {
        //点击且星星数变化或者滑动结束,才更新星星和标签
        if ((type == 'click' && score != this.serviceType[index].score) || type == 'touchEnd') {
          this.serviceType[index].score = score
        }
      }
    }
  },
  filters: {
    formatStarDesc(score) {
      if (!score) return ''
      let desc = ''
      let starNum = score
      if (starNum == 5) {
        desc = '无可挑剔'
      } else if (starNum == 4 || starNum == 4.5) {
        desc = '满意'
      } else if (starNum >= 2.5 && starNum <= 3.5) {
        desc = '还行'
      } else if (starNum >= 1.5 && starNum <= 2) {
        desc = '不满意'
      } else {
        desc = '大失所望'
      }
      return desc
    }
  }
}
</script>


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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332

# Attributes

Prop Type Required Default Description
cur-score Number Y false 评分数据, 注Attention
disabled Boolean N - 是否禁用评分操作,默认false
size String N big 评分尺寸,有big/mid/small
allow-half Boolean N - 是否允许半星选择和显示

# Events

事件名称 说明 回调参数
setScore 滑动或者选择star后事件 e, e.score, e.type
点我扫二维码 查看demo
Last Updated: 3/15/2024, 3:36:46 PM