Selaa lähdekoodia

优化视频播放器组件,添加iOS夸克浏览器的特殊处理逻辑,确保在显示成功/错误提示时自动滚动到播放器下方,提升用户体验。

wuyi 2 kuukautta sitten
vanhempi
commit
2027070f85
1 muutettua tiedostoa jossa 125 lisäystä ja 32 poistoa
  1. 125 32
      src/views/VideoPlayer.vue

+ 125 - 32
src/views/VideoPlayer.vue

@@ -677,13 +677,41 @@ const isQuarkBrowser = () => {
   return ua.includes("quark");
   return ua.includes("quark");
 };
 };
 
 
+// 检测是否为iOS夸克浏览器
+const isIOSQuarkBrowser = () => {
+  const ua = navigator.userAgent.toLowerCase();
+  return isQuarkBrowser() && /iPad|iPhone|iPod/.test(navigator.userAgent);
+};
+
 // 显示成功/错误提示的函数
 // 显示成功/错误提示的函数
 const showSuccess = (message: string) => {
 const showSuccess = (message: string) => {
   successMessage.value = message;
   successMessage.value = message;
   showSuccessDialog.value = true;
   showSuccessDialog.value = true;
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
+    setTimeout(() => {
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
+    }, 100);
+  }
+  // 其他夸克浏览器自动滚动到底部
+  else if (isQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
       window.scrollTo({
       window.scrollTo({
         top: document.documentElement.scrollHeight,
         top: document.documentElement.scrollHeight,
@@ -697,13 +725,26 @@ const showError = (message: string) => {
   errorMessage.value = message;
   errorMessage.value = message;
   showErrorDialog.value = true;
   showErrorDialog.value = true;
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: "smooth",
-      });
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
     }, 100);
     }, 100);
   }
   }
 };
 };
@@ -904,13 +945,26 @@ const handleMembershipClick = () => {
   // 已登录,显示购买弹窗
   // 已登录,显示购买弹窗
   showMembershipPurchaseModal.value = true;
   showMembershipPurchaseModal.value = true;
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: "smooth",
-      });
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
     }, 100);
     }, 100);
   }
   }
 };
 };
@@ -927,13 +981,26 @@ const handleSinglePurchaseClick = () => {
   // 已登录,显示购买弹窗
   // 已登录,显示购买弹窗
   showSinglePurchaseModal.value = true;
   showSinglePurchaseModal.value = true;
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: "smooth",
-      });
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
     }, 100);
     }, 100);
   }
   }
 };
 };
@@ -953,13 +1020,26 @@ const purchaseMembership = () => {
   // 打开会员购买弹窗
   // 打开会员购买弹窗
   showMembershipPurchaseModal.value = true;
   showMembershipPurchaseModal.value = true;
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: "smooth",
-      });
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
     }, 100);
     }, 100);
   }
   }
 };
 };
@@ -1072,13 +1152,26 @@ const purchaseVideo = async () => {
     return;
     return;
   }
   }
 
 
-  // 夸克浏览器自动滚动到底部
-  if (isQuarkBrowser()) {
+  // iOS夸克浏览器特殊处理:滚动到播放器下方
+  if (isIOSQuarkBrowser()) {
     setTimeout(() => {
     setTimeout(() => {
-      window.scrollTo({
-        top: document.documentElement.scrollHeight,
-        behavior: "smooth",
-      });
+      // 获取播放器元素的位置
+      const videoContainer = document.querySelector(".video-container");
+      if (videoContainer) {
+        const rect = videoContainer.getBoundingClientRect();
+        const scrollPosition = window.scrollY + rect.bottom + 20; // 播放器底部再加20px的间距
+
+        window.scrollTo({
+          top: scrollPosition,
+          behavior: "smooth",
+        });
+      } else {
+        // 如果找不到播放器元素,则滚动到页面中部
+        window.scrollTo({
+          top: window.innerHeight * 0.6,
+          behavior: "smooth",
+        });
+      }
     }, 100);
     }, 100);
   }
   }