nvue-vue
This commit is contained in:
238
pages/im/private/chat.vue
Normal file
238
pages/im/private/chat.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view class="chat">
|
||||
<!-- chat -->
|
||||
<list class="body" :show-scrollbar="false">
|
||||
<cell class="cell" v-for="(item, index) in messages" :key="index">
|
||||
<view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view>
|
||||
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
|
||||
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, 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>
|
||||
</cell>
|
||||
<cell class="cell-footer" ref="chatBottom" />
|
||||
</list>
|
||||
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
timeCustomCN
|
||||
} from '@/utils/filters.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: {
|
||||
sentMessageBar,
|
||||
showVoice,
|
||||
showImage,
|
||||
showText
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
messages: [],
|
||||
conversationType: 1,
|
||||
userInfo: {
|
||||
name: '',
|
||||
userId: '',
|
||||
portraitUrl: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
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.userInfo = this.$store.getters.contactInfo(this.targetId)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.userInfo.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: {
|
||||
customCN(val) {
|
||||
return timeCustomCN(val)
|
||||
},
|
||||
getNewMessage() {
|
||||
im.getMessageList(
|
||||
this.conversationType,
|
||||
this.targetId,
|
||||
this.latestMessage.sentTime || 0,
|
||||
1,
|
||||
false,
|
||||
(messages) => {
|
||||
console.log(messages);
|
||||
this.messages = this.messages.concat(messages)
|
||||
this.scrollBottom()
|
||||
})
|
||||
},
|
||||
// 获取消息列表
|
||||
getMessageList() {
|
||||
im.getMessageList(
|
||||
this.conversationType,
|
||||
this.targetId,
|
||||
0,
|
||||
100,
|
||||
true,
|
||||
(messages) => {
|
||||
console.log(messages);
|
||||
this.messages = messages.reverse()
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 窗口 */
|
||||
.chat {
|
||||
background: $window-color;
|
||||
flex: 1;
|
||||
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
|
||||
.cell {
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.time {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.text {
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
width: 690rpx;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.right {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.state {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin: 0 20rpx;
|
||||
|
||||
.state {
|
||||
padding-top: 10rpx;
|
||||
|
||||
.state-text {
|
||||
font-size: $title-size-m - 2;
|
||||
color: rgba($color: $main-color, $alpha: 0.3)
|
||||
}
|
||||
|
||||
.state-text-active {
|
||||
font-size: $title-size-m - 2;
|
||||
color: #cecece;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-footer {
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user