文件消息，地理位置消息

pages/im/components/show/showLocation.vue

@@ -0,0 +1,86 @@
+<template>
+    <view class="msg--location">
+        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
+
+        <view class="">
+            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
+            <view class="location" :class="isRemote ? 'left': 'right'" @click="showLocation">
+                {{ content.customFields.name }}
+                {{ content.customFields.thumbnail }}
+                <!-- 缩略图，在考虑是否要通过截图后自动截屏来操作 -->
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+    import messageState from './messageState'
+    import imBase from '../../mixins/imBase.js'
+
+    export default {
+        mixins: [
+            imBase
+        ],
+        name: 'showImage',
+        props: {
+            message: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            },
+            isGroup: {
+                type: Boolean,
+                default: false
+            }
+        },
+        components: {
+            messageState
+        },
+        computed: {
+            isRemote() {
+                return this.message.messageDirection == 2
+            },
+            content() {
+                return this.message.content
+            }
+        },
+        methods: {
+            showLocation() {
+                console.log(this.content.customFields.longitude, this.content.customFields.latitude)
+
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .msg--location {
+        display: flex;
+        align-items: flex-end;
+
+        .name {
+            font-size: 24rpx;
+            color: $text-gray-m;
+        }
+
+        .location {
+            .image {
+                width: 180rpx;
+            }
+
+            &.left {
+                .image {
+                    border-radius: 0 10rpx 10rpx 10rpx;
+                }
+            }
+
+            &.right {
+                .image {
+                    border-radius: 10rpx 0 10rpx 10rpx;
+                }
+            }
+        }
+    }
+</style>