群聊的基础页面

pages/im/components/messagePreview.nvue

@@ -1,28 +1,28 @@
 <template>
     <view>
-        <view v-if="msg.objectName=='RC:TxtMsg'">
-            {{ msg.content || '' }}
+        <view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>{{ msg.content || '' }}
         </view>
-        <view v-if="msg.objectName=='RC:HQVCMsg'">
-            [语音]
+        <view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[语音]
         </view>
-        <view v-if="msg.objectName=='RC:ImgMsg'">
-            [图片]
+        <view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[图片]
         </view>
-        <view v-if="msg.objectName=='RC:GIFMsg'">
-            [表情]
+        <view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[表情]
         </view>
-        <view v-if="msg.objectName=='RC:FileMsg'">
-            [文件]
+        <view class="preview" v-if="msg.objectName=='RC:FileMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[文件]
         </view>
-        <view v-if="msg.objectName=='RC:LBSMsg'">
-            [位置]
+        <view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[位置]
         </view>
-        <view v-if="msg.objectName=='RC:AudioMsg'">
-            [语音通话]
+        <view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[语音通话]
         </view>
-        <view v-if="msg.objectName=='RC:VideoMsg'">
-            [视频通话]
+        <view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
+            <text v-if="user.name">{{ user.name }}:</text>[视频通话]
         </view>
     </view>
 </template>
@@ -33,11 +33,29 @@
             msg: {
                 type: Object,
                 default: {}
+            },
+            user: {
+                type: Object,
+                default: function() {
+                    return {
+                        name: ''
+                    }
+                }
             }
         }
     }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+    .preview {
+        word-break: break-all;
+        color: $text-gray-m;
+        padding-top: $padding - 20;
+        padding-bottom: $padding;
+        font-size: $title-size-m;
+        height: 32rpx;
+        line-height: 32rpx;
+        width: 520rpx;
+        @extend .nowrap;
+    }
 </style>