新增上一页功能，BGM自动引入

src/components/Question.vue

@@ -13,7 +13,7 @@
                 <!-- 查看结果 -->
                 <Button v-if="showResultBtn" @click="showResult">查看结果</Button>
                 <!-- 下一页 -->
-                <Button @click="nextPage">下一页</Button>
+                <Button v-show="currentId != 0" @click="prevePage">上一页</Button>
             </div>
         </div>
     </div>
@@ -40,11 +40,19 @@ const answerFn = (item, event) => {
     activeId.value = item.aid
     debounceTap(e, () => {
         let cid = questionList.value[currentId.value].id
+        let has = answerList.value.findIndex(obj => obj.qid === cid);
+        if (has == -1) {
             answerList.value.push({
                 qid: cid,
                 answer: item.secore,
                 text: item.text
             })
+        } else {
+            answerList.value[has].answer = item.secore
+            answerList.value[has].text = item.text
+        }
+
+        // 更新下一题信息
         if (currentId.value >= 11) {
             Toast('答题结束')
             console.log('答题结束');
@@ -56,7 +64,7 @@ const answerFn = (item, event) => {
             currentId.value++
         }
 
-        // console.log('答案库', answerList.value);
+        console.log('答案库', answerList.value);
 
     })
 }
@@ -80,10 +88,17 @@ const showResult = (event) => {
     })
 }
 
-const nextPage = () => {
-
+// 上一页函数
+const prevePage = (event) => {
+    let e = event.target
+    debounceTap(e, () => {
+        activeId.value = ''
+        currentId.value--
+    })
 }
 
+
+
 </script>
 
 <style lang='scss' scope>

src/page/Home/App.vue

@@ -11,6 +11,8 @@ import gsap from 'gsap'
 import Loading from "@/components/Loading";
 import Index from "@/components/Index";
 import Question from "@/components/Question";
+import { bgm } from '@/plugins'
+
 
 const showLoad = ref(false);
 const loadFn = (item) => {
@@ -36,7 +38,7 @@ const questionFn = (item) => {
 
 
 onMounted(() => {
-
+  bgm()
 });
 </script>
 

src/page/Home/main.js

@@ -6,7 +6,6 @@ import { isMobile } from '@/plugins';
 import { wxShare } from '@/plugins/wxshare';
 import VConsole from 'vconsole';
 
-
 const app = createApp(App)
 
 // 定义引入图片地址的全局方法

src/plugins/index.js

@@ -2,6 +2,8 @@
 import gsap from 'gsap'
 import { Howl, Howler } from 'howler';
 
+
+
 // 初始化
 const btnEnable = ref(true)  //按钮可点击状态
 
@@ -10,6 +12,23 @@ const sound = new Howl({
     src: [new URL(`@/assets/media/click.mp3`, import.meta.url).href]
 });
 
+// 背景音乐
+export function bgm(autoPlay) {
+    let div = document.createElement('div')
+    let audio = document.createElement('audio')
+
+
+
+    div.append(audio)
+    document.body.append(div)
+
+
+
+    // const bgm = new Howl({ src: [new URL(`@/assets/media/bgm.mp3`, import.meta.url).href] });
+    // bgm.play()
+}
+
+
 //是否在微信环境
 export function isWX() {
     var ua = window.navigator.userAgent.toLowerCase();