组件迁移，发送完消息之后的展示，延迟
This commit is contained in:
@@ -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,66 +183,46 @@
|
||||
recorderManager.onStop(res => {
|
||||
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this
|
||||
.transcribeTime), () => {
|
||||
this.getMessageList()
|
||||
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) {
|
||||
this.messages = messages.reverse()
|
||||
this.scrollBottom()
|
||||
}
|
||||
}
|
||||
)
|
||||
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, () => {
|
||||
setTimeout(() => {
|
||||
this.getMessageList()
|
||||
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
|
||||
setTimeout(() => {
|
||||
this.getMessageList()
|
||||
}, 500)
|
||||
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
15
pages/im/private/components/sentText.nvue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
15
pages/im/private/components/sentVoice.nvue
Normal file
15
pages/im/private/components/sentVoice.nvue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
49
pages/im/private/components/showImage.nvue
Normal file
49
pages/im/private/components/showImage.nvue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="im--img" :class="guest ? 'right': 'left'">
|
||||
<image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showImage',
|
||||
props: {
|
||||
msg: {
|
||||
type: String,
|
||||
default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openImg() {
|
||||
uni.previewImage({
|
||||
urls: [this.msg],
|
||||
current: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.im--img {
|
||||
padding: 19rpx;
|
||||
}
|
||||
|
||||
.im--img.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.im--img.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: #34CE98;
|
||||
}
|
||||
|
||||
.src {
|
||||
width: 240rpx;
|
||||
}
|
||||
</style>
|
||||
46
pages/im/private/components/showText.nvue
Normal file
46
pages/im/private/components/showText.nvue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view class="im--box">
|
||||
<text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showText',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
msg: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.im--text {
|
||||
max-width: 400rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.im--text.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.im--text.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: #34CE98;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
98
pages/im/private/components/showVoice.nvue
Normal file
98
pages/im/private/components/showVoice.nvue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view>
|
||||
<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>
|
||||
<text class="audio-text">"{{msg.duration}}"</text>
|
||||
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showVoice',
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
local: '',
|
||||
remote: '',
|
||||
objectName: '',
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 播放语音消息
|
||||
onPlayMsg() {
|
||||
uni.downloadFile({
|
||||
url: this.msg.remote,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
let innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.src = res.tempFilePath
|
||||
if (this.audioContextPaused) {
|
||||
innerAudioContext.play()
|
||||
this.audioContextPaused = false
|
||||
return
|
||||
}
|
||||
innerAudioContext.stop()
|
||||
innerAudioContext.onStop(resStop => {
|
||||
this.audioContextPaused = true
|
||||
})
|
||||
innerAudioContext.onError(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.im--audio {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 79rpx;
|
||||
width: 170rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
,
|
||||
.im--audio.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.im--audio.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: #34CE98;
|
||||
}
|
||||
|
||||
.audio-mp3 {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.audio-text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.im--audio.left .audio-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.im--audio.right .audio-text {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user