324 lines
7.4 KiB
Vue
324 lines
7.4 KiB
Vue
<script setup>
|
|
// 群聊详情
|
|
|
|
// 腾讯云聊天
|
|
import TencentCloudChat from '@tencentcloud/chat';
|
|
import {
|
|
ref,
|
|
reactive,
|
|
nextTick,
|
|
onUnmounted,
|
|
onMounted,
|
|
computed,
|
|
getCurrentInstance,
|
|
watch,
|
|
} from 'vue'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onPageScroll,
|
|
onUnload
|
|
} from "@dcloudio/uni-app"
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 群聊id
|
|
const groupId = ref('')
|
|
// 群聊详情
|
|
const detail = reactive({
|
|
selfInfo: {
|
|
role: '',
|
|
}
|
|
})
|
|
// 群成员
|
|
const memberList = reactive([])
|
|
// 当前成员在群聊中的身份
|
|
const role = computed(() => detail?.selfInfo?.role)
|
|
// 群邀请菜单
|
|
const inviteMenu = reactive([{
|
|
id: 'FreeAccess',
|
|
name: '邀请无需审批',
|
|
},
|
|
// {
|
|
// id: 'NeedPermission',
|
|
// name: '需要验证',
|
|
// },
|
|
{
|
|
id: 'DisableInvite',
|
|
name: '禁止邀请',
|
|
},
|
|
])
|
|
// 邀请下标
|
|
const inviteIndex = ref('')
|
|
// 新群聊名称
|
|
const newGroupName = ref('')
|
|
|
|
onLoad((option) => {
|
|
if (option.groupId) groupId.value = option.groupId
|
|
})
|
|
|
|
onShow(() => {
|
|
// 获取详情
|
|
getDetail()
|
|
// 获取群成员列表
|
|
getGroupMemberList()
|
|
})
|
|
|
|
/**
|
|
* 获取群详细资料
|
|
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupProfile
|
|
*/
|
|
function getDetail() {
|
|
uni.$chat.getGroupProfile({
|
|
groupID: groupId.value,
|
|
}).then((rs) => {
|
|
if (rs.code == 0) {
|
|
Object.assign(detail, rs.data.group)
|
|
inviteIndex.value = inviteMenu.findIndex(item => item.id == detail.inviteOption)
|
|
}
|
|
}).catch(function(imError) {
|
|
console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 获取群成员列表
|
|
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupMemberList
|
|
*/
|
|
function getGroupMemberList() {
|
|
uni.$chat.getGroupMemberList({
|
|
groupID: groupId.value,
|
|
count: 20,
|
|
}).then(function(rs) {
|
|
memberList.length = 0
|
|
memberList.push(...rs.data.memberList)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 跳转
|
|
* @param {Object} url 跳转路径
|
|
*/
|
|
function link(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 修改群资料
|
|
* @param {Object} param 需要修改的群资料
|
|
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#updateGroupProfile
|
|
*/
|
|
function updateGroupProfile(param) {
|
|
uni.$chat.updateGroupProfile({
|
|
groupID: groupId.value,
|
|
...param,
|
|
}).then((rs) => {
|
|
console.log('updateGroupProfile then', rs)
|
|
Object.assign(detail, rs.data.group)
|
|
}).catch((imError) => {
|
|
console.log('updateGroupProfile fail', imError)
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 设置群邀请方式
|
|
* @param {Object} event
|
|
*/
|
|
function handleInvite(event) {
|
|
const index = event.detail.value
|
|
if (inviteIndex.value === index) return
|
|
inviteIndex.value = index
|
|
|
|
//
|
|
updateGroupProfile({
|
|
inviteOption: inviteMenu[inviteIndex.value].id,
|
|
})
|
|
}
|
|
|
|
// 上传群头像
|
|
function handleGroupAvatar() {
|
|
if(role.value !== 'Owner') return
|
|
//
|
|
util.upload_image({
|
|
type: 1,
|
|
success: (res) => {
|
|
//
|
|
updateGroupProfile({
|
|
avatar: res.value
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
// 点击群聊名称
|
|
function handleGroupName() {
|
|
if(role.value !== 'Owner') return
|
|
//
|
|
newGroupName.value = detail.name
|
|
//
|
|
proxy.$refs.groupName.open()
|
|
}
|
|
|
|
// 修改群聊名称
|
|
function handleGroupNameConfim() {
|
|
// 新群名是否为空
|
|
if (newGroupName.value === '') return
|
|
//
|
|
updateGroupProfile({
|
|
name: newGroupName.value
|
|
})
|
|
proxy.$refs.groupName.close()
|
|
}
|
|
|
|
/**
|
|
* 退出群聊
|
|
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#quitGroup
|
|
*/
|
|
function handleExit() {
|
|
util.alert({
|
|
content: '确认退出群聊？',
|
|
}).then(rs => {
|
|
if (!rs.confirm) return
|
|
uni.$chat.quitGroup(groupId.value).then((imResponse) => {
|
|
uni.navigateBack({
|
|
delta: 2,
|
|
})
|
|
}).catch(function(imError) {
|
|
console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
|
|
});
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<!-- 群成员列表 -->
|
|
<view class="member container mtb20 plr20 c333 f26 bfff">
|
|
|
|
<view class="header rows ptb20">
|
|
<view class="title f32">群聊成员({{detail.memberCount}})</view>
|
|
</view>
|
|
|
|
<view class="list ptb20">
|
|
<view class="item ver" v-for="(item,index) in memberList" :key="item.userID">
|
|
<image :src="item.avatar" mode="aspectFill" class="wh80 br10" />
|
|
<view class="name thd mt10 c999 f26">{{item.nick}}</view>
|
|
</view>
|
|
|
|
<view class="item ver" @click="link(util.setUrl('/pages/news/group/invite',{'groupId': groupId}))">
|
|
<view class="add fmid wh80 br10">
|
|
<uni-icons type="plus" color="#999" size="80rpx" />
|
|
</view>
|
|
<view class="name thd mt10 c999 f26">邀请</view>
|
|
</view>
|
|
|
|
<view class="item ver" v-if="role == 'Owner'"
|
|
@click="link(util.setUrl('/pages/news/group/remove',{'groupId': groupId}))">
|
|
<view class="add fmid wh80 br10">
|
|
<uni-icons type="minus" color="#999" size="80rpx" />
|
|
</view>
|
|
<view class="name thd mt10 c999 f26">移除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 群信息 -->
|
|
<view class="container plr20 c333 f34 bfff">
|
|
|
|
<view class="line rows ptb30" @click="handleGroupAvatar">
|
|
<view class="key">群聊头像</view>
|
|
<view class="value c333">
|
|
<image :src="detail.avatar" mode="aspectFill" class="wh120 br10" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line rows ptb30" @click="handleGroupName">
|
|
<view class="key">群聊名称</view>
|
|
<view class="value c666">{{detail.name}}</view>
|
|
</view>
|
|
|
|
<template v-if="0">
|
|
<view class="line ptb30">
|
|
<view class="key">群聊公告</view>
|
|
<view class="value c666">{{detail.notification}}</view>
|
|
</view>
|
|
|
|
<view class="line ptb30">
|
|
<view class="key">群聊介绍</view>
|
|
<view class="value c666">{{detail.introduction}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="line ptb30" v-if="inviteIndex !== ''">
|
|
<picker :range="inviteMenu" range-key="name" :value="inviteIndex" @change="handleInvite"
|
|
:disabled="role !== 'Owner'">
|
|
<view class="rows">
|
|
<view class="key">群邀请</view>
|
|
<view class="value f1 tar c666">{{inviteMenu[inviteIndex].name}}</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="line rows ptb30" @click="link(util.setUrl('/pages/index/report', {userId: groupId,}))">
|
|
<view class="key">举报</view>
|
|
<view class="value c666">
|
|
<uni-icons type="right" color="#999" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出群聊 -->
|
|
<view class="mtb20 ptb20 tac f34 cFF4242 bfff" @click="handleExit">退出群聊</view>
|
|
|
|
<!-- 修改名称 -->
|
|
<uni-popup ref="groupName" type="center">
|
|
<view class="groupNameAlt popMid plr30 bfff">
|
|
<view class="header rows mtb20">
|
|
<view class="title f34 c333">修改群聊名称</view>
|
|
<uni-icons type="closeempty" color="#999" size="30rpx" />
|
|
</view>
|
|
<view class="editBox mtb30 ptb10 plr20 bf8f8f8 br10">
|
|
<input type="text" v-model="newGroupName" />
|
|
</view>
|
|
<view class="btn black mtb20" @click="handleGroupNameConfim">确认</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// 群成员
|
|
.member {
|
|
.list {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
|
|
// 添加
|
|
.add,
|
|
// 删除
|
|
.remove {
|
|
box-sizing: border-box;
|
|
// border: 4rpx dashed #ddd;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
.container {
|
|
.line+.line {
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
}
|
|
|
|
// 编辑群名称
|
|
.groupNameAlt {
|
|
.editBox {
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
</style> |