update

src/components/HomePage.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter, useRoute } from 'vue-router'
 import faceFamily from "../assets/audio/faceFamily.mp3"
+import backgroundVideo from "../assets/video/1_stab_chf3_rhea1.mp4"
 import MyPhoto from './MyPhoto.vue'
 import PhotoSquare from './PhotoSquare.vue'
 import globalToastEvent, { ToastType } from '../globalToastEvent';
@@ -14,41 +15,137 @@ defineProps({
 })
 const isMusicOn = ref(false);
 const audioElement = ref(null);
-onMounted(() => {
-  audioElement.value = new Audio(faceFamily);
-  tryAutoPlay();
-})
+const videoElement = ref(null);
 
-// 尝试自动播放
-const tryAutoPlay = () => {
-  // 先加载音频
-  audioElement.value.load();
-  // 尝试播放
-  const playPromise = audioElement.value.play();
-  if (playPromise !== undefined) {
-    playPromise.then(() => {
-      // 自动播放成功
+// 初始化全局音频实例
+const initGlobalAudio = () => {
+  if (!globalStore.globalAudio) {
+    globalStore.globalAudio = new Audio(faceFamily);
+    globalStore.globalAudio.loop = true; // 设置循环播放
+    globalStore.globalAudio.preload = 'auto';
+    
+    // 监听音频事件
+    globalStore.globalAudio.addEventListener('play', () => {
       isMusicOn.value = true;
-      console.log("自动播放成功");
-    })
-    .catch(error => {
-      // 自动播放被阻止
-      console.log("自动播放被阻止，需要用户交互:", error);
+    });
+    
+    globalStore.globalAudio.addEventListener('pause', () => {
+      isMusicOn.value = false;
+    });
+    
+    globalStore.globalAudio.addEventListener('ended', () => {
       isMusicOn.value = false;
-      audioElement.value.pause();
     });
   }
+  audioElement.value = globalStore.globalAudio;
+  
+  // 同步当前音乐状态
+  isMusicOn.value = !globalStore.globalAudio.paused;
+};
+
+onMounted(() => {
+  initGlobalAudio();
+  initVideo();
+  checkAndPlayAudio();
+})
+
+// 检查并播放音频
+const checkAndPlayAudio = () => {
+  if (!audioElement.value) return;
+  
+  // 如果用户曾经手动静音，则不自动播放
+  if (globalStore.userMutedMusic) {
+    console.log('用户曾经手动静音，不自动播放音乐');
+    isMusicOn.value = false;
+    return;
+  }
+  
+  // 检查音频是否已在播放
+  if (!audioElement.value.paused) {
+    console.log('音频已在播放，跳过重复播放');
+    isMusicOn.value = true;
+    return;
+  }
+  
+  // 只在首次访问或音乐没有被用户手动静音时才尝试自动播放
+  if (globalStore.isFirstVisitHomePage || !globalStore.userMutedMusic) {
+    const playPromise = audioElement.value.play();
+    if (playPromise !== undefined) {
+      playPromise.then(() => {
+        // 自动播放成功
+        isMusicOn.value = true;
+        globalStore.isFirstVisitHomePage = false;
+        console.log('自动播放成功');
+      })
+      .catch(error => {
+        // 自动播放被阻止
+        console.log('自动播放被阻止，需要用户交互:', error);
+        isMusicOn.value = false;
+        audioElement.value.pause();
+      });
+    }
+  } else {
+    // 非首次访问且用户没有手动静音，但音乐当前暂停，则保持暂停状态
+    isMusicOn.value = false;
+  }
+};
+
+// 初始化视频
+const initVideo = () => {
+  // 等待DOM渲染完成后初始化视频
+  setTimeout(() => {
+    const video = document.querySelector('.background-video');
+    if (video) {
+      videoElement.value = video;
+      
+      // 确保视频静音并循环播放
+      video.muted = true;
+      video.loop = true;
+      video.autoplay = true;
+      
+      // 处理移动设备的自动播放限制
+      video.addEventListener('canplaythrough', () => {
+        video.play().catch(error => {
+          console.log('视频自动播放被阻止:', error);
+        });
+      });
+      
+      // 确保视频在加载完成后开始播放
+      if (video.readyState >= 3) {
+        video.play().catch(error => {
+          console.log('视频播放失败:', error);
+        });
+      }
+    }
+  }, 100);
 };
 
 // 播放/暂停切换
 const toggleMusicState = () => {
-  isMusicOn.value = !isMusicOn.value;
-  if (!isMusicOn.value) {
-      audioElement.value.pause();
+  if (!audioElement.value) {
+    initGlobalAudio();
+  }
+  
+  if (isMusicOn.value) {
+    // 当前在播放，用户点击静音
+    audioElement.value.pause();
+    globalStore.userMutedMusic = true; // 记录用户手动静音
+    isMusicOn.value = false;
+    console.log('用户手动静音音乐');
   } else {
-    audioElement.value.play().catch(error => {
-      console.log("播放失败:", error);
-    });
+    // 当前暂停，用户点击播放
+    const playPromise = audioElement.value.play();
+    if (playPromise !== undefined) {
+      playPromise.then(() => {
+        globalStore.userMutedMusic = false; // 用户重新开启音乐，清除静音标记
+        isMusicOn.value = true;
+        console.log('用户手动开启音乐');
+      })
+      .catch(error => {
+        console.log('播放失败:', error);
+        isMusicOn.value = false;
+      });
+    }
   }
 };
 
@@ -175,6 +272,16 @@ watch(() => mergeId, async (newVal) => {
 <template>
   <div :show="show" class="main">
     <div class="home-wrapper">
+      <!-- 视频背景 -->
+      <video 
+        class="background-video" 
+        :src="backgroundVideo" 
+        autoplay 
+        loop 
+        muted 
+        playsinline
+      ></video>
+      
       <div class="scene-item item-1" @click="handleLottery" :class="{ 'disabled': globalStore.draw_chances <= 0 }">
         <img src="../assets/images/lottery.webp" alt="抽奖">
         <div class="lottery-main">
@@ -227,15 +334,24 @@ watch(() => mergeId, async (newVal) => {
 .home-wrapper {
   width: 100vw;
   height: 200vw;
-  background-image: url('../assets/images/home-bg.webp');
-  background-size: cover;
-  background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   min-height: -webkit-fill-available;
+  overflow: hidden; /* 防止视频溢出 */
+}
+
+/* 视频背景样式 */
+.background-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保持视频比例并填满容器 */
+  z-index: 0; /* 置于最底层 */
 }
 
 .scene-item {
@@ -245,6 +361,7 @@ watch(() => mergeId, async (newVal) => {
   overflow: hidden;
   border: 3px solid transparent;
   animation: float 4s ease-in-out infinite;
+  z-index: 10; /* 确保按钮显示在视频之上 */
 }
 
 .scene-item:hover {