更新

 ENV='development'
 
-VUE_APP_API_URL='http://spread_dev.hikoon.com/mapi'
+VUE_APP_API_URL='http://api.spread.work/mapi'
 
 VUE_APP_API_KEY=1400514950
 VUE_APP_API_SECRET='eb219c4b42bdbbf5dca38f21f5be26ab38f1c157d0ba4277d5acce6507f2d727'

@@ -6,7 +6,9 @@
         <avatar class="friend-avatar" :src="friend.avatar"/>
       </el-col>
       <el-col :span="14">
-        <div class="friend-name">{{ friend.name }}</div>
+        <el-tooltip placement="top" :key="friend.id" :content="friend.name">
+          <div class="friend-name text-ellipsis">{{ friend.name }}</div>
+        </el-tooltip>
       </el-col>
       <el-col :span="4">
         <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)">
@@ -14,14 +16,23 @@
         </div>
       </el-col>
     </el-row>
+    <el-button v-show="currentUnMemberList.length < currentUnMemberTotal" style="width: inherit;margin: 0 auto" long
+               type="text"
+               @click="$store.dispatch('getGroupUnMemberList', group)">加载更多
+    </el-button>
   </div>
 </template>
 
 <script>
 import {mapState} from 'vuex'
 import Helper from '../../../utils/helper'
+import {Button, Tooltip} from 'element-ui'
 
 export default {
+  components: {
+    ElTooltip: Tooltip,
+    ElButton: Button
+  },
   props: {
     group: {
       type: String, required: true
@@ -31,7 +42,8 @@ export default {
     ...mapState({
       currentConversation: state => state.conversation.currentConversation,
       currentMemberList: state => state.group.currentMemberList,
-      currentUnMemberList: state => state.group.currentUnMemberList
+      currentUnMemberList: state => state.group.currentUnMemberList,
+      currentUnMemberTotal: state => state.group.currentUnMemberMeta.total
     }),
   },
   data() {
@@ -75,13 +87,20 @@ export default {
       //     })
     }
   },
-  mounted() {
-    console.log(12312321)
-  }
 }
 </script>
 
 <style lang="stylus" scoped>
+.friend-item-container
+  width: 200px;
+  max-height: 60vh;
+  overflow-x: hidden
+  overflow-y scroll
+
+  &::-webkit-scrollbar
+    width: 0 !important
+
+
 .btn-add-member
   width 30px
   height 30px

 <template>
   <div>
     <div>
-      <span class="label">userID:</span>
+      <span class="label">ID:</span>
       {{ member.userID }}
       <el-button v-if="showCancelBan" type="text" @click="cancelMute">取消禁言</el-button>
       <el-popover title="禁言" v-model="popoverVisible" v-show="showBan">
@@ -14,11 +14,11 @@
       </el-popover>
     </div>
     <div>
-      <span class="label">nick:</span>
+      <span class="label">昵称:</span>
       {{ member.nick || '暂无' }}
     </div>
     <div>
-      <span class="label">nameCard:</span>
+      <span class="label">名片:</span>
       {{ member.nameCard || '暂无' }}
       <el-popover title="修改群名片" v-model="nameCardPopoverVisible" v-show="showEditNameCard">
         <el-input
@@ -34,10 +34,10 @@
         ></i>
       </el-popover>
     </div>
-    <div>
-      <span class="label">role:</span>
-      <span class="content role" :title="changeRoleTitle">{{ member.role }}</span>
-    </div>
+    <!--    <div>-->
+    <!--      <span class="label">身份:</span>-->
+    <!--      <span class="content role" :title="changeRoleTitle">{{ member.role | role }}</span>-->
+    <!--    </div>-->
     <div v-if="showMuteUntil">
       <span class="label">禁言至:</span>
       <span class="content">{{ muteUntil }}</span>
@@ -47,7 +47,8 @@
         member.role === 'Admin' ? '取消管理员' : '设为管理员'
       }}
     </el-button>
