更新

src/components/Index.vue

@@ -8,6 +8,11 @@ const emit = defineEmits(["IndexPage"]);
 const start = (event) => {
   debounceTap(event.target, () => {
     emit("IndexPage", { action: "start" });
+    gsap.to(".IndexPage", {
+      duration: 0.5,
+      autoAlpha: 0,
+      onComplete: () => {},
+    });
   });
 };
 

src/components/Question.vue

@@ -1,12 +1,13 @@
 <script setup name="Question">
-import { Button, Toast } from "vant";
 import gsap from "gsap";
+import { Toast } from "vant";
 import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue } from "@/plugins";
-import { onMounted } from "vue";
+import { useMainStore } from "@/store";
 
 // 页面配置初始化
 const emit = defineEmits(["QuestionPage"]);
+const userStore = useMainStore();
 
 // 当前题目
 const currentId = ref(0); //当前id 0~11
@@ -27,7 +28,6 @@ const answerFn = (item, event) => {
       questionOut.timeScale(2);
       questionOut.restart();
       questionOut.eventCallback("onComplete", () => {
-        console.log("题目：", currentId.value);
         let cid = questionList.value[currentId.value].id;
         let has = answerList.value.findIndex((obj) => obj.qid === cid);
         if (has == -1) {
@@ -55,35 +55,62 @@ const answerFn = (item, event) => {
         questionEntry.restart();
       });
     } else {
+      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;
+      }
       resultBtnAni.play();
     }
     console.log("答案库", answerList.value);
   });
 };
 
-const mbtiArr = ref([[], [], [], []]); //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
+const mbtiArr = [[], [], [], []]; //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
 const showResult = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    // console.log('答题结果：', answerList.value);
+    console.log("答题结果：", answerList.value);
     answerList.value.forEach((element) => {
       if (element.answer == "E" || element.answer == "I")
-        mbtiArr.value[0].push(element.answer);
+        mbtiArr[0].push(element.answer);
       if (element.answer == "S" || element.answer == "N")
-        mbtiArr.value[1].push(element.answer);
+        mbtiArr[1].push(element.answer);
       if (element.answer == "T" || element.answer == "F")
-        mbtiArr.value[2].push(element.answer);
+        mbtiArr[2].push(element.answer);
       if (element.answer == "J" || element.answer == "P")
-        mbtiArr.value[3].push(element.answer);
+        mbtiArr[3].push(element.answer);
     });
     // console.log('mbtiArr', mbtiArr.value);
     let mbti =
-      mostValue(mbtiArr.value[0]).value +
-      mostValue(mbtiArr.value[1]).value +
-      mostValue(mbtiArr.value[2]).value +
-      mostValue(mbtiArr.value[3]).value;
+      mostValue(mbtiArr[0]).value +
+      mostValue(mbtiArr[1]).value +
+      mostValue(mbtiArr[2]).value +
+      mostValue(mbtiArr[3]).value;
     console.log("MBTI:", mbti);
-    Toast("你的MBTI测试结果:" + mbti);
+    userStore.updateMBTI(mbti);
+
+    // Toast("你的MBTI测试结果:" + mbti);
+    resultBtnAni.reverse();
+    gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
+    questionOut.timeScale(2);
+    questionOut.restart();
+    questionOut.eventCallback("onComplete", () => {
+      gsap.to(".QuestionPage", {
+        duration: 0.5,
+        autoAlpha: 0,
+        onComplete: () => {
+          emit("QuestionPage", { action: "showResult" });
+        },
+      });
+    });
   });
 };
 
@@ -131,6 +158,7 @@ const questionOut = gsap.timeline({
 // 查看结果事件及动画
 const resultBtnAni = gsap.timeline({ paused: true });
 onMounted(() => {
+  // gsap.from(".question-bg", { duration: 1, scale: 2, autoAlpha: 0 });
   resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 });
   questionEntry
     .from(".question", { y: 100, autoAlpha: 0 })
@@ -152,6 +180,7 @@ onMounted(() => {
       },
       0.5
     );
+
   questionEntry.play();
   questionOut
     .to(".question", { y: -50, autoAlpha: 0, duration: 0.3 })
@@ -174,6 +203,15 @@ onMounted(() => {
         ease: "slow(0.7,0.7,false)",
       },
       1.5
+    )
+    .to(
+      ".question-bg",
+      {
+        duration: 3,
+        ease: "slow(0.7,0.7,false)",
+        background: `linear-gradient(95deg, #f6d365, #fda085)`,
+      },
+      1.5
     );
 });
 </script>
