Explorar el Código

新增登录弹窗组件,支持用户登录状态检查并在未登录时显示弹窗,提升用户体验和交互性。同时,更新主页逻辑以处理登录成功后的用户信息刷新。

wuyi hace 2 meses
padre
commit
c1e645f3c5
Se han modificado 1 ficheros con 22 adiciones y 1 borrados
  1. 22 1
      src/views/Home.vue

+ 22 - 1
src/views/Home.vue

@@ -367,6 +367,9 @@
         </div>
       </div>
     </div>
+
+    <!-- 登录弹窗 -->
+    <LoginDialog v-model="showLoginDialog" @login-success="onLoginSuccess" />
   </section>
 </template>
 
@@ -377,6 +380,7 @@ import { searchVideoByTags, searchVideoByKeyword } from "@/services/api";
 import { videoMenus as fixedVideoMenus } from "@/data/videoMenus";
 import { freeVideos } from "@/data/freeVideo";
 import VideoJSPlayer from "@/components/VideoJSPlayer.vue";
+import LoginDialog from "@/components/LoginDialog.vue";
 import { useUserStore } from "@/store/user";
 import { VipLevel } from "@/types/vip";
 
@@ -434,6 +438,16 @@ const showAllTags = ref(false);
 const isSearchMode = ref(false);
 const currentSearchKeyword = ref("");
 
+// 登录弹窗
+const showLoginDialog = ref(false);
+
+// 处理登录成功
+const onLoginSuccess = async () => {
+  // 登录成功后刷新用户信息
+  await userStore.sync();
+  console.log("登录成功,用户信息已更新");
+};
+
 // 格式化时长
 const formatDuration = (duration: string | number): string => {
   const seconds = parseInt(String(duration));
@@ -606,8 +620,15 @@ const playVideo = (video: any) => {
 
   const vipLevel = userStore.getVipLevel();
 
-  // 如果是试看视频,直接通过URL参数传递所有信息
+  // 如果是试看视频,检查登录状态
   if (selectedSort.value === "free" || video.id?.startsWith("free-")) {
+    // 检查用户是否已登录
+    if (!userStore.token) {
+      // 未登录,显示登录弹窗
+      showLoginDialog.value = true;
+      return;
+    }
+    // 已登录,跳转到试看视频播放页
     router.push({
       name: "VideoPlayer",
       params: { id: video.id },