jiuyiUniapp/jiuyi/pages/news/group-chat/index.vue

117 lines
2.2 KiB
Vue

<script setup>
/**
* 发起群聊
*/
import {
ref,
reactive,
computed
} from 'vue'
import {
useStore
} from 'vuex'
import {
onLoad
} from '@dcloudio/uni-app'
// 工具库
import util from '@/common/js/util.js'
// 通讯录
import book from './book'
// 头部
import apex from '@/components/header/apex.vue'
// 腾讯云聊天
import TencentCloudChat from '@tencentcloud/chat';
const store = useStore()
// 已选择的用户id
const ids = reactive([])
// 名称
const name = ref('')
// 列表
const list = reactive([])
// 用户信息
const userinfo = computed(() => {
let result = store.state.userinfo
return result
})
onLoad(() => {
// 获取朋友列表
getFriendList()
})
// 获取朋友列表
function getFriendList() {
// 验证sdk是否准备完毕
let isReady = uni.$chat.isReady();
if (!isReady) {
setTimeout(function() {
getFriendList()
}, 200);
return
}
uni.$chat.getFriendList().then(rs => {
if (rs.code == 0) {
const result = rs.data
//
list.push(...result)
}
})
}
// 新建群组
function handleCreateGroup() {
if (!name.value) {
util.alert('群聊名称不能为空')
return
}
if (ids.length < 2) {
util.alert('请至少选择两名用户')
return
}
// 成员列表
const memberList = [{
userID: userinfo.value.userId,
},
...ids.map(item => {
return {
userID: item
}
})
]
// 创建好友工作群
uni.$chat.createGroup({
type: TencentCloudChat.TYPES.GRP_WORK,
name: name.value,
memberList,
}).then(rs => {
console.log('createGroup success', rs)
util.alert('创建成功')
}).catch(rs => {
console.log('createGroup catch', rs);
})
}
</script>
<template>
<view class="app">
<uni-search-bar placeholder="请输入群聊名称" v-model="name" style="background: #fff;" />
<view class="jy-chat-box mt30">
<book :list="list" v-model:ids="ids" />
</view>
<view class="fill" style="height: 120rpx;"></view>
<view class="footer plr30 bfff shadow">
<view class="btn lg colourful" @click="handleCreateGroup">新建群聊</view>
</view>
</view>
</template>
<style scoped lang="scss">
//
</style>