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-07 11:24:46 +08:00
parent b202a62d5d
commit eb88bf56f8
7 changed files with 302 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/im/private/chat.nvue
View File

@@ -1,7 +1,7 @@
<template>
<view class="chat">
<!-- chat -->
<list class="chat-scroll">
<list class="chat-scroll" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time">
<text class="cell-time-text">{{ customCN(item.sentTime) }}</text>
@@ -10,12 +10,12 @@
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg">
<imAUDIO v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content"></imAUDIO>
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imIMG>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imTXT>
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content"></show-voice>
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></show-image>
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></show-text>
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
@@ -58,19 +58,18 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
import imAUDIO from '@/components/im/imAUDIO'
import imIMG from '@/components/im/imIMG'
import imTXT from '@/components/im/imTXT'
import showVoice from './components/showVoice'
import showImage from './components/showImage'
import showText from './components/showText'
var transcribe
var recorderManager = uni.getRecorderManager()
const recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default {
data() {
return {
targetId: '',
scrollIntoID: 'chatID_0',
inputTxt: '',
messages: [],
conversationType: 1,
@@ -86,9 +85,9 @@
}
},
components: {
imAUDIO,
imIMG,
imTXT
showVoice,
showImage,
showText
},
onLoad(e) {
this.targetId = e.targetId
@@ -134,20 +133,6 @@
return this.inputTxt.length == 0
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
})
}
},
methods: {
customCN(val) {
return timeCustomCN(val)
@@ -198,44 +183,22 @@
recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this
.transcribeTime), () => {
setTimeout(() => {
this.getMessageList()
}, 500)
})
this.transcribeTime = 60
this.showAudioTranscribe = false
})
},
getMessageList() {
// 获取消息列表
const objectNames = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
]
const timeStamp = new Date().getTime()
const count = 10 // 获取的消息数量
const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
count,
isForward,
({
code,
messages
}) => {
if (code === 0) {
getMessageList() {
im.getMessageList(this.conversationType, this.targetId, (messages) => {
this.messages = messages.reverse()
this.scrollBottom()
}
}
)
})
},
// 发送文本消息
send() {
if (this.inputTxt === '') return
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
@@ -245,19 +208,21 @@
this.inputTxt = ''
})
},
// 展示好友信息
showFriend(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId
})
},
// 滚动到底部
scrollBottom() {
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
animated: true
animated: false
})
}, 100)
}, 50)
}
}
}

15
pages/im/private/components/sentText.nvue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>

15
pages/im/private/components/sentVoice.nvue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>

26
components/im/imIMG.vue → pages/im/private/components/showImage.nvue
View File

@@ -6,10 +6,10 @@
<script>
export default {
name:"im",
props:{
msg : {
type : String,
name: 'showImage',
props: {
msg: {
type: String,
default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
},
guest: {
@@ -17,11 +17,11 @@
default: true
}
},
methods:{
openImg(){
methods: {
openImg() {
uni.previewImage({
urls : [this.msg],
current : 1
urls: [this.msg],
current: 1
})
}
}
@@ -29,19 +29,21 @@
</script>
<style scoped>
.im--img{
.im--img {
padding: 19rpx;
}
.im--img.left{
.im--img.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
.im--img.right{
.im--img.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: #34CE98;
}
.src{
.src {
width: 240rpx;
}
</style>

14
components/im/imTXT.vue → pages/im/private/components/showText.nvue
View File

@@ -6,15 +6,15 @@
<script>
export default {
name:"im",
name: 'showText',
data() {
return {
};
},
props:{
msg : {
type : String,
props: {
msg: {
type: String,
default: ''
},
guest: {
@@ -26,19 +26,19 @@
</script>
<style scoped>
.im--text{
.im--text {
max-width: 400rpx;
padding: 20rpx;
font-size: 28rpx;
line-height: 40rpx;
}
.im--text.left{
.im--text.left {
border-radius: 0 20rpx 20rpx 20rpx;
background: white;
}
.im--text.right{
.im--text.right {
border-radius: 20rpx 0 20rpx 20rpx;
background: #34CE98;
color: white;

2
components/im/imAUDIO.vue → pages/im/private/components/showVoice.nvue
View File

@@ -10,7 +10,7 @@
<script>
export default {
name: "im",
name: 'showVoice',
props: {
msg: {
type: Object,

39
utils/im/message.js
View File

@@ -1,5 +1,43 @@
import store from '@/store/index.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
const getMessageList = (conversationType, targetId, callback) => {
// 获取消息列表
const objectNames = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
]
const timeStamp = new Date().getTime()
const count = 10 // 获取的消息数量
const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(conversationType, targetId, objectNames, timeStamp,
count,
isForward,
({
code,
messages
}) => {
if (code === 0) {
callback(messages)
} else {
uni.showToast({
icon: 'error',
title: code
})
}
}
)
}
/**
* 发送文本消息
* @param {number} conversationType 消息类型
@@ -146,6 +184,7 @@ const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
}
export default {
getMessageList,
sentText,
sentVoice,
sentImage,