From 2a5ae6c0cc6f5a8b5b7892305e6846a7aa5d68b1 Mon Sep 17 00:00:00 2001
From: pengxiaolong <15716207+pengxiaolong711@user.noreply.gitee.com>
Date: Tue, 26 Aug 2025 13:31:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Appaside.vue                 |   8 +-
 src/components/chatMessage/voiceMessage.vue | 207 ++++++++++++++++++++
 src/views/emailRegistration.vue             |   2 +-
 src/views/hosts/Message.vue                 | 154 +++++++++------
 src/views/hosts/pk.vue                      |   8 +-
 5 files changed, 309 insertions(+), 70 deletions(-)
 create mode 100644 src/components/chatMessage/voiceMessage.vue

diff --git a/src/components/Appaside.vue b/src/components/Appaside.vue
index e71a481..ebd5cae 100644
--- a/src/components/Appaside.vue
+++ b/src/components/Appaside.vue
@@ -186,7 +186,7 @@
           <input type="text" class="nickname-input" v-model="info.nickName" @blur="handleNickNameChange"/>
           <div class="Hint">点击输入修改昵称</div>
         </div>
-        <div class="email-setting" @click="ResendEmail" v-if="info.mailVerification == 1">
+        <div class="email-setting" @click="ResendEmail" v-if="info.mailVerification == 1 && info.email != null">
           <div v-if="isResendEmail == 0">
             向（{{info.email}}）重发邮箱验证
           </div>
@@ -195,9 +195,9 @@
           </div>
         </div>
         <!-- 邮箱设置 -->
-          <div class="email-setting" @click="emailVisiblefu">修改邮箱（{{info.email}}）</div>
+          <div class="email-setting" v-if="info.email != null" @click="emailVisiblefu">修改邮箱（{{info.email}}）</div>
           <!-- 密码设置 -->
-          <div class="password-setting"@click="passwordVisiblefn">修改密码</div>
+          <div class="password-setting" v-if="info.email != null" @click="passwordVisiblefn">修改密码</div>
     </div>
   </el-dialog>
   <!-- 修改密码弹窗 -->
@@ -762,7 +762,7 @@ function UserInfo() {
     if (info.value.status == 2) {
         router.push('/ActivateEmail')
       }
-      if (info.value.mailVerification == 1) {
+      if (info.value.mailVerification == 1 && info.value.email != null) {
           ElMessage.error("邮箱未验证,请至设置验证邮箱，如果已经验证请刷新页面");
       }
   }).catch((err) => {});
