From f03c3a0989e0bc41e81064ca375932726df9800d Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Tue, 22 Feb 2022 10:16:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=86=85=E5=AE=B9=EF=BC=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=EF=BC=8C=E5=9B=BE=E7=89=87=EF=BC=8C=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E6=B6=88=E6=81=AF=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/sentText.vue  |  35 +++---
 pages/im/components/showImage.vue | 180 ++++++++++++++++++------------
 pages/im/components/showText.vue  |  31 +++--
 pages/im/components/showVoice.vue |  80 +++++++------
 pages/im/group/chat.vue           |   6 +-
 pages/im/private/chat.vue         |  54 ++++-----
 6 files changed, 217 insertions(+), 169 deletions(-)

diff --git a/pages/im/components/sentText.vue b/pages/im/components/sentText.vue
index 79c8a1b..723ae3e 100644
--- a/pages/im/components/sentText.vue
+++ b/pages/im/components/sentText.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="sent--text">
-        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState" v-model="inputTxt" confirm-type="send"
-            @confirm="sent" cursor-spacing="10" />
+        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
+            v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
         <!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
     </view>
 </template>
@@ -41,14 +41,13 @@
             })
         },
         beforeDestroy() {
-            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
-                console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
-            })
-        },
-        data() {
-            return {
-                focusState: false,
-            }
+            // 保存草稿
+            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt)
+        },
+        data() {
+            return {
+                focusState: false,
+            }
         },
         methods: {
             // 发送文本消息
@@ -60,16 +59,16 @@
                         this.inputTxt = ''
                     })
                 }
-            },
-            demo(){
-                console.log(this.focusState)
-                
-                this.focusState = !this.focusState
             },
