TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

IM录音组件拆分

Browse Source
This commit is contained in:
Jason.Chen
2022-02-07 13:33:56 +08:00
parent 7b932ec8e3
commit 716792404c
3 changed files with 221 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,14 +8,14 @@
</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>
@click="showUser(targetId, item.messageDirection)"></image>
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content"></show-voice>
:msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></show-image>
:msg="item.content.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content"></show-text>
:msg="item.content.content" />
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
@@ -27,26 +27,15 @@
<!-- 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 class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
</image>
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix">
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 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>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" />
</view>
</view>
</template>
@@ -57,20 +46,18 @@
} from '@/utils/filters.js'
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 showVoice from './components/showVoice'
import showImage from './components/showImage'
import showText from './components/showText'
import sentText from './components/sentText'
import sentVoice from './components/sentVoice'
var transcribe
const recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default {
data() {
return {
targetId: '',
inputTxt: '',
messages: [],
conversationType: 1,
userInfo: {
@@ -78,16 +65,15 @@
userId: '',
portraitUrl: ''
},
importTabs: 1,
showAudioTranscribe: false,
transcribeTime: 60,
audioContextPaused: true
chatType: 1 // 0 语音，1 文本
}
},
components: {
showVoice,
showImage,
showText
showText,
sentText,
sentVoice
},
onLoad(e) {
this.targetId = e.targetId
@@ -128,68 +114,13 @@
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
},
computed: {
disabled() {
return this.inputTxt.length == 0
}
},
methods: {
customCN(val) {
return timeCustomCN(val)
},
// 检查安卓录制权限
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 => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this
.transcribeTime), () => {
setTimeout(() => {
this.getMessageList()
}, 500)
})
this.transcribeTime = 60
this.showAudioTranscribe = false
})
this.chatType = this.chatType === 1 ? 0 : 1
},
// 获取消息列表
getMessageList() {
@@ -198,18 +129,8 @@
this.scrollBottom()
})
},
// 发送文本消息
send() {
if (this.inputTxt === '') return
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
setTimeout(() => {
this.getMessageList()
}, 500)
this.inputTxt = ''
})
},
// 展示好友信息
showFriend(targetId, type) {
// 展示好友信息, type 1 是自己， 2 是对方
showUser(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' + targetId :
'/pages/im/friends/info?targetId=' + targetId
@@ -229,30 +150,6 @@
</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;
@@ -343,40 +240,4 @@
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>

80
pages/im/private/components/sentText.nvue
View File

@@ -1,15 +1,67 @@
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
<template>
<view class="text">
<input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="send" cursor-spacing="10" />
<text class="button" size="mini" @click="send">发送</text>
</view>
</template>
<script>
import im from '@/utils/im/index.js'
export default {
props: {
conversationType: {
type: Number,
default: 0
},
targetId: {
type: String,
default: ''
},
inputTxt: {
type: String,
default: '1234567890'
}
},
methods: {
// 发送文本消息
send() {
if (this.inputTxt === '') return
im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
setTimeout(() => {
this.$emit('success')
}, 500)
this.inputTxt = ''
})
},
}
}
</script>
<style scoped>
.text {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.input {
background: #F3F6FB;
height: 70rpx;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
padding: 0 20rpx;
}
.button {
background: #34CE98;
color: white;
width: 120rpx;
line-height: 70rpx;
text-align: center;
border-radius: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
</style>

149
pages/im/private/components/sentVoice.nvue
View File

@@ -1,15 +1,136 @@
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
<template>
<view>
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
<text class="button">按住说话</text>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showRecordTip">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{recordTime}} s</text>
</view>
</view>
</template>
<script>
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
export default {
props: {
conversationType: {
type: Number,
default: 0
},
targetId: {
type: String,
default: ''
}
},
data() {
return {
showRecordTip: false,
recordTime: 60,
interval: 0,
maxRecordTime: 60,
recorderManager: null
}
},
created() {
this.recorderManager = uni.getRecorderManager()
},
methods: {
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 录制语音消息
startRecord() {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.showRecordTip = true
this.recorderManager.start()
this.interval = setInterval(() => {
this.recordTime -= 1
if (this.recordTime === 0) {
this.stopRecord()
}
}, 1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon: 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon: 'none'
})
break;
}
})
},
// 结束录音
stopRecord(e) {
if (!this.showRecordTip) return
this.recorderManager.stop()
clearInterval(this.interval)
// 监听录音结束
this.recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime - this
.recordTime), () => {
setTimeout(() => {
this.$emit('success')
}, 500)
})
this.recordTime = this.maxRecordTime
this.showRecordTip = false
})
},
}
}
</script>
<style scoped>
.voice {
background: #F3F6FB;
height: 70rpx;
line-height: 70rpx;
justify-content: center;
align-items: center;
width: 460rpx;
border-radius: 10rpx;
margin-right: 15rpx;
}
.button {
font-size: 30rpx;
color: #333;
}
.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;
}
</style>