点我扫二维码，查看demo
# RateModule 评分业务组件模板
# 注意
使用当前代码时，请先引入rate组件。
# 代码演示
# 食谱列表
<template>
<div class="demo-list">
<div class="panel">
<h4>食谱列表</h4>
<div class="demo-panel demo-layout">
<div class="left-box">
<img src="../../assets/image/example-bg.jpg" />
</div>
<div class="right-box">
<div class="right-top">
<h5 class="title">红烧牛肉</h5>
<mx-rate touchabled allow-half :size="16" :count="4" v-model="value1"></mx-rate>
<span class="rate">{{value1}}</span>
</div>
<div class="right-footer">
<img src="../../assets/image/icon-shop.png" style="width: 20px; border-radius: 20px"/>
<span>广东食神本神</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: 3,
};
},
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #F9F9F9;
font-size: 12px;
overflow-y: auto;
.panel{
background: #fff;
padding-bottom: 20px;
margin-bottom: 0px;
}
.demo-panel {
padding-left: 10px;
padding-right: 10px;
}
.demo-layout{
display: flex;
flex-direction: row;
position: relative;
.left-box{
width: 156px;
height: 106px;
border-radius: 8px;
opacity: 0.5;
margin-right: 20px;
img {
border-radius: 8px;
width: 100%;
}
}
.title{
font-size: 16px;
line-height: 21px;
font-weight: bold;
padding: 10px 0;
}
.rate {
font-size: 14px;
color: #000;
padding-left: 5px;
}
.right-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.right-footer{
margin-bottom: 5px;
line-height: 21px;
display: flex;
align-items: center;
img{
border-radius: 20px;
}
span {
font-size: 11px;
color: #8A8A8F;
padding-left: 5px;
}
}
}
h4 {
padding: 20px 10px;
font-size: 16px;
font-weight: bold;
}
}
</style>
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
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
# 食谱评分
<template>
<div class="demo-list">
<div class="panel">
<h4>食谱评分</h4>
<div class="demo-panel">
<div class="net-rate-box">
<div class="rate-top">
<span>全网评分</span>
<mx-rate readonly size="small" v-model="value" :count="5" />
<span>{{value}}</span>
</div>
<span>5.8万个评分</span>
</div>
<div class="my-rate-box">
<h4>我的评分</h4>
<p>为你喜爱的食谱打个分吧</p>
<mx-rate touchabled allow-half :count="5" v-model="value2" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
value2: 4.0,
};
},
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #F9F9F9;
font-size: 12px;
overflow-y: auto;
.panel{
background: #fff;
padding-bottom: 20px;
margin-bottom: 0px;
}
.demo-panel {
padding-left: 10px;
padding-right: 10px;
}
.net-rate-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
span{
font-size: 14px;
}
.rate-top>span{
padding-right: 15px;
}
.rate-top:last-child{
padding-right: 5px;
}
}
.net-rate-box>span{
font-size: 14px;
color: #C7C7CC;
}
.my-rate-box{
background: #F9F9F9;
border-radius: 8px;
height: 130px;
width: 100%;
text-align: center;
h4 {
padding-top: 24px;
padding-bottom: 12px;
}
p{
text-align: center;
margin-bottom: 15px;
color: #8A8A8F;
}
}
h4 {
padding: 20px 10px;
font-size: 16px;
font-weight: bold;
}
}
</style>
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
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
# 服务评分
<template>
<div class="demo-list">
<div class="panel panel-layout serve-rate-box">
<h4>服务评分</h4>
<div>
<div class="demo-panel">
<h4>请对本次服务评分</h4>
<mx-rate allow-half touchabled size="large" v-model="value3" />
<p>{{value3}}星 满意</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value3: 3,
};
},
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #F9F9F9;
font-size: 12px;
overflow-y: auto;
.panel{
background: #fff;
padding-bottom: 20px;
margin-bottom: 0px;
}
.demo-panel {
padding-left: 10px;
padding-right: 10px;
}
.panel-layout {
background: #F9F9F9;
.demo-panel {
background: #fff;
border-radius: 8px;
margin-left: 6px;
margin-right: 6px;
}
p{
color: #8A8A8F;
}
}
.rate-list{
padding-bottom: 20px;
.rate-item {
display: flex;
align-items: center;
margin-bottom: 20px;
span{
padding: 0 16px;
color:#666666
}
}
}
h4 {
padding: 20px 10px;
font-size: 16px;
font-weight: bold;
}
}
</style>
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
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
# 专业度评分
<template>
<div class="demo-list">
<div class="panel panel-layout">
<h4>专业度评分</h4>
<div class="demo-panel">
<h4>专业度评价</h4>
<p class="tip">您的评价有助于我们提供更好的服务</p>
<div class="rate-list">
<template v-for="(item, index) of proRateList">
<div class="rate-item">
<span>{{item.rateConent}}</span>
<mx-rate allow-half touchabled size="22" :touchable="true" v-model="item.rateValue" @change="getRateResult(item)" />
<span>{{ item.rateResult }}</span>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
proRateList: [
{rateConent: '服务形象', rateValue: 2.5, rateResult: '还行'},
{rateConent: '服务时效', rateValue: 4, rateResult: '满意'},
{rateConent: '服务技能', rateValue: 4, rateResult: '满意'},
{rateConent: '服务态度', rateValue: 5, rateResult: '无可挑剔'},
{rateConent: '工具使用', rateValue: 5, rateResult: '无可挑剔'},
]
};
},
methods: {
getRateResult(item) {
let result = '';
let rateNum = item.rateValue;
console.log(rateNum)
if (rateNum > 0 && rateNum < 2.5){
result = '不满意'
} else if (4 > rateNum && rateNum >= 2.5) {
result = '还行'
} else if (rateNum >= 4 && rateNum < 5) {
result = '满意'
} else if (rateNum === 5) {
result = '无可挑剔';
} else {
result = "暂未评价";
}
item.rateResult = result;
}
}
}
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #F9F9F9;
font-size: 12px;
overflow-y: auto;
.panel{
background: #fff;
padding-bottom: 20px;
margin-bottom: 0px;
}
.demo-panel {
padding-left: 10px;
padding-right: 10px;
}
.panel-layout {
background: #F9F9F9;
.demo-panel {
background: #fff;
border-radius: 8px;
margin-left: 6px;
margin-right: 6px;
}
p{
color: #8A8A8F;
}
}
.rate-list{
padding-bottom: 20px;
padding: 0 10px;
.rate-item {
display: flex;
align-items: center;
margin-bottom: 20px;
color:#666666;
::v-deep .mx-rate {
padding-left: 16px;
padding-right: 16px;
}
}
}
h4 {
padding: 20px 10px;
font-size: 16px;
font-weight: bold;
}
}
</style>
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
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