群成员组件抽离
This commit is contained in:
@@ -1,22 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="members u-border-bottom">
|
||||
<view class="users">
|
||||
<view :class="['user', {'active': item.targetId == currentUser.targetId}]"
|
||||
v-for="(item, index) in users" :key="index" @click="toUser(item)"
|
||||
@longpress="showUserActionSheet(item)">
|
||||
<u-avatar size="44" shape="square" :src="item.portraitUrl">
|
||||
</u-avatar>
|
||||
<view class="name">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="user" v-if="group.can_invite">
|
||||
<u-avatar @click="inviteUser" size="44" shape="square" icon="plus" bg-color="#eeeeee"
|
||||
color="#999999"></u-avatar>
|
||||
<view class="name">邀请好友</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view>
|
||||
<group-user-list :targetId="targetId" :count="14" />
|
||||
</view>
|
||||
|
||||
<u-cell-group class="cells">
|
||||
@@ -60,10 +45,6 @@
|
||||
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions"
|
||||
@close="showActions=false">
|
||||
</u-action-sheet>
|
||||
|
||||
<u-action-sheet @select="handleUserAction" :actions="userActionMap" cancelText="取消" :show="showUserAction"
|
||||
@close="hideUserAction">
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -72,27 +53,24 @@
|
||||
getGroupInfo,
|
||||
updateGroup,
|
||||
quitGroup,
|
||||
removeGroupUser,
|
||||
setGroupAdmin,
|
||||
removeGroupAdmin,
|
||||
dismissGroup,
|
||||
transferGroupOwner,
|
||||
getGroupUsers
|
||||
dismissGroup
|
||||
} from '@/apis/interfaces/im.js'
|
||||
import {
|
||||
uploads
|
||||
} from '@/apis/interfaces/uploading'
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import groupUserList from '../components/groupUserList'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
groupUserList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
group: {},
|
||||
conversationType: 3,
|
||||
announcement: '',
|
||||
users: [],
|
||||
members: 0,
|
||||
status: false,
|
||||
isTop: false,
|
||||
loaded: false,
|
||||
@@ -102,24 +80,7 @@
|
||||
qrContent: 'JOINGROUP|',
|
||||
joinType: '',
|
||||
joinTypeMap: [],
|
||||
showActions: false,
|
||||
showUserAction: false,
|
||||
userActionMap: [{
|
||||
key: 0,
|
||||
name: '移除成员',
|
||||
disabled: false
|
||||
}, {
|
||||
key: 1,
|
||||
name: '设置管理',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: '转移群主',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
currentUser: {}
|
||||
showActions: false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -139,18 +100,12 @@
|
||||
}
|
||||
})
|
||||
this.initData()
|
||||
this.initUsers()
|
||||
uni.$on('groupAnnouncementCreated', this.initData)
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('groupAnnouncementCreated')
|
||||
},
|
||||
methods: {
|
||||
initUsers() {
|
||||
getGroupUsers(this.targetId, 14).then(res => {
|
||||
this.users = res
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
getGroupInfo(this.targetId).then(res => {
|
||||
this.group = res.group
|
||||
@@ -190,27 +145,6 @@
|
||||
})
|
||||
})
|
||||
},
|
||||
toUser(item) {
|
||||
if (item.targetId == this.$store.getters.sender.userId) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/mine?targetId=' + item.targetId
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targetId=' + item.targetId
|
||||
})
|
||||
}
|
||||
},
|
||||
inviteUser() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/group/invite?targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
loadMore() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/group/users?targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
toAnnouncement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/group/announcement?targetId=' + this.targetId
|
||||
@@ -360,86 +294,19 @@
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '退出群聊成功'
|
||||
})
|
||||
// 移除指定的会话
|
||||
RongIMLib.removeConversation(this.conversationType, this.targetId)
|
||||
|
||||
})
|
||||
// 移除指定的会话
|
||||
RongIMLib.removeConversation(this.conversationType, this.targetId)
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/im/index'
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
showUserActionSheet(item) {
|
||||
this.currentUser = item
|
||||
// 只有管理员以上才会弹窗
|
||||
if (this.group.is_admin) {
|
||||
if (this.group.is_owner) {
|
||||
this.userActionMap.map((item) => {
|
||||
item.disabled = false
|
||||
return item
|
||||
})
|
||||
}
|
||||
this.showUserAction = true
|
||||
}
|
||||
},
|
||||
hideUserAction() {
|
||||
this.currentUser = {}
|
||||
this.showUserAction = false
|
||||
},
|
||||
handleUserAction(e) {
|
||||
switch (e.key) {
|
||||
case 0:
|
||||
removeGroupUser(this.targetId, this.currentUser.targetId).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '成员移除成功'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
}).finally(() => {
|
||||
this.initUsers()
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
setGroupAdmin(this.targetId, this.currentUser.targetId).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '设置管理成功'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
}).finally(() => {
|
||||
this.initUsers()
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
transferGroupOwner(this.targetId, this.currentUser.targetId).then(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '群主转让成功'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
}).finally(() => {
|
||||
this.initUsers()
|
||||
this.initData()
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -459,44 +326,6 @@
|
||||
.members {
|
||||
background-color: white;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.users {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.user {
|
||||
width: 126rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
background-color: $window-color;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text-gray-m;
|
||||
width: 126rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loadmore {
|
||||
font-size: 26rpx;
|
||||
color: $text-gray-m;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
||||
Reference in New Issue
Block a user