1

src/views/im/chat/index.vue

@@ -35,11 +35,34 @@
             <!-- 内容 -->
             <div class="list-cont">
               <div>{{ item.fromUsername || "匿名用户" }}</div>
+
+              <!-- 文本消息 -->
               <div class="content" v-if="item.contentType === 1">
                 {{ item.content }}
               </div>
-              <!-- 可扩展 contentType === 2 图片，3 名片，4 录音等 -->
+
+              <!-- 图片消息 -->
+              <div class="content" v-else-if="item.contentType === 2">
+                <img :src="item.content" alt="图片" style="max-width: 120px; border-radius: 8px;" />
+              </div>
+
+              <!-- 名片消息 -->
+              <div class="content card-message" v-else-if="item.contentType === 3">
+                <div class="card-title">名片</div>
+                <div class="card-name">{{ item.content }}</div>
+              </div>
+
+              <!-- 录音消息 -->
+              <div class="audio-message" v-else-if="item.contentType === 4">
+                <audio :src="item.file" controls style="width: 200px;" />
+              </div>
+
+              <!-- 其他未知类型 -->
+              <div class="content" v-else>
+                [未知消息类型]
+              </div>
             </div>
+
           </div>
         </div>
       </div>
@@ -496,6 +519,10 @@ const goDetail = () => router.push("detail");
             font-weight: 400;
             font-size: 15px;
           }
+          .audio-message {
+            margin-top: 8px;
+            background: initial;
+          }
         }
       }
       .withdrawal {