group mangage
This commit is contained in:
@@ -1,126 +1,128 @@
|
||||
<template>
|
||||
<custom-nav-bar @leftClick="leftClick" :title="getTitle">
|
||||
</custom-nav-bar>
|
||||
<custom-nav-bar @leftClick="leftClick" :title="getTitle">
|
||||
</custom-nav-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import { ContactChooseTypes } from "@/constant";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
CustomNavBar,
|
||||
},
|
||||
props: {
|
||||
checkVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isNomal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isTransfer: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isAt: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSetAdmin: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isMute: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCall: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
groupID: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moreMenuVisible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
if (this.isCall) {
|
||||
return "邀请成员";
|
||||
}
|
||||
if (this.isAt) {
|
||||
return "选择提醒的人";
|
||||
}
|
||||
if (this.isSetAdmin) {
|
||||
return "设置管理员";
|
||||
}
|
||||
if (this.isMute) {
|
||||
return "禁言成员";
|
||||
}
|
||||
if (this.checkVisible) {
|
||||
return "移除群成员";
|
||||
}
|
||||
return "群成员";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
if (this.checkVisible) {
|
||||
this.$emit("update:checkVisible", false);
|
||||
}
|
||||
},
|
||||
rightClick() {
|
||||
this.moreMenuVisible = true;
|
||||
},
|
||||
checkMenu() {
|
||||
if (this.moreMenuVisible) {
|
||||
this.moreMenuVisible = false;
|
||||
}
|
||||
},
|
||||
inviteMember() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
||||
});
|
||||
},
|
||||
removeMember() {
|
||||
this.$emit("removeMember");
|
||||
},
|
||||
},
|
||||
};
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import {
|
||||
ContactChooseTypes
|
||||
} from "@/constant";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
CustomNavBar,
|
||||
},
|
||||
props: {
|
||||
checkVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isNomal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isTransfer: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isAt: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSetAdmin: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isMute: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCall: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
groupID: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moreMenuVisible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
if (this.isCall) {
|
||||
return "邀请成员";
|
||||
}
|
||||
if (this.isAt) {
|
||||
return "选择提醒的人";
|
||||
}
|
||||
if (this.isSetAdmin) {
|
||||
return "设置管理员";
|
||||
}
|
||||
if (this.isMute) {
|
||||
return "禁言成员";
|
||||
}
|
||||
if (this.checkVisible) {
|
||||
return "移除群成员";
|
||||
}
|
||||
return "群成员";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
if (this.checkVisible) {
|
||||
this.$emit("update:checkVisible", false);
|
||||
}
|
||||
},
|
||||
rightClick() {
|
||||
this.moreMenuVisible = true;
|
||||
},
|
||||
checkMenu() {
|
||||
if (this.moreMenuVisible) {
|
||||
this.moreMenuVisible = false;
|
||||
}
|
||||
},
|
||||
inviteMember() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
||||
});
|
||||
},
|
||||
removeMember() {
|
||||
this.$emit("removeMember");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.more_container {
|
||||
position: relative;
|
||||
.more_container {
|
||||
position: relative;
|
||||
|
||||
.more_dot {
|
||||
padding: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.more_dot {
|
||||
padding: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-100%, 100%);
|
||||
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
|
||||
width: max-content;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-100%, 100%);
|
||||
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
|
||||
width: max-content;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.menu_item {
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
.menu_item {
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
|
||||
// &:nth-child(1) {
|
||||
// border-bottom: 1px solid #F0F0F0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
// &:nth-child(1) {
|
||||
// border-bottom: 1px solid #F0F0F0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<view @click="pageClick" class="group_members_container">
|
||||
<group-member-list-header ref="navHeaderRef" :checkVisible.sync="showCheck" :isTransfer="isTransfer"
|
||||
:isNomal="!isOwner && !isAdmin" :groupID="groupID" @removeMember="showMemberCheck" />
|
||||
<group-member-list-header
|
||||
ref="navHeaderRef"
|
||||
:checkVisible.sync="showCheck"
|
||||
:isTransfer="isTransfer"
|
||||
:isSetAdmin="isSetAdmin"
|
||||
:isNomal="!isOwner && !isAdmin"
|
||||
:groupID="groupID"
|
||||
@removeMember="showMemberCheck"
|
||||
/>
|
||||
|
||||
<view class="search_bar_wrap">
|
||||
<u-search disabled class="search_bar" shape="square" placeholder="搜索" :showAction="false"
|
||||
@@ -10,22 +17,35 @@
|
||||
|
||||
<u-list class="member_list" @scrolltolower="loadMore" lowerThreshold="100" height="1">
|
||||
<u-list-item v-for="member in groupMemberList" :key="member.userID">
|
||||
<user-item @itemClick="userClick" @updateCheck="updateCheck" :checked="isChecked(member.userID)"
|
||||
:checkVisible="showCheck" :disabled="!canCheck(member) && showCheck" :item="member" />
|
||||
<user-item
|
||||
@itemClick="userClick"
|
||||
@updateCheck="updateCheck"
|
||||
@longtapEvent="longtap"
|
||||
:checked="isChecked(member.userID)"
|
||||
:checkVisible="showCheck"
|
||||
:disabled="!canCheck(member) && showCheck" :item="member"
|
||||
/>
|
||||
</u-list-item>
|
||||
<view v-show="loadState.loading" class="member_loading">
|
||||
<u-loading-icon></u-loading-icon>
|
||||
</view>
|
||||
</u-list>
|
||||
|
||||
<choose-index-footer v-if="showCheck" :comfirmLoading="comfirmLoading" @removeItem="updateCheck"
|
||||
@confirm="confirm" :choosedData="getChoosedData" :isRemove="isRemove" :maxLength="groupMemberLength" />
|
||||
<choose-index-footer
|
||||
v-if="showCheck"
|
||||
:comfirmLoading="comfirmLoading"
|
||||
@removeItem="updateCheck"
|
||||
@confirm="confirm"
|
||||
:choosedData="getChoosedData"
|
||||
:isRemove="isRemove"
|
||||
:maxLength="groupMemberLength" />
|
||||
|
||||
<u-modal :show="showConfirmModal" asyncClose showCancelButton @confirm="modalConfirm"
|
||||
@cancel="() => (showConfirmModal = false)" :content="
|
||||
isRemove
|
||||
? '确定移除已选群成员?'
|
||||
: `确定要把群主转移给${choosedTransferMember.nickname}吗?`
|
||||
<u-modal
|
||||
:show="showConfirmModal"
|
||||
asyncClose
|
||||
showCancelButton
|
||||
@confirm="modalConfirm"
|
||||
@cancel="() => (showConfirmModal = false)" :content="isRemove? '确定移除已选群成员?': `确定要把群主转移给${choosedTransferMember.nickname}吗?`
|
||||
" />
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
@@ -61,6 +81,7 @@
|
||||
hasMore: true,
|
||||
loading: false,
|
||||
},
|
||||
adminUserIdList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -82,6 +103,9 @@
|
||||
isTransfer() {
|
||||
return this.type === GroupMemberListTypes.Transfer;
|
||||
},
|
||||
isSetAdmin() {
|
||||
return this.type === GroupMemberListTypes.setAdmin;
|
||||
},
|
||||
isChecked() {
|
||||
return (userID) => this.choosedMemberIDList.includes(userID);
|
||||
},
|
||||
@@ -93,8 +117,7 @@
|
||||
},
|
||||
isAdmin() {
|
||||
return (
|
||||
this.$store.getters.storeCurrentMemberInGroup.roleLevel ===
|
||||
GroupMemberRole.Admin
|
||||
this.$store.getters.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin
|
||||
);
|
||||
},
|
||||
canCheck() {
|
||||
@@ -125,12 +148,29 @@
|
||||
this.loadMemberList(groupID);
|
||||
this.type = type;
|
||||
this.groupID = groupID;
|
||||
this.isRightKick = type === GroupMemberListTypes.Kickout;
|
||||
if (
|
||||
this.isRightKick
|
||||
) {
|
||||
this.isRightKick = (type == GroupMemberListTypes.setAdmin|| type === GroupMemberListTypes.Kickout);
|
||||
if (this.isRightKick) {
|
||||
this.showCheck = true;
|
||||
}
|
||||
if(type == GroupMemberListTypes.setAdmin){
|
||||
IMSDK.asyncApi('getGroupMemberOwnerAndAdmin', IMSDK.uuid(), this.groupID).then(({data}) => {
|
||||
let arr = [];
|
||||
data.forEach((item)=>{
|
||||
if(item.roleLevel == GroupMemberRole.Admin){
|
||||
arr.push(item.userID);
|
||||
}
|
||||
});
|
||||
this.adminUserIdList = arr;
|
||||
this.choosedMemberIDList = arr;
|
||||
console.log(arr);
|
||||
// 调用成功
|
||||
})
|
||||
.catch(({ errCode, errMsg }) => {
|
||||
console.log(errCode, errMsg );
|
||||
// 调用失败
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
async pageClick(e) {
|
||||
@@ -146,8 +186,36 @@
|
||||
this.$refs.navHeaderRef.checkMenu();
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
this.showConfirmModal = true;
|
||||
async confirm() {
|
||||
if(this.isSetAdmin){
|
||||
uni.showLoading({mask:true})
|
||||
const remveUserIds = this.adminUserIdList.filter(userID=>{
|
||||
return !this.choosedMemberIDList.includes(userID);
|
||||
});
|
||||
const addUserIds = this.choosedMemberIDList.filter(userID=>{
|
||||
return !this.adminUserIdList.includes(userID);
|
||||
});
|
||||
remveUserIds.forEach(async (userID)=>{
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
|
||||
roleLevel:GroupMemberRole.Normal,
|
||||
groupID:this.groupID,
|
||||
userID:userID
|
||||
});
|
||||
})
|
||||
addUserIds.forEach(async (userID)=>{
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
|
||||
roleLevel:GroupMemberRole.Admin,
|
||||
groupID:this.groupID,
|
||||
userID:userID
|
||||
});
|
||||
})
|
||||
uni.hideLoading();
|
||||
this.groupMemberList = [];
|
||||
this.loadMemberList(this.groupID);
|
||||
uni.navigateBack();
|
||||
}else{
|
||||
this.showConfirmModal = true;
|
||||
}
|
||||
},
|
||||
modalConfirm() {
|
||||
let func = () => {};
|
||||
@@ -182,7 +250,6 @@
|
||||
} else {
|
||||
this.choosedMemberIDList = [...this.choosedMemberIDList, userID];
|
||||
}
|
||||
console.log(this.choosedMemberIDList);
|
||||
},
|
||||
userClick(member) {
|
||||
if (this.type === GroupMemberListTypes.Transfer) {
|
||||
@@ -227,6 +294,86 @@
|
||||
})
|
||||
.finally(() => (this.loadState.loading = false));
|
||||
},
|
||||
longtap(member){
|
||||
const _this = this;
|
||||
if(this.isRightKick){
|
||||
return ;
|
||||
}
|
||||
if(!this.isOwner&&!this.isAdmin){
|
||||
return ;
|
||||
}
|
||||
if(this.$store.getters.storeCurrentMemberInGroup.roleLevel == member.roleLevel ){
|
||||
return ;
|
||||
}
|
||||
let itemList = [];
|
||||
if(this.isOwner){
|
||||
itemList.push(member.roleLevel == GroupMemberRole.Admin ? '取消管理员' : '设为管理员');
|
||||
}
|
||||
if(this.isOwner || this.isAdmin){
|
||||
itemList.push(member.muteEndTime > 0 ? '取消禁言':'设置禁言');
|
||||
itemList.push('踢出群聊');
|
||||
}
|
||||
uni.showActionSheet({
|
||||
itemList:itemList,
|
||||
async success({tapIndex}) {
|
||||
if(tapIndex == 0){
|
||||
let roleId = itemList[tapIndex]=='设为管理员' ? GroupMemberRole.Admin : GroupMemberRole.Normal;
|
||||
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
|
||||
roleLevel:roleId,
|
||||
groupID:_this.groupID,
|
||||
userID:member.userID
|
||||
});
|
||||
_this.groupMemberList = _this.groupMemberList.map((item)=>{
|
||||
if(item.userID == member.userID){
|
||||
item.roleLevel = roleId
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return ;
|
||||
}
|
||||
if(tapIndex == 1){
|
||||
if(itemList[tapIndex]=='取消禁言'){
|
||||
_this.setMute(member.userID,0)
|
||||
return ;
|
||||
}
|
||||
uni.showActionSheet({
|
||||
itemList:['2小时','8小时','1天','3天','7天','15天','30天','1年'],
|
||||
async success(res){
|
||||
const secs = [3600*2,3600*8,3600*24,3600*72,3600*24*7,3600*24*15,3600*24*30,3600*24*365];
|
||||
_this.setMute(member.userID,secs[res.tapIndex])
|
||||
}
|
||||
});
|
||||
return ;
|
||||
}
|
||||
if(tapIndex == 2){
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.KickGroupMember,IMSDK.uuid(),{
|
||||
groupID:_this.groupID,
|
||||
reason:"",
|
||||
userIDList:[member.userID]
|
||||
});
|
||||
_this.groupMemberList = _this.groupMemberList.filter((item)=>{
|
||||
return item.userID != member.userID;
|
||||
});
|
||||
return ;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
async setMute(userID,mutedSeconds){
|
||||
const _this = this;
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.ChangeGroupMemberMute,IMSDK.uuid(),{
|
||||
mutedSeconds:mutedSeconds,
|
||||
groupID:_this.groupID,
|
||||
userID:userID
|
||||
});
|
||||
this.groupMemberList = this.groupMemberList.map((item)=>{
|
||||
if(item.userID == userID){
|
||||
item.muteEndTime = mutedSeconds===0 ? 0 : (new Date().getTime())+mutedSeconds*1000
|
||||
}
|
||||
return item;
|
||||
});
|
||||
},
|
||||
showToast(message, complete = null) {
|
||||
this.$refs.uToast.show({
|
||||
message,
|
||||
|
||||
Reference in New Issue
Block a user