@jx3box/jx3box-common-ui 6.2.2 → 6.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/App.vue +1 -2
- package/src/author/AuthorFans.vue +44 -25
- package/src/author/AuthorFollow.vue +18 -3
- package/src/author/AuthorGift.vue +8 -6
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="c-author-fans">
|
|
3
|
-
|
|
2
|
+
<div class="c-author-fans" v-if="list && list.length">
|
|
3
|
+
<!--<div class="f-main-box">
|
|
4
4
|
<div class="f-left">
|
|
5
5
|
<div class="f-l-box"><div class="f-l-title">粉丝团</div></div>
|
|
6
6
|
</div>
|
|
@@ -19,15 +19,23 @@
|
|
|
19
19
|
<i class="el-icon-star-off"></i>
|
|
20
20
|
<span>粉丝榜</span>
|
|
21
21
|
</div>
|
|
22
|
-
<div class="f-avatar"
|
|
22
|
+
<div class="f-avatar">
|
|
23
23
|
<el-row :gutter="10">
|
|
24
24
|
<el-col :span="4" v-for="(item, index) in list" :key="item.pay_user_id">
|
|
25
|
-
<el-tooltip
|
|
26
|
-
|
|
25
|
+
<el-tooltip
|
|
26
|
+
class="item"
|
|
27
|
+
effect="dark"
|
|
28
|
+
:content="'累计打赏' + item.money.toString() + '金箔'"
|
|
29
|
+
placement="top"
|
|
30
|
+
v-if="index < 5"
|
|
31
|
+
>
|
|
32
|
+
<el-avatar class="u-avatar" shape="circle" :size="30" :src="showAvatar(item.pay_user.avatar)"
|
|
33
|
+
><i class="el-icon-s-custom"></i
|
|
34
|
+
></el-avatar>
|
|
27
35
|
</el-tooltip>
|
|
28
36
|
</el-col>
|
|
29
|
-
<el-col :span="4" v-if="list.length>5">
|
|
30
|
-
<el-avatar shape="circle" :size="30"
|
|
37
|
+
<el-col :span="4" v-if="list.length > 5">
|
|
38
|
+
<el-avatar class="u-avatar" shape="circle" :size="30">
|
|
31
39
|
<span class="f-avatar-num" v-if="list.length > 99">···</span>
|
|
32
40
|
<span class="f-avatar-num" v-else>+{{ list.length - 5 }}</span>
|
|
33
41
|
</el-avatar>
|
|
@@ -39,39 +47,48 @@
|
|
|
39
47
|
</template>
|
|
40
48
|
|
|
41
49
|
<script>
|
|
42
|
-
import User from '@jx3box/jx3box-common/js/user';
|
|
43
50
|
import { getFansList } from "../../service/author";
|
|
51
|
+
import { showAvatar } from "@jx3box/jx3box-common/js/utils";
|
|
44
52
|
export default {
|
|
45
|
-
name:
|
|
46
|
-
|
|
53
|
+
name: "AuthorFans",
|
|
54
|
+
props: {
|
|
55
|
+
uid: {
|
|
56
|
+
type: Number,
|
|
57
|
+
default: 0,
|
|
58
|
+
},
|
|
59
|
+
},
|
|
47
60
|
data() {
|
|
48
61
|
return {
|
|
49
|
-
list: []
|
|
62
|
+
list: [],
|
|
63
|
+
total: 0,
|
|
50
64
|
};
|
|
51
65
|
},
|
|
52
|
-
mounted() {
|
|
53
|
-
this.getData();
|
|
54
|
-
},
|
|
55
66
|
methods: {
|
|
56
67
|
getData() {
|
|
57
|
-
getFansList(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
this.list=data
|
|
61
|
-
}
|
|
68
|
+
getFansList(this.uid).then((res) => {
|
|
69
|
+
this.list = res.data.data.list || [];
|
|
70
|
+
this.total = res.data.data.totalUser || 0;
|
|
62
71
|
});
|
|
63
|
-
}
|
|
64
|
-
|
|
72
|
+
},
|
|
73
|
+
showAvatar,
|
|
74
|
+
},
|
|
75
|
+
watch: {
|
|
76
|
+
uid: {
|
|
77
|
+
immediate: true,
|
|
78
|
+
handler: function () {
|
|
79
|
+
this.getData();
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
},
|
|
65
83
|
};
|
|
66
84
|
</script>
|
|
67
85
|
|
|
68
86
|
<style lang="less" scoped>
|
|
69
|
-
|
|
70
87
|
.c-author-fans {
|
|
71
88
|
box-sizing: border-box;
|
|
72
89
|
// padding: 10px;
|
|
73
90
|
// background: #ffffff;
|
|
74
|
-
font-family:
|
|
91
|
+
font-family: "Microsoft YaHei";
|
|
75
92
|
font-style: normal;
|
|
76
93
|
// .h(133px);
|
|
77
94
|
.f-main-box {
|
|
@@ -149,10 +166,12 @@ export default {
|
|
|
149
166
|
font-weight: 700;
|
|
150
167
|
}
|
|
151
168
|
}
|
|
169
|
+
.u-avatar {
|
|
170
|
+
background-color: #d9d9d9;
|
|
171
|
+
}
|
|
152
172
|
.f-bottom {
|
|
153
|
-
.h(13px);
|
|
154
173
|
.mt(10px);
|
|
155
|
-
.fz(
|
|
174
|
+
.fz(12px, 14px);
|
|
156
175
|
font-weight: 400;
|
|
157
176
|
color: rgba(0, 0, 0, 0.5);
|
|
158
177
|
}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
{{ item.label }}
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
|
-
<el-button class="u-
|
|
29
|
+
<el-button class="u-trigger" size="mini" :type="btnType" slot="reference"
|
|
30
30
|
>{{ btnText }}
|
|
31
31
|
<!-- TODO:后续在粉丝榜中展示粉丝数 -->
|
|
32
32
|
<!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }}</span> -->
|
|
@@ -153,8 +153,23 @@ export default {
|
|
|
153
153
|
</script>
|
|
154
154
|
|
|
155
155
|
<style lang="less">
|
|
156
|
+
.c-author-follow {
|
|
157
|
+
.u-btn {
|
|
158
|
+
cursor: default;
|
|
159
|
+
&:hover {
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
background: #ecf5ff;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
/*.u-trigger {
|
|
165
|
+
&:hover {
|
|
166
|
+
cursor: default;
|
|
167
|
+
background: unset;
|
|
168
|
+
}
|
|
169
|
+
}*/
|
|
170
|
+
}
|
|
156
171
|
.c-author-follow-popover {
|
|
157
|
-
|
|
172
|
+
//.u-follow-popover {
|
|
158
173
|
&.el-popover {
|
|
159
174
|
min-width: 100px;
|
|
160
175
|
padding: 0;
|
|
@@ -170,7 +185,7 @@ export default {
|
|
|
170
185
|
}
|
|
171
186
|
}
|
|
172
187
|
}
|
|
173
|
-
}
|
|
188
|
+
//}
|
|
174
189
|
.u-follow-count {
|
|
175
190
|
margin-left: 5px;
|
|
176
191
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
@click="openGiftDialog"
|
|
8
8
|
:disabled="isSelf || !status"
|
|
9
9
|
:title="btnTitle"
|
|
10
|
+
plain
|
|
10
11
|
>赠礼</el-button
|
|
11
12
|
>
|
|
12
13
|
|
|
@@ -201,14 +202,15 @@ export default {
|
|
|
201
202
|
.c-author-gift {
|
|
202
203
|
.u-btn {
|
|
203
204
|
@color: #f9afd4;
|
|
204
|
-
|
|
205
|
-
color: #fff;
|
|
206
|
-
|
|
205
|
+
|
|
206
|
+
background-color: #fff;
|
|
207
|
+
color: darken(@color, 10%);
|
|
208
|
+
border-color: darken(@color, 10%);
|
|
207
209
|
|
|
208
210
|
&:hover {
|
|
209
|
-
background-color:
|
|
210
|
-
color:
|
|
211
|
-
border-color: darken(@color,
|
|
211
|
+
background-color: @color;
|
|
212
|
+
color: #fff;
|
|
213
|
+
border-color: darken(@color, 2%);
|
|
212
214
|
}
|
|
213
215
|
|
|
214
216
|
&.is-disabled {
|