增加群加人功能

yangjun@hikoon.cn
Commit 4701e452 ... 4701e4526edd30c577961d2cde2c1e8665075233 authored 2021-05-10 13:54:37 +0800 by yangjun@hikoon.cn
Showing 6 changed files with 104 additions and 78 deletions
src/components/conversation/conversationProfile/add-group-member.vue
src/components/conversation/conversationProfile/group-member-list.vue
src/components/group/group-item.vue
src/components/group/group-list.vue
src/index.vue
src/utils/helper.js
--- a/src/components/conversation/conversationProfile/add-group-member.vue
View file @4701e45
+++ b/src/components/conversation/conversationProfile/add-group-member.vue
View file @4701e45
 <template>
-  <div>
+  <div class="friend-item-container">
-    <el-input v-model="userID" placeholder="输入userID后 按回车键" @keydown.enter.native="addGroupMember"></el-input>
+    <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
+      Helper.joinGroup(groupID, user.esm_id).then(() => {
-        .addGroupMember({
+        this.$store.commit('showMessage', {message: `群成员：${user.name}，加群成功`, type: 'success'})
-          groupID,
+        this.tim.getGroupMemberProfile({groupID, userIDList: [user.esm_id]})
-          userIDList: [this.userID]
+            .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
-        })
+      })
-        .then((imResponse) => {
+      // this.tim
-          const {
+      //     .addGroupMember({
-            successUserIDList,
+      //       groupID,
-            failureUserIDList,
+      //       userIDList: [userID]
-            existedUserIDList
+      //     })
-          } = imResponse.data
+      //     .then((imResponse) => {
-          if (successUserIDList.length > 0) {
+      //       const {
-            this.$store.commit('showMessage', {
+      //         successUserIDList,
-              message: `群成员：${successUserIDList.join(',')}，加群成功`,
+      //         failureUserIDList,
-              type: 'success'
+      //         existedUserIDList
-            })
+      //       } = imResponse.data
-            this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
+      //       if (successUserIDList.length > 0) {
-            .then(({ data: { memberList }}) => {
+      //         this.$store.commit('showMessage', {message: `群成员：${successUserIDList.join(',')}，加群成功`, type: 'success'})
-              this.$store.commit('updateCurrentMemberList', memberList)
+      //         this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
-            })
+      //             .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
-          }
+      //       }
-          if (failureUserIDList.length > 0) {
+      //       if (failureUserIDList.length > 0) {
-            this.$store.commit('showMessage', {
+      //         this.$store.commit('showMessage', {message: `群成员：${failureUserIDList.join(',')}，添加失败！`, type: 'error'})
-              message: `群成员：${failureUserIDList.join(',')}，添加失败！`,
+      //       }
-              type: 'error'
+      //       if (existedUserIDList.length > 0) {
-            })
+      //         this.$store.commit('showMessage', {message: `群成员：${existedUserIDList.join(',')}，已在群中`})
-          }
+      //       }
-          if (existedUserIDList.length > 0) {
+      //     })
-            this.$store.commit('showMessage', {
+      //     .catch(error => {
-              message: `群成员：${existedUserIDList.join(',')}，已在群中`
+      //       this.$store.commit('showMessage', {type: 'error', message: error.message})
-            })
+      //     })
-          }
-        })
-        .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>
--- a/src/components/conversation/conversationProfile/group-member-list.vue
View file @4701e45
+++ b/src/components/conversation/conversationProfile/group-member-list.vue
View file @4701e45
 <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 {Popover} from 'element-ui'
-import { mapState } from 'vuex'
+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)
+          .dispatch('getGroupMemberList', this.groupProfile.groupID)
-        .then(() => {
+          .then(() => {
-          this.count += 30
+            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>
--- a/src/components/group/group-item.vue
View file @4701e45
+++ b/src/components/group/group-item.vue
View file @4701e45
@@ -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()
          })
--- a/src/components/group/group-list.vue
View file @4701e45
+++ b/src/components/group/group-list.vue
View file @4701e45
@@ -72,9 +72,6 @@ export default {
    })
  },
  mounted() {
-    if (this.isLogin) {
-      this.fetch()
-    }
  },
  methods: {
    fetch() {
@@ -165,9 +162,11 @@ export default {
    }
  },
  watch: {
-    'search'() {
+    isLogin(val) {
-      // this.page = 1
+      if (val) {
-      // this.fetch()
+        this.fetch()
+      }
    }
  }
 }
--- a/src/index.vue
View file @4701e45
+++ b/src/index.vue
View file @4701e45
@@ -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))
+            .then(({data}) => {
-            .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message}))
+              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})
--- a/src/utils/helper.js
View file @4701e45
+++ b/src/utils/helper.js
View file @4701e45
@@ -31,7 +31,7 @@ export default class Helper {
        return request.get('im/groups', {params})
    }
-    static joinGroup(id) {
+    static joinGroup(id, member) {
-        return request.put(`im/groups/${id}`)
+        return request.post(`im/groups/${id}/members`, {member})
    }
 }