IM录音组件拆分

pages/im/private/chat.nvue

@@ -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">
+            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
-                <view class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">
+                @success="getMessageList" />
-                    <text class="chat-mp3-text">按住说话</text>
+            <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
-                </view>
+                @success="getMessageList" />
-            </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>
@@ -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,
+                chatType: 1 // 0 语音，1 文本
-                showAudioTranscribe: false,
-                transcribeTime: 60,
-                audioContextPaused: true
             }
         },
         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
+                this.chatType = this.chatType === 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
-                })
             },
             // 获取消息列表
             getMessageList() {
@@ -198,18 +129,8 @@
                     this.scrollBottom()
                 })
             },
-            // 发送文本消息
+            // 展示好友信息,  type 1 是自己， 2 是对方
-            send() {
+            showUser(targetId, type) {
-                if (this.inputTxt === '') return
-                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
@@ -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>

pages/im/private/components/sentText.nvue

@@ -1,15 +1,67 @@
 <template>
-    <view>
+    <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>
-    export default {
+    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>
+<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>

pages/im/private/components/sentVoice.nvue

@@ -1,15 +1,136 @@
 <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>
-    export default {
+    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>
+<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>