jiuyiUniapp/jiuyi2/pages/news/group/invite.vue

146 lines
3.3 KiB
Vue

<script setup>
// 邀请加群
// 腾讯云聊天
import TencentCloudChat from '@tencentcloud/chat';
import {
ref,
reactive,
nextTick,
onUnmounted,
onMounted,
computed,
getCurrentInstance,
watch,
} from 'vue'
// api
import api from '@/api/index.js'
// 工具库
import util from '@/common/js/util.js'
import {
onLoad,
onReady,
onPageScroll,
onUnload
} from "@dcloudio/uni-app"
// 群组id
const groupId = ref('')
// 好友列表
const friendList = reactive([])
// 群成员列表
const memberList = reactive([])
// 新增成员
const newMemberIds = reactive([])
onLoad((option) => {
if (option.groupId) groupId.value = option.groupId
// 获取好友列表
getFriendList()
// 获取群成员列表
getGroupMemberList()
})
// 获取好友列表
function getFriendList() {
//
api.news.getFriendList().then(rs => {
if (rs.code == 200) {
const result = rs.data
friendList.length = 0
friendList.push(...result)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
/**
* 获取群成员列表
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupMemberList
*/
function getGroupMemberList() {
uni.$chat.getGroupMemberList({
groupID: groupId.value,
count: 100,
}).then(function(rs) {
memberList.length = 0
memberList.push(...rs.data.memberList)
console.log('memberList', memberList)
})
}
/**
* 是否群成员
* @param {Object} userId 用户id
*/
function hasMamber(userId) {
let result = memberList.find(node => node.userID == userId)
return Boolean(result)
}
/**
* 选择人员
* @param {Object} item 人员信息
*/
function handleUser(item) {
if (hasMamber(item.userId)) return
let find_index = newMemberIds.findIndex(node => node === item.userId)
if (find_index >= 0) newMemberIds.splice(find_index, 1)
else newMemberIds.push(item.userId)
}
/**
* 添加群成员
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#addGroupMember
*/
function handleSubmit() {
uni.$chat.addGroupMember({
groupID: groupId.value,
userIDList: newMemberIds,
}).then((rs) => {
uni.navigateBack()
}).catch((imError) => {
console.warn('addGroupMember error:', imError); // 错误信息
});
}
</script>
<template>
<view class="appbw">
<view class="list pb30">
<view class="item rows mlr20" v-for="(item, index) in friendList" :key="item.userId" :id="item.userId"
@click="handleUser(item)">
<view class="checkBox">
<template v-if="hasMamber(item.userId)">
<uni-icons type="checkbox-filled" size="40rpx" color="#37B11166" />
</template>
<template v-else-if="newMemberIds.includes(item.userId)">
<uni-icons type="checkbox-filled" size="40rpx" color="#37B111" />
</template>
<template v-else>
<uni-icons type="circle" size="40rpx" color="#999" />
</template>
</view>
<view class="child pl30 pr50 f1">
<view class="item rows ptb20">
<image class="wh80 avatar cir" :src="item.avatar" mode="aspectFill" />
<view class="name thd f1 ml20 c333 f32">{{ item.remark || item.userNickname }}</view>
</view>
</view>
</view>
<view class="mtb20 nomore">到底啦~</view>
</view>
<view class="footer plr30 bfff">
<view class="btn colourful" @click="handleSubmit">添加</view>
</view>
</view>
</template>
<style lang="scss">
</style>