1

src/views/im/chat/index.vue

@@ -90,23 +90,36 @@
               <div
                 v-else
                 class="burn-message"
-                @click="destroyMessage(item)"
+                @click="viewBurnMessage(item)"
               >
                 <!-- 未查看 -->
                 <div v-if="!item.view && item.content" class="burn-mask">
-                  🔒 阅后即焚，点击查看
+                  阅后即焚，点击查看
                 </div>
 
-                <!-- 已查看但未销毁 -->
-                <div v-else-if="item.view && item.content" class="burn-content">
-                  {{ item.content }}
-                  <span class="burn-countdown">{{ item.countdown }}s</span>
+                <!-- 已查看且正在倒计时 -->
+                <template v-else-if="item.view && item.countdown > 0 && item.content">
+                  <!-- 文本类型 -->
+                  <div v-if="item.contentType === MsgType.MSG_TYPE.TEXT" class="burn-content">
+                    {{ item.content }}
+                    <span class="burn-countdown">{{ item.countdown }}s</span>
+                  </div>
+
+                  <!-- 录音类型 -->
+                  <div v-else-if="item.contentType === MsgType.MSG_TYPE.AUDIO" class="burn-audio">
+                    <messageAudio
+                      :src="item?.localUrl || IM_PATH + item.url"
+                      :isSender="isSender(item.toUsername, item)"
+                    />
+                    <span class="burn-countdown">{{ item.countdown }}s</span>
+                  </div>
+                </template>
+
+                <!-- 倒计时结束 -->
+                <div v-else class="burn-destroyed">
+                  该消息已焚毁
                 </div>
-
-                <!-- 已焚毁 -->
-                <div v-else class="burn-destroyed">🔥 该消息已焚毁</div>
               </div>
-
             </div>
           </div>
         </div>
@@ -484,18 +497,58 @@ const revokeMessage = (message)=>{
     messageType: wsStore.toUserInfo.type == 'user'?MsgType.MESSAGE_REVOKE:MsgType.MESSAGE_REVOKE_GROUP,
   });
 }
-// 阅后销毁消息
-const destroyMessage = (message)=>{
+// 点击查看阅后即焚消息
+const viewBurnMessage = (message) => {
+  if (!message.view) {
+    message.view = true;
+    message.countdown = 15; // 倒计时
+
+    // 如果是录音，可以自动播放
+    if (message.contentType === MsgType.MSG_TYPE.AUDIO) {
+      const audio = new Audio(message?.localUrl || IM_PATH + message.url);
+      audio.play();
+    }
+
+    const timer = setInterval(() => {
+      if (message.countdown > 1) {
+        message.countdown--;
+      } else {
+        clearInterval(timer);
+        destroyMessage(message); // 发撤回通知
+        message.content = '';
+        message.countdown = 0; // 标记焚毁
+      }
+    }, 1000);
+  }
+};
+
+// 真正销毁
+const destroyMessage = (message) => {
+  message.content = ''; // 先清空本地显示
   wsStore.sendMessage({
-      content: JSON.stringify({ 
-        content: '',
-        msgId: message.id + '',
-        isTemp: true,
-      }),
-      contentType: MsgType.MSG_TYPE.NOTICE, 
-      messageType: wsStore.toUserInfo.type == 'user'?MsgType.MESSAGE_REVOKE:MsgType.MESSAGE_REVOKE_GROUP,
-    });
-}
+    content: JSON.stringify({ 
+      content: '',
+      msgId: message.id + '',
+      isTemp: true,
+    }),
+    contentType: MsgType.MSG_TYPE.NOTICE, 
+    messageType: wsStore.toUserInfo.type == 'user'
+      ? MsgType.MESSAGE_REVOKE
+      : MsgType.MESSAGE_REVOKE_GROUP,
+  });
+};
+// // 阅后销毁消息
+// const destroyMessage = (message)=>{
+//   wsStore.sendMessage({
+//       content: JSON.stringify({ 
+//         content: '',
+//         msgId: message.id + '',
+//         isTemp: true,
+//       }),
+//       contentType: MsgType.MSG_TYPE.NOTICE, 
+//       messageType: wsStore.toUserInfo.type == 'user'?MsgType.MESSAGE_REVOKE:MsgType.MESSAGE_REVOKE_GROUP,
+//     });
+// }
 
 
 // 录音相关状态
@@ -1233,7 +1286,7 @@ const goNoticePage = () => {
   position: relative;
   cursor: pointer;
   word-break: break-word;
-  white-space: pre-wrap;
+  // white-space: pre-wrap;
   transition: all 0.3s ease;
 
   &.self {
@@ -1248,43 +1301,44 @@ const goNoticePage = () => {
     filter: blur(0px);
   }
 
-  .burn-content {
-    animation: fadeIn 0.3s ease-in;
+  .burn-content,.burn-audio {
+    // animation: fadeIn 0.3s ease-in;
     position: relative;
-
-    .burn-countdown {
-      font-size: 12px;
-      color: #ff5b5b;
-      margin-left: 6px;
-    }
   }
-
+  .burn-countdown {
+    position: absolute;
+    font-size: 12px;
+    color: #ff5b5b;
+    margin-left: 6px;
+    top: -15px;
+    right: -20px;
+  }
   .burn-destroyed {
     color: #999;
     font-size: 13px;
     text-align: center;
-    animation: fadeOut 10s forwards;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
+    // animation: fadeOut 10s forwards;
   }
 }
 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    height: 0;
-  }
-}
+// @keyframes fadeIn {
+//   from {
+//     opacity: 0;
+//     transform: scale(0.95);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: scale(1);
+//   }
+// }
+
+// @keyframes fadeOut {
+//   from {
+//     opacity: 1;
+//   }
+//   to {
+//     opacity: 0;
+//     height: 0;
+//   }
+// }
 </style>