225 lines
4.7 KiB
Vue
225 lines
4.7 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 = ref([])
|
|
// 表单
|
|
const form = reactive({
|
|
name: '',
|
|
groupFaceUrl: '',
|
|
type: 'Public',
|
|
})
|
|
// 列表
|
|
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 find_index = ids.value.findIndex(node => node == item.userId)
|
|
console.log(find_index)
|
|
if (find_index >= 0) ids.value.splice(find_index, 1)
|
|
else ids.value.push(item.userId)
|
|
}
|
|
|
|
// 新建群组
|
|
function handleCreateGroup() {
|
|
const data = {
|
|
...form
|
|
}
|
|
|
|
if (!data.name) {
|
|
util.alert('群聊名称不能为空')
|
|
return
|
|
}
|
|
if (!data.groupFaceUrl) {
|
|
util.alert('群聊头像不能为空')
|
|
return
|
|
}
|
|
if (ids.length < 2) {
|
|
util.alert('请至少选择两名用户')
|
|
return
|
|
}
|
|
// 群主id
|
|
data.ownerAccount = userinfo.value.id
|
|
// 群成员
|
|
data.groupUsers = [{
|
|
userId: userinfo.value.id
|
|
},
|
|
...ids.value.map(item => {
|
|
return {
|
|
userId: item
|
|
}
|
|
})
|
|
]
|
|
// 群聊id
|
|
data.groupId = Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
|
|
|
|
// 创建好友工作群
|
|
api.news.addChatGroup({
|
|
data: data
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
util.alert('创建成功')
|
|
return
|
|
|
|
//
|
|
setTimeout(() => {
|
|
form.name = ''
|
|
form.groupFaceUrl = ''
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 上传图片
|
|
function uploadImg() {
|
|
util.upload_image({
|
|
type: 1,
|
|
success: (res) => {
|
|
form.groupFaceUrl = res.value
|
|
}
|
|
})
|
|
}
|
|
</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="$refs.groupAlt.open() ">下一步</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 群聊表单信息 -->
|
|
<uni-popup ref="groupAlt" type="bottom">
|
|
<view class="groupAlt popBot ptb30 plr30 bfff">
|
|
<view class="header rows">
|
|
<view class="">新建群聊</view>
|
|
<uni-icons type="closeempty" size="40rpx" color="#333" />
|
|
</view>
|
|
|
|
<!-- -->
|
|
<view class="main">
|
|
<view class="txtplus inputBox mtb30 ptb20 plr20 br10">
|
|
<input type="text" v-model="form.name" placeholder="群聊名称" />
|
|
</view>
|
|
|
|
<view class="imgList">
|
|
<view class="imgs wh200" v-if="form.groupFaceUrl" @click="uploadImg">
|
|
<image class="wh200 br20" :src="form.groupFaceUrl" mode="aspectFill" />
|
|
</view>
|
|
<view class="imgs wh200 fmid bf8f8f8 br20" v-else @click="uploadImg">
|
|
<uni-icons type="plusempty" color="#999" size="50rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<view class="btn lg colourful" @click="handleCreateGroup">新建群聊</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</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> |