处理聊天未读消息数量统计、应用角标、视频预览、切换账号清除缓存问题

src/App.vue

@@ -1,10 +1,11 @@
 <script setup>
 import { useStatus } from '@/store/status'
-import { useUserStore } from '@/store'
+import { useUserStore, useDialogueListStore } from '@/store'
 import { useProvideUserModal } from '@/hooks'
 import {useAuth} from "@/store/auth";
 const {token} = useAuth()
 import ws from '@/connect'
+import {uniStorage} from "@/utils/uniStorage.js"
 const { statusBarHeight } = useStatus()
 const { uid, isShow } = useProvideUserModal()
 const userStore = useUserStore()
@@ -19,6 +20,10 @@ const handleWebview = () => {
   // })
   console.log("webview", webview)
   token.value = webview.token
+  if(webview?.doClearDialogueList){
+    useDialogueListStore().dialogueList.value = []
+    uniStorage.removeItem('dialogueList')
+  }
   userStore.loadSetting()
   ws.connect()
 }

src/components/talk/message/VideoMessage.vue

@@ -77,10 +77,19 @@ const canplay = (e) => {
 };
 
 async function onPlay() {
-  videoContext.value = uni.createVideoContext(props.extra.url, instance);
-  videoContext.value.requestFullScreen({ direction: 2 });
-  videoContext.value.play()
   open.value = true
+  await nextTick()
+  videoContext.value = uni.createVideoContext(props.extra.url, instance)
+
+  setTimeout(() => {
+    // 先请求全屏
+    videoContext.value.requestFullScreen({ direction: 2 })
+
+    // 延迟一下再播放，确保全屏已经完成
+    setTimeout(() => {
+      videoContext.value.play()
+    }, 100)
+  }, 200)
 }
 onMounted(() => {
   videoRef.value = uni.createVideoContext(props.data.msg_id);
@@ -132,11 +141,22 @@ onMounted(() => {
         :percent="props.data.uploadCurrent">
       </tm-progress> -->
     </div>
-    <div v-show="open">
-      <video :src="props.extra.url" controls @fullscreenchange="fullscreenchange" :id="props.extra.url">
-      </video>
-    </div>
   </section>
+
+  <teleport to="body">
+    <div v-show="open" class="video-container">
+      <video
+        :src="props.extra.url"
+        controls
+        @fullscreenchange="fullscreenchange"
+        :id="props.extra.url"
+        playsinline
+        webkit-playsinline
+        x5-playsinline
+        class="fullscreen-video"
+      ></video>
+    </div>
+  </teleport>
 </template>
 <style lang="less" scoped>
 .im-message-video {
@@ -206,4 +226,23 @@ onMounted(() => {
   width: 80rpx !important;
   height: 80rpx !important;
 }
+
+.video-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fullscreen-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
 </style>

src/event/talk.js

@@ -211,8 +211,8 @@ class Talk extends Base {
     }).then(async ({ code, data }) => {
       if (code == 200) {
         let item = formatTalkItem(data)
-        item.unread_num = 1
         if (!item?.is_disturb) {
+          item.unread_num = 1
           this.updateUnreadMsgNumAdd()
         }
         useTalkStore().addItem(item)

src/pages/search/index.vue

@@ -17,7 +17,9 @@ import { ServeSeachQueryAll, ServeGetSessionId } from '@/api/search/index'
 import { onMounted } from 'vue'
 import { handleSetWebviewStyle } from '@/utils/common'
 
-import { useDialogueStore } from '@/store'
+import { useDialogueStore, useTalkStore } from '@/store'
+import { ServeCreateTalkList } from '@/api/chat/index.js'
+import { formatTalkItem } from '@/utils/talk'
 
 const dialogueStore = useDialogueStore()
 
@@ -50,6 +52,18 @@ const clickSearchItem = async (
   console.log(talk_type, receiver_id)
   const sessionId = await getSessionId(talk_type, receiver_id)
   if (searchResultKey === 'user_infos') {
+    if (useTalkStore().findTalkIndex(`${talk_type}_${receiver_id}`) === -1) {
+      ServeCreateTalkList({
+        talk_type,
+        receiver_id,
+        erp_user_id: result.erp_user_id,
+      }).then(async ({ code, data }) => {
+        if (code == 200) {
+          let item = formatTalkItem(data)
+          useTalkStore().addItem(item)
+        }
+      })
+    }
     dialogueStore.setDialogue({
       name: result.nickname,
       talk_type: 1,
@@ -65,7 +79,7 @@ const clickSearchItem = async (
       receiver_id: result.group_id || result.id,
     })
     uni.navigateTo({
-      url: '/pages/dialog/index?sessionId=' + sessionId
+      url: '/pages/dialog/index?sessionId=' + sessionId,
     })
   } else if (searchResultKey === 'general_infos') {
     uni.navigateTo({

src/pages/search/moreResult/moreResult.vue

@@ -25,7 +25,9 @@ import {
 } from '@/api/search/index'
 import { reactive } from 'vue'
 
-import { useDialogueStore } from '@/store'
+import { useDialogueStore, useTalkStore } from '@/store'
+import { ServeCreateTalkList } from '@/api/chat/index.js'
+import { formatTalkItem } from '@/utils/talk'
 
 const dialogueStore = useDialogueStore()
 
@@ -75,7 +77,13 @@ onLoad((options) => {
 })
 
 //分页查询时，最后一条id变化
-const lastIdChange = (last_id, last_group_id, last_member_id, last_receiver_user_name, last_receiver_group_name) => {
+const lastIdChange = (
+  last_id,
+  last_group_id,
+  last_member_id,
+  last_receiver_user_name,
+  last_receiver_group_name,
+) => {
   let idChanges = {
     last_id,
     last_group_id,
@@ -108,6 +116,18 @@ const clickSearchItem = async (
   console.log(talk_type, receiver_id)
   const sessionId = await getSessionId(talk_type, receiver_id)
   if (state.searchResultKey === 'user_infos') {
+    if (useTalkStore().findTalkIndex(`${talk_type}_${receiver_id}`) === -1) {
+      ServeCreateTalkList({
+        talk_type,
+        receiver_id,
+        erp_user_id: result.erp_user_id,
+      }).then(async ({ code, data }) => {
+        if (code == 200) {
+          let item = formatTalkItem(data)
+          useTalkStore().addItem(item)
+        }
+      })
+    }
     dialogueStore.setDialogue({
       name: result.nickname,
       talk_type: 1,

src/pages/search/searchByCondition/index.vue

@@ -168,7 +168,10 @@
                           />
                         </template>
                         <template v-else-if="item?.msg_type === 5">
-                          <div class="video-preview" @click="onPlay(item?.extra?.url)">
+                          <div
+                            class="video-preview"
+                            @click="onPlay(item?.extra?.url)"
+                          >
                             <tm-image
                               :src="item?.extra?.cover"
                               model="aspectFill"
@@ -264,18 +267,20 @@
           </div>
         </div>
       </ZPaging>
-      <div v-show="open">
+      <teleport to="body">
-        <video
+        <div v-show="open" class="video-container">
-          :src="currentVideoUrl"
+          <video
-          controls
+            :src="currentVideoUrl"
-          @fullscreenchange="fullscreenchange"
+            controls
-          :id="currentVideoUrl"
+            @fullscreenchange="fullscreenchange"
-          playsinline
+            :id="currentVideoUrl"
-          webkit-playsinline
+            playsinline
-          x5-playsinline
+            webkit-playsinline
-        >
+            x5-playsinline
-        </video>
+            class="fullscreen-video"
-      </div>
+          ></video>
+        </div>
+      </teleport>
     </div>
   </div>
 </template>
@@ -285,7 +290,7 @@ import fileType_EXCEL from '@/static/image/search/fileType_EXCEL.png'
 import fileType_WORD from '@/static/image/search/fileType_WORD.png'
 import fileType_PDF from '@/static/image/search/fileType_PDF.png'
 import fileType_Files from '@/static/image/search/fileType_Files.png'
-import playCircle from "@/static/image/chatList/playCircle@2x.png"
+import playCircle from '@/static/image/chatList/playCircle@2x.png'
 import { fileFormatSize, fileSuffix } from '@/utils/strings'
 import searchItem from '../components/searchItem.vue'
 import customInput from '@/components/custom-input/custom-input.vue'
@@ -353,13 +358,15 @@ async function onPlay(url) {
   // 创建新的视频上下文
   videoContext.value = uni.createVideoContext(url, getCurrentInstance())
 
-  // 先请求全屏
-  videoContext.value.requestFullScreen({ direction: 2 })
-
-  // 延迟一下再播放，确保全屏已经完成
   setTimeout(() => {
-    videoContext.value.play()
+    // 先请求全屏
-  }, 100)
+    videoContext.value.requestFullScreen({ direction: 2 })
+
+    // 延迟一下再播放，确保全屏已经完成
+    setTimeout(() => {
+      videoContext.value.play()
+    }, 100)
+  }, 200)
 }
 
 onLoad((options) => {
@@ -561,7 +568,7 @@ const cancelSearch = () => {
     })
   } else {
     uni.reLaunch({
-      url: '/pages/index/index'
+      url: '/pages/index/index',
     })
   }
 }
@@ -904,7 +911,7 @@ body::v-deep .round-3 {
                     align-items: center;
                     justify-content: center;
 
-                    img{
+                    img {
                       width: 80rpx !important;
                       height: 80rpx !important;
                     }
@@ -918,4 +925,23 @@ body::v-deep .round-3 {
     }
   }
 }
+
+.video-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fullscreen-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
 </style>