friend-list.vue
3.79 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
132
133
134
135
136
137
138
139
140
141
142
143
<template>
<div class="list-container">
<div class="header-bar">
<el-input v-model="search" size="mini" placeholder="筛选昵称" @keyup.enter.native="handleSearch">
</el-input>
<el-button icon="el-icon-search" size="mini" circle @click="handleSearch" title="搜索"/>
</div>
<el-collapse v-model="activeNames" class="friend-list-container">
<el-collapse-item title="用户组" name="user">
<friend-item v-for="friend in user.list" :key="friend.ems_id" :friend="friend"/>
<el-button :loading="user.loading" v-show="user.list.length < user.paginate.total" type="text"
style="width: 100%"
@click="$store.dispatch('getFriendList',{ type: 'user', page: user.paginate.page + 1, method:'append' })">
加载更多
</el-button>
</el-collapse-item>
<el-collapse-item title="策划组" name="scheme">
<friend-item v-for="friend in scheme.list" :key="friend.ems_id" :friend="friend"/>
<el-button :loading="scheme.loading" v-show="scheme.list.length < scheme.paginate.total" type="text"
style="width: 100%"
@click="$store.dispatch('getFriendList',{ type: 'scheme', page: scheme.paginate.page + 1, method:'append' })">
加载更多
</el-button>
</el-collapse-item>
<el-collapse-item title="管理组" name="admin">
<friend-item v-for="friend in admin.list" :key="friend.ems_id" :friend="friend"/>
<el-button :loading="admin.loading" v-show="admin.list.length < admin.paginate.total" type="text"
style="width: 100%"
@click="$store.dispatch('getFriendList',{ type: 'admin', page: admin.paginate.page + 1, method:'append' })">
加载更多
</el-button>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from 'vuex'
import FriendItem from './friend-item.vue'
export default {
components: {
FriendItem,
},
computed: {
search: {
set(val) {
this.$store.commit('updateFriendSearch', val)
},
get() {
return this.$store.state.friend.search
}
},
...mapState({
user(state) {
return state.friend.user
},
scheme(state) {
return state.friend.scheme
},
admin(state) {
return state.friend.admin
},
}),
},
data() {
return {
activeNames: [],
}
},
methods: {
handleSearch() {
this.$store.dispatch('getAllFriendList', {page: 1, size: 20})
// this.activeNames = ['user', 'scheme', 'admin']
}
},
}
</script>
<style lang="stylus" scoped>
.list-container
height 100%
width 100%
display flex
flex-direction column
.friend-list-container
border-top: unset
border-bottom unset
padding 0 15px
overflow-y: scroll
height: 100%
>>> .el-collapse-item
justify-content: center
align-items: center
.el-collapse-item__header
background-color transparent !important
border-bottom: unset
color #f7f7f8
.el-collapse-item__wrap
background-color transparent !important
border-bottom: unset
.el-collapse-item__content
padding-bottom 0
.header-bar
display: flex;
flex-shrink 0
height 50px
border-bottom 1px solid $background-deep-dark
padding 10px 10px 10px 20px
>>> .el-button
color $first
border none
background-color $deep-background !important
>>> .el-input
width 100%
margin-right 10px
input
color $first
border none
border-radius 30px
background-color $deep-background !important
&::placeholder
color $font-dark
.el-icon-search
color $font-dark
&:hover
transform: rotate(360deg);
color $light-primary
</style>