TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

群组聊天的基础功能，nvue

Browse Source
This commit is contained in:
Jason.Chen
2022-02-10 16:46:23 +08:00
parent 13aed4abf5
commit 8656ddef55
19 changed files with 361 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
pages/im/index.vue
View File

@@ -5,20 +5,13 @@
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view :class="['item', {'active': showType == 0}]" @click="showPrivate">
私聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
</view>
<view :class="['item', {'active': showType == 1}]" @click="showGroup">
群聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
</view>
<view class="item active">聊聊</view>
</view>
<view class="btns">
<view class="item" @click="scanQrCode">
<uni-icons color="#555" type="scan" size="22" />
</view>
<view class="item" @click="onNav('imFriends', {})">
<view class="item" @click="toFriendList">
<u-badge absolute max="99" :offset="[-5, -5]" :value="hasNewFriends" />
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22" />
</view>
@@ -28,10 +21,7 @@
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<!-- content -->
<view v-if="$store.state.token !== ''">
<conversation-private v-show="showType == 0" @refresh="getPrivateConversationList()"
:conversations="conversations" />
<conversation-group v-show="showType == 1" @refresh="getGroupConversationList()"
:conversations="groupConversations" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" />
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
@@ -48,26 +38,20 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import conversationPrivate from './components/conversationPrivate'
import conversationGroup from './components/conversationGroup'
import conversationList from './components/conversationList'
export default {
data() {
return {
showType: 1, // 0 单聊，1 群聊
conversations: [], // 会话列表
groupConversations: [],
connection: 0,
privateUnread: 0,
groupUnread: 0,
hasNewFriends: 0
}
},
components: {
conversationPrivate,
conversationGroup
conversationList
},
onLoad() {
onLoad() {
// 好友申请数量
this.checkNewFriendPending()
uni.$on('onConnectionStatusChange', (status) => {
@@ -75,50 +59,19 @@
})
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onShow() {
onShow() {
if (this.$store.state.token !== '') {
this.getPrivateConversationList()
this.getGroupConversationList()
}
console.log('开始监听');
this.getConversationList()
}
// 监听新消息
uni.$on('onReceivePrivateMessage', (msg) => {
this.getPrivateConversationList()
})
uni.$on('onReceiveGroupMessage', (msg) => {
this.getGroupConversationList()
})
uni.$on('onReceiveMessage', (msg) => {
this.getConversationList()
})
},
onHide() {
uni.$off('onReceivePrivateMessage')
uni.$off('onReceiveGroupMessage')
console.log('index 隐藏');
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.showToast({
title: '开发中暂未开放，敬请期待',
icon: 'none'
})
}
if (e.index == 1) {
if (this.toLogin()) {
this.$Router.push({
name: 'imFriends'
})
}
}
uni.$off('onReceiveMessage')
},
methods: {
showPrivate() {
console.log('切换到单聊');
this.showType = 0
},
showGroup() {
console.log('切换到群聊');
this.showType = 1
},
checkNewFriendPending() {
// 获取是否有新的好友申请
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -139,41 +92,16 @@
return true
},
// 获取私聊的会话列表
getPrivateConversationList() {
getConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
RongIMLib.getConversationList([1, 3], count, timestamp, (res) => {
if (res.code === 0) {
this.conversations = res.conversations
console.log(res.conversations);
}
})
},
// 获取群组会话列表
getGroupConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
if (res.code === 0) {
this.groupConversations = res.conversations
}
})
},
// 点击按钮
onNav(name, params) {
if (this.toLogin) {
if (name === '') {
uni.showToast({
title: '开发中，敬请期待',
icon: 'none'
})
return
}
this.$Router.push({
name,
params
})
}
},
// 调起扫码
scanQrCode() {
uni.scanCode({
@@ -186,62 +114,17 @@
}
}
})
},
toFriendList() {
uni.navigateTo({
url: '/pages/im/friends/index'
})
}
}
}
</script>
<style lang="scss" scoped>
// header
.custom-header {
@extend .ios-top;
background: $window-color;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex {
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs {
.item {
position: relative;
margin-left: $margin;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&:first-child {
margin: 0;
}
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns {
.item {
position: relative;
display: inline-block;
margin-left: $margin;
}
}
}
}
// contents
.contents {
background-color: $window-color;
@@ -249,6 +132,50 @@
padding-top: 90rpx + 20rpx;
box-sizing: border-box;
.custom-header {
@extend .ios-top;
background: $window-color;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex {
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs {
.item {
position: relative;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns {
.item {
position: relative;
display: inline-block;
margin-left: $margin;
}
}
}
}
.null-list {
height: 100vh;
text-align: center;