diff --git a/src/components/GenerateImg.vue b/src/components/GenerateImg.vue index 3901061..d59712f 100644 --- a/src/components/GenerateImg.vue +++ b/src/components/GenerateImg.vue @@ -534,6 +534,7 @@ import generateImg from '../assets/images/generate-img-bg.webp' width: 100%; height: 100%; border-radius: 50%; + object-fit: cover; } .main { height: 100%; diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue index 7cf4b3c..5c8d47b 100644 --- a/src/components/HomePage.vue +++ b/src/components/HomePage.vue @@ -25,22 +25,22 @@ const initGlobalAudio = () => { globalStore.globalAudio = new Audio(faceFamily); globalStore.globalAudio.loop = true; // 设置循环播放 globalStore.globalAudio.preload = 'auto'; - + // 监听音频事件 globalStore.globalAudio.addEventListener('play', () => { isMusicOn.value = true; }); - + globalStore.globalAudio.addEventListener('pause', () => { isMusicOn.value = false; }); - + globalStore.globalAudio.addEventListener('ended', () => { isMusicOn.value = false; }); } audioElement.value = globalStore.globalAudio; - + // 同步当前音乐状态 isMusicOn.value = !globalStore.globalAudio.paused; }; @@ -54,21 +54,21 @@ onMounted(() => { // 检查并播放音频 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(); @@ -79,12 +79,12 @@ const checkAndPlayAudio = () => { globalStore.isFirstVisitHomePage = false; console.log('自动播放成功'); }) - .catch(error => { - // 自动播放被阻止 - console.log('自动播放被阻止,需要用户交互:', error); - isMusicOn.value = false; - audioElement.value.pause(); - }); + .catch(error => { + // 自动播放被阻止 + console.log('自动播放被阻止,需要用户交互:', error); + isMusicOn.value = false; + audioElement.value.pause(); + }); } } else { // 非首次访问且用户没有手动静音,但音乐当前暂停,则保持暂停状态 @@ -97,7 +97,7 @@ const initVideo = () => { setTimeout(() => { if (videoElement.value) { const video = videoElement.value; - + // 移动设备视频优化设置 video.muted = true; video.loop = true; @@ -107,12 +107,12 @@ const initVideo = () => { video.setAttribute('playsinline', 'true'); video.setAttribute('x5-video-player-type', 'h5'); video.setAttribute('x5-video-player-fullscreen', 'false'); - + // 移动设备特殊处理 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); if (isMobile) { video.preload = 'metadata'; // 移动设备使用较小的预加载 - + // 尝试在用户交互后播放 const playVideo = () => { video.play().then(() => { @@ -123,12 +123,12 @@ const initVideo = () => { videoError.value = true; }); }; - + // 在用户点击时尝试播放视频 document.addEventListener('touchstart', playVideo, { once: true }); document.addEventListener('click', playVideo, { once: true }); } - + // 按钮交互触发视频播放(用于 iOS 等严格的自动播放限制) const buttons = document.querySelectorAll('.scene-item'); buttons.forEach(button => { @@ -140,7 +140,7 @@ const initVideo = () => { } }, { once: true }); }); - + // 监听视频事件 video.addEventListener('loadedmetadata', () => { console.log('视频元数据加载完成'); @@ -151,7 +151,7 @@ const initVideo = () => { }); } }); - + video.addEventListener('canplay', () => { videoLoaded.value = true; videoError.value = false; @@ -165,7 +165,7 @@ const toggleMusicState = () => { if (!audioElement.value) { initGlobalAudio(); } - + if (isMusicOn.value) { // 当前在播放,用户点击静音 audioElement.value.pause(); @@ -181,10 +181,10 @@ const toggleMusicState = () => { isMusicOn.value = true; console.log('用户手动开启音乐'); }) - .catch(error => { - console.log('播放失败:', error); - isMusicOn.value = false; - }); + .catch(error => { + console.log('播放失败:', error); + isMusicOn.value = false; + }); } } }; @@ -221,9 +221,12 @@ const handleRule = () => { globalToastEvent.emit(ToastType.SHOW_RULE) } const handleLottery = () => { - globalToastEvent.emit(ToastType.SHOW_LOTTERY) - if (globalStore.draw_chances <= 0) return; + if (globalStore.draw_chances <= 0) { + return weui.alert("还没有抽奖机会,快去参加活动吧") + }; globalStore.reducerDrawChances(); + globalToastEvent.emit(ToastType.SHOW_LOTTERY) + } const router = useRouter(); @@ -240,11 +243,11 @@ const myPhotoValue = route.query.myPhotoValue; const isMyPhotoVisible = ref(false); const isPhotoSquareVisible = ref(false); -const showMyPhoto = () => { +const showMyPhoto = () => { isMyPhotoVisible.value = true; isPhotoSquareVisible.value = false; } -const showPhotoSquare=()=>{ +const showPhotoSquare = () => { isMyPhotoVisible.value = false; isPhotoSquareVisible.value = true; } @@ -253,7 +256,7 @@ watch(() => myPhotoValue, async (newVal) => { if (!newVal) { return } - + isMyPhotoVisible.value = true; }, { immediate: true }) @@ -326,7 +329,7 @@ watch(() => mergeId, async (newVal) => { if (newVal) { isPhotoSquareVisible.value = true; } -}, {immediate: true}) +}, { immediate: true }) @@ -335,24 +338,10 @@ watch(() => mergeId, async (newVal) => {
-