From 2aab0f715284fb97406731a6a8bea7105345ea7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Sat, 30 Aug 2025 02:28:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Ahome=E9=A1=B5=E9=9D=A2=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=E6=BB=9A=E8=BD=AE=E9=AB=98=E5=BA=A6=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E5=AE=A2=E6=9C=8D=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home.vue | 114 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 109 insertions(+), 5 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index eb57142..3e8c063 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -501,13 +501,13 @@
     <RegisterModal v-model:show="registerModalVisible" @success="handleAuthSuccess" />
 
     <!-- 固定按钮组 -->
-    <div class="fixed-buttons-group">
-      <div class="fixed-button customer-btn" title="客服">
+    <div class="fixed-buttons-group" :class="{ 'show': showFixedButtons }">
+      <!-- <div class="fixed-button customer-btn" title="客服">
         <img src="/images/icon/customer.jpg" alt="客服" />
       </div>
       <div class="fixed-button phone-btn" title="电话">
         <img src="/images/icon/phone.jpg" alt="电话" />
-      </div>
+      </div> -->
       <div class="fixed-button issue-btn" title="问题" @click="showIssueModal">
         <img src="/images/icon/issue.jpg" alt="问题" />
       </div>
@@ -520,7 +520,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useCourseStore } from '@/stores/course'
@@ -622,9 +622,64 @@ const scrollToTop = () => {
   })
 }
 
+// 处理滚动事件
+const handleScroll = () => {
+  try {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight
+    const documentHeight = Math.max(
+      document.body.scrollHeight || 0,
+      document.body.offsetHeight || 0,
+      document.documentElement.clientHeight || 0,
+      document.documentElement.scrollHeight || 0,
+      document.documentElement.offsetHeight || 0
+    )
+
+    console.log('🔍 滚动事件触发:', {
+      scrollTop,
+      windowHeight,
+      documentHeight,
+      timestamp: new Date().toLocaleTimeString()
+    })
+
+    // 如果页面高度小于等于窗口高度，直接显示按钮
+    if (documentHeight <= windowHeight) {
+      showFixedButtons.value = true
+      console.log('✅ 页面高度不足，直接显示按钮')
+      return
+    }
+
+    // 计算滚动百分比
+    const scrollableHeight = documentHeight - windowHeight
+    const scrollPercentage = (scrollTop / scrollableHeight) * 100
+
+    console.log('📊 滚动计算结果:', {
+      scrollTop,
+      windowHeight,
+      documentHeight,
+      scrollableHeight,
+      scrollPercentage: scrollPercentage.toFixed(2) + '%',
+      shouldShow: scrollPercentage >= 80,
+      currentShow: showFixedButtons.value
+    })
+
+    // 当滚动超过80%时显示固定按钮组
+    const shouldShow = scrollPercentage >= 80
+    if (shouldShow !== showFixedButtons.value) {
+      showFixedButtons.value = shouldShow
+      console.log(shouldShow ? '🟢 显示固定按钮组' : '🔴 隐藏固定按钮组')
+    }
+  } catch (error) {
+    console.error('❌ 滚动处理函数出错:', error)
+  }
+}
+
 // 控制广告显示状态
 const showAdvertisement = ref(true)
 
+// 控制固定按钮组显示状态
+const showFixedButtons = ref(false)
+
 // 关闭广告函数
 const closeAdvertisement = () => {
   showAdvertisement.value = false
@@ -808,8 +863,47 @@ const aiCards = computed(() => [
 
 // 这里的函数已移至前面定义，避免重复声明
 
+// 创建滚动处理函数引用
+let scrollHandler: (() => void) | null = null
+
 onMounted(async () => {
   await courseStore.fetchCourses()
+
+  // 创建滚动事件处理函数
+  scrollHandler = () => {
+    console.log('🎯 滚动事件被触发 - 时间:', new Date().toLocaleTimeString())
+    handleScroll()
+  }
+
+  // 绑定滚动事件监听器 - 使用多种方式确保监听成功
+  window.addEventListener('scroll', scrollHandler, { passive: true })
+  document.addEventListener('scroll', scrollHandler, { passive: true })
+  document.body.addEventListener('scroll', scrollHandler, { passive: true })
+
+  console.log('✅ 滚动事件监听器已绑定')
+
+  // 延迟初始检查，确保页面完全加载
+  setTimeout(() => {
+    console.log('🔄 执行初始滚动检查')
+    handleScroll()
+  }, 1000)
+
+  // 测试滚动监听是否工作
+  setTimeout(() => {
+    console.log('🧪 测试滚动监听 - 手动触发一次')
+    window.dispatchEvent(new Event('scroll'))
+  }, 2000)
+})
+
+onUnmounted(() => {
+  // 移除滚动事件监听器
+  if (scrollHandler) {
+    window.removeEventListener('scroll', scrollHandler)
+    document.removeEventListener('scroll', scrollHandler)
+    document.body.removeEventListener('scroll', scrollHandler)
+    scrollHandler = null
+    console.log('🗑️ 滚动事件监听器已移除')
+  }
 })
 </script>
 
@@ -867,8 +961,18 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   gap: 15px;
-
   z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: all 0.3s ease;
+}
+
+/* 显示状态 */
+.fixed-buttons-group.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }
 
 .fixed-button {