-    <el-button type="text" v-if="showKickout" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>
+    <!--    <el-button type="text" v-if="showKickout" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>-->
+    <el-button type="text" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>
   </div>
 </template>
 
@@ -55,12 +56,16 @@
 import {mapState} from 'vuex'
 import {Popover} from 'element-ui'
 import {getFullDate} from '../../../utils/date'
+import Helper from '../../../utils/helper'
 
 export default {
   components: {
     ElPopover: Popover
   },
   props: ['member'],
+  filters: {
+    role: val => val === 'Member' ? '成员' : (val === 'Admin' ? '管理员' : '群主')
+  },
   data() {
     return {
       muteTime: '',
@@ -136,21 +141,30 @@ export default {
   },
   methods: {
     kickoutGroupMember() {
-      this.tim
-          .deleteGroupMember({
-            groupID: this.currentConversation.groupProfile.groupID,
-            reason: '我要踢你出群',
-            userIDList: [this.member.userID]
-          })
+      Helper.groupMemberDelete(this.currentConversation.groupProfile.groupID, this.member.userID)
           .then(() => {
             this.$store.commit('deleteGroupMember', this.member.userID)
-          })
-          .catch(error => {
-            this.$store.commit('showMessage', {
-              type: 'error',
-              message: error.message
-            })
-          })
+          }).catch(error => {
+        this.$store.commit('showMessage', {
+          type: 'error',
+          message: error.message
+        })
+      })
+      // this.tim
+      //     .deleteGroupMember({
+      //       groupID: this.currentConversation.groupProfile.groupID,
+      //       reason: '我要踢你出群',
+      //       userIDList: [this.member.userID]
+      //     })
+      //     .then(() => {
+      //       this.$store.commit('deleteGroupMember', this.member.userID)
+      //     })
+      //     .catch(error => {
+      //       this.$store.commit('showMessage', {
+      //         type: 'error',
+      //         message: error.message
+      //       })
+      //     })
     },
     changeMemberRole() {
       if (!this.canChangeRole) {

@@ -2,9 +2,8 @@
   <div class="group-member-list-wrapper">
     <div class="header">
       <span class="member-count text-ellipsis">群成员：{{ currentConversation.groupProfile.memberCount }}</span>
-      <popover v-model="addGroupMemberVisible">
-        <add-group-member style=" width: 200px; max-height: 50vh; overflow: auto"
-                          :group="currentConversation.groupProfile.groupID"/>
+      <popover v-show="currentUnMemberTotal !== 0" v-model="addGroupMemberVisible">
+        <add-group-member :group="currentConversation.groupProfile.groupID"/>
         <div slot="reference" class="btn-add-member" title="添加群成员">
           <span class="tim-icon-friend-add"></span>
         </div>
@@ -28,7 +27,9 @@
       </div>
     </div>
     <div class="more">
-      <el-button v-if="showLoadMore" type="text" @click="loadMore">查看更多</el-button>
+      <el-button v-if="showLoadMore" type="text"
+                 @click="loadMore">查看更多
+      </el-button>
     </div>
   </div>
 </template>
@@ -57,7 +58,8 @@ export default {
   computed: {
     ...mapState({
       currentConversation: state => state.conversation.currentConversation,
-      currentMemberList: state => state.group.currentMemberList
+      currentMemberList: state => state.group.currentMemberList,
+      currentUnMemberTotal: state => state.group.currentUnMemberMeta.total
     }),
     showLoadMore() {
       return this.members.length < this.groupProfile.memberCount

@@ -121,15 +121,15 @@
       <div class="info-item" v-if="groupProfile.type !== 'Private'">
         <div class="label">
           申请加群方式
-          <i
-              class="el-icon-edit"
-              v-if="editable"
-              @click="
-            showEditJoinOption = true
-            inputFocus('editJoinOption')
-          "
-              style="cursor:pointer; font-size:16px;"
-          />
+<!--          <i-->
+<!--              class="el-icon-edit"-->
+<!--              v-if="editable"-->
+<!--              @click="-->
+<!--            showEditJoinOption = true-->
+<!--            inputFocus('editJoinOption')-->
+<!--          "-->
+<!--              style="cursor:pointer; font-size:16px;"-->
+<!--          />-->
         </div>
         <div class="content" v-show="!showEditJoinOption">
           {{ joinOptionMap[groupProfile.joinOption] }}
@@ -212,23 +212,23 @@
 <!--                @change='changeMuteStatus'>-->
 <!--        </el-switch>-->
 <!--      </div>-->
-      <div v-if="isOwner">
-        <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>
-        <el-input
-            v-if="showChangeGroupOwner"
-            v-model="newOwnerUserID"
-            placeholder="新群主的userID"
-            size="mini"
-            @blur="showChangeGroupOwner = false"
-            @keydown.enter.native="changeOwner"
-        />
-      </div>
+<!--      <div v-if="isOwner">-->
+<!--        <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>-->
+<!--        <el-input-->
+<!--            v-if="showChangeGroupOwner"-->
+<!--            v-model="newOwnerUserID"-->
+<!--            placeholder="新群主的userID"-->
+<!--            size="mini"-->
+<!--            @blur="showChangeGroupOwner = false"-->
+<!--            @keydown.enter.native="changeOwner"-->
+<!--        />-->
+<!--      </div>-->
       <div>
         <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button>
       </div>
-      <div v-if="showDissmissGroup">
-        <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>
-      </div>
+<!--      <div v-if="showDissmissGroup">-->
+<!--        <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>-->
+<!--      </div>-->
     </div>
   </div>
 </template>

@@ -6,7 +6,7 @@ const groupModules = {
         groupList: [],
         currentMemberList: [],
         currentUnMemberList: [],
-        currentUnMemberPage: 1,
+        currentUnMemberMeta: {page: 1, size: 20, total: 0},
         createGroupModelVisible: false
     },
     getters: {
@@ -24,7 +24,9 @@ const groupModules = {
         },
         updateCurrentUnMemberList(state, memberList) {
             state.currentUnMemberList = [...state.currentUnMemberList, ...memberList]
-            state.currentUnMemberPage = state.currentUnMemberPage + 1
+        },
+        updateCurrentUnMemberMeta(state, meta) {
+            state.currentUnMemberMeta = meta
         },
         deleteGroupMember(state, userID) {
             state.currentMemberList = state.currentMemberList.filter((member) => member.userID !== userID)
@@ -35,12 +37,14 @@ const groupModules = {
         resetCurrentMemberList(state) {
             state.currentMemberList = []
             state.currentUnMemberList = []
-            state.currentUnMemberPage = 1
+            state.currentUnMemberMeta = {page: 1, size: 20, total: 0}
         },
         reset(state) {
             Object.assign(state, {
                 groupList: [],
                 currentMemberList: [],
+                currentUnMemberList: [],
+                currentUnMemberMeta: {page: 1, size: 20, total: 0},
                 createGroupModelVisible: false
             })
         }
@@ -60,8 +64,10 @@ const groupModules = {
             })
         },
         getGroupUnMemberList(context, groupID) {
-            Helper.groupMemberList(groupID, {page: context.state.currentUnMemberPage, size: 20}).then(res => {
+            const {page, size} = context.state.currentUnMemberMeta
+            Helper.groupMemberList(groupID, {page, size}).then(res => {
                 context.commit('updateCurrentUnMemberList', res.data)
+                context.commit('updateCurrentUnMemberMeta', res.meta)
             })
         }
     }

@@ -51,6 +51,10 @@ export default class Helper {
         return request.get(`im/groups/${group}/members`, {params})
     }
 
+    static groupMemberDelete(group, member) {
+        return request.delete(`im/groups/${group}/members/${member}`)
+    }
+
     static joinGroup(id, member) {
         return request.post(`im/groups/${id}/members`, {member})
     }