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

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>