Przeglądaj źródła

优化横屏提示,用回话存储记录是否提示,提示过后不再重复提示,重新刷新加载后再次提示,指定路由不会提示

liyanbo 1 miesiąc temu
rodzic
commit
6d2f6a2f7a
1 zmienionych plików z 15 dodań i 28 usunięć
  1. 15 28
      src/App.vue

+ 15 - 28
src/App.vue

@@ -15,19 +15,10 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const showLandscapeHint = ref(false) // 修改默认值为false
+const showLandscapeHint = ref(false)
 const countdown = ref(3) // 倒计时初始值
 let countdownTimer = null
-
-// 从本地存储获取是否已经显示过提示的状态
-const getHasShownHint = () => {
-  return localStorage.getItem('landscapeHintShown') === 'true'
-}
-
-// 设置已显示提示的状态到本地存储
-const setHasShownHint = (shown) => {
-  localStorage.setItem('landscapeHintShown', shown.toString())
-}
+let hasShownOnce = false // 用于跟踪当前会话中是否已经显示过提示
 
 // 检测是否为移动设备
 const isMobileDevice = () => {
@@ -40,19 +31,19 @@ const isLandscape = () => {
   return window.innerWidth > window.innerHeight
 }
 
-// 检查当前路由是否为父母课堂页面或AI通用课程页面
-const isNewCoursePage = () => {
+// 检查当前路由是否为排除页面
+const isExcludedRoute = () => {
   return route.path.includes('/parent-mobile-course') ||
          route.path.includes('/parent-mobile-course-detail') ||
-        route.path.includes('/login') ||
-        route.path.includes('/ai-develop') ||
+         route.path.includes('/login') ||
+         route.path.includes('/ai-develop') ||
          route.path.includes('/ai-general-course')
 }
 
 // 关闭横屏提示
 const closeLandscapeHint = () => {
   showLandscapeHint.value = false
-  setHasShownHint(true) // 设置标记,表示已经显示过提示
+  hasShownOnce = true // 标记本次会话中已显示过提示
   // 清理倒计时定时器
   if (countdownTimer) {
     clearInterval(countdownTimer)
@@ -81,16 +72,14 @@ const startCountdown = () => {
 
 // 检查是否应该显示横屏提示
 const checkLandscapeHint = () => {
-  // 对于新课程页面,始终不显示横屏提示
-  if (isNewCoursePage()) {
+  // 对于排除的路由,始终不显示横屏提示
+  if (isExcludedRoute()) {
     showLandscapeHint.value = false
-    setHasShownHint(true) // 标记为已显示,避免后续显示
     return
   }
   
-  const hasShown = getHasShownHint()
-  if (!hasShown && isMobileDevice() && !isLandscape() && !isNewCoursePage()) {
-    // 如果是移动设备、竖屏、不是新课程页面,且尚未显示过提示,则显示横屏提示
+  if (isMobileDevice() && !isLandscape() && !isExcludedRoute() && !hasShownOnce) {
+    // 如果是移动设备、竖屏、不在排除路由中,且本次会话中未显示过提示,则显示横屏提示
     showLandscapeHint.value = true
     // 开始倒计时
     startCountdown()
@@ -103,9 +92,8 @@ const handleResize = () => {
   if (isLandscape()) {
     closeLandscapeHint()
   } else {
-    // 如果变为竖屏,且不在新课程页面,则检查是否显示提示
-    const hasShown = getHasShownHint()
-    if (!isNewCoursePage() && isMobileDevice() && !hasShown) {
+    // 如果变为竖屏,且不在排除路由中,且本次会话中未显示过提示,则检查是否显示提示
+    if (!isExcludedRoute() && isMobileDevice() && !hasShownOnce) {
       showLandscapeHint.value = true
       startCountdown()
     }
@@ -114,10 +102,9 @@ const handleResize = () => {
 
 // 监听路由变化
 watch(() => route.path, (newPath, oldPath) => {
-  // 如果进入新课程页面,立即关闭提示
-  if (isNewCoursePage()) {
+  // 如果进入排除路由,立即关闭提示
+  if (isExcludedRoute()) {
     showLandscapeHint.value = false
-    setHasShownHint(true)
     // 清理可能存在的倒计时
     if (countdownTimer) {
       clearInterval(countdownTimer)