diff --git a/src/components/chatMessage/voiceMessage.vue b/src/components/chatMessage/voiceMessage.vue
new file mode 100644
index 0000000..d97c1fe
--- /dev/null
+++ b/src/components/chatMessage/voiceMessage.vue
@@ -0,0 +1,207 @@
+<template>
+  <!-- <div class="audio-player">
+    <button @click="togglePlay" :class="{ playing: isPlaying }">
+      {{ isPlaying ? "暂停" : "播放" }}
+    </button>
+  </div> -->
+  <div class="voice-message">
+    <!-- 对方消息 -->
+    <div class="voice-message" v-if="user.id != senderId" @click="togglePlay">
+      <img
+        v-if="!isPlaying"
+        class="voice-icon"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/voice.png"
+        alt=""
+      />
+      <div class="voice-icon-text" v-if="!isPlaying">'{{floor(size)}}'</div>
+      <div class="voice-message-text" v-if="isPlaying">
+        播放中...
+      </div>
+    </div>
+
+    <!-- 自己消息 -->
+    <div class="voice-message" v-if="user.id == senderId" @click="togglePlay">
+      <div class="voice-icon-text" v-if="!isPlaying">'{{floor(size)}}'</div>
+      <img
+        v-if="!isPlaying"
+        class="voice-icon"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/voice.png"
+        alt=""
+      />
+      <div class="voice-message-text" v-if="isPlaying">
+        播放中...
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
+const props = defineProps({
+  item: {
+    type: String,
+    required: true,
+  },
+  size:{
+    type: String,
+    required: true,
+  },
+  senderId: {
+    type: String,
+    required: true,
+  },
+});
+
+const audioElement = ref(null);
+const isPlaying = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+const currentProgress = ref(0);
+const volume = ref(0.5);
+const user = ref({});
+
+function floor(num) {
+  return Math.floor(num);
+}
+// 格式化时间
+const formatTime = (time) => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+
+// 切换播放状态
+const togglePlay = () => {
+  isPlaying.value = !isPlaying.value;
+  isPlaying.value ? audioElement.value.play() : audioElement.value.pause();
+};
+
+// 更新进度条
+const updateProgress = () => {
+  currentTime.value = audioElement.value.currentTime;
+  currentProgress.value = (currentTime.value / duration.value) * 100;
+};
+
+// 跳转到指定时间
+const seekTo = (e) => {
+  const newTime = (e.target.value / 100) * duration.value;
+  audioElement.value.currentTime = newTime;
+};
+
+// 更新音量
+const updateVolume = () => {
+  audioElement.value.volume = volume.value;
+};
+
+// 监听音频加载完成
+watch(
+  () => props.item,
+  (newSrc) => {
+    if (audioElement.value) {
+      audioElement.value.src = newSrc;
+      audioElement.value.load();
+    }
+  }
+);
+
+onMounted(() => {
+    getPromiseStorage("user")
+    .then((res) => {
+      user.value = res;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+
+  audioElement.value = new Audio(props.item);
+  audioElement.value.volume = volume.value;
+
+  // 监听音频事件
+  audioElement.value.addEventListener("timeupdate", updateProgress);
+  audioElement.value.addEventListener("loadedmetadata", () => {
+    duration.value = audioElement.value.duration;
+  });
+  audioElement.value.addEventListener("ended", () => {
+    isPlaying.value = false;
+    currentTime.value = 0;
+    currentProgress.value = 0;
+  });
+
+  // 自动播放策略处理
+  if ("autoPlayEnabled" in audioElement.value) {
+    audioElement.value.autoPlayEnabled = false;
+  }
+});
+</script>
+
+<style scoped>
+.voice-message {
+  width: 120px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content:space-around;
+}
+.voice-message-text{
+    width: 120px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+}
+.voice-icon {
+  width: 70px;
+  height: 50px;
+}
+.voice-icon-text {
+  font-size: 14px;
+  color: #999;
+}
+.audio-player {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button.playing {
+  background-color: #4caf50;
+  color: white;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.progress-bar {
+  width: 300px;
+  -webkit-appearance: none;
+  height: 5px;
+  background: #ddd;
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 150px;
+}
+</style>
diff --git a/src/views/emailRegistration.vue b/src/views/emailRegistration.vue
index 1cf628e..64dc1c7 100644
--- a/src/views/emailRegistration.vue
+++ b/src/views/emailRegistration.vue
@@ -74,7 +74,7 @@ const userNamebtn = ref(false)
 const countdown = ref(0); // 倒计时秒数
 const isCounting = ref(false); // 是否正在倒计时
 let timer = null; // 定时器
-
+// 倒计时
 function startCountdown() {
   countdown.value = 60;
   isCounting.value = true;
diff --git a/src/views/hosts/Message.vue b/src/views/hosts/Message.vue
index 946362d..f36581a 100644
--- a/src/views/hosts/Message.vue
+++ b/src/views/hosts/Message.vue
@@ -88,6 +88,9 @@
                           :item="item"
                           v-if="item.type == 'image'"
                         ></PictureMessage>
+                        <!-- 语音消息 -->
+                        <voiceMessage :item="item.payload.url" :size="item.payload.duration" :senderId="item.senderId" v-if="item.type == 'audio'">
+                        </voiceMessage>
                       </div>
 
                       <!-- PK消息 -->
@@ -114,6 +117,9 @@
                           :item="item"
                           v-if="item.type == 'image'"
                         ></PictureMessage>
+                        <!-- 语音消息 -->
+                        <voiceMessage :item="item.payload.url" :size="item.payload.duration" :senderId="item.senderId" v-if="item.type == 'audio'">
+                        </voiceMessage>
                       </div>
                       <!-- PK消息 -->
                       <div class="PKmessageMyContent" v-if="item.type == 'pk'">
@@ -523,6 +529,7 @@ import PictureMessage from "@/components/chatMessage/PictureMessage";
 import PKMessage from "@/components/chatMessage/PKMessage";
 import { getAnchorListById, createPkRecord } from "@/api/account";
 import { ElMessage } from "element-plus";
+import voiceMessage from "@/components/chatMessage/voiceMessage";
 
 var im = goeasy.im;
 const counter = IMloginStore();
@@ -579,17 +586,21 @@ function selectMyAnchor(item) {
 function getAnchorList() {
   getAnchorListById({
     userId: handleClickdata.value.userId,
-  }).then((res) => {
-    getAnchorListdata.value = res;
-  }).catch((err) => {});
+  })
+    .then((res) => {
+      getAnchorListdata.value = res;
+    })
+    .catch((err) => {});
 }
 //查询我方已发布的未被邀请的主播列表
 function getMyAnchorList() {
   getAnchorListById({
     userId: user.value.id,
-  }).then((res) => {
-    getMyAnchorListdata.value = res;
-  }).catch((err) => {});
+  })
+    .then((res) => {
+      getMyAnchorListdata.value = res;
+    })
+    .catch((err) => {});
 }
 
 //确认邀请
@@ -607,27 +618,31 @@ function reminderDialogConfirm() {
     anchorIconB: hostmySide.value.anchorIcon,
     piIdA: hostOtherSide.value.id,
     piIdB: hostmySide.value.id,
-  }).then((res) => {
-    const data = {
-      msgid: res.id,
-      pkIdA: hostOtherSide.value.id,
-      pkIdB: hostmySide.value.id,
-      id: handleClickdata.value.userId,
-      avatar: handleClickdata.value.data.avatar,
-      nickname: handleClickdata.value.data.nickname,
-    };
-    goEasySendPKMessage(data).then((res) => {
-      console.log(res);
-      messageslist.value.push(res);
-      reminder.value = false;
-      reset();
-      nextTick(() => {
-        if (chatlistContainer.value) {
-          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
-        }
-      });
-    }).catch((err) => {});
-  }).catch((err) => {});
+  })
+    .then((res) => {
+      const data = {
+        msgid: res.id,
+        pkIdA: hostOtherSide.value.id,
+        pkIdB: hostmySide.value.id,
+        id: handleClickdata.value.userId,
+        avatar: handleClickdata.value.data.avatar,
+        nickname: handleClickdata.value.data.nickname,
+      };
+      goEasySendPKMessage(data)
+        .then((res) => {
+          console.log(res);
+          messageslist.value.push(res);
+          reminder.value = false;
+          reset();
+          nextTick(() => {
+            if (chatlistContainer.value) {
+              chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
+            }
+          });
+        })
+        .catch((err) => {});
+    })
+    .catch((err) => {});
 }
 // PK邀请弹窗
 function PKInvitationdialogclick() {
@@ -676,14 +691,16 @@ const handleFileSelect = (event) => {
       id: handleClickdata.value.userId,
       avatar: handleClickdata.value.data.avatar,
       nickname: handleClickdata.value.data.nickname,
-    }).then((res) => {
-      messageslist.value.push(res);
-      nextTick(() => {
-        if (chatlistContainer.value) {
-          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
-        }
-      });
-    }).catch((err) => {});
+    })
+      .then((res) => {
+        messageslist.value.push(res);
+        nextTick(() => {
+          if (chatlistContainer.value) {
+            chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
+          }
+        });
+      })
+      .catch((err) => {});
   }
 };
 
