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-18 17:20:13 +08:00
parent a03a991292
commit f8c3933e83
2 changed files with 108 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/im/components/conversationList.vue
View File

@@ -39,7 +39,7 @@
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
popButton: ['置顶聊天', '标记已读', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {},
@@ -72,6 +72,9 @@
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else if (index == 1) {
RongIMLib.clearMessagesUnreadStatus(this.pickedItem.conversationType, this.pickedItem.targetId, this
.pickedItem.sentTime)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
@@ -96,8 +99,6 @@
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item

197
pages/im/private/chat.vue
View File

@@ -1,87 +1,33 @@
<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 class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<!-- chat -->
<view class="body">
<view class="scroll">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ item.sentTime|timeCustomCN }}</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>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
@@ -89,7 +35,6 @@
import showImage from '../components/showImage'
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
export default {
components: {
sentMessageBar,
@@ -125,7 +70,7 @@
}
}
},
onLoad(e) {
onLoad(e) {
this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
@@ -189,7 +134,7 @@
})
},
// 滚动到底部
scrollBottom(type) {
scrollBottom(type) {
if (this.latestMessage) {
// 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
@@ -198,16 +143,82 @@
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;
height: 100vh;
display: flex;
flex-direction: column-reverse;
.body {
overflow: scroll;
flex: 1;
height: 0;
display: flex;
flex-direction: column-reverse;
.scroll {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
.cell {
padding: 10rpx 30rpx;
.time {
text-align: center;
font-size: 24rpx;
color: #666;
}
.cell-item {
display: flex;
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>