收到新消息添加铃声提醒、当前会话接收到新语音直接播放

src/views/newMap/display/newChat/chatContent.vue

@@ -123,6 +123,12 @@ export default {
             }
         },
         id() {
+            this.currentAudioList = [];
+            this.messageList.forEach(item => {
+                this.$set(item, 'activeAuto', false);
+            });
+            const audioDom = document.querySelector('#audioPlay');
+            audioDom && audioDom.pause();
             this.cancelRecording();
         }
     },
@@ -140,6 +146,28 @@ export default {
         this.contentDom = '';
     },
     methods: {
+        playNoReadMessage() {
+            if (!this.id && !this.privateChatId) return;
+            const list = this.getNoReadVoiceList();
+            if (list.length) {
+                this.currentAudioList = list;
+                this.playAllAudio();
+            }
+        },
+        getNoReadVoiceList() {
+            const filter = this.messageList.filter(item => {
+                return item.type == 'Voice' && !item.allRead && !item.readerSet.includes(this.myMemberId) && this.myMemberId != item.memberId;
+            });
+            return filter;
+        },
+        setActiveAutoFalse(ms) {
+            const findIndex = this.messageList.findIndex(item => {
+                return item.id == ms.id;
+            });
+            if (findIndex > -1) {
+                this.messageList.splice(findIndex, 1, {...this.messageList[findIndex], 'activeAuto': false});
+            }
+        },
         setIsBottomFn() {
             const scrollTop = this.contentDom.scrollHeight - this.contentDom.clientHeight;
             if (scrollTop == 0 || this.contentDom.scrollTop >= scrollTop) {
@@ -157,16 +185,17 @@ export default {
         },
         playAllAudio() {
             this.$nextTick(function() {
-                this.currentMessage = this.currentAudioList.shift();
-                if (this.currentMessage.type === 'Text') {
+                if (!this.currentAudioList || !this.currentAudioList[0] || this.currentAudioList[0].type === 'Text') {
                     return;
                 }
+                this.currentMessage = this.currentAudioList.shift();
                 document.querySelector('#audioPlay').src = this.currentMessage.audioPath;
                 document.querySelector('#audioPlay').play();
                 this.$set(this.currentMessage, 'activeAuto', true);
                 this.play = true;
                 document.querySelector('#audioPlay').onended = () => {
                     this.$set(this.currentMessage, 'activeAuto', false);
+                    this.setActiveAutoFalse(this.currentMessage);
                     if (!this.currentAudioList || !this.currentAudioList.length) {
                         this.play = false;
                     } else {

src/views/newMap/display/newChat/chatDialog.vue

@@ -56,7 +56,7 @@
           </div>
         </div>
         <div class="right">
-          <chat-content v-if="id || privateChatId" :id="id" :group-name="activeGroupName" :private-chat-id="privateChatId" :message-list="activeMessageList" />
+          <chat-content v-if="id || privateChatId" :id="id" ref="chatContentRef" :group-name="activeGroupName" :private-chat-id="privateChatId" :message-list="activeMessageList" />
         </div>
       </div>
       <div v-show="tabActive==1" class="contentBox">
@@ -591,6 +591,9 @@ export default {
                     this.getMessageStatus(obj);
                 });
             });
+            this.$nextTick(() => {
+                this.$refs.chatContentRef && this.$refs.chatContentRef.playNoReadMessage();
+            });
         },
         handleClose() {
             this.$store.dispatch('training/setChatBoxMin', true);

src/views/newMap/display/newChat/index.vue

@@ -6,6 +6,9 @@
       </el-badge>
     </div>
     <chatDialog ref="chatDialog" @setTotalUnread="setTotalUnread" />
+    <audio id="chatBuzzer" style="display:none">
+      <source :src="buzzerAudio" type="audio/mpeg">
+    </audio>
   </div>
 </template>
 
@@ -13,6 +16,7 @@
 import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
 // import {UserOperationType} from '@/scripts/ConstDic';
 import chatDialog from './chatDialog';
+import BuzzerAudio from '@/assets/buzzer.mp3';
 export default {
     name: 'ChatBox',
     components: {
@@ -20,7 +24,8 @@ export default {
     },
     data() {
         return {
-            totalUnreadNum: 0
+            totalUnreadNum: 0,
+            buzzerAudio: BuzzerAudio
         };
     },
     computed:{
@@ -36,11 +41,24 @@ export default {
             this.$nextTick(() => {
                 this.$store.dispatch('training/emitTipFresh');
             });
+        },
+        totalUnreadNum(val) {
+            if (val && !this.$refs.chatDialog.dialogVisible) {
+                this.playBuzzer();
+            }
         }
     },
     mounted() {
     },
     methods: {
+        playBuzzer() {
+            const audioDom = document.querySelector('#chatBuzzer');
+            audioDom && audioDom.play();
+        },
+        pauseBuzzer() {
+            const audioDom = document.querySelector('#chatBuzzer');
+            audioDom && audioDom.pause();
+        },
         setTotalUnread(val) {
             this.totalUnreadNum = val;
         },
@@ -52,6 +70,7 @@ export default {
             // };
             this.$store.dispatch('training/setChatBoxMin', false);
             this.$refs.chatDialog.dialogVisible = true;
+            this.pauseBuzzer();
             // if (this.$store.state.trainingNew.trainingSwitch) {
             //     this.$nextTick(() => {
             //         this.$store.dispatch('trainingNew/next', operate);