@@ -697,15 +714,17 @@ function sendMsg() {
     id: handleClickdata.value.userId,
     avatar: handleClickdata.value.data.avatar,
     nickname: handleClickdata.value.data.nickname,
-  }).then((res) => {
-    messageslist.value.push(res);
-    textarea.value = "";
-    nextTick(() => {
-    if (chatlistContainer.value) {
-      chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
-    }
-  });
-  }).catch((err) => {});
+  })
+    .then((res) => {
+      messageslist.value.push(res);
+      textarea.value = "";
+      nextTick(() => {
+        if (chatlistContainer.value) {
+          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
+        }
+      });
+    })
+    .catch((err) => {});
 }
 
 // 加载更多消息
@@ -731,23 +750,27 @@ function handleClick(item) {
   goEasyGetMessages({
     id: item.userId,
     timestamp: null,
-  }).then((res) => {
-    console.log("消息列表", res);
-    messageslist.value = res;
-    nextTick(() => {
-      if (chatlistContainer.value) {
-        chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
-      }
-    });
-    chatlistContainer.value.addEventListener("scroll", scrollHandler);
-  }).catch((err) => {});
+  })
+    .then((res) => {
+      console.log("消息列表", res);
+      messageslist.value = res;
+      nextTick(() => {
+        if (chatlistContainer.value) {
+          chatlistContainer.value.scrollTop = chatlistContainer.value.scrollHeight;
+        }
+      });
+      chatlistContainer.value.addEventListener("scroll", scrollHandler);
+    })
+    .catch((err) => {});
   messageRead();
 }
 //已读消息
 function messageRead() {
   goEasyMessageRead({
     id: handleClickdata.value.userId,
-  }).then((res) => {}).catch((err) => {});
+  })
+    .then((res) => {})
+    .catch((err) => {});
 }
 
 //获取更多消息
