更新

@@ -34,16 +34,19 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.avatar
+  height 48px
+  width 48px
+
+
 .friend-item-container
   color #f7f7f8
+  padding 10px 15px
 
   :hover
     background-color #404953
     cursor pointer
 
-  .friend-list
-    padding 10px 15px
-
     .friend-avatar
       height 48px
       width 48px

 <template>
   <div class="list-container">
     <div class="header-bar">
-      <el-input v-model="select" size="mini" placeholder="筛选昵称" prefix-icon="el-icon-search"/>
+      <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 userList" :key="friend.ems_id" :friend="friend"/>
+        <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 schemeList" :key="friend.ems_id" :friend="friend"/>
+        <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 adminList" :key="friend.ems_id" :friend="friend"/>
+        <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>
@@ -27,28 +44,37 @@ export default {
     FriendItem,
   },
   computed: {
+    search: {
+      set(val) {
+        this.$store.commit('updateFriendSearch', val)
+      },
+      get() {
+        return this.$store.state.friend.search
+      }
+    },
     ...mapState({
-      adminList(state) {
-        const list = state.friend.adminList || []
-        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
+      user(state) {
+        return state.friend.user
       },
-      userList(state) {
-        const list = state.friend.userList || []
-        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
+      scheme(state) {
+        return state.friend.scheme
+      },
+      admin(state) {
+        return state.friend.admin
       },
-      schemeList(state) {
-        const list = state.friend.schemeList || []
-        return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
-      }
     }),
   },
   data() {
     return {
       activeNames: [],
-      select: ''
     }
   },
-  methods: {}
+  methods: {
+    handleSearch() {
+      this.$store.dispatch('getAllFriendList', {page: 1, size: 20})
+      // this.activeNames = ['user', 'scheme', 'admin']
+    }
+  },
 }
 </script>
 
@@ -89,6 +115,11 @@ export default {
     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

@@ -114,6 +114,7 @@ export default {
           break
         case activeName.FRIEND_LIST:
           this.checkoutActive(activeName.FRIEND_LIST)
+          this.getFriendList()
           break
         case activeName.BLACK_LIST:
           this.checkoutActive(activeName.BLACK_LIST)
@@ -148,7 +149,8 @@ export default {
           .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
     },
     getFriendList() {
-      Helper.contactList().then(res => this.$store.commit('updateFriendList', res.data))
+      this.$store.commit('updateFriendSearch', '')
+      this.$store.dispatch('getAllFriendList', {page: 1, size: 20})
       // this.tim
       //     .getFriendList()
       //     .then(({data: friendList}) => {

@@ -142,9 +142,12 @@ export default {
             .then(({data}) => this.$store.commit('updateCurrentUserProfile', data))
             .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
         this.$store.dispatch('getBlacklist')
-        Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data))
-        Helper.contactList({type: 'scheme'}).then(res => this.$store.commit('updateSchemeList', res.data))
-        Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data))
+        // Helper.contactList({type: 'admin'}).then(res => this.$store.commit('updateAdminList', res.data))
+        // Helper.contactList({
+        //   type: 'scheme',
+        //   method: 'forPaginate'
+        // }).then(res => this.$store.commit('updateSchemeList', res.data))
+        // Helper.contactList({type: 'user'}).then(res => this.$store.commit('updateUserList', res.data))
         // 登录trtc calling
         // this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig})
       }

+import _ from 'loadsh'
+import Helper from '../../utils/helper'
+
 const friendModules = {
     state: {
         friendList: [],
-        adminList: [],
-        schemeList: [],
-        userList: [],
+        search: '',
+        user: {
+            loading: false,
+            list: [],
+            paginate: {
+                page: 1, size: 20, total: 0
+            }
+        },
+        admin: {
+            loading: false,
+            list: [],
+            paginate: {
+                page: 1, size: 20, total: 0
+            }
+        },
+        scheme: {
+            loading: false,
+            list: [],
+            paginate: {
+                page: 1, size: 20, total: 0
+            }
+        },
         createGroupModelVisible: false,
     },
     getters: {},
@@ -11,18 +33,65 @@ const friendModules = {
         updateFriendList(state, friendList) {
             state.friendList = friendList
         },
-        updateAdminList(state, friendList) {
-            state.adminList = friendList
+        updateFriendSearch(state, search) {
+            state.search = search
+        },
+        updateLoading(state, {type, loading}) {
+            state[type].loading = loading
         },
-        updateSchemeList(state, friendList) {
-            state.schemeList = friendList
+        updateList(state, {type, resource}) {
+            state[type].list = resource.data
+            state[type].paginate = resource.meta
         },
-        updateUserList(state, friendList) {
-            state.userList = friendList
+        appendList(state, {type, resource}) {
+            state[type].list = state[type].list.concat(resource.data)
+            state[type].paginate = resource.meta
         },
+
         reset(state) {
-            Object.assign(state, {friendList: [], createGroupModelVisible: false})
+            Object.assign(state, {
+                friendList: [],
+                search: '',
+                user: {
+                    loading: false,
+                    list: [],
+                    paginate: {
+                        page: 1, size: 20, total: 0
+                    }
+                },
+                admin: {
+                    loading: false,
+                    list: [],
+                    paginate: {
+                        page: 1, size: 20, total: 0
+                    }
+                },
+                scheme: {
+                    loading: false,
+                    list: [],
+                    paginate: {
+                        page: 1, size: 20, total: 0
+                    }
+                },
+                createGroupModelVisible: false,
+            })
         }
+    },
+    actions: {
+        getAllFriendList({dispatch}, payload) {
+            dispatch('getFriendList', {type: 'user', ...payload})
+            dispatch('getFriendList', {type: 'scheme', ...payload})
+            dispatch('getFriendList', {type: 'admin', ...payload})
+        },
+        getFriendList({state, commit}, payload) {
+            const type = _.get(payload, 'type', '')
+            const page = _.get(payload, 'page', _.get(state, `${type}.paginate.page`, 1))
+            const size = _.get(payload, 'size', _.get(state, `${type}.paginate.size`, 20))
+            const search = state.search
+            const method = _.get(payload, 'method', 'update')
+            commit('updateLoading', {type, loading: true})
+            Helper.contactList({method: 'forPaginate', search, type, page, size}).then(resource => commit(method + 'List', {type, resource})).finally(() => commit('updateLoading', {type, loading: false}))
+        },
     }
 }