From eb88bf56f831134e59df7a8f62f6b7ecf9b88c86 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 7 Feb 2022 11:24:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=BF=81=E7=A7=BB=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E5=AE=8C=E6=B6=88=E6=81=AF=E4=B9=8B=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=BB=B6=E8=BF=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/private/chat.nvue                    |  97 +++------
 pages/im/private/components/sentText.nvue     |  15 ++
 pages/im/private/components/sentVoice.nvue    |  15 ++
 .../im/private/components/showImage.nvue      |  94 ++++-----
 .../im/private/components/showText.nvue       |  90 ++++----
 .../im/private/components/showVoice.nvue      | 194 +++++++++---------
 utils/im/message.js                           |  63 ++++--
 7 files changed, 302 insertions(+), 266 deletions(-)
 create mode 100644 pages/im/private/components/sentText.nvue
 create mode 100644 pages/im/private/components/sentVoice.nvue
 rename components/im/imIMG.vue => pages/im/private/components/showImage.nvue (70%)
 rename components/im/imTXT.vue => pages/im/private/components/showText.nvue (78%)
 rename components/im/imAUDIO.vue => pages/im/private/components/showVoice.nvue (95%)

diff --git a/pages/im/private/chat.nvue b/pages/im/private/chat.nvue
index a026e7b..991a103 100644
--- a/pages/im/private/chat.nvue
+++ b/pages/im/private/chat.nvue
@@ -1,7 +1,7 @@
 <template>
     <view class="chat">
         <!-- chat -->
-        <list class="chat-scroll">
+        <list class="chat-scroll" :show-scrollbar="false">
             <cell class="cell" v-for="(item, index) in messages" :key="index">
                 <view class="cell-time">
                     <text class="cell-time-text">{{ customCN(item.sentTime) }}</text>
@@ -10,12 +10,12 @@
                     <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>
+                        <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content"></show-voice>
+                        <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content.content"></show-image>
+                        <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                            :msg="item.content.content"></show-text>
                         <view class="state" v-if="item.messageDirection == 1">
                             <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
                         </view>
@@ -58,19 +58,18 @@
     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'
+    import showVoice from './components/showVoice'
+    import showImage from './components/showImage'
+    import showText from './components/showText'
 
     var transcribe
-    var recorderManager = uni.getRecorderManager()
-
+    const recorderManager = uni.getRecorderManager()
     const ChatList = uni.requireNativePlugin('dom')
