Skip to content

U
uni-im

DCloud / uni-im

通知 3
Star 2
Fork 0
U
uni-im
提交 afdef3d6 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

更新 延迟渲染，避免页面卡顿

上级 e88830fd
隐藏空白更改
内联 并排
Showing with 847 addition and 837 deletion
pages/group/members.nvue
浏览文件 @ afdef3d6
<template>
<view class="group-members-box">
<uni-search-bar v-model="keyword" class="search-bar" radius="5" placeholder="输入昵称搜索" clearButton="auto"
cancelButton="none"></uni-search-bar>
<view v-if="!leave_group" class="members-list-container" :class="{'show-less':!showAllMember}">
<template>
<view class="group-members-box">
<uni-search-bar v-model="keyword" class="search-bar" radius="5" placeholder="输入昵称搜索" clearButton="auto"
cancelButton="none"></uni-search-bar>
<view v-if="!leave_group" class="members-list-container" :class="{'show-less':!showAllMember}">
<view class="invite-box item" v-if="isAdmin">
<view class="invite">
<uni-icons @click="invite" color="#989898" size="20px" class="invite" type="plusempty"></uni-icons>
</view>
<text class="nickname">邀请</text>
</view>
<template v-for="(member,index) in memberList" :key="index">
<view class="item" :title="member.users.nickname"
:class="{'pointer': canPrivateChat,'focus':member.focus}" @click="toChat(member.users._id)"
@longpress.prevent="openConversationMenu($event,index)"
@contextmenu.prevent="openConversationMenu($event,index)"
@mousemove="hoverUserId = member.users._id"
>
<image class="avatar"
:src="(member.users.avatar_file && member.users.avatar_file.url) ? member.users.avatar_file.url:'/uni_modules/uni-im/static/avatarUrl.png'"
mode="widthFix"></image>
<text class="nickname">{{member.users.nickname||'匿名用户'}}</text>
<text v-if="member.role.includes('admin')" class="group-admin">管</text>
<text v-if="!mute_all_members && member.mute_type" class="mute-type-1">已被禁言</text>
</view>
</template>
<uni-icons @click="invite" color="#989898" size="20px" type="plusempty"></uni-icons>
</view>
<text class="nickname">邀请</text>
</view>
<template v-for="(member,index) in memberList" :key="index">
<view class="item" :title="member.users.nickname"
:class="{'pointer': canPrivateChat,'focus':member.focus}" @click="toChat(member.users._id)"
@longpress.prevent="openConversationMenu($event,index)"
@contextmenu.prevent="openConversationMenu($event,index)"
@mousemove="hoverUserId = member.users._id"
>
<image class="avatar"
:src="(member.users.avatar_file && member.users.avatar_file.url) ? member.users.avatar_file.url:'/uni_modules/uni-im/static/avatarUrl.png'"
mode="widthFix"></image>
<text class="nickname">{{member.users.nickname||'匿名用户'}}</text>
<text v-if="member.role.includes('admin')" class="group-admin">管</text>
<text v-if="!mute_all_members && member.mute_type" class="mute-type-1">已被禁言</text>
</view>
</template>
</view>
<view class="show-all-menber" v-if="showMoreBtn">
<view class="show-all-menber-btn" @click="onClickShowAllMenber">
<text>{{showAllMember ? '收起' : '查看更多'}}</text>
</view>
</view>
<uni-im-contextmenu ref="uni-im-contextmenu"></uni-im-contextmenu>
</view>
</template>
<script>
const db = uniCloud.database()
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
data() {
return {
conversation: {
group_info: {
user_id: "",
mute_all_members: false
},
group_member: {},
mute: false
},
leave_group: false,
member_list: [],
isManage: false,
editorFields: {
"name": " 群聊名称",
"introduction": "群简介",
"notification": "群公告"
},
editorType: '',
editorDefaultValue: '',
groupType: '',
isAdmin: false,
keyword: '',
mute_all_members: false,
showAllMember: false,
// 鼠标在哪个用户id上
<uni-im-contextmenu ref="uni-im-contextmenu"></uni-im-contextmenu>
</view>
</template>
<script>
const db = uniCloud.database()
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
data() {
return {
conversation: {
group_info: {
user_id: "",
mute_all_members: false
},
group_member: {},
mute: false
},
leave_group: false,
member_list: [],
isManage: false,
editorFields: {
"name": " 群聊名称",
"introduction": "群简介",
"notification": "群公告"
},
editorType: '',
editorDefaultValue: '',
groupType: '',
isAdmin: false,
keyword: '',
mute_all_members: false,
showAllMember: false,
// 鼠标在哪个用户id上
hoverUserId: '',
showMoreBtn: true
};
},
computed: {
...uniIm.mapState(['isWidescreen']),
logoUrl() {
return this.conversation.group_info.avatar_file ? this.conversation.group_info.avatar_file.url : false
},
join_option() {
let val = this.conversation.group_info.join_option
return {
needPermission: "需要验证权限",
freeAccess: "自由加入",
disableApply: "禁止加入"
} [val]
},
memberList() {
let memberList = this.member_list
// 根据关键词搜索
.filter(member => {
// 忽略大小写
return member.users.nickname.toLowerCase().includes(this.keyword.toLowerCase())
})
// 是管理员排序靠前
.sort((a, b) => {
if (a.role.includes('admin') && !b.role.includes('admin')) {
return -1
} else if (!a.role.includes('admin') && b.role.includes('admin')) {
return 1
} else {
return 0
}
showMoreBtn: true,
// 延迟渲染，避免页面卡顿
laterRenderIndex: 1
};
},
computed: {
...uniIm.mapState(['isWidescreen']),
logoUrl() {
return this.conversation.group_info.avatar_file ? this.conversation.group_info.avatar_file.url : false
},
join_option() {
let val = this.conversation.group_info.join_option
return {
needPermission: "需要验证权限",
freeAccess: "自由加入",
disableApply: "禁止加入"
} [val]
},
memberList() {
let memberList = this.member_list
// 根据关键词搜索
.filter(member => {
// 忽略大小写
return member.users.nickname.toLowerCase().includes(this.keyword.toLowerCase())
})
// 是管理员排序靠前
.sort((a, b) => {
if (a.role.includes('admin') && !b.role.includes('admin')) {
return -1
} else if (!a.role.includes('admin') && b.role.includes('admin')) {
return 1
} else {
return 0
}
})
// laterRenderIndex
.filter((item, index) => {
return index < this.laterRenderIndex * 50
})
const memberCount = memberList.length
if(memberCount && memberCount < 10){
console.log('this.member_list.length',this.member_list.length);
......@@ -107,562 +114,565 @@
if (!this.showAllMember) {
memberList = memberList.slice(0, 9)
}
return memberList
},
isGroupCreator() {
return this.conversation.group_info.user_id == uniCloud.getCurrentUserInfo().uid
},
canPrivateChat(){
// 当前登录的账号是管理员，或者当前消息是群管理员发的
return this.uniIDHasRole('staff') || this.hoverUserId && this.conversation.group_member[this.hoverUserId].role.includes('admin')
}
},
watch: {
"conversation.group_info.user_id"(adminUserId) {
// 当前用户是群的创建者或者管理员（在群成员中找到当前用户的角色包含admin）
const currentUserId = uniCloud.getCurrentUserInfo().uid
this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
//非群主 隐藏【管理】按钮
if (!this.isAdmin) {
if (!this.isWidescreen) {
// #ifdef H5
let dom = document.getElementsByClassName('uni-page-head-btn')[1]
dom.style.visibility = 'hidden'; // 隐藏元素
// #endif
// #ifdef APP-PLUS
var webview = this.$scope.$getAppWebview();
// console.log('webview', webview);
webview.setStyle({
titleNView: {
buttons: []
}
});
// #endif
}
} else {
if (this.isWidescreen) {
this.isManage = true
}
}
},
"conversation.group_member": {
handler(group_member, oldValue) {
// console.log('group_member',group_member);
this.member_list = []
for (let key in group_member) {
this.member_list.push(group_member[key])
}
if (!uniIm.isWidescreen) { // pc宽屏不需要
let title = "群信息（" + this.member_list.length + "人）"
uni.setNavigationBarTitle({
title
});
}
},
deep: true,
immediate: true
},
// （后续）通过监听实现实时切换管理员实时刷新权限
// console.log('isAdmin',isAdmin);
conversation: {
handler(conversation, oldValue) {
const currentUserId = uniCloud.getCurrentUserInfo().uid
this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
this.leave_group = conversation.leave
this.mute_all_members = conversation.group_info.mute_all_members
},
deep: true
},
},
props: {
conversation_id: {
default () {
return false
}
return memberList
},
isGroupCreator() {
return this.conversation.group_info.user_id == uniCloud.getCurrentUserInfo().uid
},
canPrivateChat(){
// 当前登录的账号是管理员，或者当前消息是群管理员发的
return this.uniIDHasRole('staff') || this.hoverUserId && this.conversation.group_member[this.hoverUserId].role.includes('admin')
}
},
async onLoad(e) {
if (!e.conversation_id) {
throw new Error("会话id不能为空")
},
onReachBottom() {
this.laterRenderIndex++
},
watch: {
"conversation.group_info.user_id"(adminUserId) {
// 当前用户是群的创建者或者管理员（在群成员中找到当前用户的角色包含admin）
const currentUserId = uniCloud.getCurrentUserInfo().uid
this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
//非群主 隐藏【管理】按钮
if (!this.isAdmin) {
if (!this.isWidescreen) {
// #ifdef H5
let dom = document.getElementsByClassName('uni-page-head-btn')[1]
dom.style.visibility = 'hidden'; // 隐藏元素
// #endif
// #ifdef APP-PLUS
var webview = this.$scope.$getAppWebview();
// console.log('webview', webview);
webview.setStyle({
titleNView: {
buttons: []
}
});
// #endif
}
} else {
if (this.isWidescreen) {
this.isManage = true
}
}
},
"conversation.group_member": {
handler(group_member, oldValue) {
// console.log('group_member',group_member);
this.member_list = []
for (let key in group_member) {
this.member_list.push(group_member[key])
}
if (!uniIm.isWidescreen) { // pc宽屏不需要
let title = "群信息（" + this.member_list.length + "人）"
uni.setNavigationBarTitle({
title
});
}
},
deep: true,
immediate: true
},
// （后续）通过监听实现实时切换管理员实时刷新权限
// console.log('isAdmin',isAdmin);
conversation: {
handler(conversation, oldValue) {
const currentUserId = uniCloud.getCurrentUserInfo().uid
this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
this.leave_group = conversation.leave
this.mute_all_members = conversation.group_info.mute_all_members
},
deep: true
},
},
props: {
conversation_id: {
default () {
return false
}
}
},
async onLoad(e) {
if (!e.conversation_id) {
throw new Error("会话id不能为空")
}
// 以页面的方式打开，不需要显示更多的按钮和隐藏部分用户
this.showMoreBtn = false
this.showAllMember = true
this.load(e.conversation_id)
},
mounted() { //pc端以组件模式加载时逻辑
if (this.conversation_id) {
this.load(this.conversation_id)
}
},
onShow() {
// console.log("this.conversation: ", this.conversation.group_member);
},
// 长按头像出现管理菜单
// onNavigationBarButtonTap(e) {
// if (e.index === 0) {}
// },
methods: {
async load(conversation_id) {
this.conversation = await uniIm.conversation.get(conversation_id)
},
async expelAndToBlack(item) {
uni.showModal({
title: '确定要将该用户移出本群并拉黑吗？',
content: '拉黑后此用户将不能再次加入本群，不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
.remove()
console.log('expel', res);
const uniImCo = uniCloud.importObject("uni-im-co")
res = await uniImCo.addToGroupMenberBlackList({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
console.log('expelAndToBlack', res);
} catch (error) {
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
async expel(item) {
uni.showModal({
title: '确定要将该用户移出本群吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
.remove()
if (res.result.deleted) {
uni.showToast({
title: '成功移除',
icon: 'none',
complete: () => {}
});
// console.log('exitGroup', res);
}
} catch (error) {
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
async changeMemberMute(item) {
let nickname = item.users.nickname || '匿名用户'
uni.showModal({
title: '确定要' + (item.mute_type ? `为"${nickname}"解除禁言吗？` : `禁言"${nickname}"吗？`),
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
_id: item._id,
mute_type: item.mute_type // 防止此时云端已经变化
})
.update({
mute_type: item.mute_type ? 0 : 1
})
// console.log('mute_type', res);
if (res.result.updated) {
item.mute_type = item.mute_type ? 0 : 1
uni.showToast({
title: '设置成功',
icon: 'none',
complete: () => {}
});
}
} catch (error) {
// console.log('error',merror)
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
openConversationMenu(e, index) {
let member = this.memberList[index]
// console.log('member', member);
let menuList = []
if (this.isAdmin) {
menuList.unshift({
"title": "移除",
"action": () => {
// console.log('移除');
this.expel(member)
}
})
menuList.unshift({
"title": "移除并拉黑",
"action": () => {
console.log('移除并拉黑');
this.expelAndToBlack(member)
}
})
if (!this.conversation.group_info.mute_all_members) {
menuList.unshift({
"title": member.mute_type ? "解除禁言" : '设为禁言',
"action": () => {
// console.log('禁言');
this.changeMemberMute(member)
}
})
}
const isAdmin = member.role.includes('admin')
menuList.push({
"title": isAdmin ? "取消管理员" : "设置管理员",
"action": () => {
let role = member.role;
if (isAdmin) {
// console.log('取消管理员');
role = member.role.filter(item => item !== 'admin')
} else {
role.push('admin')
// console.log('设置管理员');
}
uni.showLoading({
mask: true
});
db.collection('uni-im-group-member').doc(member._id).update({
"role": role
}).then(res => {
// console.log('res', res);
member.role = role
})
.catch(err => {
console.error(err)
uni.showToast({
title: err.message,
icon: 'none'
});
})
.finally(() => {
uni.hideLoading()
})
}
})
}
if (menuList.length > 0) {
member.focus = true
const myContextmenu = this.$refs['uni-im-contextmenu']
const position = {
"contextmenu": {
"top": e.clientY,
"left": e.clientX
},
"longpress": {
"top": e.touches[0].screenY || e.touches[0].clientY,
"left": e.touches[0].screenX || e.touches[0].clientX
}
} [e.type]
// #ifdef H5
position.top = position.top + 120
// #endif
myContextmenu.show(position, menuList)
myContextmenu.onClose(() => {
member.focus = false
})
}
},
invite() {
// console.log('group_info._id', this.conversation.group_info._id);
uni.navigateTo({
url: '/uni_modules/uni-im/pages/contacts/createGroup/createGroup?group_id=' + this.conversation.group_info
._id
})
},
async exitGroup() {
const group_id = this.conversation.group_info._id
if (this.isGroupCreator) {
uni.showModal({
title: '确认要解散群聊吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
let res = await db.collection('uni-im-group')
.where({
_id: group_id
})
.remove()
.finally((res) => {
// uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
// delta: 2
// })
uni.hideLoading()
})
// console.log('exitGroup', res);
}
}
});
} else {
uni.showModal({
title: '确认要退出群聊吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
// uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
// delta: 2
// })
uni.showLoading({
mask: true
});
let res = await db.collection('uni-im-group-member').where({
user_id: uniCloud.getCurrentUserInfo().uid,
group_id
})
.remove()
// console.log(res.result);
if (res.result.deleted) {
uni.showToast({
title: '成功退出',
icon: 'none'
});
}
uni.hideLoading()
// console.log('exitGroup', res);
}
}
});
}
},
openPopupInfo(type) {
// console.log(type);
if (!this.isAdmin) return
this.editorType = type
this.editorDefaultValue = this.conversation.group_info[type]
if (this.editorType == "notification") {
this.editorDefaultValue = this.editorDefaultValue?.content || ""
}
this.$refs.popupInfo.open()
},
closePopupInfo() {
this.$refs.popupInfo.close()
},
confirmPopupInfo(value) {
if (!value) {
uni.showToast({
title: '内容不能为空！',
icon: 'none'
});
return
}
// console.log('value', value);
const updateData = {};
if (this.editorType == 'notification') {
updateData[this.editorType] = {
"content": value
}; // 创建时间服务端生成
} else {
updateData[this.editorType] = value;
}
this.updateGroupInfo(updateData)
this.$refs.popupInfo.close()
},
setAddGroupType() {
if (!this.isAdmin) return
uni.showActionSheet({
itemList: ['自由加入', '需要验证权限', '禁止加入'],
success: (e) => {
let join_option = ['freeAccess', 'needPermission', 'disableApply'][e.tapIndex]
this.updateGroupInfo({
join_option
})
},
fail: (err) => {
console.error("err: ", err);
}
})
},
async updateGroupInfo(group_info) {
// console.log('group_info---------',group_info);
this.conversation.group_info = Object.assign(this.conversation.group_info, group_info)
let res = await db.collection('uni-im-group')
.doc(this.conversation.group_id)
.update(group_info)
// console.log('change group info', res.result.updated,this.conversation);
},
async setAvatar() {
if (!this.isAdmin) return
const crop = {
quality: 100,
width: 600,
height: 600,
resize: true
};
uni.chooseImage({
count: 1,
crop,
success: async (res) => {
let tempFile = res.tempFiles[0],
avatar_file = {
// #ifdef H5
extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
// #endif
// #ifndef H5
extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
// #endif
},
filePath = res.tempFilePaths[0]
// #ifndef APP-PLUS
//非app端用前端组件剪裁头像，app端用内置的原生裁剪
let isPC = false
// #ifdef H5
isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
// #endif
if (!isPC) {
filePath = await new Promise((callback) => {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/users/cropImage/cropImage?path=' +
filePath + `&options=${JSON.stringify(crop)}`,
animationType: "fade-in",
events: {
success: url => {
callback(url)
}
},
complete(e) {
// console.log(e);
}
});
})
}
// #endif
// console.log(this.users);
let cloudPath = uniCloud.getCurrentUserInfo().uid + '' + Date.now()
avatar_file.name = cloudPath
uni.showLoading({
title: "更新中",
mask: true
});
let {
fileID
} = await uniCloud.uploadFile({
filePath,
cloudPath,
fileType: "image"
});
// console.log(result)
avatar_file.url = fileID
// console.log({avatar_file});
uni.hideLoading()
this.updateGroupInfo({
avatar_file
})
}
})
},
// #ifdef H5
share() {
// 获取当前域名
const data = location.origin + "/#/?joinGroup=" + this.conversation.group_info._id
uni.setClipboardData({
data,
showToast: false,
success: () => {
uni.showToast({
title: "已成功复制分享链接",
duration: 2000,
icon: 'none'
});
}
})
// uni.navigateTo({
// url: '/uni_modules/uni-im/pages/group/groupQRCode?id=' +
// this.conversation.group_info._id +
// '&name=' + this.conversation.group_info.name +
// '&avatar_file=' + url,
// complete: (e) => {
// // console.log(e);
// }
// });
},
// #endif
joinGroup() {
db.collection('uni-im-group-join').add({
"group_id": this.conversation.group_id,
"message": ''
}).then((res) => {
// console.log("res: ", res);
uni.showToast({
icon: 'none',
title: '已申请'
})
})
},
toChat(user_id) {
if (this.canPrivateChat) {
if (uniIm.isWidescreen) {
uni.$emit('uni-im-toChat', {
user_id
})
} else {
uni.navigateTo({
url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + user_id,
animationDuration: 300
})
}
}
this.showAllMember = true
this.load(e.conversation_id)
},
mounted() { //pc端以组件模式加载时逻辑
if (this.conversation_id) {
this.load(this.conversation_id)
}
},
onShow() {
// console.log("this.conversation: ", this.conversation.group_member);
},
// 长按头像出现管理菜单
// onNavigationBarButtonTap(e) {
// if (e.index === 0) {}
// },
methods: {
async load(conversation_id) {
this.conversation = await uniIm.conversation.get(conversation_id)
},
async expelAndToBlack(item) {
uni.showModal({
title: '确定要将该用户移出本群并拉黑吗？',
content: '拉黑后此用户将不能再次加入本群，不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
.remove()
console.log('expel', res);
const uniImCo = uniCloud.importObject("uni-im-co")
res = await uniImCo.addToGroupMenberBlackList({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
console.log('expelAndToBlack', res);
} catch (error) {
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
async expel(item) {
uni.showModal({
title: '确定要将该用户移出本群吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
user_id: item.users._id,
group_id: this.conversation.group_info._id
})
.remove()
if (res.result.deleted) {
uni.showToast({
title: '成功移除',
icon: 'none',
complete: () => {}
});
// console.log('exitGroup', res);
}
} catch (error) {
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
async changeMemberMute(item) {
let nickname = item.users.nickname || '匿名用户'
uni.showModal({
title: '确定要' + (item.mute_type ? `为"${nickname}"解除禁言吗？` : `禁言"${nickname}"吗？`),
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
let res = await db.collection('uni-im-group-member').where({
_id: item._id,
mute_type: item.mute_type // 防止此时云端已经变化
})
.update({
mute_type: item.mute_type ? 0 : 1
})
// console.log('mute_type', res);
if (res.result.updated) {
item.mute_type = item.mute_type ? 0 : 1
uni.showToast({
title: '设置成功',
icon: 'none',
complete: () => {}
});
}
} catch (error) {
// console.log('error',merror)
uni.showToast({
title: error.message,
icon: 'error',
complete: () => {}
});
}
uni.hideLoading()
}
}
});
},
openConversationMenu(e, index) {
let member = this.memberList[index]
// console.log('member', member);
let menuList = []
if (this.isAdmin) {
menuList.unshift({
"title": "移除",
"action": () => {
// console.log('移除');
this.expel(member)
}
})
menuList.unshift({
"title": "移除并拉黑",
"action": () => {
console.log('移除并拉黑');
this.expelAndToBlack(member)
}
})
if (!this.conversation.group_info.mute_all_members) {
menuList.unshift({
"title": member.mute_type ? "解除禁言" : '设为禁言',
"action": () => {
// console.log('禁言');
this.changeMemberMute(member)
}
})
}
const isAdmin = member.role.includes('admin')
menuList.push({
"title": isAdmin ? "取消管理员" : "设置管理员",
"action": () => {
let role = member.role;
if (isAdmin) {
// console.log('取消管理员');
role = member.role.filter(item => item !== 'admin')
} else {
role.push('admin')
// console.log('设置管理员');
}
uni.showLoading({
mask: true
});
db.collection('uni-im-group-member').doc(member._id).update({
"role": role
}).then(res => {
// console.log('res', res);
member.role = role
})
.catch(err => {
console.error(err)
uni.showToast({
title: err.message,
icon: 'none'
});
})
.finally(() => {
uni.hideLoading()
})
}
})
}
if (menuList.length > 0) {
member.focus = true
const myContextmenu = this.$refs['uni-im-contextmenu']
const position = {
"contextmenu": {
"top": e.clientY,
"left": e.clientX
},
"longpress": {
"top": e.touches[0].screenY || e.touches[0].clientY,
"left": e.touches[0].screenX || e.touches[0].clientX
}
} [e.type]
// #ifdef H5
position.top = position.top + 120
// #endif
myContextmenu.show(position, menuList)
myContextmenu.onClose(() => {
member.focus = false
})
}
},
invite() {
// console.log('group_info._id', this.conversation.group_info._id);
uni.navigateTo({
url: '/uni_modules/uni-im/pages/contacts/createGroup/createGroup?group_id=' + this.conversation.group_info
._id
})
},
async exitGroup() {
const group_id = this.conversation.group_info._id
if (this.isGroupCreator) {
uni.showModal({
title: '确认要解散群聊吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
uni.showLoading({
mask: true
});
let res = await db.collection('uni-im-group')
.where({
_id: group_id
})
.remove()
.finally((res) => {
// uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
// delta: 2
// })
uni.hideLoading()
})
// console.log('exitGroup', res);
}
}
});
} else {
uni.showModal({
title: '确认要退出群聊吗？',
content: '不能撤销，请谨慎操作',
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
// console.log(e);
if (e.confirm) {
// uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
// delta: 2
// })
uni.showLoading({
mask: true
});
let res = await db.collection('uni-im-group-member').where({
user_id: uniCloud.getCurrentUserInfo().uid,
group_id
})
.remove()
// console.log(res.result);
if (res.result.deleted) {
uni.showToast({
title: '成功退出',
icon: 'none'
});
}
uni.hideLoading()
// console.log('exitGroup', res);
}
}
});
}
},
openPopupInfo(type) {
// console.log(type);
if (!this.isAdmin) return
this.editorType = type
this.editorDefaultValue = this.conversation.group_info[type]
if (this.editorType == "notification") {
this.editorDefaultValue = this.editorDefaultValue?.content || ""
}
this.$refs.popupInfo.open()
},
closePopupInfo() {
this.$refs.popupInfo.close()
},
confirmPopupInfo(value) {
if (!value) {
uni.showToast({
title: '内容不能为空！',
icon: 'none'
});
return
}
// console.log('value', value);
const updateData = {};
if (this.editorType == 'notification') {
updateData[this.editorType] = {
"content": value
}; // 创建时间服务端生成
} else {
updateData[this.editorType] = value;
}
this.updateGroupInfo(updateData)
this.$refs.popupInfo.close()
},
setAddGroupType() {
if (!this.isAdmin) return
uni.showActionSheet({
itemList: ['自由加入', '需要验证权限', '禁止加入'],
success: (e) => {
let join_option = ['freeAccess', 'needPermission', 'disableApply'][e.tapIndex]
this.updateGroupInfo({
join_option
})
},
fail: (err) => {
console.error("err: ", err);
}
})
},
async updateGroupInfo(group_info) {
// console.log('group_info---------',group_info);
this.conversation.group_info = Object.assign(this.conversation.group_info, group_info)
let res = await db.collection('uni-im-group')
.doc(this.conversation.group_id)
.update(group_info)
// console.log('change group info', res.result.updated,this.conversation);
},
async setAvatar() {
if (!this.isAdmin) return
const crop = {
quality: 100,
width: 600,
height: 600,
resize: true
};
uni.chooseImage({
count: 1,
crop,
success: async (res) => {
let tempFile = res.tempFiles[0],
avatar_file = {
// #ifdef H5
extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
// #endif
// #ifndef H5
extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
// #endif
},
filePath = res.tempFilePaths[0]
// #ifndef APP-PLUS
//非app端用前端组件剪裁头像，app端用内置的原生裁剪
let isPC = false
// #ifdef H5
isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
// #endif
if (!isPC) {
filePath = await new Promise((callback) => {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/users/cropImage/cropImage?path=' +
filePath + `&options=${JSON.stringify(crop)}`,
animationType: "fade-in",
events: {
success: url => {
callback(url)
}
},
complete(e) {
// console.log(e);
}
});
})
}
// #endif
// console.log(this.users);
let cloudPath = uniCloud.getCurrentUserInfo().uid + '' + Date.now()
avatar_file.name = cloudPath
uni.showLoading({
title: "更新中",
mask: true
});
let {
fileID
} = await uniCloud.uploadFile({
filePath,
cloudPath,
fileType: "image"
});
// console.log(result)
avatar_file.url = fileID
// console.log({avatar_file});
uni.hideLoading()
this.updateGroupInfo({
avatar_file
})
}
})
},
// #ifdef H5
share() {
// 获取当前域名
const data = location.origin + "/#/?joinGroup=" + this.conversation.group_info._id
uni.setClipboardData({
data,
showToast: false,
success: () => {
uni.showToast({
title: "已成功复制分享链接",
duration: 2000,
icon: 'none'
});
}
})
// uni.navigateTo({
// url: '/uni_modules/uni-im/pages/group/groupQRCode?id=' +
// this.conversation.group_info._id +
// '&name=' + this.conversation.group_info.name +
// '&avatar_file=' + url,
// complete: (e) => {
// // console.log(e);
// }
// });
},
// #endif
joinGroup() {
db.collection('uni-im-group-join').add({
"group_id": this.conversation.group_id,
"message": ''
}).then((res) => {
// console.log("res: ", res);
uni.showToast({
icon: 'none',
title: '已申请'
})
})
},
toChat(user_id) {
if (this.canPrivateChat) {
if (uniIm.isWidescreen) {
uni.$emit('uni-im-toChat', {
user_id
})
} else {
uni.navigateTo({
url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + user_id,
animationDuration: 300
})
}
}
},
onClickShowAllMenber() {
if(this.isWidescreen){
......@@ -672,205 +682,205 @@
url: '/uni_modules/uni-im/pages/group/members?conversation_id=' + this.conversation.id
})
}
},
setMuteAllMembers(e) {
for (let user_id in this.conversation.group_member) {
const member = this.conversation.group_member[user_id]
member.mute_type += (e.value ? 1 : -1)
}
this.updateGroupInfo({
"mute_all_members": e.value
})
},
changeConversationMute(e) {
this.conversation.changeMute()
}
}
}
</script>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
page,
/* #endif */
.group-members-box {
width: 750rpx;
// flex: 1;
background-color: #f5f5f5;
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
// height: calc(95vh - 70px);
// overflow-y: auto;
// flex: none;
}
/* #endif */
}
.members-list-container {
width: 750rpx;
flex-direction: row;
flex-wrap: wrap;
},
setMuteAllMembers(e) {
for (let user_id in this.conversation.group_member) {
const member = this.conversation.group_member[user_id]
member.mute_type += (e.value ? 1 : -1)
}
this.updateGroupInfo({
"mute_all_members": e.value
})
},
changeConversationMute(e) {
this.conversation.changeMute()
}
}
}
</script>
<style lang="less" scoped>
/* #ifndef APP-NVUE */
page,
/* #endif */
.group-members-box {
width: 750rpx;
// flex: 1;
background-color: #f5f5f5;
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
// height: calc(95vh - 70px);
// overflow-y: auto;
// flex: none;
}
/* #endif */
}
.members-list-container {
width: 750rpx;
flex-direction: row;
flex-wrap: wrap;
}
// 收缩
.show-less {
max-height: 400px;
}
.item {
width: 150rpx;
height: 140rpx;
margin: 5px 0;
align-items: center;
justify-content: center;
position: relative;
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
}
/* #ifdef H5 */
.windows .item {
width: 146rpx;
}
/* #endif */
.item.focus {
border: 1px dashed #ccc;
}
.group-admin {
position: absolute;
top: 5px;
right: 5px;
padding: 1px 3px;
border-radius: 6px;
background-color: #e64141;
color: #fff;
font-size: 12px;
}
.mute-type-1 {
position: absolute;
padding: 1px 10px;
background-color: #0b60ff;
color: #fff;
font-size: 10px;
bottom: 28px;
}
/* #ifdef H5 */
.pointer {
cursor: pointer;
}
/* #endif */
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 10px;
box-shadow: 0 0 1px #aaa;
}
.nickname {
width: 140rpx;
text-align: center;
font-size: 14px;
color: #666;
padding: 0 16rpx;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
lines: 1;
}
.logo {
width: 50px;
height: 50px;
}
.invite-box {
align-items: center;
}
.invite {
width: 100rpx;
height: 100rpx;
align-content: center;
border-radius: 10px;
border: #ccc dashed 1px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.exitGroup {
margin: 10px 0;
background-color: #FFFFFF;
padding: 6px 0;
color: #e64141;
border-radius: 0;
font-size: 16px;
text-align: center;
padding: 15px 0;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
/* #ifndef APP-NVUE */
.exitGroup::after {
display: none;
}
/* #endif */
.group-info-text {
color: #666;
font-size: 14px;
/* #ifndef APP-NVUE */
max-width: 560rpx;
/* #endif */
/* #ifdef APP-NVUE */
width: 560rpx;
/* #endif */
text-align: right;
}
.join_option {
color: #666;
font-size: 14px;
}
.slot-code {
align-items: center;
flex-direction: row;
}
.group-code {
width: 50rpx;
height: 50rpx;
margin-left: 10rpx;
}
.show-all-menber {
margin: 5px 0;
flex: 1;
justify-content: center;
}
.show-all-menber-btn {
flex-direction: row;
font-size: 14px;
justify-content: center;
/* #ifndef APP-NVUE */
cursor: pointer;
}
.item {
width: 150rpx;
height: 140rpx;
margin: 5px 0;
align-items: center;
justify-content: center;
position: relative;
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
}
/* #ifdef H5 */
.windows .item {
width: 146rpx;
}
/* #endif */
.item.focus {
border: 1px dashed #ccc;
}
.group-admin {
position: absolute;
top: 5px;
right: 5px;
padding: 1px 3px;
border-radius: 6px;
background-color: #e64141;
color: #fff;
font-size: 12px;
}
.mute-type-1 {
position: absolute;
padding: 1px 10px;
background-color: #0b60ff;
color: #fff;
font-size: 10px;
bottom: 28px;
}
/* #ifdef H5 */
.pointer {
cursor: pointer;
}
/* #endif */
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 10px;
box-shadow: 0 0 1px #aaa;
}
.nickname {
width: 140rpx;
text-align: center;
font-size: 14px;
color: #666;
padding: 0 16rpx;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
overflow: hidden;
text-overflow: ellipsis;
lines: 1;
}
.logo {
width: 50px;
height: 50px;
}
.invite-box {
align-items: center;
}
.invite {
width: 100rpx;
height: 100rpx;
justify-content: center;
border-radius: 10px;
border: #ccc dashed 1px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.exitGroup {
margin: 10px 0;
background-color: #FFFFFF;
padding: 6px 0;
color: #e64141;
border-radius: 0;
font-size: 16px;
text-align: center;
padding: 15px 0;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
/* #ifndef APP-NVUE */
.exitGroup::after {
display: none;
}
/* #endif */
.group-info-text {
color: #666;
font-size: 14px;
/* #ifndef APP-NVUE */
max-width: 560rpx;
/* #endif */
color: #888;
}
.show-all-menber-btn:hover {
color: #666;
}
/* #ifdef APP-NVUE */
width: 560rpx;
/* #endif */
text-align: right;
}
.join_option {
color: #666;
font-size: 14px;
}
.slot-code {
align-items: center;
flex-direction: row;
}
.group-code {
width: 50rpx;
height: 50rpx;
margin-left: 10rpx;
}
.show-all-menber {
margin: 5px 0;
flex: 1;
justify-content: center;
}
.show-all-menber-btn {
flex-direction: row;
font-size: 14px;
justify-content: center;
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
color: #888;
}
.show-all-menber-btn:hover {
color: #666;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或