语音消息发送成功，播放暂时不支持带token的路径
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||
* moduleName: 聊聊
|
||||
*/
|
||||
|
||||
import store from '@/store'
|
||||
import {
|
||||
request
|
||||
} from '../index'
|
||||
@@ -84,9 +84,9 @@ const pedingFriend = (recipient) => {
|
||||
url: 'im/friends/' + recipient
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 好友申请数量
|
||||
|
||||
/**
|
||||
* 好友申请数量
|
||||
*/
|
||||
const getPendingCount = () => {
|
||||
return request({
|
||||
@@ -94,6 +94,49 @@ const getPendingCount = () => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传聊天附件
|
||||
* 图片
|
||||
* 语音
|
||||
* 视频
|
||||
*/
|
||||
// 基础配置
|
||||
const config = {
|
||||
apiUrl: 'http://api.zh.shangkelian.cn/api/', // 正式环境
|
||||
timeout: 60000
|
||||
}
|
||||
|
||||
const uploadMessageFile = (file, type) => {
|
||||
config.header = {
|
||||
'Accept': 'application/json',
|
||||
'Authorization': store.getters.getToken || ''
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: config.apiUrl + 'im/upload',
|
||||
filePath: file,
|
||||
name: 'upload',
|
||||
formData: {
|
||||
type
|
||||
},
|
||||
header: config.header || {},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
let updData = JSON.parse(res.data)
|
||||
if (updData.status_code === 200) {
|
||||
resolve(updData.data)
|
||||
} else {
|
||||
reject(updData)
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('ERR', err);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
getImToken,
|
||||
deleteFriend,
|
||||
@@ -105,5 +148,6 @@ export {
|
||||
rejectFriend,
|
||||
searchFriend,
|
||||
pedingFriend,
|
||||
getPendingCount
|
||||
getPendingCount,
|
||||
uploadMessageFile
|
||||
}
|
||||
|
||||
@@ -1,80 +1,93 @@
|
||||
<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.time}}"</text>
|
||||
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"im",
|
||||
props:{
|
||||
msg : {
|
||||
type : Object,
|
||||
default: () => {
|
||||
return {
|
||||
src: "",
|
||||
time: "20"
|
||||
}
|
||||
}
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 播放语音消息
|
||||
onPlayMsg() {
|
||||
let innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.src = this.audioSrc
|
||||
if (this.audioContextPaused) {
|
||||
innerAudioContext.play()
|
||||
this.audioContextPaused = false
|
||||
return
|
||||
}
|
||||
innerAudioContext.stop()
|
||||
innerAudioContext.onStop(resStop => {
|
||||
this.audioContextPaused = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
<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: "im",
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
local: '',
|
||||
remote: '',
|
||||
objectName: '',
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 播放语音消息
|
||||
onPlayMsg() {
|
||||
console.log('播放', this.msg.remote);
|
||||
let innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.src = this.msg.remote
|
||||
if (this.audioContextPaused) {
|
||||
innerAudioContext.play()
|
||||
this.audioContextPaused = false
|
||||
return
|
||||
}
|
||||
innerAudioContext.stop()
|
||||
innerAudioContext.onStop(resStop => {
|
||||
console.log('停止');
|
||||
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>
|
||||
|
||||
@@ -1,393 +1,412 @@
|
||||
<template>
|
||||
<view class="chat">
|
||||
<!-- chat -->
|
||||
<list class="chat-scroll">
|
||||
<cell class="cell" v-for="(item, index) in messages" :key="index">
|
||||
<view class="cell-time">
|
||||
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill" @click="showFriend(targetId, item.messageDirection)"></image>
|
||||
<view class="msg">
|
||||
<imAUDIO v-if="item.objectName === 'RC:VcMsg'" :guest="item.messageDirection == 1" :msg="item.content.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>
|
||||
<view class="state" v-if="item.messageDirection == 1">
|
||||
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</cell>
|
||||
<cell class="cell-footer" ref="chatBottom"></cell>
|
||||
</list>
|
||||
<!-- footer -->
|
||||
<view class="chat-footer">
|
||||
<view class="msg-type" @click="msgType">
|
||||
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
|
||||
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
|
||||
</view>
|
||||
<block v-if="importTabs === 0">
|
||||
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
|
||||
<text class="chat-mp3-text">按住说话</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="importTabs === 1">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
|
||||
</block>
|
||||
<text class="chat-push" size="mini" @click="send">发送</text>
|
||||
</view>
|
||||
<!-- 录音中提示 -->
|
||||
<view class="audio-transcribe" v-if="showAudioTranscribe">
|
||||
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
|
||||
<text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
|
||||
var transcribe
|
||||
var recorderManager = uni.getRecorderManager()
|
||||
|
||||
const ChatList = uni.requireNativePlugin('dom')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
scrollIntoID: 'chatID_0',
|
||||
inputTxt: '',
|
||||
messages: [],
|
||||
conversationType: 1,
|
||||
totalCount: 0,
|
||||
userInfo: {
|
||||
name: '',
|
||||
userId: '',
|
||||
portraitUrl: ''
|
||||
},
|
||||
importTabs: 1,
|
||||
showAudioTranscribe: false,
|
||||
transcribeTime: 60,
|
||||
audioSrc: '',
|
||||
audioContextPaused: true
|
||||
}
|
||||
},
|
||||
components:{ imAUDIO, imIMG, imTXT },
|
||||
onLoad(e) {
|
||||
|
||||
console.log(e)
|
||||
console.log(11111)
|
||||
|
||||
this.targetId = e.targetId
|
||||
this.conversationType = e.conversationType // 会话类型
|
||||
// 消息总数量
|
||||
RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
|
||||
code,
|
||||
count
|
||||
}) => {
|
||||
if (code == 0) {
|
||||
this.totalCount = count
|
||||
}
|
||||
})
|
||||
this.userInfo = this.$store.getters.userInfo(this.targetId)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$store.getters.userInfo(this.targetId).name
|
||||
})
|
||||
|
||||
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
|
||||
im.setNotifyBadge()
|
||||
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
|
||||
|
||||
this.getMessageList()
|
||||
|
||||
// 监听消息回执
|
||||
RongIMLib.addReadReceiptReceivedListener(({
|
||||
data
|
||||
}) => {
|
||||
if (data.targetId == this.targetId) {
|
||||
this.getMessageList()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听录音结束
|
||||
recorderManager.onStop(res => {
|
||||
if (res.tempFilePath) this.audioSrc = res.tempFilePath
|
||||
console.log('------------------获取到了录音的临时路径---------------')
|
||||
console.log(res.tempFilePath)
|
||||
})
|
||||
// 简童收到新消息，判断是否是当前会话，更新会话内容
|
||||
uni.$on('onReceiveMessage', (msg) => {
|
||||
if (msg.targetId == this.targetId) {
|
||||
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
this.getMessageList()
|
||||
im.setNotifyBadge()
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('onReceiveMessage')
|
||||
},
|
||||
onUnload() {
|
||||
RongIMLib.clearReadReceiptReceivedListener()
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
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: {
|
||||
// 检查安卓录制权限
|
||||
async getAndroidPermission() {
|
||||
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
||||
},
|
||||
// 切换聊天信息
|
||||
msgType() {
|
||||
this.importTabs = this.importTabs === 1 ? 0 : 1
|
||||
},
|
||||
// 录制语音消息
|
||||
startAudio(e) {
|
||||
this.getAndroidPermission().then(code => {
|
||||
switch (code) {
|
||||
case 1:
|
||||
this.showAudioTranscribe = true
|
||||
recorderManager.start()
|
||||
transcribe = setInterval(() => {
|
||||
this.transcribeTime -= 1
|
||||
if (this.transcribeTime === 0) {
|
||||
this.chendAudio()
|
||||
}
|
||||
}, 1000)
|
||||
break;
|
||||
case 0:
|
||||
uni.showToast({
|
||||
title: '暂无麦克风权限，请前往应用设置开启麦克风',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
case -1:
|
||||
uni.showToast({
|
||||
title: '应用权限错误',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 结束录音
|
||||
chendAudio(e) {
|
||||
if (!this.showAudioTranscribe) return
|
||||
recorderManager.stop()
|
||||
clearInterval(transcribe)
|
||||
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 = 20 // 获取的消息数量
|
||||
const isForward = true // 是否向前获取
|
||||
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
|
||||
count,
|
||||
isForward,
|
||||
({
|
||||
code,
|
||||
messages
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
console.log(this.messages)
|
||||
this.messages = messages.reverse()
|
||||
this.scrollBottom()
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
send() {
|
||||
if(this.inputTxt === '') return
|
||||
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
|
||||
this.getMessageList()
|
||||
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
|
||||
<template>
|
||||
<view class="chat">
|
||||
<!-- chat -->
|
||||
<list class="chat-scroll">
|
||||
<cell class="cell" v-for="(item, index) in messages" :key="index">
|
||||
<view class="cell-time">
|
||||
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<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>
|
||||
<view class="state" v-if="item.messageDirection == 1">
|
||||
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</cell>
|
||||
<cell class="cell-footer" ref="chatBottom"></cell>
|
||||
</list>
|
||||
<!-- footer -->
|
||||
<view class="chat-footer">
|
||||
<view class="msg-type" @click="msgType">
|
||||
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix">
|
||||
</image>
|
||||
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<block v-if="importTabs === 0">
|
||||
<view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
|
||||
<text class="chat-mp3-text">按住说话</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="importTabs === 1">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
|
||||
cursor-spacing="10" />
|
||||
</block>
|
||||
<text class="chat-push" size="mini" @click="send">发送</text>
|
||||
</view>
|
||||
<!-- 录音中提示 -->
|
||||
<view class="audio-transcribe" v-if="showAudioTranscribe">
|
||||
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
|
||||
<text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
|
||||
var transcribe
|
||||
var recorderManager = uni.getRecorderManager()
|
||||
|
||||
const ChatList = uni.requireNativePlugin('dom')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
scrollIntoID: 'chatID_0',
|
||||
inputTxt: '',
|
||||
messages: [],
|
||||
conversationType: 1,
|
||||
userInfo: {
|
||||
name: '',
|
||||
userId: '',
|
||||
portraitUrl: ''
|
||||
},
|
||||
importTabs: 1,
|
||||
showAudioTranscribe: false,
|
||||
transcribeTime: 60,
|
||||
audioSrc: '',
|
||||
audioContextPaused: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
imAUDIO,
|
||||
imIMG,
|
||||
imTXT
|
||||
},
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId
|
||||
this.conversationType = e.conversationType // 会话类型
|
||||
this.userInfo = this.$store.getters.userInfo(this.targetId)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$store.getters.userInfo(this.targetId).name
|
||||
})
|
||||
|
||||
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
|
||||
im.setNotifyBadge()
|
||||
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
|
||||
|
||||
this.getMessageList()
|
||||
|
||||
// 监听消息回执
|
||||
RongIMLib.addReadReceiptReceivedListener(({
|
||||
data
|
||||
}) => {
|
||||
if (data.targetId == this.targetId) {
|
||||
this.getMessageList()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听收到新消息，判断是否是当前会话，更新会话内容
|
||||
uni.$on('onReceiveMessage', (msg) => {
|
||||
if (msg.targetId == this.targetId) {
|
||||
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
this.getMessageList()
|
||||
im.setNotifyBadge()
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('onReceiveMessage')
|
||||
},
|
||||
onUnload() {
|
||||
RongIMLib.clearReadReceiptReceivedListener()
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
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: {
|
||||
// 检查安卓录制权限
|
||||
async getAndroidPermission() {
|
||||
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
||||
},
|
||||
// 切换聊天信息
|
||||
msgType() {
|
||||
this.importTabs = this.importTabs === 1 ? 0 : 1
|
||||
},
|
||||
// 录制语音消息
|
||||
startAudio(e) {
|
||||
this.getAndroidPermission().then(code => {
|
||||
switch (code) {
|
||||
case 1:
|
||||
this.showAudioTranscribe = true
|
||||
recorderManager.start()
|
||||
transcribe = setInterval(() => {
|
||||
this.transcribeTime -= 1
|
||||
if (this.transcribeTime === 0) {
|
||||
this.chendAudio()
|
||||
}
|
||||
}, 1000)
|
||||
break;
|
||||
case 0:
|
||||
uni.showToast({
|
||||
title: '暂无麦克风权限，请前往应用设置开启麦克风',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
case -1:
|
||||
uni.showToast({
|
||||
title: '应用权限错误',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 结束录音
|
||||
chendAudio(e) {
|
||||
if (!this.showAudioTranscribe) return
|
||||
recorderManager.stop()
|
||||
clearInterval(transcribe)
|
||||
// 监听录音结束
|
||||
recorderManager.onStop(res => {
|
||||
if (res.tempFilePath) this.audioSrc = res.tempFilePath
|
||||
im.sendVoiceMsg(this.conversationType, this.targetId, res.tempFilePath, (60 - this
|
||||
.transcribeTime), () => {
|
||||
this.getMessageList()
|
||||
})
|
||||
},100)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.audio-transcribe {
|
||||
background: rgba(0,0,0,.6);
|
||||
position: fixed;
|
||||
height: 200rpx;
|
||||
width: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
z-index: 99;
|
||||
top: 550rpx;
|
||||
left: 225rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-transcribe-src{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.audio-transcribe-text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 窗口 */
|
||||
.chat{
|
||||
background: #F3F6FB;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-scroll{
|
||||
flex: 1;
|
||||
}
|
||||
.cell{
|
||||
padding:10rpx 30rpx;
|
||||
}
|
||||
.cell-time{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.cell-time-text{
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.cell-item{
|
||||
width: 690rpx;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.cell-footer{
|
||||
height: 20rpx;
|
||||
}
|
||||
.active{
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.msg{
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.state{
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.state-text{
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.cell-item.left{
|
||||
flex-direction: row;
|
||||
}
|
||||
.cell-item.right{
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.cell-item.right .state{
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
/* footer */
|
||||
.chat-footer{
|
||||
background: white;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
.msg-type{
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.msg-type > .msg-type-icon{
|
||||
margin: 5rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.chat-mp3{
|
||||
background: #F3F6FB;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 460rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.chat-mp3-text{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.chat-input{
|
||||
background: #F3F6FB;
|
||||
height: 70rpx;
|
||||
width: 460rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.chat-push{
|
||||
background: #34CE98;
|
||||
color: white;
|
||||
width: 120rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
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 = 30 // 获取的消息数量
|
||||
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() {
|
||||
if (this.inputTxt === '') return
|
||||
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
|
||||
this.getMessageList()
|
||||
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
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.audio-transcribe {
|
||||
background: rgba(0, 0, 0, .6);
|
||||
position: fixed;
|
||||
height: 200rpx;
|
||||
width: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
z-index: 99;
|
||||
top: 550rpx;
|
||||
left: 225rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio-transcribe-src {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.audio-transcribe-text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 窗口 */
|
||||
.chat {
|
||||
background: #F3F6FB;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chat-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 10rpx 30rpx;
|
||||
}
|
||||
|
||||
.cell-time {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cell-time-text {
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
width: 690rpx;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.cell-footer {
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.state {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cell-item.left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.cell-item.right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.cell-item.right .state {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
.chat-footer {
|
||||
background: white;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.msg-type {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.msg-type>.msg-type-icon {
|
||||
margin: 5rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.chat-mp3 {
|
||||
background: #F3F6FB;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 460rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.chat-mp3-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
background: #F3F6FB;
|
||||
height: 70rpx;
|
||||
width: 460rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.chat-push {
|
||||
background: #34CE98;
|
||||
color: white;
|
||||
width: 120rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -117,7 +117,7 @@ const addListeners = () => {
|
||||
RongIMLib.addReceiveMessageListener((res) => {
|
||||
console.log('收到消息', res.data.message);
|
||||
const message = res.data.message
|
||||
if (inArray(message.objectName, notifyMsgTypes)) {
|
||||
if (inArray(message.objectName, notifyMsgTypes)) {
|
||||
console.log('new Message');
|
||||
newMessage(message)
|
||||
}
|
||||
@@ -235,6 +235,38 @@ const sendMsg = (conversationType, targetId, content, callback) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* conversationType 会话类型
|
||||
* voiceUrl 本地的录音路径
|
||||
* time 录音时长
|
||||
*/
|
||||
const sendVoiceMsg = (conversationType, targetId, voiceUrl, time, callback) => {
|
||||
console.log('sendVoiceMsg', plus.io.convertLocalFileSystemURL(voiceUrl));
|
||||
const msg = {
|
||||
conversationType: conversationType,
|
||||
targetId: String(targetId),
|
||||
content: {
|
||||
objectName: 'RC:HQVCMsg',
|
||||
local: 'file:///' + plus.io.convertLocalFileSystemURL(voiceUrl),
|
||||
duration: time
|
||||
}
|
||||
}
|
||||
RongIMLib.sendMediaMessage(msg, {
|
||||
success: (messageId) => {
|
||||
callback(messageId);
|
||||
},
|
||||
progress: (progress, messageId) => {
|
||||
console.log(messageId);
|
||||
},
|
||||
cancel: (messageId) => {
|
||||
// 发送取消回调
|
||||
},
|
||||
error: (errorCode, messageId) => {
|
||||
console.log(errorCode, messageId);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步好友信息，保存头像地址等
|
||||
@@ -252,6 +284,7 @@ export default {
|
||||
initIm,
|
||||
connect,
|
||||
sendMsg,
|
||||
sendVoiceMsg,
|
||||
setNotifyBadge,
|
||||
syncFriends,
|
||||
syncUserInfo
|
||||
|
||||
Reference in New Issue
Block a user