179 lines
3.9 KiB
Vue
179 lines
3.9 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,
|
|
onReady,
|
|
onPageScroll,
|
|
onUnload
|
|
} from "@dcloudio/uni-app"
|
|
|
|
// 群聊id
|
|
const groupId = ref('')
|
|
// 群聊详情
|
|
const detail = reactive({
|
|
selfInfo: {
|
|
role: '',
|
|
}
|
|
})
|
|
// 群成员
|
|
const memberList = reactive([])
|
|
// 当前成员在群聊中的身份
|
|
const role = computed(() => detail?.selfInfo?.role)
|
|
|
|
onLoad((option) => {
|
|
if (option.groupId) groupId.value = option.groupId
|
|
// 获取详情
|
|
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)
|
|
}
|
|
}).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,
|
|
})
|
|
}
|
|
</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'">
|
|
<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">
|
|
<view class="key">群聊头像</view>
|
|
<view class="value c333">
|
|
<image :src="detail.avatar" mode="aspectFill" class="wh120" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line rows ptb30">
|
|
<view class="key">群聊名称</view>
|
|
<view class="value c666">{{detail.name}}</view>
|
|
</view>
|
|
|
|
<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>
|
|
|
|
<view class="line rows ptb30">
|
|
<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">退出群聊</view>
|
|
</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;
|
|
}
|
|
}
|
|
</style> |