整合

src/page/Home/App.vue

@@ -1,13 +1,21 @@
 <template>
-  <div class="home" @click.once="playMusic">
-    <Index v-if="showIndex" @IndexPage="indexFn"></Index>
-    <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn" @showResult="onShowResult"></QuestionList>
-    <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
-    <Result v-if="showResult" @ResultPage="resultFn"></Result>
-    <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
-    <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
-    <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
-    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
+  <div class="home" @click.once="firstClick">
+    <div class="home-container">
+      <Index v-if="showIndex" @IndexPage="indexFn"></Index>
+      <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn"
+        @showResult="onShowResult"></QuestionList>
+      <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
+      <Result v-if="showResult" @ResultPage="resultFn"></Result>
+      <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
+      <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
+      <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
+      <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
+      <!-- 音乐图标 -->
+      <div class="music_icon" @click="musicPlay">
+        <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="musicUrl"
+          loop="loop"></audio>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,18 +30,19 @@ import Draw from "@/components/Draw";
 import Result from "@/components/Result";
 import Rule from "@/components/Rule";
 import {
-  createBGM,
   getQueryString,
   screenOrientation,
-  isAndriod,
   fontAdpat,
 } from "@/plugins";
 import { authorize, getUserInfo } from "@/api";
 import { Toast } from "vant";
 import { useMainStore } from "@/store";
 
+
 const userStore = useMainStore();
 
+const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href
+
 const showLoad = ref(false);
 const loadFn = (item) => {
   if (item.action == "hide") {
@@ -78,8 +87,8 @@ const myPrizeFn = (item) => {
   }
 };
 
-const QuestionListRef=  ref(null)
-const showQuestionList = ref(true);
+const QuestionListRef = ref(null)
+const showQuestionList = ref(false);
 const questionListFn = (item) => {
   if (item.action == "hide") {
     showQuestionList.value = false;
@@ -87,7 +96,8 @@ const questionListFn = (item) => {
 };
 const posterId = ref(1)
 const onShowResult = (item) => {
-  posterId.value = item.pid || 1
+  // posterId.value = item.pid || 1
+  posterId.value = 1
   showResult.value = true;
 }
 
@@ -102,10 +112,10 @@ const drawFn = (item) => {
 const showResult = ref(false);
 const resultFn = (item) => {
   if (item.action == "hide") {
-    
+
     showResult.value = false;
 
-    console.log('hide',showResult.value);
+    console.log('hide', showResult.value);
 
   }
   if (item.action == "showDraw") {
@@ -123,6 +133,7 @@ const ruleFn = (item) => {
 onMounted(() => {
   fontAdpat(); //字体适配
   screenOrientation(); //横竖屏检测
+  iosMusic() //自动播放音乐
 
   let code = getQueryString("code");
   let url = import.meta.env.VITE_URL;
@@ -134,27 +145,8 @@ onMounted(() => {
         if (res.code == 0) {
           console.log("我的信息：", res.data);
           userStore.updateToken(res.data);
-          createBGM();
           // 开始加载组件
           showLoad.value = true;
-
-          // ios自动播放音乐
-          document.addEventListener("DOMContentLoaded", function () {
-            function audioAutoPlay() {
-              var audio = document.getElementById("musicBtn");
-              audio.play();
-              document.addEventListener(
-                "WeixinJSBridgeReady",
-                function () {
-                  WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
-                    audio.play();
-                  });
-                },
-                false
-              );
-            }
-            audioAutoPlay();
-          });
           return;
         } else {
           authorize({ scopeType: 1, redirectUri: url }).then((res) => {
@@ -230,32 +222,100 @@ onMounted(() => {
     }
   } else {
     showLoad.value = true;
-    createBGM();
+    // createBGM();
   }
 });
 
-const playMusic = () => {
-  var audioEle = document.getElementById("audio");
-  audioEle.play();
+
+
+// ios端音乐自动播放
+const iosMusic = () => {
+  // ios自动播放音乐
+  document.addEventListener("DOMContentLoaded", function () {
+    function audioAutoPlay() {
+      var audio = document.getElementById("bg-music");
+      audio.play();
+      document.addEventListener(
+        "WeixinJSBridgeReady",
+        function () {
+          WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
+            audio.play();
+          });
+        },
+        false
+      );
+    }
+    audioAutoPlay();
+  });
+
+  musicBtnAni.fromTo(
+    ".music_icon",
+    { rotation: "0" },
+    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
+  );
+  musicBtnAni.play();
 };
+
+
+// 音乐播放
+const musicBtnAni = gsap.timeline();
+const playStatu = ref(true);
+const musicPlay = () => {
+  let audio = document.getElementById("bg-music");
+  if (playStatu.value == true) {
+    musicBtnAni.pause();
+    audio.pause();
+    playStatu.value = false;
+    console.log("暂停");
+  } else {
+    musicBtnAni.play();
+    audio.play();
+    playStatu.value = true;
+    console.log("播放");
+  }
+};
+
+const firstClick = () => {
+  let audio = document.getElementById("bg-music");
+
+  musicBtnAni.play();
+  audio.play();
+  playStatu.value = true;
+  console.log("播放");
+}
+
 </script>
 
 <style lang="scss">
 #app {
   overflow: hidden;
   background: linear-gradient(135deg, #d6d1ca, #e5dccf);
-
+  font-family: "HarmonyOS_Sans_SC_Regular";
 }
 
 #__vconsole {
   visibility: hidden;
 }
 
-#musicBtn {
-  @include pos(60px, 60px, 50px, 55px);
+
+.music_icon {
+  @include pos(60px, 60px, 50px, 245px);
+  @include bg_pos("music-on.png");
   z-index: 99;
 }
 
+.home {
+  @include pos(100%, 100vh, 0px, 0px);
+  overflow: hidden;
+
+  .home-container {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+  }
+
+}
+
+
 // 音乐-on样式
 .music-on {
   @include bg_pos("music-on.png");
@@ -266,12 +326,6 @@ const playMusic = () => {
   @include bg_pos("music-off.png");
 }
 
-.home {
-  @include box(750px, 100vh);
-  overflow: hidden;
-  margin: 0 auto;
-}
-
 .orientationPop {
   @include fixed();
   @include flexCen();