diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue index ee4ca73..179c888 100644 --- a/src/components/HomePage.vue +++ b/src/components/HomePage.vue @@ -6,6 +6,8 @@ import { globalStore } from "../globalstore.js"; import Login from '../components/Login.vue' import { isWeixin, isLogin, getParam, Storage, Request } from "../libs/utils" import Lottery from '../components/Lottery.vue'; +import { Howl, Howler } from 'howler'; + import PrizeList from "./PrizeList.vue" import Rule from "./Rule.vue"; @@ -22,7 +24,7 @@ const props = defineProps({ show: true }) -const isMusicOn = ref(true); +const isMusicOn = ref(false); const audioElement = ref(null); const videoElement = ref(null); const videoLoaded = ref(false); @@ -62,35 +64,38 @@ const fromShare = async () => { // 初始化全局音频实例 const initGlobalAudio = () => { if (!globalStore.globalAudio) { - globalStore.globalAudio = new Audio(bgm); - globalStore.globalAudio.loop = true; // 设置循环播放 - globalStore.globalAudio.preload = 'auto'; + globalStore.globalAudio = new Howl({ + src: [bgm], + autoplay: true, + loop: true, + }) + + globalStore.globalAudio.on('load', () => { + window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => { + globalStore.globalAudio.play() + }, false); + globalStore.globalAudio.play() + }) // 监听音频事件 - globalStore.globalAudio.addEventListener('play', () => { + globalStore.globalAudio.on('play', () => { isMusicOn.value = true; }); - globalStore.globalAudio.addEventListener('pause', () => { + globalStore.globalAudio.on('pause', () => { isMusicOn.value = false; }); - globalStore.globalAudio.addEventListener('ended', () => { - isMusicOn.value = false; - }); } audioElement.value = globalStore.globalAudio; // 同步当前音乐状态 isMusicOn.value = !globalStore.globalAudio.paused; }; - +initGlobalAudio() onMounted(() => { - window.addEventListener("WeixinJSBridgeReady", () => { - initGlobalAudio(); - }) - initVideo(); - checkAndPlayAudio(); + checkAndPlayAudio() + // checkAndPlayAudio(); }) // 检查并播放音频 @@ -136,7 +141,7 @@ const checkAndPlayAudio = () => { // 初始化视频 const initVideo = () => { - document.addEventListener('WeixinJSBridgeReady',()=>{ + document.addEventListener('WeixinJSBridgeReady', () => { videoElement.value && videoElement.value.play() }) setTimeout(() => { @@ -360,6 +365,7 @@ const navigateGamePage = async () => { if (globalStore.game_chances <= 0) { return weui.alert("还没有探索机会,快去参加活动吧") } else { + checkAndPlayAudio() gameSwiperShow.value = true; } } @@ -386,7 +392,7 @@ const getUserLottery = async () => { const result = await Request("lottery", { pool: "all" }, "GET") if (result.res.status === 200) { prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : [] - if(prizelist.value.length===0){ + if (prizelist.value.length === 0) { weui.alert("您还没有中奖") } } @@ -453,7 +459,7 @@ const handleAddress = (id) => { addressShow.value = true } -globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ +globalToastEvent.on(ToastType.SHOW_ADDRESS, (id) => { handleAddress(id) }) @@ -540,12 +546,12 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{
+ @address-close="addressShow = false"> - + @@ -558,6 +564,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ .show-music-btn { z-index: 11; } + .logo { top: 4vw; width: 24vw; @@ -621,6 +628,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ background-position: 0 0; z-index: -1; } + .transparent-hole-cover { position: fixed; width: 30vw; @@ -630,6 +638,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ right: 8vw; z-index: -2; } + .transparent-hole-cover-left { position: fixed; width: 30vw; @@ -639,6 +648,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ left: 8vw; z-index: -2; } + .scene-item { position: absolute; cursor: pointer; @@ -664,16 +674,19 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ top: 43.2vw; left: 7.2vw; } + .item-ma2 { width: 14vw; top: 43.2vw; right: 7.8vw; } + .item-ma3 { width: 21vw; top: 147vw; left: 7vw; } + .item-ma4 { width: 25vw; top: 121vw; @@ -686,6 +699,7 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ top: 58vw; left: 0; } + .item-jiu2 { width: 49vw; top: 58vw; @@ -733,18 +747,23 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ 0% { transform: translateY(0) translateX(0) scale(1) rotate(0deg); } + 20% { transform: translateY(-2px) translateX(2px) scale(1.01) rotate(-1deg); } + 40% { transform: translateY(0) translateX(3px) scale(1.01) rotate(1deg); } + 60% { transform: translateY(-3px) translateX(1px) scale(1.02) rotate(-0.5deg); } + 80% { transform: translateY(0) translateX(0) scale(1.01) rotate(0.5deg); } + 100% { transform: translateY(0) translateX(0) scale(1) rotate(0deg); } @@ -780,36 +799,43 @@ globalToastEvent.on(ToastType.SHOW_ADDRESS,(id)=>{ animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-xique2 img { animation: horse-gallop 1.7s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-sidai img { animation: horse-gallop 2.6s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-jiu1 { animation: horse-gallop 2.4s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-jiu2 { animation: horse-gallop 2.2s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-lihe img { animation: horse-gallop 2s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-taozi img { animation: horse-gallop 1.5s infinite ease-in-out; animation-delay: -0.9s; transform-origin: center bottom; } + .scene-item.item-hulu img { animation: horse-gallop 1.8s infinite ease-in-out; animation-delay: -0.9s;