From 83061d7c8e9e43b27a821cb69ac969ea0e154ef8 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Sun, 30 Jan 2022 17:46:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E6=B6=88=E6=81=AF=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E6=88=90=E5=8A=9F=EF=BC=8C=E6=92=AD=E6=94=BE=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E4=B8=8D=E6=94=AF=E6=8C=81=E5=B8=A6token=E7=9A=84?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/interfaces/im.js      |  54 ++-
 components/im/imAUDIO.vue  | 171 ++++----
 pages/im/private/chat.nvue | 801 +++++++++++++++++++------------------
 utils/im/index.js          |  35 +-
 4 files changed, 585 insertions(+), 476 deletions(-)

diff --git a/apis/interfaces/im.js b/apis/interfaces/im.js
index b6ff4d4..1c46001 100644
--- a/apis/interfaces/im.js
+++ b/apis/interfaces/im.js
@@ -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
 }
diff --git a/components/im/imAUDIO.vue b/components/im/imAUDIO.vue
index 4cf74ad..8fad659 100644
--- a/components/im/imAUDIO.vue
+++ b/components/im/imAUDIO.vue
@@ -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>
diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
index af3096d..cdc89d3 100644
--- a/pages/im/private/chat.nvue
+++ b/pages/im/private/chat.nvue
@@ -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>
diff --git a/utils/im/index.js b/utils/im/index.js
index d65a54e..55b8988 100644
--- a/utils/im/index.js
+++ b/utils/im/index.js
@@ -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