From 4f9d79461c173ea48e0972d9949c4dd0c7278a15 Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Mon, 29 Dec 2025 15:03:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=94=B9=E4=B8=BA=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts         |  5 +++++
 src/views/homePage.vue  | 45 ++++++++++++++++++++++++++++++++++++++---
 src/views/sys/login.vue | 40 +++++++++++++++++++++++++++++++++++-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 33e0f5f..30e1a20 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -2,6 +2,7 @@ import { get, post } from '/@/api/request.ts';
 
 enum Api {
     getInputCode = '/sys/randomImage',
+    videoApi = '/health-emergency/api/anon/screen-animation/query',
     Login = '/sys/login',
     Logout = '/sys/logout',
     GetUserInfo = '/sys/user/getUserInfo',
@@ -9,8 +10,12 @@ enum Api {
     emergencyCenter = '/health-emergency/emergency/center/getCenterDetail',
 }
 
+
+
 export const getCodeInfo = (params: any) => get(Api.getInputCode + `/${params}`);
 
+export const getVideo = () => get(Api.videoApi);
+
 export function loginApi(params: any) {
     return post(Api.Login, params);
 }
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 925a25d..95766b8 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -34,7 +34,7 @@
             </div>
         </div>
 
-        <VideoComponent :src="videoUrl" />
+        <VideoComponent v-if="videoUrl" :src="videoUrl" />
     </div>
 </template>
 <script setup lang="ts">
@@ -64,6 +64,13 @@
     const loading = ref<boolean>(false);
     const imgList = [itemOnePng, itemTwoPng, itemThreePng];
 
+    import { getVideo } from '/@/api/user';
+    import { getAppEnvConfig } from '/@/utils/env.ts';
+
+    const videoUrlLocal = window.localStorage.getItem('videoUrl') || null;
+    // 1. 本次进来，直接取 Pinia/缓存中的老地址，保证视频组件能立即渲染
+    const videoUrl = ref(videoUrlLocal);
+
     // const itemList = [
     //     {
     //         label: '健康监测平台',
@@ -87,10 +94,42 @@
         rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
         const centerInfo = getAuthCache('centerInfo');
         document.title = centerInfo.screenTitle || '健康服务中心';
+
+        asyncUpdateVideoCache();
     });
 
-    // 定义网络视频地址
-    const videoUrl = 'https://api-xj.tri.icdat.cn/file/show/temp/20251229/20251229_1766980290812.mp4';
+    /**
+     * 异步校验并预热下次使用的视频
+     */
+    async function asyncUpdateVideoCache() {
+        try {
+            const res: any = await getVideo();
+            if (res && res.success) {
+                const serverUrl = getAppEnvConfig().VITE_GLOB_API_URL + '/file/show/' + res.result.videoUrl;
+
+                // 2. 比对地址：如果服务器地址变了，说明下次需要换视频
+                if (serverUrl !== videoUrl.value) {
+                    console.log('检测到新资源，后台开始异步预缓存...');
+
+                    // 3. 立即更新 Pinia 和持久化缓存（这样下次进来 getSrc 就是新的了）
+                    window.localStorage.setItem('videoUrl', serverUrl);
+
+                    // 4. 动态插入 link 标签，让浏览器在后台静默下载新视频
+                    // 浏览器会自动处理，不会影响当前正在播放的老视频
+                    const link = document.createElement('link');
+                    link.rel = 'preload';
+                    link.as = 'video';
+                    link.href = serverUrl;
+                    link.type = 'video/mp4';
+                    document.head.appendChild(link);
+                } else {
+                    console.log('视频地址一致，不需要做任何操作...');
+                }
+            }
+        } catch (e) {
+            console.warn('后台异步更新视频缓存失败', e);
+        }
+    }
 
     const getTime = () => {
         dateInfo.value = {
diff --git a/src/views/sys/login.vue b/src/views/sys/login.vue
index c3e852f..919ca6d 100644
--- a/src/views/sys/login.vue
+++ b/src/views/sys/login.vue
@@ -91,7 +91,7 @@
     </div>
 </template>
 <script lang="ts" name="login-mini" setup>
-    import { getAuth, getCodeInfo, getEmergencyCenterApi, getUserInfo } from '/@/api/user';
+    import { getAuth, getVideo, getCodeInfo, getEmergencyCenterApi, getUserInfo } from '/@/api/user';
     import { onMounted, reactive, ref, toRaw, watch } from 'vue';
     import codeImg from '/@/assets/images/checkcode.png';
     import { useUserStore } from '/@/store/modules/user';
@@ -102,6 +102,7 @@
     import { getAuthCache } from '/@/utils/auth.ts';
     import { TOKEN_KEY } from '/@/enum/cacheEnum.ts';
     import { getCurrentPath, PageEnum, setBaseLogin, toHomeByLogoutPath } from '/@/enum/pageEnum.ts';
+    import { getAppEnvConfig } from '/@/utils/env.ts';
     import { message } from 'ant-design-vue';
 
     const router = useRouter();
@@ -144,6 +145,40 @@
             .catch((e) => {});
     }
 
+    /**
+     * 获取视频播放地址
+     */
+    async function asyncUpdateVideoCache() {
+        try {
+            const videoUrlLocal = window.localStorage.getItem('videoUrl') || null;
+            const res: any = await getVideo();
+            if (res && res.success) {
+                const serverUrl = getAppEnvConfig().VITE_GLOB_API_URL + '/file/show/' + res.result.videoUrl;
+
+                // 2. 比对地址：如果服务器地址变了，说明下次需要换视频
+                if (serverUrl !== videoUrlLocal) {
+                    console.log('检测到新资源，后台开始异步预缓存...');
+
+                    // 3. 立即更新 Pinia 和持久化缓存（这样下次进来 getSrc 就是新的了）
+                    window.localStorage.setItem('videoUrl', serverUrl);
+
+                    // 4. 动态插入 link 标签，让浏览器在后台静默下载新视频
+                    // 浏览器会自动处理，不会影响当前正在播放的老视频
+                    const link = document.createElement('link');
+                    link.rel = 'preload';
+                    link.as = 'video';
+                    link.href = serverUrl;
+                    link.type = 'video/mp4';
+                    document.head.appendChild(link);
+                } else {
+                    console.log('视频地址一致，不需要做任何操作...');
+                }
+            }
+        } catch (e) {
+            console.warn('后台异步更新视频缓存失败', e);
+        }
+    }
+
     /**
      * 账号或者手机登录
      */
@@ -264,6 +299,9 @@
     onMounted(() => {
         checkToken();
 
+        //获取视频播放地址
+        asyncUpdateVideoCache();
+
         //加载验证码
         handleChangeCheckCode();
     });