Skip to content

杨俊 / spread_im

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 27629dcd 27629dcdb491646532d00870fbefeca80a844cdb by yangjun@hikoon.cn
Options

更新

1 parent d77f9d24
Inline Side-by-side
Showing 7 changed files with 104 additions and 59 deletions
1 ENV='development' 1 ENV='development'
2 2
3 VUE_APP_API_URL='http://spread_dev.hikoon.com/mapi' 3 VUE_APP_API_URL='http://api.spread.work/mapi'
4 4
5 VUE_APP_API_KEY=1400514950 5 VUE_APP_API_KEY=1400514950
6 VUE_APP_API_SECRET='eb219c4b42bdbbf5dca38f21f5be26ab38f1c157d0ba4277d5acce6507f2d727' 6 VUE_APP_API_SECRET='eb219c4b42bdbbf5dca38f21f5be26ab38f1c157d0ba4277d5acce6507f2d727'
......
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
6 <avatar class="friend-avatar" :src="friend.avatar"/> 6 <avatar class="friend-avatar" :src="friend.avatar"/>
7 </el-col> 7 </el-col>
8 <el-col :span="14"> 8 <el-col :span="14">
9 <div class="friend-name">{{ friend.name }}</div> 9 <el-tooltip placement="top" :key="friend.id" :content="friend.name">
10 <div class="friend-name text-ellipsis">{{ friend.name }}</div>
11 </el-tooltip>
10 </el-col> 12 </el-col>
11 <el-col :span="4"> 13 <el-col :span="4">
12 <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)"> 14 <div class="btn-add-member" :title="`添加:${friend.name}`" @click="addGroupMember(friend)">
...@@ -14,14 +16,23 @@ ...@@ -14,14 +16,23 @@
14 </div> 16 </div>
15 </el-col> 17 </el-col>
16 </el-row> 18 </el-row>
19 <el-button v-show="currentUnMemberList.length < currentUnMemberTotal" style="width: inherit;margin: 0 auto" long
20 type="text"
21 @click="$store.dispatch('getGroupUnMemberList', group)">加载更多
22 </el-button>
17 </div> 23 </div>
18 </template> 24 </template>
19 25
20 <script> 26 <script>
21 import {mapState} from 'vuex' 27 import {mapState} from 'vuex'
22 import Helper from '../../../utils/helper' 28 import Helper from '../../../utils/helper'
29 import {Button, Tooltip} from 'element-ui'
23 30
24 export default { 31 export default {
32 components: {
33 ElTooltip: Tooltip,
34 ElButton: Button
35 },
25 props: { 36 props: {
26 group: { 37 group: {
27 type: String, required: true 38 type: String, required: true
...@@ -31,7 +42,8 @@ export default { ...@@ -31,7 +42,8 @@ export default {
31 ...mapState({ 42 ...mapState({
32 currentConversation: state => state.conversation.currentConversation, 43 currentConversation: state => state.conversation.currentConversation,
33 currentMemberList: state => state.group.currentMemberList, 44 currentMemberList: state => state.group.currentMemberList,
34 currentUnMemberList: state => state.group.currentUnMemberList 45 currentUnMemberList: state => state.group.currentUnMemberList,
46 currentUnMemberTotal: state => state.group.currentUnMemberMeta.total
35 }), 47 }),
36 }, 48 },
37 data() { 49 data() {
...@@ -75,13 +87,20 @@ export default { ...@@ -75,13 +87,20 @@ export default {
75 // }) 87 // })
76 } 88 }
77 }, 89 },
78 mounted() {
79 console.log(12312321)
80 }
81 } 90 }
82 </script> 91 </script>
83 92
84 <style lang="stylus" scoped> 93 <style lang="stylus" scoped>
94 .friend-item-container
95 width: 200px;
96 max-height: 60vh;
97 overflow-x: hidden
98 overflow-y scroll
99
100 &::-webkit-scrollbar
101 width: 0 !important
102
103
85 .btn-add-member 104 .btn-add-member
86 width 30px 105 width 30px
87 height 30px 106 height 30px
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <div> 3 <div>
4 <span class="label">userID:</span> 4 <span class="label">ID:</span>
5 {{ member.userID }} 5 {{ member.userID }}
6 <el-button v-if="showCancelBan" type="text" @click="cancelMute">取消禁言</el-button> 6 <el-button v-if="showCancelBan" type="text" @click="cancelMute">取消禁言</el-button>
7 <el-popover title="禁言" v-model="popoverVisible" v-show="showBan"> 7 <el-popover title="禁言" v-model="popoverVisible" v-show="showBan">
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
14 </el-popover> 14 </el-popover>
15 </div> 15 </div>
16 <div> 16 <div>
17 <span class="label">nick:</span> 17 <span class="label">昵称:</span>
18 {{ member.nick || '暂无' }} 18 {{ member.nick || '暂无' }}
19 </div> 19 </div>
20 <div> 20 <div>
21 <span class="label">nameCard:</span> 21 <span class="label">名片:</span>
22 {{ member.nameCard || '暂无' }} 22 {{ member.nameCard || '暂无' }}
23 <el-popover title="修改群名片" v-model="nameCardPopoverVisible" v-show="showEditNameCard"> 23 <el-popover title="修改群名片" v-model="nameCardPopoverVisible" v-show="showEditNameCard">
24 <el-input 24 <el-input
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
34 ></i> 34 ></i>
35 </el-popover> 35 </el-popover>
36 </div> 36 </div>
37 <div> 37 <!-- <div>-->
38 <span class="label">role:</span> 38 <!-- <span class="label">身份:</span>-->
39 <span class="content role" :title="changeRoleTitle">{{ member.role }}</span> 39 <!-- <span class="content role" :title="changeRoleTitle">{{ member.role | role }}</span>-->
40 </div> 40 <!-- </div>-->
41 <div v-if="showMuteUntil"> 41 <div v-if="showMuteUntil">
42 <span class="label">禁言至:</span> 42 <span class="label">禁言至:</span>
43 <span class="content">{{ muteUntil }}</span> 43 <span class="content">{{ muteUntil }}</span>
...@@ -47,7 +47,8 @@ ...@@ -47,7 +47,8 @@
47 member.role === 'Admin' ? '取消管理员' : '设为管理员' 47 member.role === 'Admin' ? '取消管理员' : '设为管理员'
48 }} 48 }}
49 </el-button> 49 </el-button>
50 <el-button type="text" v-if="showKickout" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button> 50 <!-- <el-button type="text" v-if="showKickout" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>-->
51 <el-button type="text" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>
51 </div> 52 </div>
52 </template> 53 </template>
53 54
...@@ -55,12 +56,16 @@ ...@@ -55,12 +56,16 @@
55 import {mapState} from 'vuex' 56 import {mapState} from 'vuex'
56 import {Popover} from 'element-ui' 57 import {Popover} from 'element-ui'
57 import {getFullDate} from '../../../utils/date' 58 import {getFullDate} from '../../../utils/date'
59 import Helper from '../../../utils/helper'
58 60
59 export default { 61 export default {
60 components: { 62 components: {
61 ElPopover: Popover 63 ElPopover: Popover
62 }, 64 },
63 props: ['member'], 65 props: ['member'],
66 filters: {
67 role: val => val === 'Member' ? '成员' : (val === 'Admin' ? '管理员' : '群主')
68 },
64 data() { 69 data() {
65 return { 70 return {
66 muteTime: '', 71 muteTime: '',
...@@ -136,21 +141,30 @@ export default { ...@@ -136,21 +141,30 @@ export default {
136 }, 141 },
137 methods: { 142 methods: {
138 kickoutGroupMember() { 143 kickoutGroupMember() {
139 this.tim 144 Helper.groupMemberDelete(this.currentConversation.groupProfile.groupID, this.member.userID)
140 .deleteGroupMember({
141 groupID: this.currentConversation.groupProfile.groupID,
142 reason: '我要踢你出群',
143 userIDList: [this.member.userID]
144 })
145 .then(() => { 145 .then(() => {
146 this.$store.commit('deleteGroupMember', this.member.userID) 146 this.$store.commit('deleteGroupMember', this.member.userID)
147 }) 147 }).catch(error => {
148 .catch(error => { 148 this.$store.commit('showMessage', {
149 this.$store.commit('showMessage', { 149 type: 'error',
150 type: 'error', 150 message: error.message
151 message: error.message 151 })
152 }) 152 })
153 }) 153 // this.tim
154 // .deleteGroupMember({
155 // groupID: this.currentConversation.groupProfile.groupID,
156 // reason: '我要踢你出群',
157 // userIDList: [this.member.userID]
158 // })
159 // .then(() => {
160 // this.$store.commit('deleteGroupMember', this.member.userID)
161 // })
162 // .catch(error => {
163 // this.$store.commit('showMessage', {
164 // type: 'error',
165 // message: error.message
166 // })
167 // })
154 }, 168 },
155 changeMemberRole() { 169 changeMemberRole() {
156 if (!this.canChangeRole) { 170 if (!this.canChangeRole) {
......
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
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-show="currentUnMemberTotal !== 0" v-model="addGroupMemberVisible">
6 <add-group-member style=" width: 200px; max-height: 50vh; overflow: auto" 6 <add-group-member :group="currentConversation.groupProfile.groupID"/>
7 :group="currentConversation.groupProfile.groupID"/>
8 <div slot="reference" class="btn-add-member" title="添加群成员"> 7 <div slot="reference" class="btn-add-member" title="添加群成员">
9 <span class="tim-icon-friend-add"></span> 8 <span class="tim-icon-friend-add"></span>
10 </div> 9 </div>
...@@ -28,7 +27,9 @@ ...@@ -28,7 +27,9 @@
28 </div> 27 </div>
29 </div> 28 </div>
30 <div class="more"> 29 <div class="more">
31 <el-button v-if="showLoadMore" type="text" @click="loadMore">查看更多</el-button> 30 <el-button v-if="showLoadMore" type="text"
31 @click="loadMore">查看更多
32 </el-button>
32 </div> 33 </div>
33 </div> 34 </div>
34 </template> 35 </template>
...@@ -57,7 +58,8 @@ export default { ...@@ -57,7 +58,8 @@ export default {
57 computed: { 58 computed: {
58 ...mapState({ 59 ...mapState({
59 currentConversation: state => state.conversation.currentConversation, 60 currentConversation: state => state.conversation.currentConversation,
60 currentMemberList: state => state.group.currentMemberList 61 currentMemberList: state => state.group.currentMemberList,
62 currentUnMemberTotal: state => state.group.currentUnMemberMeta.total
61 }), 63 }),
62 showLoadMore() { 64 showLoadMore() {
63 return this.members.length < this.groupProfile.memberCount 65 return this.members.length < this.groupProfile.memberCount
......
...@@ -121,15 +121,15 @@ ...@@ -121,15 +121,15 @@
121 <div class="info-item" v-if="groupProfile.type !== 'Private'"> 121 <div class="info-item" v-if="groupProfile.type !== 'Private'">
122 <div class="label"> 122 <div class="label">
123 申请加群方式 123 申请加群方式
124 <i 124 <!-- <i-->
125 class="el-icon-edit" 125 <!-- class="el-icon-edit"-->
126 v-if="editable" 126 <!-- v-if="editable"-->
127 @click=" 127 <!-- @click="-->
128 showEditJoinOption = true 128 <!-- showEditJoinOption = true-->
129 inputFocus('editJoinOption') 129 <!-- inputFocus('editJoinOption')-->
130 " 130 <!-- "-->
131 style="cursor:pointer; font-size:16px;" 131 <!-- style="cursor:pointer; font-size:16px;"-->
132 /> 132 <!-- />-->
133 </div> 133 </div>
134 <div class="content" v-show="!showEditJoinOption"> 134 <div class="content" v-show="!showEditJoinOption">
135 {{ joinOptionMap[groupProfile.joinOption] }} 135 {{ joinOptionMap[groupProfile.joinOption] }}
...@@ -212,23 +212,23 @@ ...@@ -212,23 +212,23 @@
212 <!-- @change='changeMuteStatus'>--> 212 <!-- @change='changeMuteStatus'>-->
213 <!-- </el-switch>--> 213 <!-- </el-switch>-->
214 <!-- </div>--> 214 <!-- </div>-->
215 <div v-if="isOwner"> 215 <!-- <div v-if="isOwner">-->
216 <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button> 216 <!-- <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>-->
217 <el-input 217 <!-- <el-input-->
218 v-if="showChangeGroupOwner" 218 <!-- v-if="showChangeGroupOwner"-->
219 v-model="newOwnerUserID" 219 <!-- v-model="newOwnerUserID"-->
220 placeholder="新群主的userID" 220 <!-- placeholder="新群主的userID"-->
221 size="mini" 221 <!-- size="mini"-->
222 @blur="showChangeGroupOwner = false" 222 <!-- @blur="showChangeGroupOwner = false"-->
223 @keydown.enter.native="changeOwner" 223 <!-- @keydown.enter.native="changeOwner"-->
224 /> 224 <!-- />-->
225 </div> 225 <!-- </div>-->
226 <div> 226 <div>
227 <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button> 227 <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button>
228 </div> 228 </div>
229 <div v-if="showDissmissGroup"> 229 <!-- <div v-if="showDissmissGroup">-->
230 <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button> 230 <!-- <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>-->
231 </div> 231 <!-- </div>-->
232 </div> 232 </div>
233 </div> 233 </div>
234 </template> 234 </template>
......
...@@ -6,7 +6,7 @@ const groupModules = { ...@@ -6,7 +6,7 @@ const groupModules = {
6 groupList: [], 6 groupList: [],
7 currentMemberList: [], 7 currentMemberList: [],
8 currentUnMemberList: [], 8 currentUnMemberList: [],
9 currentUnMemberPage: 1, 9 currentUnMemberMeta: {page: 1, size: 20, total: 0},
10 createGroupModelVisible: false 10 createGroupModelVisible: false
11 }, 11 },
12 getters: { 12 getters: {
...@@ -24,7 +24,9 @@ const groupModules = { ...@@ -24,7 +24,9 @@ const groupModules = {
24 }, 24 },
25 updateCurrentUnMemberList(state, memberList) { 25 updateCurrentUnMemberList(state, memberList) {
26 state.currentUnMemberList = [...state.currentUnMemberList, ...memberList] 26 state.currentUnMemberList = [...state.currentUnMemberList, ...memberList]
27 state.currentUnMemberPage = state.currentUnMemberPage + 1 27 },
28 updateCurrentUnMemberMeta(state, meta) {
29 state.currentUnMemberMeta = meta
28 }, 30 },
29 deleteGroupMember(state, userID) { 31 deleteGroupMember(state, userID) {
30 state.currentMemberList = state.currentMemberList.filter((member) => member.userID !== userID) 32 state.currentMemberList = state.currentMemberList.filter((member) => member.userID !== userID)
...@@ -35,12 +37,14 @@ const groupModules = { ...@@ -35,12 +37,14 @@ const groupModules = {
35 resetCurrentMemberList(state) { 37 resetCurrentMemberList(state) {
36 state.currentMemberList = [] 38 state.currentMemberList = []
37 state.currentUnMemberList = [] 39 state.currentUnMemberList = []
38 state.currentUnMemberPage = 1 40 state.currentUnMemberMeta = {page: 1, size: 20, total: 0}
39 }, 41 },
40 reset(state) { 42 reset(state) {
41 Object.assign(state, { 43 Object.assign(state, {
42 groupList: [], 44 groupList: [],
43 currentMemberList: [], 45 currentMemberList: [],
46 currentUnMemberList: [],
47 currentUnMemberMeta: {page: 1, size: 20, total: 0},
44 createGroupModelVisible: false 48 createGroupModelVisible: false
45 }) 49 })
46 } 50 }
...@@ -60,8 +64,10 @@ const groupModules = { ...@@ -60,8 +64,10 @@ const groupModules = {
60 }) 64 })
61 }, 65 },
62 getGroupUnMemberList(context, groupID) { 66 getGroupUnMemberList(context, groupID) {
63 Helper.groupMemberList(groupID, {page: context.state.currentUnMemberPage, size: 20}).then(res => { 67 const {page, size} = context.state.currentUnMemberMeta
68 Helper.groupMemberList(groupID, {page, size}).then(res => {
64 context.commit('updateCurrentUnMemberList', res.data) 69 context.commit('updateCurrentUnMemberList', res.data)
70 context.commit('updateCurrentUnMemberMeta', res.meta)
65 }) 71 })
66 } 72 }
67 } 73 }
......
...@@ -51,6 +51,10 @@ export default class Helper { ...@@ -51,6 +51,10 @@ export default class Helper {
51 return request.get(`im/groups/${group}/members`, {params}) 51 return request.get(`im/groups/${group}/members`, {params})
52 } 52 }
53 53
54 static groupMemberDelete(group, member) {
55 return request.delete(`im/groups/${group}/members/${member}`)
56 }
57
54 static joinGroup(id, member) { 58 static joinGroup(id, member) {
55 return request.post(`im/groups/${id}/members`, {member}) 59 return request.post(`im/groups/${id}/members`, {member})
56 } 60 }
......