更新
Showing
6 changed files
with
141 additions
and
33 deletions
This diff is collapsed.
Click to expand it.
| ... | @@ -34,16 +34,19 @@ export default { | ... | @@ -34,16 +34,19 @@ export default { |
| 34 | </script> | 34 | </script> |
| 35 | 35 | ||
| 36 | <style lang="stylus" scoped> | 36 | <style lang="stylus" scoped> |
| 37 | .avatar | ||
| 38 | height 48px | ||
| 39 | width 48px | ||
| 40 | |||
| 41 | |||
| 37 | .friend-item-container | 42 | .friend-item-container |
| 38 | color #f7f7f8 | 43 | color #f7f7f8 |
| 44 | padding 10px 15px | ||
| 39 | 45 | ||
| 40 | :hover | 46 | :hover |
| 41 | background-color #404953 | 47 | background-color #404953 |
| 42 | cursor pointer | 48 | cursor pointer |
| 43 | 49 | ||
| 44 | .friend-list | ||
| 45 | padding 10px 15px | ||
| 46 | |||
| 47 | .friend-avatar | 50 | .friend-avatar |
| 48 | height 48px | 51 | height 48px |
| 49 | width 48px | 52 | width 48px | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="list-container"> | 2 | <div class="list-container"> |
| 3 | <div class="header-bar"> | 3 | <div class="header-bar"> |
| 4 | <el-input v-model="select" size="mini" placeholder="筛选昵称" prefix-icon="el-icon-search"/> | 4 | <el-input v-model="search" size="mini" placeholder="筛选昵称" @keyup.enter.native="handleSearch"> |
| 5 | </el-input> | ||
| 6 | <el-button icon="el-icon-search" size="mini" circle @click="handleSearch" title="搜索"/> | ||
| 5 | </div> | 7 | </div> |
| 6 | <el-collapse v-model="activeNames" class="friend-list-container"> | 8 | <el-collapse v-model="activeNames" class="friend-list-container"> |
| 7 | <el-collapse-item title="用户组" name="user"> | 9 | <el-collapse-item title="用户组" name="user"> |
| 8 | <friend-item v-for="friend in userList" :key="friend.ems_id" :friend="friend"/> | 10 | <friend-item v-for="friend in user.list" :key="friend.ems_id" :friend="friend"/> |
| 11 | <el-button :loading="user.loading" v-show="user.list.length < user.paginate.total" type="text" | ||
| 12 | style="width: 100%" | ||
| 13 | @click="$store.dispatch('getFriendList',{ type: 'user', page: user.paginate.page + 1, method:'append' })"> | ||
| 14 | 加载更多 | ||
| 15 | </el-button> | ||
| 9 | </el-collapse-item> | 16 | </el-collapse-item> |
| 10 | <el-collapse-item title="策划组" name="scheme"> | 17 | <el-collapse-item title="策划组" name="scheme"> |
| 11 | <friend-item v-for="friend in schemeList" :key="friend.ems_id" :friend="friend"/> | 18 | <friend-item v-for="friend in scheme.list" :key="friend.ems_id" :friend="friend"/> |
| 19 | <el-button :loading="scheme.loading" v-show="scheme.list.length < scheme.paginate.total" type="text" | ||
| 20 | style="width: 100%" | ||
| 21 | @click="$store.dispatch('getFriendList',{ type: 'scheme', page: scheme.paginate.page + 1, method:'append' })"> | ||
| 22 | 加载更多 | ||
| 23 | </el-button> | ||
| 12 | </el-collapse-item> | 24 | </el-collapse-item> |
| 13 | <el-collapse-item title="管理组" name="admin"> | 25 | <el-collapse-item title="管理组" name="admin"> |
| 14 | <friend-item v-for="friend in adminList" :key="friend.ems_id" :friend="friend"/> | 26 | <friend-item v-for="friend in admin.list" :key="friend.ems_id" :friend="friend"/> |
| 27 | <el-button :loading="admin.loading" v-show="admin.list.length < admin.paginate.total" type="text" | ||
| 28 | style="width: 100%" | ||
| 29 | @click="$store.dispatch('getFriendList',{ type: 'admin', page: admin.paginate.page + 1, method:'append' })"> | ||
| 30 | 加载更多 | ||
| 31 | </el-button> | ||
| 15 | </el-collapse-item> | 32 | </el-collapse-item> |
| 16 | </el-collapse> | 33 | </el-collapse> |
| 17 | </div> | 34 | </div> |
| ... | @@ -27,28 +44,37 @@ export default { | ... | @@ -27,28 +44,37 @@ export default { |
| 27 | FriendItem, | 44 | FriendItem, |
| 28 | }, | 45 | }, |
| 29 | computed: { | 46 | computed: { |
| 47 | search: { | ||
| 48 | set(val) { | ||
| 49 | this.$store.commit('updateFriendSearch', val) | ||
| 50 | }, | ||
| 51 | get() { | ||
| 52 | return this.$store.state.friend.search | ||
| 53 | } | ||
| 54 | }, | ||
| 30 | ...mapState({ | 55 | ...mapState({ |
| 31 | adminList(state) { | 56 | user(state) { |
| 32 | const list = state.friend.adminList || [] | 57 | return state.friend.user |
| 33 | return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1) | ||
| 34 | }, | 58 | }, |
| 35 | userList(state) { | 59 | scheme(state) { |
| 36 | const list = state.friend.userList || [] | 60 | return state.friend.scheme |
| 37 | return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1) | 61 | }, |
| 62 | admin(state) { | ||
| 63 | return state.friend.admin | ||
| 38 | }, | 64 | }, |
| 39 | schemeList(state) { | ||
| 40 | const list = state.friend.schemeList || [] | ||
| 41 | return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1) | ||
| 42 | } | ||
| 43 | }), | 65 | }), |
| 44 | }, | 66 | }, |
| 45 | data() { | 67 | data() { |
| 46 | return { | 68 | return { |
| 47 | activeNames: [], | 69 | activeNames: [], |
| 48 | select: '' | ||
| 49 | } | 70 | } |
| 50 | }, | 71 | }, |
| 51 | methods: {} | 72 | methods: { |
| 73 | handleSearch() { | ||
| 74 | this.$store.dispatch('getAllFriendList', {page: 1, size: 20}) | ||
| 75 | // this.activeNames = ['user', 'scheme', 'admin'] | ||
| 76 | } | ||
| 77 | }, | ||
| 52 | } | 78 | } |
| 53 | </script> | 79 | </script> |
| 54 | 80 | ||
| ... | @@ -89,6 +115,11 @@ export default { | ... | @@ -89,6 +115,11 @@ export default { |
| 89 | border-bottom 1px solid $background-deep-dark | 115 | border-bottom 1px solid $background-deep-dark |
| 90 | padding 10px 10px 10px 20px | 116 | padding 10px 10px 10px 20px |
| 91 | 117 | ||
| 118 | >>> .el-button | ||
| 119 | color $first | ||
| 120 | border none | ||
| 121 | background-color $deep-background !important | ||
| 122 | |||
| 92 | >>> .el-input | 123 | >>> .el-input |
| 93 | width 100% | 124 | width 100% |
| 94 | margin-right 10px | 125 | margin-right 10px | ... | ... |
| ... | @@ -114,6 +114,7 @@ export default { | ... | @@ -114,6 +114,7 @@ export default { |
| 114 | break | 114 | break |
| 115 | case activeName.FRIEND_LIST: | 115 | case activeName.FRIEND_LIST: |
| 116 | this.checkoutActive(activeName.FRIEND_LIST) | 116 | this.checkoutActive(activeName.FRIEND_LIST) |
| 117 | this.getFriendList() | ||
| 117 | break | 118 | break |
| 118 | case activeName.BLACK_LIST: | 119 | case activeName.BLACK_LIST: |
| 119 | this.checkoutActive(activeName.BLACK_LIST) | 120 | this.checkoutActive(activeName.BLACK_LIST) |
| ... | @@ -148,7 +149,8 @@ export default { | ... | @@ -148,7 +149,8 @@ export default { |
| 148 | .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) | 149 | .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) |
| 149 | }, | 150 | }, |
| 150 | getFriendList() { | 151 | getFriendList() { |
| 151 | Helper.contactList().then(res => this.$store.commit('updateFriendList', res.data)) | 152 | this.$store.commit('updateFriendSearch', '') |
| 153 | this.$store.dispatch('getAllFriendList', {page: 1, size: 20}) | ||
| 152 | // this.tim | 154 | // this.tim |
| 153 | // .getFriendList() | 155 | // .getFriendList() |
| 154 | // .then(({data: friendList}) => { | 156 | // .then(({data: friendList}) => { | ... | ... |
| ... | @@ -142,9 +142,12 @@ export default { | ... | @@ -142,9 +142,12 @@ export default { |
| 142 | .then(({data}) => this.$store.commit('updateCurrentUserProfile', data)) | 142 | .then(({data}) => this.$store.commit('updateCurrentUserProfile', data)) |
| 143 | .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) | 143 | .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) |
| 144 | this.$store.dispatch('getBlacklist') | 144 | this.$store.dispatch('getBlacklist') |
| 145 | Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data)) | 145 | // Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data)) |
| 146 | Helper.contactList({type: 'scheme'}).then(res => this.$store.commit('updateSchemeList', res.data)) | 146 | // Helper.contactList({ |
| 147 | Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data)) | 147 | // type: 'scheme', |
| 148 | // method: 'forPaginate' | ||
| 149 | // }).then(res => this.$store.commit('updateSchemeList', res.data)) | ||
| 150 | // Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data)) | ||
| 148 | // 登录trtc calling | 151 | // 登录trtc calling |
| 149 | // this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig}) | 152 | // this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig}) |
| 150 | } | 153 | } | ... | ... |
| 1 | import _ from 'loadsh' | ||
| 2 | import Helper from '../../utils/helper' | ||
| 3 | |||
| 1 | const friendModules = { | 4 | const friendModules = { |
| 2 | state: { | 5 | state: { |
| 3 | friendList: [], | 6 | friendList: [], |
| 4 | adminList: [], | 7 | search: '', |
| 5 | schemeList: [], | 8 | user: { |
| 6 | userList: [], | 9 | loading: false, |
| 10 | list: [], | ||
| 11 | paginate: { | ||
| 12 | page: 1, size: 20, total: 0 | ||
| 13 | } | ||
| 14 | }, | ||
| 15 | admin: { | ||
| 16 | loading: false, | ||
| 17 | list: [], | ||
| 18 | paginate: { | ||
| 19 | page: 1, size: 20, total: 0 | ||
| 20 | } | ||
| 21 | }, | ||
| 22 | scheme: { | ||
| 23 | loading: false, | ||
| 24 | list: [], | ||
| 25 | paginate: { | ||
| 26 | page: 1, size: 20, total: 0 | ||
| 27 | } | ||
| 28 | }, | ||
| 7 | createGroupModelVisible: false, | 29 | createGroupModelVisible: false, |
| 8 | }, | 30 | }, |
| 9 | getters: {}, | 31 | getters: {}, |
| ... | @@ -11,18 +33,65 @@ const friendModules = { | ... | @@ -11,18 +33,65 @@ const friendModules = { |
| 11 | updateFriendList(state, friendList) { | 33 | updateFriendList(state, friendList) { |
| 12 | state.friendList = friendList | 34 | state.friendList = friendList |
| 13 | }, | 35 | }, |
| 14 | updateAdminList(state, friendList) { | 36 | updateFriendSearch(state, search) { |
| 15 | state.adminList = friendList | 37 | state.search = search |
| 38 | }, | ||
| 39 | updateLoading(state, {type, loading}) { | ||
| 40 | state[type].loading = loading | ||
| 16 | }, | 41 | }, |
| 17 | updateSchemeList(state, friendList) { | 42 | updateList(state, {type, resource}) { |
| 18 | state.schemeList = friendList | 43 | state[type].list = resource.data |
| 44 | state[type].paginate = resource.meta | ||
| 19 | }, | 45 | }, |
| 20 | updateUserList(state, friendList) { | 46 | appendList(state, {type, resource}) { |
| 21 | state.userList = friendList | 47 | state[type].list = state[type].list.concat(resource.data) |
| 48 | state[type].paginate = resource.meta | ||
| 22 | }, | 49 | }, |
| 50 | |||
| 23 | reset(state) { | 51 | reset(state) { |
| 24 | Object.assign(state, {friendList: [], createGroupModelVisible: false}) | 52 | Object.assign(state, { |
| 53 | friendList: [], | ||
| 54 | search: '', | ||
| 55 | user: { | ||
| 56 | loading: false, | ||
| 57 | list: [], | ||
| 58 | paginate: { | ||
| 59 | page: 1, size: 20, total: 0 | ||
| 25 | } | 60 | } |
| 61 | }, | ||
| 62 | admin: { | ||
| 63 | loading: false, | ||
| 64 | list: [], | ||
| 65 | paginate: { | ||
| 66 | page: 1, size: 20, total: 0 | ||
| 67 | } | ||
| 68 | }, | ||
| 69 | scheme: { | ||
| 70 | loading: false, | ||
| 71 | list: [], | ||
| 72 | paginate: { | ||
| 73 | page: 1, size: 20, total: 0 | ||
| 74 | } | ||
| 75 | }, | ||
| 76 | createGroupModelVisible: false, | ||
| 77 | }) | ||
| 78 | } | ||
| 79 | }, | ||
| 80 | actions: { | ||
| 81 | getAllFriendList({dispatch}, payload) { | ||
| 82 | dispatch('getFriendList', {type: 'user', ...payload}) | ||
| 83 | dispatch('getFriendList', {type: 'scheme', ...payload}) | ||
| 84 | dispatch('getFriendList', {type: 'admin', ...payload}) | ||
| 85 | }, | ||
| 86 | getFriendList({state, commit}, payload) { | ||
| 87 | const type = _.get(payload, 'type', '') | ||
| 88 | const page = _.get(payload, 'page', _.get(state, `${type}.paginate.page`, 1)) | ||
| 89 | const size = _.get(payload, 'size', _.get(state, `${type}.paginate.size`, 20)) | ||
| 90 | const search = state.search | ||
| 91 | const method = _.get(payload, 'method', 'update') | ||
| 92 | commit('updateLoading', {type, loading: true}) | ||
| 93 | Helper.contactList({method: 'forPaginate', search, type, page, size}).then(resource => commit(method + 'List', {type, resource})).finally(() => commit('updateLoading', {type, loading: false})) | ||
| 94 | }, | ||
| 26 | } | 95 | } |
| 27 | } | 96 | } |
| 28 | 97 | ... | ... |
-
Please register or sign in to post a comment