+
     export default {
         data() {
             return {
                 targetId: '',
-                scrollIntoID: 'chatID_0',
                 inputTxt: '',
                 messages: [],
                 conversationType: 1,
@@ -86,9 +85,9 @@
             }
         },
         components: {
-            imAUDIO,
-            imIMG,
-            imTXT
+            showVoice,
+            showImage,
+            showText
         },
         onLoad(e) {
             this.targetId = e.targetId
@@ -134,20 +133,6 @@
                 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: {
             customCN(val) {
                 return timeCustomCN(val)
@@ -198,66 +183,46 @@
                 recorderManager.onStop(res => {
                     im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (60 - this
                         .transcribeTime), () => {
-                        this.getMessageList()
+                        setTimeout(() => {
+                            this.getMessageList()
+                        }, 500)
                     })
                     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 = 10 // 获取的消息数量
-                const isForward = true // 是否向前获取
-                RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
-                    count,
-                    isForward,
-                    ({
-                        code,
-                        messages
-                    }) => {
-                        if (code === 0) {
-                            this.messages = messages.reverse()
-                            this.scrollBottom()
-                        }
-                    }
-                )
+                im.getMessageList(this.conversationType, this.targetId, (messages) => {
+                    this.messages = messages.reverse()
+                    this.scrollBottom()
+                })
             },
+            // 发送文本消息
             send() {
                 if (this.inputTxt === '') return
-                im.sentText(this.conversationType, this.targetId, this.inputTxt, () => {
-                    setTimeout(() => {
-                        this.getMessageList()
+                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
                 })
             },
+            // 滚动到底部
             scrollBottom() {
                 setTimeout(() => {
                     let el = this.$refs.chatBottom
                     ChatList.scrollToElement(el, {
-                        animated: true
+                        animated: false
                     })
-                }, 100)
+                }, 50)
             }
         }
     }
diff --git a/pages/im/private/components/sentText.nvue b/pages/im/private/components/sentText.nvue
new file mode 100644
index 0000000..bb85538
--- /dev/null
+++ b/pages/im/private/components/sentText.nvue
@@ -0,0 +1,15 @@
+<template>
+    <view>
+        
+    </view>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style>
+
+</style>
diff --git a/pages/im/private/components/sentVoice.nvue b/pages/im/private/components/sentVoice.nvue
new file mode 100644
index 0000000..bb85538
--- /dev/null
+++ b/pages/im/private/components/sentVoice.nvue
@@ -0,0 +1,15 @@
+<template>
+    <view>
+        
+    </view>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style>
+
+</style>
diff --git a/components/im/imIMG.vue b/pages/im/private/components/showImage.nvue
similarity index 70%
rename from components/im/imIMG.vue
rename to pages/im/private/components/showImage.nvue
index 26f9643..b828ef9 100644
--- a/components/im/imIMG.vue
+++ b/pages/im/private/components/showImage.nvue
@@ -1,47 +1,49 @@
-<template>
-    <view class="im--img" :class="guest ? 'right': 'left'">
-        <image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
-    </view>
-</template>
-
-<script>
-    export default {
-        name:"im",
-        props:{
-            msg : {
-                type   : String,
-                default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
-            },
-            guest: {
-                type: Boolean,
-                default: true
-            }
-        },
-        methods:{
-            openImg(){
-                uni.previewImage({
-                    urls    : [this.msg],
-                    current : 1
-                })
-            }
-        }
-    }
-</script>
-
-<style scoped>
-    .im--img{
-        padding: 19rpx;
-    }
-    .im--img.left{
-        border-radius: 0 20rpx 20rpx 20rpx;
-        background: white;
-    }
-    
-    .im--img.right{
-        border-radius: 20rpx 0 20rpx 20rpx;
-        background: #34CE98;
-    }
-    .src{
-        width: 240rpx;
-    }
+<template>
+    <view class="im--img" :class="guest ? 'right': 'left'">
+        <image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'showImage',
+        props: {
+            msg: {
+                type: String,
+                default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods: {
+            openImg() {
+                uni.previewImage({
+                    urls: [this.msg],
+                    current: 1
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .im--img {
+        padding: 19rpx;
+    }
+
+    .im--img.left {
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+
+    .im--img.right {
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+    }
+
+    .src {
+        width: 240rpx;
+    }
 </style>
diff --git a/components/im/imTXT.vue b/pages/im/private/components/showText.nvue
similarity index 78%
rename from components/im/imTXT.vue
rename to pages/im/private/components/showText.nvue
index 5de8135..a9728cb 100644
--- a/components/im/imTXT.vue
+++ b/pages/im/private/components/showText.nvue
@@ -1,46 +1,46 @@
-<template>
-    <view class="im--box">
-        <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
-    </view>
-</template>
-
-<script>
-    export default {
-        name:"im",
-        data() {
-            return {
-                
-            };
-        },
-        props:{
-            msg : {
-                type   : String,
-                default: ''
-            },
-            guest: {
-                type: Boolean,
-                default: true
-            }
-        }
-    }
-</script>
-
-<style scoped>
-    .im--text{
-        max-width: 400rpx;
-        padding: 20rpx;
-        font-size: 28rpx;
-        line-height: 40rpx;
-    }
-    
-    .im--text.left{
-        border-radius: 0 20rpx 20rpx 20rpx;
-        background: white;
-    }
-    
-    .im--text.right{
-        border-radius: 20rpx 0 20rpx 20rpx;
-        background: #34CE98;
-        color: white;
-    }
+<template>
+    <view class="im--box">
+        <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'showText',
+        data() {
+            return {
+
+            };
+        },
+        props: {
+            msg: {
+                type: String,
+                default: ''
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .im--text {
+        max-width: 400rpx;
+        padding: 20rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+    }
+
+    .im--text.left {
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+
+    .im--text.right {
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+        color: white;
+    }
 </style>
diff --git a/components/im/imAUDIO.vue b/pages/im/private/components/showVoice.nvue
similarity index 95%
rename from components/im/imAUDIO.vue
rename to pages/im/private/components/showVoice.nvue
index e253dff..2686fc9 100644
--- a/components/im/imAUDIO.vue
+++ b/pages/im/private/components/showVoice.nvue
@@ -1,98 +1,98 @@
-<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() {
-                uni.downloadFile({
-                    url: this.msg.remote,
-                    success: (res) => {
-                        if (res.statusCode === 200) {
-                            let innerAudioContext = uni.createInnerAudioContext()
-                            innerAudioContext.src = res.tempFilePath
-                            if (this.audioContextPaused) {
-                                innerAudioContext.play()
-                                this.audioContextPaused = false
-                                return
-                            }
-                            innerAudioContext.stop()
-                            innerAudioContext.onStop(resStop => {
-                                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;
-    }
+<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: 'showVoice',
+        props: {
+            msg: {
+                type: Object,
+                default: () => {
+                    return {
+                        local: '',
+                        remote: '',
+                        objectName: '',
+                        duration: 0
+                    }
+                }
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods: {
+            // 播放语音消息
+            onPlayMsg() {
+                uni.downloadFile({
+                    url: this.msg.remote,
+                    success: (res) => {
+                        if (res.statusCode === 200) {
+                            let innerAudioContext = uni.createInnerAudioContext()
+                            innerAudioContext.src = res.tempFilePath
+                            if (this.audioContextPaused) {
+                                innerAudioContext.play()
+                                this.audioContextPaused = false
+                                return
+                            }
+                            innerAudioContext.stop()
+                            innerAudioContext.onStop(resStop => {
+                                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/utils/im/message.js b/utils/im/message.js
index 3e22ce4..8b0069b 100644
--- a/utils/im/message.js
+++ b/utils/im/message.js
@@ -1,5 +1,43 @@
-import store from '@/store/index.js'
-import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+import store from '@/store/index.js'
+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 消息类型
@@ -7,7 +45,7 @@ import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
  * @param {string}  content 消息内容
  * @param {function}  callback 回调函数
  */
-const sentText = (conversationType, targetId, content, callback) => {
+const sentText = (conversationType, targetId, content, callback) => {
     console.log('发送');
     const msg = {
         conversationType: conversationType,
@@ -31,7 +69,7 @@ const sentText = (conversationType, targetId, content, callback) => {
             })
         }
     })
-}
+}
 
 /**
  * 发送消息
@@ -144,11 +182,12 @@ const sendFile = (conversationType, targetId, fileUrl, time, callback) => {
         }
     })
 }
-
-export default {
-    sentText,
-    sentVoice,
-    sentImage,
-    sentGif,
-    sendFile
-}
\ No newline at end of file
+
+export default {
+    getMessageList,
+    sentText,
+    sentVoice,
+    sentImage,
+    sentGif,
+    sendFile
+}