@@ -190,9 +228,16 @@ onMounted(() => {
           </div>
         </div>
         <div class="answer-box">
-          <div class="answer" v-for="(item, index) in questionList[currentId].answer" :class="'answer-' + index"
-            :key="index">
-            <div class="answer-bg" :class="activeId == item.aid ? 'active' : ''"></div>
+          <div
+            class="answer"
+            v-for="(item, index) in questionList[currentId].answer"
+            :class="'answer-' + index"
+            :key="index"
+          >
+            <div
+              class="answer-bg"
+              :class="activeId == item.aid ? 'active' : ''"
+            ></div>
             <div class="answer-text">
               <div class="content-before"></div>
               <div class="content-after"></div>
@@ -214,13 +259,13 @@ onMounted(() => {
 <style lang='scss' scope>
 .QuestionPage {
   @include pos(100%, 100%, 0px, 0px);
-  background-color: rgb(68, 208, 112);
+  // background-color: rgb(68, 208, 112);
   overflow: hidden;
 
   .question-bg {
     @include pos(750px, 100%, 0px, 50%);
     transform: translateY(-50%);
-    @include bg_pos("qa/bg.jpg");
+    background: linear-gradient(135deg, #f6d365, #fda085);
   }
 
   .question-container {

src/components/Result.vue

@@ -1,83 +1,95 @@
 <script setup>
-import { gsap } from 'gsap'
-import { debounceTap } from '@/plugins'
-import { useMainStore } from '@/store'
-import { mbtiList } from '@/data'
-
+import { gsap } from "gsap";
+import { debounceTap } from "@/plugins";
+import { useMainStore } from "@/store";
+import { mbtiList } from "@/data";
 
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
-const userStore = useMainStore()
-let bgId = ref(1)
+const userStore = useMainStore();
+let bgId = ref(1);
 const bgPic = computed(() => {
-    return new URL(`../assets/images/result/bg-${bgId.value}.jpg`, import.meta.url).href
-})
+  return new URL(
+    `../assets/images/result/bg-${bgId.value}.jpg`,
+    import.meta.url
+  ).href;
+});
 
-const mbti = ref(mbtiList.find((item) => item.type == 'INFJ') || '没结果')
+const mbti = ref(userStore.MBTI);
 
-console.log('mbti', mbti.value);
+console.log("mbti", mbti.value);
 
 const changBg = (event, number) => {
-    let e = event.target
-    if (number == bgId.value) return
-    debounceTap(e, () => {
-        bgId.value = number
-        console.log('bgId', bgId.value);
-    })
-}
+  let e = event.target;
+  if (number == bgId.value) return;
+  bgId.value = number;
+  debounceTap(
+    e,
+    () => {
+      console.log("bgId", bgId.value);
+    },
+    0.3
+  );
+};
 </script>
 
 <template>
-    <div class="ResultPage">
-        <div class="result-bg">
-            <img :src="bgPic" alt="" srcset="">
-        </div>
-        <div class="result-container">
-            结果页:{{ mbti.type || '没结果' }}
-            <div class="bg-tab">
-                <div v-for="item in 4" class="li" @click="changBg($event, item)">{{ item }}</div>
-            </div>
-        </div>
+  <div class="ResultPage">
+    <div class="result-bg">
+      <img :src="bgPic" alt="" srcset="" />
     </div>
+    <div class="result-container">
+      结果页:{{ mbti || "没结果" }}
+      <div class="bg-tab">
+        <div
+          :class="{ active: bgId == item }"
+          v-for="item in 4"
+          class="li"
+          @click="changBg($event, item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
 </template>  
 
 
 <style lang="scss" scoped>
 .ResultPage {
-    @include fixed();
-    background-color: azure;
+  @include fixed();
+  background-color: azure;
 
-    .result-bg {
-        @include pos(750px, 100%, 0px, 50%);
-        transform: translateY(-50%);
-        pointer-events: none;
+  .result-bg {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
+    pointer-events: none;
 
-        img {
-            @include box(100%, 100%);
-        }
+    img {
+      @include box(100%, 100%);
     }
+  }
 
-    .result-container {
-        @include pos(750px, 100%, 0px, 50%);
-        transform: translateY(-50%);
+  .result-container {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
 
-        .bg-tab {
-            width: 90%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
+    .bg-tab {
+      width: 90%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
 
-            .li {
-                @include box(80px, 80px);
-                background-color: aquamarine;
-                @include flexCen();
-            }
-        }
+      .li {
+        @include box(80px, 80px);
+        background-color: aquamarine;
+        @include flexCen();
+      }
+
+      .active {
+        background: #bc0000;
+      }
     }
-
-
-
-
-
+  }
 }
 </style>

src/data/imgList.js

@@ -20,7 +20,6 @@ const page = [
     'qa/showResult-btn.png',
     'qa/question.png',
     'qa/prev-btn.png',
-    'qa/bg.jpg',
     'qa/answer-box-2.png',
     'qa/answer-box-1.png',
 ]

src/page/Home/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home" @touchmove.prevent>
     <Index v-if="showIndex" @IndexPage="indexFn"></Index>
     <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
     <Result v-if="showResult" @ResultPage="resultFn"></Result>
@@ -45,6 +45,11 @@ const questionFn = (item) => {
   if (item.action == "hide") {
     showQuestion.value = false;
   }
+
+  if (item.action == "showResult") {
+    showResult.value = true;
+    showQuestion.value = false;
+  }
 };
 
 const showMyPrize = ref(false);
@@ -69,7 +74,7 @@ const resultFn = (item) => {
 };
 
 onMounted(() => {
-  // createBGM();
+  createBGM();
 });
 </script>
 

src/plugins/index.js

@@ -49,7 +49,7 @@ export function createBGM() {
         },
     )
 
-    render(musicNode, document.body);
+    render(musicNode, document.querySelector('.home'));
     render(audioNode, document.querySelector("#musicBtn"));
     document.querySelector("#musicBtn").classList.add('music-on')
     let audioAni = gsap.timeline({ paused: true })

src/store/index.js

@@ -4,7 +4,7 @@ import { defineStore } from "pinia"
 export const useMainStore = defineStore("counter", {
     state: () => {
         return {
-            token: '',
+            token: 'INFJ',
             MBTI: '',    //测试结果
             prizeCode: 'DKS18', //兑换码
             prizeMoney: '8.88', //金额