@@ -800,25 +823,28 @@ function onPrivateMessageReceived(message) {
     messageRead();
   }
 
- nextTick(() => {
+  nextTick(() => {
     if (chatlistContainer.value) {
       // 只有当用户已经滚动到底部或接近底部时才自动滚动
       const container = chatlistContainer.value;
       const threshold = 500; // 距离底部100px以内算作"接近底部"
-      const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
-      
+      const isNearBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight <=
+        threshold;
+
       if (isNearBottom) {
         container.scrollTop = container.scrollHeight;
       }
     }
   });
-  
 }
 //获取会话列表
 function getChatList() {
-  goEasyGetConversations().then((res) => {
-    chatList.value = res.content.conversations;
-  }).catch((err) => {});
+  goEasyGetConversations()
+    .then((res) => {
+      chatList.value = res.content.conversations;
+    })
+    .catch((err) => {});
 }
 watch(counter, (newQuestion, oldQuestion) => {
   setTimeout(() => {
@@ -1081,7 +1107,7 @@ onUnmounted(() => {
   border: 1px solid #03aba82f;
   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
 }
-.chat-input-img:active{
+.chat-input-img:active {
   transition: all 0.1s ease;
   transform: scale(0.95) !important;
 }
@@ -1417,4 +1443,4 @@ onUnmounted(() => {
 .el-splitter-bar__disable:before {
   background-color: #ffffff00 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/hosts/pk.vue b/src/views/hosts/pk.vue
index 987f7e0..bada281 100644
--- a/src/views/hosts/pk.vue
+++ b/src/views/hosts/pk.vue
@@ -236,6 +236,9 @@
                                   :item="item"
                                   v-if="item.type == 'pk'"
                                 ></miniPKMessage>
+                                <!-- 语音消息 -->
+                                <voiceMessage :item="item.payload.url" :size="item.payload.duration" :senderId="item.senderId" v-if="item.type == 'audio'">
+                                </voiceMessage>
                               </div>
                             </div>
                             <!-- 我方消息 -->
@@ -255,7 +258,9 @@
                                   :item="item"
                                   v-if="item.type == 'pk'"
                                 ></miniPKMessage>
-                                <!--  -->
+                                <!-- 语音消息 -->
+                                <voiceMessage :item="item.payload.url" :size="item.payload.duration" :senderId="item.senderId" v-if="item.type == 'audio'">
+                                </voiceMessage>
                               </div>
                               <div class="Me-Triangle" v-if="item.type == 'text'">
                                 <!-- 三角 -->
@@ -683,6 +688,7 @@ import GoEasy from "goeasy";
 import { getAnchorListById, createPkRecord } from "@/api/account";
 import PictureMessage from "@/components/chatMessage/PictureMessage";
 import miniPKMessage from "@/components/chatMessage/miniPKMessage";
+import voiceMessage from "@/components/chatMessage/voiceMessage";
 var im = goeasy.im;
 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目