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

群聊的基础页面

Browse Source
This commit is contained in:
Jason.Chen
2022-02-10 10:22:43 +08:00
parent 699c178bd7
commit e2243bcc99
22 changed files with 940 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
pages/im/index.vue
View File

@@ -5,16 +5,15 @@
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view class="item show">
<view :class="['item', {'active': showType == 0}]" @click="showPrivate">
私聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="privateUnread" />
</view>
<view class="item" @click="onNav('', {})">
<view :class="['item', {'active': showType == 1}]" @click="showGroup">
群聊
<u-badge absolute max="99" shape="horn" :offset="[-7, -7]" :value="groupUnread" />
</view>
</view>
<view class="btns">
<view class="item" @click="scanQrCode">
<uni-icons color="#555" type="scan" size="22" />
@@ -26,39 +25,13 @@
</view>
</view>
</view>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<!-- content -->
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty mode="message" textColor="#999" text="暂无好友消息" />
</view>
</block>
<block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了,请检查网络" :show-icon="true" />
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
@click="toDetail(item)" @longpress="onLongPress" :data-item="item">
<view class="avatar" @click="toFriend(item.targetId)">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
:value="item.unreadMessageCount" />
<u-avatar :src="friend(item.targetId).portraitUrl" shape="square" size="44" />
</view>
<view class="content u-border-bottom">
<view class="header">
<view class="name">{{ friend(item.targetId).name }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" />
</view>
</view>
<view class="shade" @click="hidePop" v-show="showPop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</block>
<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" />
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
@@ -75,67 +48,52 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import messagePreview from './components/messagePreview'
import {
getImToken
} from '@/apis/interfaces/im.js'
import conversationPrivate from './components/conversationPrivate'
import conversationGroup from './components/conversationGroup'
export default {
data() {
return {
isShown: true, // 当前页面显示状态
showType: 1, // 0 单聊，1 群聊
conversations: [], // 会话列表
groupConversations: [],
connection: 0,
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
privateUnread: 0,
groupUnread: 0,
hasNewFriends: 0
}
},
components: {
messagePreview
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
conversationPrivate,
conversationGroup
},
onLoad() {
// 好友申请数量
// 好友申请数量
this.checkNewFriendPending()
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
uni.$on('onContactNotification', this.checkNewFriendPending)
},
onShow() {
onShow() {
if (this.$store.state.token !== '') {
this.getConversationList()
}
this.getPrivateConversationList()
this.getGroupConversationList()
}
// 监听新消息
uni.$on('onReceiveMessage', (msg) => {
console.log('收到消息，刷新列表');
this.getConversationList()
// todo ，不知道这个获取未读数量的，有没有办法能获取私聊的，还有群组的
// RongIMLib.getTotalUnreadCount(({
// count
// }) => {
// this.privateUnread = count
// })
})
uni.$on('onReceivePrivateMessage', (msg) => {
this.getPrivateConversationList()
})
uni.$on('onReceiveGroupMessage', (msg) => {
this.getGroupConversationList()
})
this.isShown = true
},
onHide() {
uni.$off('onReceiveMessage')
uni.$off('onReceivePrivateMessage')
uni.$off('onReceiveGroupMessage')
this.isShown = false
},
onNavigationBarButtonTap(e) {
@@ -154,6 +112,14 @@
}
},
methods: {
showPrivate() {
console.log('切换到单聊');
this.showType = 0
},
showGroup() {
console.log('切换到群聊');
this.showType = 1
},
checkNewFriendPending() {
// 获取是否有新的好友申请
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
@@ -164,52 +130,6 @@
}
})
},
// 隐藏功能菜单
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
// 点击会话功能菜单
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
}
im.setNotifyBadge()
this.getConversationList()
this.hidePop()
},
// 长按会话，展示功能菜单
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
// 检查登录
toLogin() {
if (this.$store.state.token === '') {
@@ -219,7 +139,8 @@
}
return true
},
getConversationList() {
// 获取私聊的会话列表
getPrivateConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
@@ -228,16 +149,14 @@
}
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/chat?targetId=' + item.targetId
})
},
toFriend(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + targetId
// 获取群组会话列表
getGroupConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList([RongIMLib.ConversationType.GROUP], count, timestamp, (res) => {
if (res.code === 0) {
this.groupConversations = res.conversations
}
})
},
// 点击按钮
@@ -306,7 +225,7 @@
margin: 0;
}
&.show {
&.active {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
@@ -346,105 +265,6 @@
box-sizing: border-box;
}
}
.message {
background: white;
padding: 20rpx 0 0 20rpx;
position: relative;
display: flex;
&.is-top {
background: $window-color;
border-bottom: #e8e8e8;
}
.avatar {
position: relative;
.u-badge {
z-index: 998;
}
}
.content {
margin-left: 30rpx;
width: calc(100% - 46px);
box-sizing: border-box;
position: relative;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 2;
color: #454545;
color: #454545;
}
.time {
font-size: $title-size-sm;
color: $text-gray-m;
position: absolute;
right: 30rpx;
}
}
.preview {
word-break: break-all;
color: $text-gray-m;
padding-top: $padding - 20;
padding-bottom: $padding;
font-size: $title-size-m;
height: 32rpx;
line-height: 32rpx;
width: 500rpx;
@extend .nowrap;
}
}
}
}
/* 遮罩 */
.shade {
position: fixed;
width: 100%;
height: 100%;
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
.u-border-bottom {