1

src/views/im/chat/index.vue

@@ -53,8 +53,16 @@
               </div>
 
               <!-- 录音消息 -->
-              <div class="audio-message" v-else-if="item.contentType === MSG_TYPE.AUDIO">
-                <audio :src="IM_PATH + item.url" controls style="width: 200px;" />
+              <div
+                class="voice-bubble"
+                v-else-if="item.contentType === MSG_TYPE.AUDIO"
+                @click="playAudio(item.url)"
+              >
+              <!-- {{ getAudioDuration(item.url) }} -->
+                <div class="duration">2秒</div>
+                <div class="voice-icon">
+                  <!-- <img src="@/assets/icon-voice-right.png" alt="语音图标" /> -->
+                </div>
               </div>
 
               <!-- 其他未知类型 -->
@@ -324,6 +332,18 @@ const sendAudioMessage = async (event) => {
   }
 };
 
+const audio = ref(null)
+
+const playAudio = (url) => {
+  const audioUrl = `${IM_PATH}${url}`
+  if (audio.value) {
+    audio.value.pause()
+  }
+  audio.value = new Audio(audioUrl)
+  audio.value.play()
+}
+
+
 // 发送消息
 const sendMessage = () => {
   if (!text.value.trim()) return;
@@ -521,10 +541,32 @@ const goDetail = () => router.push("detail");
             font-weight: 400;
             font-size: 15px;
           }
-          .audio-message {
+          .voice-bubble {
+            display: flex;
+            align-items: center;
+            background-color: #fff;
+            border-radius: 10px;
+            padding: 8px 17px;
+            max-width: 180px;
+            cursor: pointer;
             margin-top: 8px;
-            background: initial;
+            color: #000;
+            font-family:
+              PingFang SC,
+              PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+          }
+          .voice-bubble .duration {
+            font-size: 16px;
+            font-weight: 500;
+            margin-right: 6px;
+          }
+          .voice-bubble .voice-icon img {
+            width: 18px;
+            height: 18px;
           }
+
         }
       }
       .withdrawal {
@@ -556,6 +598,10 @@ const goDetail = () => router.push("detail");
           background: #4d71ff; // 自己的消息是蓝色
           color: #ffffff; // 白字
         }
+        .voice-bubble{
+          background: #4d71ff; // 自己的消息是蓝色
+          color: #ffffff; // 白字
+        }
       }
     }
   }