增加群加人功能

 <template>
-  <div>
-    <el-input v-model="userID" placeholder="输入userID后 按回车键" @keydown.enter.native="addGroupMember"></el-input>
+  <div class="friend-item-container">
+    <el-row v-for="friend in currentUnMemberList" :key="friend.id" style="margin-bottom: 5px" class="friend-list"
+            type="flex" align="middle" justify="center" :gutter="16">
+      <el-col :span="6">
+        <avatar class="friend-avatar" :src="friend.avatar"/>
+      </el-col>
+      <el-col :span="14">
+        <div class="friend-name">{{ friend.name }}</div>
+      </el-col>
+      <el-col :span="4">
+        <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)">
+          <span class="tim-icon-friend-add"></span>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { Input } from 'element-ui'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+import Helper from '../../../utils/helper'
+
 export default {
-  components: {
-    ElInput: Input
-  },
-  data() {
-    return {
-      userID: ''
-    }
-  },
   computed: {
     ...mapState({
-      currentConversation: state => state.conversation.currentConversation
-    })
+      users: state => state.friend.userList,
+      currentConversation: state => state.conversation.currentConversation,
+      currentMemberList: state => state.group.currentMemberList
+    }),
+    currentUnMemberList() {
+      return this.users.filter(item => this.currentMemberList.filter(data => data.userID === item.esm_id).length === 0)
+    }
   },
   methods: {
-    addGroupMember() {
+    addGroupMember(user) {
       const groupID = this.currentConversation.conversationID.replace('GROUP', '')
-      this.tim
-        .addGroupMember({
-          groupID,
-          userIDList: [this.userID]
-        })
-        .then((imResponse) => {
-          const {
-            successUserIDList,
-            failureUserIDList,
-            existedUserIDList
-          } = imResponse.data
-          if (successUserIDList.length > 0) {
-            this.$store.commit('showMessage', {
-              message: `群成员：${successUserIDList.join(',')}，加群成功`,
-              type: 'success'
-            })
-            this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
-            .then(({ data: { memberList }}) => {
-              this.$store.commit('updateCurrentMemberList', memberList)
-            })
-          }
-          if (failureUserIDList.length > 0) {
-            this.$store.commit('showMessage', {
-              message: `群成员：${failureUserIDList.join(',')}，添加失败！`,
-              type: 'error'
-            })
-          }
-          if (existedUserIDList.length > 0) {
-            this.$store.commit('showMessage', {
-              message: `群成员：${existedUserIDList.join(',')}，已在群中`
-            })
-          }
-        })
-        .catch(error => {
-          this.$store.commit('showMessage', {
-            type: 'error',
-            message: error.message
-          })
-        })
+      Helper.joinGroup(groupID, user.esm_id).then(() => {
+        this.$store.commit('showMessage', {message: `群成员：${user.name}，加群成功`, type: 'success'})
+        this.tim.getGroupMemberProfile({groupID, userIDList: [user.esm_id]})
+            .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
+      })
+      // this.tim
+      //     .addGroupMember({
+      //       groupID,
+      //       userIDList: [userID]
+      //     })
+      //     .then((imResponse) => {
+      //       const {
+      //         successUserIDList,
+      //         failureUserIDList,
+      //         existedUserIDList
+      //       } = imResponse.data
+      //       if (successUserIDList.length > 0) {
+      //         this.$store.commit('showMessage', {message: `群成员：${successUserIDList.join(',')}，加群成功`, type: 'success'})
+      //         this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
+      //             .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
+      //       }
+      //       if (failureUserIDList.length > 0) {
+      //         this.$store.commit('showMessage', {message: `群成员：${failureUserIDList.join(',')}，添加失败！`, type: 'error'})
+      //       }
+      //       if (existedUserIDList.length > 0) {
+      //         this.$store.commit('showMessage', {message: `群成员：${existedUserIDList.join(',')}，已在群中`})
+      //       }
+      //     })
+      //     .catch(error => {
+      //       this.$store.commit('showMessage', {type: 'error', message: error.message})
+      //     })
     }
   }
 }
 </script>
 
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+.btn-add-member
+  width 30px
+  height 30px
+  font-size 28px
+  text-align center
+  line-height 32px
+  cursor pointer
+  float right
+
+  &:hover
+    color $light-primary
+</style>

 <template>
   <div class="group-member-list-wrapper">
     <div class="header">
-      <span class="member-count text-ellipsis">群成员：{{currentConversation.groupProfile.memberCount}}</span>
+      <span class="member-count text-ellipsis">群成员：{{ currentConversation.groupProfile.memberCount }}</span>
       <popover v-model="addGroupMemberVisible">
-        <add-group-member></add-group-member>
+        <add-group-member style="width: 200px"></add-group-member>
         <div slot="reference" class="btn-add-member" title="添加群成员">
           <span class="tim-icon-friend-add"></span>
         </div>
