333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<template>
|
|
<view class="member--list">
|
|
<view class="users">
|
|
<view :class="['user', {'active': item.targetId === currentUser.targetId}]" @longpress="showAction(item)"
|
|
v-for="(item, index) in users" :key="index" @click="toUser(item)">
|
|
<view class="avatar">
|
|
<u-avatar :size="avatarSize" shape="square"
|
|
:src="contact(item.targetId).portraitUrl || require('@/static/user/cover.png')" />
|
|
<view class="admin" v-if="item.is_admin === 1">管理</view>
|
|
<view class="owner" v-if="item.is_admin === 2">群主</view>
|
|
</view>
|
|
<view class="name">{{ item.name }}</view>
|
|
</view>
|
|
<view class="user" v-if="canInvite">
|
|
<u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9"
|
|
color="#c7c7c7" />
|
|
<view class="name">邀请好友</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loadmore">
|
|
<u-icon name="arrow-right" @click="loadMore" v-if="members > users.length" color="#999" labelColor="#999"
|
|
label="查看更多群成员" labelPos="left" :labelSize="labelSize" :size="iconSize" />
|
|
</view>
|
|
|
|
<u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
|
|
@select="handleAction" :show="actionShow" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGroupUsers,
|
|
getGroupBase,
|
|
removeGroupUser,
|
|
setGroupAdmin,
|
|
removeGroupAdmin,
|
|
transferGroupOwner
|
|
} from '@/apis/interfaces/im.js'
|
|
import utils from '@/utils/index.js'
|
|
import imBase from '@/utils/im/imBase.js'
|
|
|
|
export default {
|
|
mixins: [
|
|
imBase
|
|
],
|
|
props: {
|
|
targetId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
count: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
users: [],
|
|
isOwner: false,
|
|
isAdmin: false,
|
|
canInvite: false, // 是否可以开启邀请
|
|
adminUid: 0,
|
|
members: 0,
|
|
actionShow: false,
|
|
actionMap: [],
|
|
actionTitle: '',
|
|
currentUser: {},
|
|
avatarSize: 40,
|
|
labelSize: 14,
|
|
iconSize: 14
|
|
}
|
|
},
|
|
created() {
|
|
this.avatarSize = utils.rpx2px(84)
|
|
this.labelSize = utils.rpx2px(24)
|
|
this.iconSize = utils.rpx2px(26)
|
|
},
|
|
mounted() {
|
|
this.initGroupInfo()
|
|
getGroupUsers(this.targetId, this.count).then(res => {
|
|
this.users = res
|
|
res.map(item => {
|
|
this.$store.dispatch('updateContact', item)
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
initGroupInfo() {
|
|
getGroupBase(this.targetId).then(res => {
|
|
this.isOwner = res.is_owner
|
|
this.isAdmin = res.is_admin
|
|
this.adminUid = res.user_id
|
|
this.members = res.members
|
|
this.canInvite = res.can_invite
|
|
})
|
|
},
|
|
initUsers() {
|
|
getGroupUsers(this.targetId, this.count).then(res => {
|
|
this.users = res
|
|
})
|
|
this.currentUser = {}
|
|
},
|
|
hideAction(item) {
|
|
this.actionShow = false
|
|
},
|
|
showAction(item) {
|
|
this.currentUser = item
|
|
this.actionTitle = item.name
|
|
// 只有管理员以上才会弹窗
|
|
if (this.isAdmin) {
|
|
if (this.isOwner) {
|
|
if (!item.is_admin) {
|
|
this.actionMap = [{
|
|
key: 0,
|
|
name: '移除成员',
|
|
disabled: false
|
|
}, {
|
|
key: 1,
|
|
name: '设置管理',
|
|
disabled: false
|
|
}, {
|
|
key: 2,
|
|
name: '转移群主',
|
|
disabled: false
|
|
}]
|
|
} else {
|
|
this.actionMap = [{
|
|
key: 0,
|
|
name: '移除成员',
|
|
disabled: false
|
|
}, {
|
|
key: 4,
|
|
name: '取消管理',
|
|
disabled: false
|
|
}, {
|
|
key: 2,
|
|
name: '转移群主',
|
|
disabled: false
|
|
}]
|
|
}
|
|
} else {
|
|
this.actionMap = [{
|
|
key: 0,
|
|
name: '移除成员',
|
|
disabled: false
|
|
}]
|
|
}
|
|
this.actionShow = true
|
|
}
|
|
},
|
|
handleAction(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 4:
|
|
removeGroupAdmin(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:
|
|
uni.showModal({
|
|
title: '转让群主',
|
|
content: '这个操作不可逆转，确定要转让群主身份么？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log(this.targetId, this.currentUser.targetId);
|
|
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.initGroupInfo()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
inviteUser() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/group/invite?targetId=' + this.targetId
|
|
})
|
|
},
|
|
loadMore() {
|
|
uni.navigateTo({
|
|
url: '/pages/im/group/users?targetId=' + this.targetId
|
|
})
|
|
},
|
|
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
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 0 8rpx 0 0;
|
|
position: relative;
|
|
width: 84rpx;
|
|
overflow: hidden;
|
|
|
|
.admin {
|
|
position: absolute;
|
|
background-color: $main-color;
|
|
transform: rotate(45deg);
|
|
color: #ffffff;
|
|
font-size: 16rpx;
|
|
width: 100rpx;
|
|
padding-top: 30rpx;
|
|
text-align: center;
|
|
right: -45rpx;
|
|
top: -20rpx;
|
|
}
|
|
|
|
.owner {
|
|
position: absolute;
|
|
background-color: $text-price;
|
|
transform: rotate(45deg);
|
|
color: #ffffff;
|
|
font-size: 16rpx;
|
|
width: 100rpx;
|
|
padding-top: 30rpx;
|
|
text-align: center;
|
|
right: -45rpx;
|
|
top: -20rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.name {
|
|
color: 20rpx;
|
|
width: 126rpx;
|
|
padding-top: 6rpx;
|
|
text-align: center;
|
|
font-size: 22rpx !important;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-break: break-word;
|
|
color: $text-gray-m !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.loadmore {
|
|
font-size: 26rpx;
|
|
color: $text-gray-m;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|