Parcourir la source

优化首页和底部栏逻辑,新增状态恢复功能以支持从底部栏返回首页时恢复用户状态,同时调整路由参数处理,提升用户体验。

wuyi il y a 2 mois
Parent
commit
7201659fb8
3 fichiers modifiés avec 22 ajouts et 3 suppressions
  1. 10 2
      src/components/layout/Footer.vue
  2. 11 0
      src/views/Home.vue
  3. 1 1
      src/views/Purchased.vue

+ 10 - 2
src/components/layout/Footer.vue

@@ -32,8 +32,16 @@ function switchTab(key: TabKey) {
     favorite: "/favorite",
   };
 
-  router.push(routeMap[key]);
-  window.scrollTo({ top: 0, behavior: "smooth" });
+  // 如果点击首页,设置标记以便Home.vue组件知道需要恢复状态
+  if (key === "home") {
+    router.push({
+      path: routeMap[key],
+      query: { restoreState: "true" },
+    });
+  } else {
+    router.push(routeMap[key]);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
 }
 </script>
 

+ 11 - 0
src/views/Home.vue

@@ -789,8 +789,19 @@ const checkReturnFromVideo = () => {
   }
 };
 
+// 检查是否需要恢复状态(从底部栏点击首页)
+const checkRestoreState = () => {
+  // 检查URL查询参数
+  if (route.query.restoreState === "true") {
+    isReturnFromVideo.value = true;
+    // 清除查询参数,避免重复触发
+    router.replace({ path: route.path });
+  }
+};
+
 onMounted(() => {
   checkReturnFromVideo();
+  checkRestoreState();
   initializeVideoMenus();
   // 监听Header搜索事件
   window.addEventListener("header-search", handleHeaderSearch as EventListener);

+ 1 - 1
src/views/Purchased.vue

@@ -44,7 +44,7 @@ const generateMacAddress = (): string => {
 
 const device = generateMacAddress();
 
-// 解密封面图片的函数(从VideoJSPlayer组件复制)
+// 解密封面图片的函数
 const decryptCover = async (url: string): Promise<string> => {
   if (!url.includes("cover")) {
     return url;