聊天内容，文本，图片，语音消息结构优化

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"
+        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
-            @confirm="sent" cursor-spacing="10" />
+            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,9 +41,8 @@
             })
         },
         beforeDestroy() {
-            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
+            // 保存草稿
-                console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
+            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt)
-            })
         },
         data() {
             return {

pages/im/components/showImage.vue

@@ -1,45 +1,83 @@
 <template>
     <view class="">
-        <text class="name" v-if="!guest && name">{{ name }}</text>
+        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--image" :class="guest ? 'right': 'left'">
+        <view class="msg--image" :class="isRemote ? 'left': 'right'">
-            <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
+            <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: {
-            msg: {
+            message: {
                 type: Object,
                 default: () => {
-                    return {
+                    return {}
-                        local: '',
-                        remote: '',
-                        objectName: '',
-                        thumbnail: '',
-                        isFull: false
-                    }
                 }
             },
-            guest: {
+            isGroup: {
                 type: Boolean,
-                default: true
+                default: false
+            }
         },
-            name: {
+        computed: {
-                type: String,
+            isRemote() {
-                default: ''
+                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.msg.remote
+                            this.content.local
                         ],
-                    current: 1
+                        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);
+                        }
+                    })
+                }
             }
         }
     }

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="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: {
+            isGroup: {
-                type: String,
-                default: ''
-            },
-            guest: {
                 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>
 

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="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
-        <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
+        <view class="msg--voice">
-            <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+            <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="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+                <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 class="">这里显示个红点，根据message.content.local是否为空的时候判断</view> -->
     </view>
 </template>
 
@@ -31,9 +33,8 @@
             duration() {
                 return this.message.content.duration
             },
-            guest() {
+            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 => {
@@ -82,6 +85,14 @@
     }
 
     .msg--voice {
+        display: flex;
+        align-items: center;
+
+        .u-badge {
+            margin-left: 20rpx;
+        }
+
+        .voice {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
@@ -116,4 +127,5 @@
                 }
             }
         }
+    }
 </style>

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"
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
-                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
-                                :msg="item.content" :name="contact(item.senderUserId).name" />
                         </view>
                     </view>
                 </view>

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"
+                            <show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" />
-                                :msg="item.content" />
+                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" />
-                            <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
+                            <show-call v-if="item.objectName === 'RC:InfoNtf'" :message="item" />
-                                :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>
                         </view>
                     </view>
                 </view>
@@ -207,20 +200,19 @@
 
                         .msg {
                             margin: 0 20rpx;
+                            // .state {
+                            //     padding-top: 10rpx;
 
-                            .state {
+                            //     .state-text {
-                                padding-top: 10rpx;
+                            //         font-size: $title-size-m - 2;
+                            //         color: rgba($color: $main-color, $alpha: 0.3)
+                            //     }
 
-                                .state-text {
+                            //     .state-text-active {
-                                    font-size: $title-size-m - 2;
+                            //         font-size: $title-size-m - 2;
-                                    color: rgba($color: $main-color, $alpha: 0.3)
+                            //         color: #cecece;
-                                }
+                            //     }
-
+                            // }
-                                .state-text-active {
-                                    font-size: $title-size-m - 2;
-                                    color: #cecece;
-                                }
-                            }
                         }
                     }