diff --git a/pages/im/components/messagePreview.nvue b/pages/im/components/messagePreview.nvue
new file mode 100644
index 0000000..ece6929
--- /dev/null
+++ b/pages/im/components/messagePreview.nvue
@@ -0,0 +1,43 @@
+<template>
+    <view>
+        <view v-if="msg.objectName=='RC:TxtMsg'">
+            {{ msg.content || '' }}
+        </view>
+        <view v-if="msg.objectName=='RC:HQVCMsg'">
+            [语音]
+        </view>
+        <view v-if="msg.objectName=='RC:ImgMsg'">
+            [图片]
+        </view>
+        <view v-if="msg.objectName=='RC:GIFMsg'">
+            [表情]
+        </view>
+        <view v-if="msg.objectName=='RC:FileMsg'">
+            [文件]
+        </view>
+        <view v-if="msg.objectName=='RC:LBSMsg'">
+            [位置]
+        </view>
+        <view v-if="msg.objectName=='RC:AudioMsg'">
+            [语音通话]
+        </view>
+        <view v-if="msg.objectName=='RC:VideoMsg'">
+            [视频通话]
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            msg: {
+                type: Object,
+                default: {}
+            }
+        }
+    }
+</script>
+
+<style>
+
+</style>
diff --git a/pages/im/index.vue b/pages/im/index.vue
index 3eeabfb..4682bb9 100644
--- a/pages/im/index.vue
+++ b/pages/im/index.vue
@@ -43,18 +43,7 @@
                             <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
                             <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                         </view>
-                        <view class="preview" v-if="item.objectName=='RC:TxtMsg'">
-                            {{ item.latestMessage.content || '' }}
-                        </view>
-                        <view class="preview" v-if="item.objectName=='RC:HQVCMsg'">
-                            [语音]
-                        </view>
-                        <view class="preview" v-if="item.objectName=='RC:ImgMsg'">
-                            [图片]
-                        </view>
-                        <view class="preview" v-if="item.objectName=='RC:FileMsg'">
-                            [文件]
-                        </view>
+                        <message-preview class="preview" :msg="item.latestMessage" />
                     </view>
                 </view>
                 <!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
@@ -82,6 +71,7 @@
     import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
     import im from '@/utils/im/index.js'
     import userAuth from '@/public/userAuth'
+    import messagePreview from './components/messagePreview'
     import {
         getImToken
     } from '@/apis/interfaces/im.js'
@@ -102,6 +92,9 @@
                 pickedItem: {}
             }
         },
+        components: {
+            messagePreview
+        },
         computed: {
             friend() {
                 return function(targetId) {