更新

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 {