216 lines
7.8 KiB
Vue
216 lines
7.8 KiB
Vue
|
|
<style scoped lang="scss">
|
|
.chat {
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.chat-scroll{
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-end;
|
|
.cell{
|
|
padding: $padding/2 $padding;
|
|
.time{
|
|
text-align: center;
|
|
text{
|
|
color: $text-gray;
|
|
font-size: $title-size-sm;
|
|
}
|
|
}
|
|
.cell-item{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
&.left{
|
|
flex-direction: row-reverse;
|
|
.avatar{
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
&.right{
|
|
flex-direction: row-reverse;
|
|
.avatar{
|
|
margin-left: 20rpx;
|
|
}
|
|
.state{
|
|
text-align: right;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.message-bar{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<view class="chat">
|
|
<!-- chat -->
|
|
<view class="chat-scroll">
|
|
<view class="cell" v-for="(item, index) in messages" :key="index">
|
|
<view class="time">
|
|
<text>{{ item.sentTime|timeCustomCN }}</text>
|
|
</view>
|
|
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
|
|
<u-avatar class="avatar" size="40" shape="square"
|
|
@click="showUser(item.senderUserId, item.messageDirection)"
|
|
:src="contact(item.senderUserId).portraitUrl" />
|
|
<view class="msg">
|
|
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
|
|
:msg="item.content" />
|
|
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
|
|
:msg="item.content" />
|
|
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
|
|
:msg="item.content" />
|
|
<view class="state" v-if="item.messageDirection == 1">
|
|
<text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view id="chatBottom"></view>
|
|
</view>
|
|
<!-- footer -->
|
|
<sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
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'
|
|
|
|
export default {
|
|
components: {
|
|
sentMessageBar,
|
|
showVoice,
|
|
showImage,
|
|
showText
|
|
},
|
|
data() {
|
|
return {
|
|
targetId: '',
|
|
messages: [],
|
|
conversationType: 1,
|
|
userInfo: {
|
|
name: '',
|
|
userId: '',
|
|
portraitUrl: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
latestMessage() {
|
|
if (this.messages.length) {
|
|
return this.messages[0]
|
|
} else {
|
|
return {
|
|
sentTime: 0
|
|
}
|
|
}
|
|
},
|
|
contact() {
|
|
return function(targetId) {
|
|
return this.$store.getters.contactInfo(targetId)
|
|
}
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.targetId = e.targetId
|
|
this.userInfo = this.$store.getters.contactInfo(this.targetId)
|
|
uni.setNavigationBarTitle({
|
|
title: this.contact(this.targetId).name
|
|
})
|
|
// 获取消息列表
|
|
this.getMessageList()
|
|
// 监听消息已读状态
|
|
uni.$on('onReadReceiptReceived', (data) => {
|
|
if (data.targetId == this.targetId) {
|
|
this.messages = this.messages.map((item) => {
|
|
if (item.messageDirection == 1 && item.sentStatus == 30 && item.receivedTime <
|
|
data.messageTime + 1000) {
|
|
item.sentStatus = 50
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
})
|
|
// 监听收到新消息，判断是否是当前会话，更新会话内容
|
|
uni.$on('onReceiveMessage', (msg) => {
|
|
if (msg.targetId == this.targetId) {
|
|
this.getNewMessage()
|
|
}
|
|
})
|
|
},
|
|
onUnload() {
|
|
uni.$off('onReadReceiptReceived')
|
|
},
|
|
methods: {
|
|
getNewMessage() {
|
|
im.getMessageList(
|
|
this.conversationType,
|
|
this.targetId,
|
|
this.latestMessage.sentTime || 0,
|
|
1,
|
|
false,
|
|
(messages) => {
|
|
console.log(messages);
|
|
this.messages.unshift(...messages)
|
|
// this.scrollBottom()
|
|
})
|
|
},
|
|
// 获取消息列表
|
|
getMessageList() {
|
|
im.getMessageList(
|
|
this.conversationType,
|
|
this.targetId,
|
|
0,
|
|
100,
|
|
true,
|
|
(messages) => {
|
|
this.messages = messages
|
|
// this.scrollBottom()
|
|
})
|
|
},
|
|
// 展示好友信息, type 1 是自己， 2 是对方
|
|
showUser(targetId, type) {
|
|
uni.navigateTo({
|
|
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
|
|
'/pages/im/friends/info?targetId=' + targetId
|
|
})
|
|
},
|
|
// 滚动到底部
|
|
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>
|
|
|