@@ -13,9 +13,9 @@
       <div class="group-member-list">
         <div v-for="member in members" :key="member.userID">
           <popover placement="right" :key="member.userID">
-            <group-member-info :member="member" />
+            <group-member-info :member="member"/>
             <div slot="reference" class="group-member" @click="currentMemberID = member.userID">
-              <avatar :title=getGroupMemberAvatarText(member.role) :src="member.avatar" />
+              <avatar :title=getGroupMemberAvatarText(member.role) :src="member.avatar"/>
               <div class="member-name text-ellipsis">
                 <span v-if="member.nameCard" :title=member.nameCard>{{ member.nameCard }}</span>
                 <span v-else-if="member.nick" :title=member.nick>{{ member.nick }}</span>
@@ -33,10 +33,11 @@
 </template>
 
 <script>
-import { Popover } from 'element-ui'
-import { mapState } from 'vuex'
+import {Popover} from 'element-ui'
+import {mapState} from 'vuex'
 import AddGroupMember from './add-group-member.vue'
 import GroupMemberInfo from './group-member-info.vue'
+
 export default {
   data() {
     return {
@@ -76,10 +77,10 @@ export default {
     },
     loadMore() {
       this.$store
-        .dispatch('getGroupMemberList', this.groupProfile.groupID)
-        .then(() => {
-          this.count += 30
-        })
+          .dispatch('getGroupMemberList', this.groupProfile.groupID)
+          .then(() => {
+            this.count += 30
+          })
     }
   }
 }
@@ -91,12 +92,14 @@ export default {
     height 50px
     padding 10px 16px 10px 20px
     border-bottom 1px solid $border-base
+
     .member-count
       display inline-block
       max-width 130px
       line-height 30px
       font-size 14px
       vertical-align bottom
+
     .btn-add-member
       width 30px
       height 30px
@@ -105,18 +108,22 @@ export default {
       line-height 32px
       cursor pointer
       float right
+
       &:hover
         color $light-primary
+
   .scroll-content
     max-height: 250px;
     overflow-y: scroll;
     padding 10px 15px 10px 15px
     width 100%
+
     .group-member-list
       display flex
       justify-content flex-start
       flex-wrap wrap
       width 100%
+
     .group-member
       width 40px
       height 70px
@@ -129,14 +136,17 @@ export default {
       cursor: pointer;
       margin: 0 20px 10px 0;
       padding: 10px 0 0 0;
+
       .avatar
         width 40px
         height 40px
         border-radius 50%
+
       .member-name
         font-size 12px
         width: 50px;
         text-align center
+
   .more
     padding 0 20px
     border-bottom 1px solid $border-base
@@ -151,5 +161,4 @@ export default {
 // }
 
 
-
 </style>

@@ -30,7 +30,7 @@ export default {
         MessageBox.confirm('是否加入讨论组：' + this.group.title, '提示', {
           type: 'warning', showClose: false
         }).then(() => {
-          Helper.joinGroup(this.group.group_id).then(() => {
+          Helper.joinGroup(this.group.group_id, this.$store.state.user.userID).then(() => {
             this.group.is_join = 1
             this.handleGroupClick()
           })

@@ -72,9 +72,6 @@ export default {
     })
   },
   mounted() {
-    if (this.isLogin) {
-      this.fetch()
-    }
   },
   methods: {
     fetch() {
@@ -165,9 +162,11 @@ export default {
     }
   },
   watch: {
-    'search'() {
-      // this.page = 1
-      // this.fetch()
+    isLogin(val) {
+      if (val) {
+        this.fetch()
+
+      }
     }
   }
 }

@@ -68,7 +68,6 @@ export default {
   created() {
     Helper.verifyToken().then(user => this.tim.login({userID: user.id, userSig: user.sign})
         .then(() => {
-          console.log('gooo')
           this.loading = false
           this.$store.commit('toggleIsLogin', true)
           this.$store.commit('startComputeCurrent')
@@ -144,8 +143,12 @@ export default {
 
       if (isSDKReady) {
         this.tim.getMyProfile()
-            .then(({data}) => this.$store.commit('updateCurrentUserProfile', data))
-            .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
+            .then(({data}) => {
+              this.$store.commit('updateCurrentUserProfile', data)
+            })
+            .catch(error => {
+              this.$store.commit('showMessage', {type: 'error', message: error.message})
+            })
         this.$store.dispatch('getBlacklist')
         // 登录trtc calling
         this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig})

@@ -31,7 +31,7 @@ export default class Helper {
         return request.get('im/groups', {params})
     }
 
-    static joinGroup(id) {
-        return request.put(`im/groups/${id}`)
+    static joinGroup(id, member) {
+        return request.post(`im/groups/${id}/members`, {member})
     }
 }