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

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

@@ -1,7 +1,7 @@
<template> <template>
<view class="chat"> <view class="chat">
<!-- chat --> <!-- chat -->
<list class="chat-scroll"> <list class="chat-scroll" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index"> <cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time"> <view class="cell-time">
<text class="cell-time-text">{{ customCN(item.sentTime) }}</text> <text class="cell-time-text">{{ customCN(item.sentTime) }}</text>
@@ -10,12 +10,12 @@
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill" <image class="active" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showFriend(targetId, item.messageDirection)"></image> @click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg"> <view class="msg">
<imAUDIO v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content"></imAUDIO> :msg="item.content"></show-voice>
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imIMG> :msg="item.content.content"></show-image>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></imTXT> :msg="item.content.content"></show-text>
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view> </view>
@@ -58,19 +58,18 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js" import permision from "@/js_sdk/wa-permission/permission.js"
import imAUDIO from '@/components/im/imAUDIO' import showVoice from './components/showVoice'
import imIMG from '@/components/im/imIMG' import showImage from './components/showImage'
import imTXT from '@/components/im/imTXT' import showText from './components/showText'
var transcribe var transcribe
var recorderManager = uni.getRecorderManager() const recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom') const ChatList = uni.requireNativePlugin('dom')
export default { export default {
data() { data() {
return { return {
targetId: '', targetId: '',
scrollIntoID: 'chatID_0',
inputTxt: '', inputTxt: '',
messages: [], messages: [],
conversationType: 1, conversationType: 1,
@@ -86,9 +85,9 @@
} }
}, },
components: { components: {
imAUDIO, showVoice,
imIMG, showImage,
imTXT showText
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
@@ -134,20 +133,6 @@
return this.inputTxt.length == 0 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: { methods: {
customCN(val) { customCN(val) {
return timeCustomCN(val) return timeCustomCN(val)
@@ -198,66 +183,46 @@
recorderManager.onStop(res => { recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this
.transcribeTime), () => { .transcribeTime), () => {
this.getMessageList() setTimeout(() => {
this.getMessageList()
}, 500)
}) })
this.transcribeTime = 60 this.transcribeTime = 60
this.showAudioTranscribe = false this.showAudioTranscribe = false
}) })
}, },
// 获取消息列表
getMessageList() { getMessageList() {
// 获取消息列表 im.getMessageList(this.conversationType, this.targetId, (messages) => {
const objectNames = [ this.messages = messages.reverse()
'RC:TxtMsg', this.scrollBottom()
'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) {
this.messages = messages.reverse()
this.scrollBottom()
}
}
)
}, },
// 发送文本消息
send() { send() {
if (this.inputTxt === '') return if (this.inputTxt === '') return
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => { im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
setTimeout(() => { setTimeout(() => {
this.getMessageList() this.getMessageList()
}, 500) }, 500)
this.inputTxt = '' this.inputTxt = ''
}) })
}, },
// 展示好友信息
showFriend(targetId, type) { showFriend(targetId, type) {
uni.navigateTo({ uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId : url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId '/pages/im/friends/info?targetId=' + targetId
}) })
}, },
// 滚动到底部
scrollBottom() { scrollBottom() {
setTimeout(() => { setTimeout(() => {
let el = this.$refs.chatBottom let el = this.$refs.chatBottom
ChatList.scrollToElement(el, { 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>

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

@@ -1,47 +1,49 @@
<template> <template>
<view class="im--img" :class="guest ? 'right': 'left'"> <view class="im--img" :class="guest ? 'right': 'left'">
<image class="src" :src="msg" @click="openImg" mode="widthFix"></image> <image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name:"im", name: 'showImage',
props:{ props: {
msg : { msg: {
type : String, type: String,
default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg' default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
}, },
guest: { guest: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
methods:{ methods: {
openImg(){ openImg() {
uni.previewImage({ uni.previewImage({
urls : [this.msg], urls: [this.msg],
current : 1 current: 1
}) })
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.im--img{ .im--img {
padding: 19rpx; padding: 19rpx;
} }
.im--img.left{
border-radius: 0 20rpx 20rpx 20rpx; .im--img.left {
background: white; border-radius: 0 20rpx 20rpx 20rpx;
} background: white;
}
.im--img.right{
border-radius: 20rpx 0 20rpx 20rpx; .im--img.right {
background: #34CE98; border-radius: 20rpx 0 20rpx 20rpx;
} background: #34CE98;
.src{ }
width: 240rpx;
} .src {
width: 240rpx;
}
</style> </style>

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

@@ -1,46 +1,46 @@
<template> <template>
<view class="im--box"> <view class="im--box">
<text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text> <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name:"im", name: 'showText',
data() { data() {
return { return {
}; };
}, },
props:{ props: {
msg : { msg: {
type : String, type: String,
default: '' default: ''
}, },
guest: { guest: {
type: Boolean, type: Boolean,
default: true default: true
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.im--text{ .im--text {
max-width: 400rpx; max-width: 400rpx;
padding: 20rpx; padding: 20rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
} }
.im--text.left{ .im--text.left {
border-radius: 0 20rpx 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: white; background: white;
} }
.im--text.right{ .im--text.right {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 20rpx 0 20rpx 20rpx;
background: #34CE98; background: #34CE98;
color: white; color: white;
} }
</style> </style>

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

@@ -1,98 +1,98 @@
<template> <template>
<view> <view>
<view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg"> <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image> <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="audio-text">"{{msg.duration}}"</text> <text class="audio-text">"{{msg.duration}}"</text>
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image> <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "im", name: 'showVoice',
props: { props: {
msg: { msg: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
local: '', local: '',
remote: '', remote: '',
objectName: '', objectName: '',
duration: 0 duration: 0
} }
} }
}, },
guest: { guest: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
methods: { methods: {
// 播放语音消息 // 播放语音消息
onPlayMsg() { onPlayMsg() {
uni.downloadFile({ uni.downloadFile({
url: this.msg.remote, url: this.msg.remote,
success: (res) => { success: (res) => {
if (res.statusCode === 200) { if (res.statusCode === 200) {
let innerAudioContext = uni.createInnerAudioContext() let innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.src = res.tempFilePath innerAudioContext.src = res.tempFilePath
if (this.audioContextPaused) { if (this.audioContextPaused) {
innerAudioContext.play() innerAudioContext.play()
this.audioContextPaused = false this.audioContextPaused = false
return return
} }
innerAudioContext.stop() innerAudioContext.stop()
innerAudioContext.onStop(resStop => { innerAudioContext.onStop(resStop => {
this.audioContextPaused = true this.audioContextPaused = true
}) })
innerAudioContext.onError(err => { innerAudioContext.onError(err => {
console.log(err); console.log(err);
}) })
} }
} }
}) })
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.im--audio { .im--audio {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 79rpx; height: 79rpx;
width: 170rpx; width: 170rpx;
padding: 0 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
} }
, ,
.im--audio.left { .im--audio.left {
border-radius: 0 20rpx 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: white; background: white;
} }
.im--audio.right { .im--audio.right {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 20rpx 0 20rpx 20rpx;
background: #34CE98; background: #34CE98;
} }
.audio-mp3 { .audio-mp3 {
width: 38rpx; width: 38rpx;
height: 38rpx; height: 38rpx;
} }
.audio-text { .audio-text {
font-size: 30rpx; font-size: 30rpx;
} }
.im--audio.left .audio-text { .im--audio.left .audio-text {
color: #333; color: #333;
} }
.im--audio.right .audio-text { .im--audio.right .audio-text {
color: white; color: white;
} }
</style> </style>

63
utils/im/message.js
View File

@@ -1,5 +1,43 @@
import store from '@/store/index.js' import store from '@/store/index.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index' 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 消息类型 * @param {number} conversationType 消息类型
@@ -7,7 +45,7 @@ import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
* @param {string} content 消息内容 * @param {string} content 消息内容
* @param {function} callback 回调函数 * @param {function} callback 回调函数
*/ */
const sentText = (conversationType, targetId, content, callback) => { const sentText = (conversationType, targetId, content, callback) => {
console.log('发送'); console.log('发送');
const msg = { const msg = {
conversationType: conversationType, conversationType: conversationType,
@@ -31,7 +69,7 @@ const sentText = (conversationType, targetId, content, callback) => {
}) })
} }
}) })
} }
/** /**
* 发送消息 * 发送消息
@@ -144,11 +182,12 @@ const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
} }
}) })
} }
export default { export default {
sentText, getMessageList,
sentVoice, sentText,
sentImage, sentVoice,
sentGif, sentImage,
sendFile sentGif,
} sendFile
}