jiuyiUniapp/jiuyi2/pages/news/detail/group.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>