146 lines
3.3 KiB
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> |