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

158 lines
3.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 apex from '@/components/header/apex.vue'
// 腾讯云聊天
import TencentCloudChat from '@tencentcloud/chat';
// api
import api from '@/api/index.js'
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() {
api.news.getFriendList().then(rs => {
if (rs.code == 200) {
const result = rs.data
list.length = 0
//
list.push(...result)
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
/**
* 点击用户
* @param {Object} item 当前用户信息
*/
function handleUser(item) {
const findIndex = ids.value.findIndex(node => node == item.userId)
if (findIndex >= 0) ids.value.splice(findIndex, 1)
else ids.value.push(item.userId)
}
// 新建群组
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">
<view class="firendBox pr">
<view class="list bfff">
<view class="li" v-for="(item, index) in list" :key="index" @click="handleUser(item)">
<view class="item rows ptb20 pl30 pr50">
<image class="wh80 avatar cir" :src="item.avatar" mode="aspectFill" />
<view class="name thd f1 ml20 c333 f32">{{item.remark || item.userNickname}}</view>
<uni-icons type="circle-filled" size="40rpx" color="#20D200"
v-if="ids.includes(item.userID)" />
<uni-icons type="circle" size="40rpx" color="#ccc" v-else />
</view>
</view>
</view>
<view class="mtb20 nomore">到底啦~</view>
</view>
</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">
// 朋友列表
.firendBox {
height: 100%;
.scroll {
height: 100%;
}
// 列表项
.li {
.letter {
background-color: #eee;
}
}
// 子集
.child {
.item+.item {
border-top: 2rpx solid #eee;
}
}
}
</style>