组件迁移,发送完消息之后的展示,延迟
This commit is contained in:
@@ -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,44 +183,22 @@
|
|||||||
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), () => {
|
||||||
|
setTimeout(() => {
|
||||||
this.getMessageList()
|
this.getMessageList()
|
||||||
|
}, 500)
|
||||||
})
|
})
|
||||||
this.transcribeTime = 60
|
this.transcribeTime = 60
|
||||||
this.showAudioTranscribe = false
|
this.showAudioTranscribe = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getMessageList() {
|
|
||||||
// 获取消息列表
|
// 获取消息列表
|
||||||
const objectNames = [
|
getMessageList() {
|
||||||
'RC:TxtMsg',
|
im.getMessageList(this.conversationType, this.targetId, (messages) => {
|
||||||
'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.messages = messages.reverse()
|
||||||
this.scrollBottom()
|
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, () => {
|
||||||
@@ -245,19 +208,21 @@
|
|||||||
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
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>
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name:"im",
|
name: 'showImage',
|
||||||
props: {
|
props: {
|
||||||
msg: {
|
msg: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -32,6 +32,7 @@
|
|||||||
.im--img {
|
.im--img {
|
||||||
padding: 19rpx;
|
padding: 19rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im--img.left {
|
.im--img.left {
|
||||||
border-radius: 0 20rpx 20rpx 20rpx;
|
border-radius: 0 20rpx 20rpx 20rpx;
|
||||||
background: white;
|
background: white;
|
||||||
@@ -41,6 +42,7 @@
|
|||||||
border-radius: 20rpx 0 20rpx 20rpx;
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
background: #34CE98;
|
background: #34CE98;
|
||||||
}
|
}
|
||||||
|
|
||||||
.src {
|
.src {
|
||||||
width: 240rpx;
|
width: 240rpx;
|
||||||
}
|
}
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name:"im",
|
name: 'showText',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "im",
|
name: 'showVoice',
|
||||||
props: {
|
props: {
|
||||||
msg: {
|
msg: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@@ -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 消息类型
|
||||||
@@ -146,6 +184,7 @@ const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
getMessageList,
|
||||||
sentText,
|
sentText,
|
||||||
sentVoice,
|
sentVoice,
|
||||||
sentImage,
|
sentImage,
|
||||||
|
|||||||
Reference in New Issue
Block a user