Skip to content

杨俊 / spread_im

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4701e452 4701e4526edd30c577961d2cde2c1e8665075233 by yangjun@hikoon.cn
Options

增加群加人功能

1 parent 200b4a72
Inline Side-by-side
Showing 6 changed files with 99 additions and 73 deletions
1 <template> 1 <template>
2 <div> 2 <div class="friend-item-container">
3 <el-input v-model="userID" placeholder="输入userID后 按回车键" @keydown.enter.native="addGroupMember"></el-input> 3 <el-row v-for="friend in currentUnMemberList" :key="friend.id" style="margin-bottom: 5px" class="friend-list"
4 type="flex" align="middle" justify="center" :gutter="16">
5 <el-col :span="6">
6 <avatar class="friend-avatar" :src="friend.avatar"/>
7 </el-col>
8 <el-col :span="14">
9 <div class="friend-name">{{ friend.name }}</div>
10 </el-col>
11 <el-col :span="4">
12 <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)">
13 <span class="tim-icon-friend-add"></span>
14 </div>
15 </el-col>
16 </el-row>
4 </div> 17 </div>
5 </template> 18 </template>
6 19
7 <script> 20 <script>
8 import { Input } from 'element-ui' 21 import {mapState} from 'vuex'
9 import { mapState } from 'vuex' 22 import Helper from '../../../utils/helper'
23
10 export default { 24 export default {
11 components: {
12 ElInput: Input
13 },
14 data() {
15 return {
16 userID: ''
17 }
18 },
19 computed: { 25 computed: {
20 ...mapState({ 26 ...mapState({
21 currentConversation: state => state.conversation.currentConversation 27 users: state => state.friend.userList,
22 }) 28 currentConversation: state => state.conversation.currentConversation,
29 currentMemberList: state => state.group.currentMemberList
30 }),
31 currentUnMemberList() {
32 return this.users.filter(item => this.currentMemberList.filter(data => data.userID === item.esm_id).length === 0)
33 }
23 }, 34 },
24 methods: { 35 methods: {
25 addGroupMember() { 36 addGroupMember(user) {
26 const groupID = this.currentConversation.conversationID.replace('GROUP', '') 37 const groupID = this.currentConversation.conversationID.replace('GROUP', '')
27 this.tim 38 Helper.joinGroup(groupID, user.esm_id).then(() => {
28 .addGroupMember({ 39 this.$store.commit('showMessage', {message: `群成员：${user.name}，加群成功`, type: 'success'})
29 groupID, 40 this.tim.getGroupMemberProfile({groupID, userIDList: [user.esm_id]})
30 userIDList: [this.userID] 41 .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
31 })
32 .then((imResponse) => {
33 const {
34 successUserIDList,
35 failureUserIDList,
36 existedUserIDList
37 } = imResponse.data
38 if (successUserIDList.length > 0) {
39 this.$store.commit('showMessage', {
40 message: `群成员：${successUserIDList.join(',')}，加群成功`,
41 type: 'success'
42 })
43 this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
44 .then(({ data: { memberList }}) => {
45 this.$store.commit('updateCurrentMemberList', memberList)
46 })
47 }
48 if (failureUserIDList.length > 0) {
49 this.$store.commit('showMessage', {
50 message: `群成员：${failureUserIDList.join(',')}，添加失败！`,
51 type: 'error'
52 })
53 }
54 if (existedUserIDList.length > 0) {
55 this.$store.commit('showMessage', {
56 message: `群成员：${existedUserIDList.join(',')}，已在群中`
57 })
58 }
59 })
60 .catch(error => {
61 this.$store.commit('showMessage', {
62 type: 'error',
63 message: error.message
64 })
65 }) 42 })
43 // this.tim
44 // .addGroupMember({
45 // groupID,
46 // userIDList: [userID]
47 // })
48 // .then((imResponse) => {
49 // const {
50 // successUserIDList,
51 // failureUserIDList,
52 // existedUserIDList
53 // } = imResponse.data
54 // if (successUserIDList.length > 0) {
55 // this.$store.commit('showMessage', {message: `群成员：${successUserIDList.join(',')}，加群成功`, type: 'success'})
56 // this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
57 // .then(({data: {memberList}}) => this.$store.commit('updateCurrentMemberList', memberList))
58 // }
59 // if (failureUserIDList.length > 0) {
60 // this.$store.commit('showMessage', {message: `群成员：${failureUserIDList.join(',')}，添加失败！`, type: 'error'})
61 // }
62 // if (existedUserIDList.length > 0) {
63 // this.$store.commit('showMessage', {message: `群成员：${existedUserIDList.join(',')}，已在群中`})
64 // }
65 // })
66 // .catch(error => {
67 // this.$store.commit('showMessage', {type: 'error', message: error.message})
68 // })
66 } 69 }
67 } 70 }
68 } 71 }
69 </script> 72 </script>
70 73
71 <style lang="stylus" scoped></style> 74 <style lang="stylus" scoped>
75 .btn-add-member
76 width 30px
77 height 30px
78 font-size 28px
79 text-align center
80 line-height 32px
81 cursor pointer
82 float right
83
84 &:hover
85 color $light-primary
86 </style>
......
1 <template> 1 <template>
2 <div class="group-member-list-wrapper"> 2 <div class="group-member-list-wrapper">
3 <div class="header"> 3 <div class="header">
4 <span class="member-count text-ellipsis">群成员：{{currentConversation.groupProfile.memberCount}}</span> 4 <span class="member-count text-ellipsis">群成员：{{ currentConversation.groupProfile.memberCount }}</span>
5 <popover v-model="addGroupMemberVisible"> 5 <popover v-model="addGroupMemberVisible">
6 <add-group-member></add-group-member> 6 <add-group-member style="width: 200px"></add-group-member>
7 <div slot="reference" class="btn-add-member" title="添加群成员"> 7 <div slot="reference" class="btn-add-member" title="添加群成员">
8 <span class="tim-icon-friend-add"></span> 8 <span class="tim-icon-friend-add"></span>
9 </div> 9 </div>
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
13 <div class="group-member-list"> 13 <div class="group-member-list">
14 <div v-for="member in members" :key="member.userID"> 14 <div v-for="member in members" :key="member.userID">
15 <popover placement="right" :key="member.userID"> 15 <popover placement="right" :key="member.userID">
16 <group-member-info :member="member" /> 16 <group-member-info :member="member"/>
17 <div slot="reference" class="group-member" @click="currentMemberID = member.userID"> 17 <div slot="reference" class="group-member" @click="currentMemberID = member.userID">
18 <avatar :title=getGroupMemberAvatarText(member.role) :src="member.avatar" /> 18 <avatar :title=getGroupMemberAvatarText(member.role) :src="member.avatar"/>
19 <div class="member-name text-ellipsis"> 19 <div class="member-name text-ellipsis">
20 <span v-if="member.nameCard" :title=member.nameCard>{{ member.nameCard }}</span> 20 <span v-if="member.nameCard" :title=member.nameCard>{{ member.nameCard }}</span>
21 <span v-else-if="member.nick" :title=member.nick>{{ member.nick }}</span> 21 <span v-else-if="member.nick" :title=member.nick>{{ member.nick }}</span>
...@@ -33,10 +33,11 @@ ...@@ -33,10 +33,11 @@
33 </template> 33 </template>
34 34
35 <script> 35 <script>
36 import { Popover } from 'element-ui' 36 import {Popover} from 'element-ui'
37 import { mapState } from 'vuex' 37 import {mapState} from 'vuex'
38 import AddGroupMember from './add-group-member.vue' 38 import AddGroupMember from './add-group-member.vue'
39 import GroupMemberInfo from './group-member-info.vue' 39 import GroupMemberInfo from './group-member-info.vue'
40
40 export default { 41 export default {
41 data() { 42 data() {
42 return { 43 return {
...@@ -91,12 +92,14 @@ export default { ...@@ -91,12 +92,14 @@ export default {
91 height 50px 92 height 50px
92 padding 10px 16px 10px 20px 93 padding 10px 16px 10px 20px
93 border-bottom 1px solid $border-base 94 border-bottom 1px solid $border-base
95
94 .member-count 96 .member-count
95 display inline-block 97 display inline-block
96 max-width 130px 98 max-width 130px
97 line-height 30px 99 line-height 30px
98 font-size 14px 100 font-size 14px
99 vertical-align bottom 101 vertical-align bottom
102
100 .btn-add-member 103 .btn-add-member
101 width 30px 104 width 30px
102 height 30px 105 height 30px
...@@ -105,18 +108,22 @@ export default { ...@@ -105,18 +108,22 @@ export default {
105 line-height 32px 108 line-height 32px
106 cursor pointer 109 cursor pointer
107 float right 110 float right
111
108 &:hover 112 &:hover
109 color $light-primary 113 color $light-primary
114
110 .scroll-content 115 .scroll-content
111 max-height: 250px; 116 max-height: 250px;
112 overflow-y: scroll; 117 overflow-y: scroll;
113 padding 10px 15px 10px 15px 118 padding 10px 15px 10px 15px
114 width 100% 119 width 100%
120
115 .group-member-list 121 .group-member-list
116 display flex 122 display flex
117 justify-content flex-start 123 justify-content flex-start
118 flex-wrap wrap 124 flex-wrap wrap
119 width 100% 125 width 100%
126
120 .group-member 127 .group-member
121 width 40px 128 width 40px
122 height 70px 129 height 70px
...@@ -129,14 +136,17 @@ export default { ...@@ -129,14 +136,17 @@ export default {
129 cursor: pointer; 136 cursor: pointer;
130 margin: 0 20px 10px 0; 137 margin: 0 20px 10px 0;
131 padding: 10px 0 0 0; 138 padding: 10px 0 0 0;
139
132 .avatar 140 .avatar
133 width 40px 141 width 40px
134 height 40px 142 height 40px
135 border-radius 50% 143 border-radius 50%
144
136 .member-name 145 .member-name
137 font-size 12px 146 font-size 12px
138 width: 50px; 147 width: 50px;
139 text-align center 148 text-align center
149
140 .more 150 .more
141 padding 0 20px 151 padding 0 20px
142 border-bottom 1px solid $border-base 152 border-bottom 1px solid $border-base
...@@ -151,5 +161,4 @@ export default { ...@@ -151,5 +161,4 @@ export default {
151 // } 161 // }
152 162
153 163
154
155 </style> 164 </style>
......
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
30 MessageBox.confirm('是否加入讨论组：' + this.group.title, '提示', { 30 MessageBox.confirm('是否加入讨论组：' + this.group.title, '提示', {
31 type: 'warning', showClose: false 31 type: 'warning', showClose: false
32 }).then(() => { 32 }).then(() => {
33 Helper.joinGroup(this.group.group_id).then(() => { 33 Helper.joinGroup(this.group.group_id, this.$store.state.user.userID).then(() => {
34 this.group.is_join = 1 34 this.group.is_join = 1
35 this.handleGroupClick() 35 this.handleGroupClick()
36 }) 36 })
......
...@@ -72,9 +72,6 @@ export default { ...@@ -72,9 +72,6 @@ export default {
72 }) 72 })
73 }, 73 },
74 mounted() { 74 mounted() {
75 if (this.isLogin) {
76 this.fetch()
77 }
78 }, 75 },
79 methods: { 76 methods: {
80 fetch() { 77 fetch() {
...@@ -165,9 +162,11 @@ export default { ...@@ -165,9 +162,11 @@ export default {
165 } 162 }
166 }, 163 },
167 watch: { 164 watch: {
168 'search'() { 165 isLogin(val) {
169 // this.page = 1 166 if (val) {
170 // this.fetch() 167 this.fetch()
168
169 }
171 } 170 }
172 } 171 }
173 } 172 }
......
...@@ -68,7 +68,6 @@ export default { ...@@ -68,7 +68,6 @@ export default {
68 created() { 68 created() {
69 Helper.verifyToken().then(user => this.tim.login({userID: user.id, userSig: user.sign}) 69 Helper.verifyToken().then(user => this.tim.login({userID: user.id, userSig: user.sign})
70 .then(() => { 70 .then(() => {
71 console.log('gooo')
72 this.loading = false 71 this.loading = false
73 this.$store.commit('toggleIsLogin', true) 72 this.$store.commit('toggleIsLogin', true)
74 this.$store.commit('startComputeCurrent') 73 this.$store.commit('startComputeCurrent')
...@@ -144,8 +143,12 @@ export default { ...@@ -144,8 +143,12 @@ export default {
144 143
145 if (isSDKReady) { 144 if (isSDKReady) {
146 this.tim.getMyProfile() 145 this.tim.getMyProfile()
147 .then(({data}) => this.$store.commit('updateCurrentUserProfile', data)) 146 .then(({data}) => {
148 .catch(error => this.$store.commit('showMessage', {type: 'error', message: error.message})) 147 this.$store.commit('updateCurrentUserProfile', data)
148 })
149 .catch(error => {
150 this.$store.commit('showMessage', {type: 'error', message: error.message})
151 })
149 this.$store.dispatch('getBlacklist') 152 this.$store.dispatch('getBlacklist')
150 // 登录trtc calling 153 // 登录trtc calling
151 this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig}) 154 this.trtcCalling.login({sdkAppID: this.sdkAppID, userID: this.userID, userSig: this.userSig})
......
...@@ -31,7 +31,7 @@ export default class Helper { ...@@ -31,7 +31,7 @@ export default class Helper {
31 return request.get('im/groups', {params}) 31 return request.get('im/groups', {params})
32 } 32 }
33 33
34 static joinGroup(id) { 34 static joinGroup(id, member) {
35 return request.put(`im/groups/${id}`) 35 return request.post(`im/groups/${id}/members`, {member})
36 } 36 }
37 } 37 }
......