merge
This commit is contained in:
唐明明
255
pages/im/group/chat.vue
Normal file
255
pages/im/group/chat.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="group--chat">
|
||||
<scroll-view class="body" :show-scrollbar="false">
|
||||
<view class="cell" v-for="(item, index) in messages" :key="index">
|
||||
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
|
||||
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
|
||||
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
|
||||
:src="contact(item.senderUserId).portraitUrl" />
|
||||
<view class="msg">
|
||||
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" :name="contact(item.senderUserId).name" />
|
||||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" :name="contact(item.senderUserId).name" />
|
||||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" :name="contact(item.senderUserId).name" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell-footer" ref="chatBottom"></view>
|
||||
</scroll-view>
|
||||
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
timeCustomCN
|
||||
} from '@/utils/filters.js'
|
||||
import {
|
||||
getGroupBase
|
||||
} from '@/apis/interfaces/im.js'
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import im from '@/utils/im/index.js'
|
||||
import showVoice from '../components/showVoice'
|
||||
import showImage from '../components/showImage'
|
||||
import showText from '../components/showText'
|
||||
import sentMessageBar from '../components/sentMessageBar'
|
||||
|
||||
const ChatList = uni.requireNativePlugin('dom')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
showVoice,
|
||||
showImage,
|
||||
showText,
|
||||
sentMessageBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
conversationType: RongIMLib.ConversationType.GROUP,
|
||||
messages: [],
|
||||
groupInfo: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
latestMessage() {
|
||||
if (this.messages.length) {
|
||||
return this.messages[this.messages.length - 1]
|
||||
} else {
|
||||
return {
|
||||
sentTime: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId
|
||||
this.groupInfo = this.$store.getters.contactInfo(this.targetId)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.groupInfo.name
|
||||
})
|
||||
// 获取群成员数量
|
||||
getGroupBase(this.targetId).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.groupInfo.name + `(${res.members})`
|
||||
})
|
||||
})
|
||||
// 获取历史消息列表
|
||||
this.getMessageList()
|
||||
// 监听收到本群的消息，追加消息
|
||||
uni.$on('onReceiveMessage', (msg) => {
|
||||
if (msg.targetId == this.targetId) {
|
||||
this.getNewMessage()
|
||||
}
|
||||
})
|
||||
// 清理聊天记录
|
||||
uni.$once('cleanGroupMessage', this.getMessageList)
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/group/info?targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
<<<<<<< HEAD:pages/im/group/chat.nvue
|
||||
methods: {
|
||||
onScroll(e){
|
||||
this.$refs.messageBar.onHidePopus()
|
||||
},
|
||||
=======
|
||||
methods: {
|
||||
// 转到好友资料页面
|
||||
>>>>>>> 6c0feb9cb60e7c756df3bbe34e36fbe467b90d27:pages/im/group/chat.vue
|
||||
toUser(item) {
|
||||
if (item.senderUserId == '__system__') {
|
||||
return
|
||||
}
|
||||
if (item.messageDirection == 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/mine?targetId=' + item.senderUserId
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targetId=' + item.senderUserId
|
||||
})
|
||||
}
|
||||
},
|
||||
getNewMessage() {
|
||||
im.getMessageList(
|
||||
this.conversationType,
|
||||
this.targetId,
|
||||
this.latestMessage.sentTime,
|
||||
10,
|
||||
false,
|
||||
(messages) => {
|
||||
this.messages = this.messages.concat(messages)
|
||||
this.scrollBottom()
|
||||
})
|
||||
},
|
||||
// 获取消息列表
|
||||
getMessageList() {
|
||||
im.getMessageList(
|
||||
this.conversationType,
|
||||
this.targetId,
|
||||
0,
|
||||
100,
|
||||
true,
|
||||
(messages) => {
|
||||
this.messages = messages.reverse()
|
||||
this.scrollBottom()
|
||||
})
|
||||
},
|
||||
// 滚动到底部
|
||||
scrollBottom(type) {
|
||||
if (this.latestMessage) {
|
||||
// 清理当前会话，未读消息数量
|
||||
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
|
||||
.sentTime)
|
||||
// // 发送消息已读状态给对方
|
||||
// RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
|
||||
// 更新badge提醒数量
|
||||
im.setNotifyBadge()
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
let el = this.$refs.chatBottom
|
||||
ChatList.scrollToElement(el, {
|
||||
offset: 0,
|
||||
animated: false
|
||||
})
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group--chat {
|
||||
background: $window-color;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.body {
|
||||
overflow: scroll;
|
||||
flex: 1;
|
||||
|
||||
.cell {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.cell-system {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 690rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&.left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.right {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.state {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin: 0 20rpx;
|
||||
|
||||
.user {
|
||||
font-size: 18rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-footer {
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: white;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
|
||||
.msg-type {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
|
||||
.icon {
|
||||
margin: 5rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user