-            focus() {
-                this.$emit('focus')
+            demo() {
+                console.log(this.focusState)
+
+                this.focusState = !this.focusState
             },
-            blur() {
+            focus() {
+                this.$emit('focus')
+            },
+            blur() {
                 uni.hideKeyboard()
                 this.$emit('blur')
             }
diff --git a/pages/im/components/showImage.vue b/pages/im/components/showImage.vue
index ccd89e6..7654eb6 100644
--- a/pages/im/components/showImage.vue
+++ b/pages/im/components/showImage.vue
@@ -1,72 +1,110 @@
-<template>
-    <view class="">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
-        <view class="msg--image" :class="guest ? 'right': 'left'">
-            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
-        </view>
-    </view>
-</template>
-
-<script>
-    export default {
-        name: 'showImage',
-        props: {
-            msg: {
-                type: Object,
-                default: () => {
-                    return {
-                        local: '',
-                        remote: '',
-                        objectName: '',
-                        thumbnail: '',
-                        isFull: false
-                    }
-                }
-            },
-            guest: {
-                type: Boolean,
-                default: true
-            },
-            name: {
-                type: String,
-                default: ''
-            }
-        },
-        methods: {
-            previewImage() {
-                uni.previewImage({
-                    urls: [
-                        this.msg.remote
-                    ],
-                    current: 1
-                })
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    .name {
-        font-size: 24rpx;
-        color: $text-gray-m;
-    }
-
-    .msg--image {
-        .img {
-            width: 180rpx;
-        }
-
-        &.left {
-            .img {
-                border-radius: 0 10rpx 10rpx 10rpx;
-            }
-        }
-
-        &.right {
-            .img {
-                border-radius: 10rpx 0 10rpx 10rpx;
-            }
-        }
-
-    }
+<template>
+    <view class="">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="msg--image" :class="isRemote ? 'left': 'right'">
+            <image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
+    export default {
+        name: 'showImage',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
+        methods: {
+            previewImage() {
+                if (this.content.local) {
+                    uni.previewImage({
+                        urls: [
+                            this.content.local
+                        ],
+                        success: (e) => {
+                            console.log(e);
+                        },
+                        fail: (er) => {
+                            console.log(er);
+                        }
+                    })
+                } else {
+                    RongIMLib.downloadMediaMessage(this.messageId, {
+                        success: (path) => {
+                            this.content.local = path
+                            uni.previewImage({
+                                urls: [
+                                    path
+                                ],
+                                success: (e) => {
+                                    console.log(e);
+                                },
+                                fail: (er) => {
+                                    console.log(er);
+                                }
+                            })
+                        },
+                        progress: (progress, messageId) => {
+                            console.log('progress', progress);
+                        },
+                        cancel: (messageId) => {
+                            console.log('cancel', messageId);
+                        },
+                        error: (errorCode, messageId) => {
+                            console.log('errorCode', errorCode);
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .name {
+        font-size: 24rpx;
+        color: $text-gray-m;
+    }
+
+    .msg--image {
+        .img {
+            width: 180rpx;
+        }
+
+        &.left {
+            .img {
+                border-radius: 0 10rpx 10rpx 10rpx;
+            }
+        }
+
+        &.right {
+            .img {
+                border-radius: 10rpx 0 10rpx 10rpx;
+            }
+        }
+
+    }
 </style>
diff --git a/pages/im/components/showText.vue b/pages/im/components/showText.vue
index 2f32ebe..ffa4d01 100644
--- a/pages/im/components/showText.vue
+++ b/pages/im/components/showText.vue
@@ -1,8 +1,8 @@
 <template>
-    <view class="msg--text">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
+    <view class="msg--text">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
         <view>
-            <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
+            <text class="im--text" :class="isRemote ? 'left': 'right'">{{ content }}</text>
         </view>
     </view>
 </template>
@@ -11,21 +11,30 @@
     export default {
         name: 'showText',
         props: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
                     return {}
                 }
             },
-            name: {
-                type: String,
-                default: ''
-            },
-            guest: {
+            isGroup: {
                 type: Boolean,
-                default: true
+                default: false
             }
-        }
+        },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content.content
+            },
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
+            }
+        },
     }
 </script>
 
diff --git a/pages/im/components/showVoice.vue b/pages/im/components/showVoice.vue
index f081dd7..91b7b3e 100644
--- a/pages/im/components/showVoice.vue
+++ b/pages/im/components/showVoice.vue
@@ -1,12 +1,14 @@
-<template>
-    <view class="">
-        <text class="name" v-if="isGroup && guest">{{ contact(message.senderUserId).name }}</text>
-        <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
-            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <text class="duration">{{ duration }}"</text>
-            <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
-        </view>
-        <!-- <view class="">这里显示个红点，根据message.content.local是否为空的时候判断</view> -->
+<template>
+    <view class="">
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+        <view class="msg--voice">
+            <view class="voice" :class="isRemote ? 'left': 'right'" @click="onPlayMsg">
+                <image v-if="!isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <text class="duration">{{ duration }}"</text>
+                <image v-if="isRemote" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+            </view>
+            <u-badge isDot :show="message.content.local =='' && isRemote" />
+        </view>
     </view>
 </template>
 
@@ -31,9 +33,8 @@
             duration() {
                 return this.message.content.duration
             },
-            guest() {
-                return this.message.messageDirection == 2
-                
+            isRemote() {
+                return this.message.messageDirection == 2
             },
             contact() {
                 return function(targetId) {
@@ -61,10 +62,12 @@
                 }
             },
             playMsg(path) {
+                uni.$emit('onVideoMessagePlay')
                 const innerAudioContext = uni.createInnerAudioContext()
                 innerAudioContext.src = path
                 innerAudioContext.autoplay = true
                 innerAudioContext.onStop(resStop => {
+                    uni.$emit('onVideoMessageStop')
                     innerAudioContext.destroy()
                 })
                 innerAudioContext.onError(err => {
@@ -83,36 +86,45 @@
 
     .msg--voice {
         display: flex;
-        flex-direction: row;
-        justify-content: space-between;
         align-items: center;
-        height: 79rpx;
-        width: 170rpx;
-        padding: 0 20rpx;
-        box-sizing: border-box;
 
-        .icon {
-            width: 38rpx;
-            height: 38rpx;
+        .u-badge {
+            margin-left: 20rpx;
         }
 
-        &.left {
-            border-radius: 0 20rpx 20rpx 20rpx;
-            background: white;
+        .voice {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 79rpx;
+            width: 170rpx;
+            padding: 0 20rpx;
+            box-sizing: border-box;
 
-            .duration {
-                color: #333;
-                font-size: 30rpx;
+            .icon {
+                width: 38rpx;
+                height: 38rpx;
             }
-        }
 
-        &.right {
-            border-radius: 20rpx 0 20rpx 20rpx;
-            background: $main-color;
+            &.left {
+                border-radius: 0 20rpx 20rpx 20rpx;
+                background: white;
 
-            .duration {
-                color: white;
-                font-size: 30rpx;
+                .duration {
+                    color: #333;
+                    font-size: 30rpx;
+                }
+            }
+
+            &.right {
+                border-radius: 20rpx 0 20rpx 20rpx;
+                background: $main-color;
+
+                .duration {
+                    color: white;
+                    font-size: 30rpx;
+                }
             }
         }
     }
diff --git a/pages/im/group/chat.vue b/pages/im/group/chat.vue
index efdb6f0..ab2a2d1 100644
--- a/pages/im/group/chat.vue
+++ b/pages/im/group/chat.vue
@@ -11,10 +11,8 @@
                             :src="contact(item.senderUserId).portraitUrl" />
                         <view class="msg">
                             <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
-                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
-                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
                         </view>
                     </view>
                 </view>
diff --git a/pages/im/private/chat.vue b/pages/im/private/chat.vue
index aa954fa..ff3b355 100644
--- a/pages/im/private/chat.vue
+++ b/pages/im/private/chat.vue
@@ -12,16 +12,9 @@
                             :src="contact(item.senderUserId).portraitUrl" />
                         <view class="msg">
                             <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
-                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
-                                :msg="item.content" />
-                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                                :msg="item.content" />
-                            <show-call v-if="item.objectName === 'RC:InfoNtf'" :guest="item.messageDirection == 1"
-                                :msg="item.content" />
-                            <view class="state" v-if="item.messageDirection == 1">
-                                <text
-                                    :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
-                            </view>
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" />
+                            <show-call v-if="item.objectName === 'RC:InfoNtf'" :message="item" />
                         </view>
                     </view>
                 </view>
@@ -36,9 +29,9 @@
     import showImage from '../components/showImage'
     import showText from '../components/showText'
     import showCall from '../components/showCall'
-    import sentMessageBar from '../components/sentMessageBar'
-    import utils from '@/utils/index.js'
-    
+    import sentMessageBar from '../components/sentMessageBar'
+    import utils from '@/utils/index.js'
+
     export default {
         components: {
             sentMessageBar,
@@ -48,7 +41,7 @@
             showCall
         },
         data() {
-            return {
+            return {
                 avatarRpx: 84,
                 targetId: '',
                 messages: [],
@@ -60,9 +53,9 @@
                 }
             }
         },
-        computed: {
-            avatarSize() {
-                return utils.rpx2px(this.avatarRpx)
+        computed: {
+            avatarSize() {
+                return utils.rpx2px(this.avatarRpx)
             },
             latestMessage() {
                 if (this.messages.length) {
@@ -100,7 +93,7 @@
                 }
             })
             // 监听收到新消息，判断是否是当前会话，更新会话内容
-            uni.$on('onReceiveMessage', (msg) => {
+            uni.$on('onReceiveMessage', (msg) => {
                 if (msg.targetId == this.targetId) {
                     this.getNewMessage()
                 }
@@ -184,7 +177,7 @@
                     .time {
                         text-align: center;
                         font-size: 24rpx;
-                        color: #666;
+                        color: #666;
                         margin-bottom: 10rpx;
                     }
 
@@ -207,20 +200,19 @@
 
                         .msg {
                             margin: 0 20rpx;
+                            // .state {
+                            //     padding-top: 10rpx;
 
-                            .state {
-                                padding-top: 10rpx;
+                            //     .state-text {
+                            //         font-size: $title-size-m - 2;
+                            //         color: rgba($color: $main-color, $alpha: 0.3)
+                            //     }
 
-                                .state-text {
-                                    font-size: $title-size-m - 2;
-                                    color: rgba($color: $main-color, $alpha: 0.3)
-                                }
-
-                                .state-text-active {
-                                    font-size: $title-size-m - 2;
-                                    color: #cecece;
-                                }
-                            }
+                            //     .state-text-active {
+                            //         font-size: $title-size-m - 2;
+                            //         color: #cecece;
+                            //     }
+                            // }
                         }
                     }