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

调整聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-02-18 17:03:26 +08:00
parent 88c6a85d07 780ffd647a
commit 18f0332fa2
25 changed files with 570 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,88 @@
<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 -->
<scroll-view class="body" scroll-y>
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ customCN(item.sentTime) }}</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>
</view>
<view class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<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 {
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'
@@ -38,8 +90,6 @@
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
const ChatList = uni.requireNativePlugin('dom')
export default {
components: {
sentMessageBar,
@@ -62,7 +112,7 @@
computed: {
latestMessage() {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
return this.messages[0]
} else {
return {
sentTime: 0
@@ -75,7 +125,7 @@
}
}
},
onLoad(e) {
onLoad(e) {
this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
@@ -106,9 +156,6 @@
uni.$off('onReadReceiptReceived')
},
methods: {
customCN(val) {
return timeCustomCN(val)
},
getNewMessage() {
im.getMessageList(
this.conversationType,
@@ -116,10 +163,10 @@
this.latestMessage.sentTime || 0,
1,
false,
(messages) => {
(messages) => {
console.log(messages);
this.messages = this.messages.concat(messages)
this.scrollBottom()
this.messages.unshift(...messages)
// this.scrollBottom()
})
},
// 获取消息列表
@@ -131,9 +178,8 @@
100,
true,
(messages) => {
console.log(messages);
this.messages = messages.reverse()
this.scrollBottom()
this.messages = messages
// this.scrollBottom()
})
},
// 展示好友信息, type 1 是自己， 2 是对方
@@ -144,7 +190,7 @@
})
},
// 滚动到底部
scrollBottom(type) {
scrollBottom(type) {
if (this.latestMessage) {
// 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
@@ -153,8 +199,9 @@
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
// 更新badge提醒数量
im.setNotifyBadge()
}
setTimeout(() => {
}
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
@@ -165,69 +212,4 @@
}
}
</script>
<style scoped lang="scss">
/* 窗口 */
.chat {
background: $window-color;
height: 100vh;
display: flex;
flex-direction: column;
.body {
flex: 1;
overflow: scroll;
.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>