优化答题页

src/components/Loading.vue

@@ -81,7 +81,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="LoadPage">
+  <div class="LoadPage" @touchmove.prevent>
     <div class="load-bg"></div>
     <div class="load-container">
       <div class="clock-box">

src/components/Question.vue

@@ -2,8 +2,9 @@
 import gsap from "gsap";
 import { Toast } from "vant";
 import { data } from "@/data";
-import { debounceTap, FYShuffle, mostValue } from "@/plugins";
+import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
+import { subAnswer } from '@/api'
 
 // 页面配置初始化
 const emit = defineEmits(["QuestionPage"]);
@@ -76,7 +77,7 @@ const answerFn = (item, event) => {
 const mbtiArr = [[], [], [], []]; //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
 const showResult = (event) => {
   let e = event.target;
-  debounceTap(e, () => {
+  debounceTap(e, async () => {
     console.log("答题结果：", answerList.value);
     answerList.value.forEach((element) => {
       if (element.answer == "E" || element.answer == "I")
@@ -97,6 +98,17 @@ const showResult = (event) => {
     console.log("MBTI:", mbti);
     userStore.updateMBTI(mbti);
 
+    // 提交完成记录
+    subAnswer({}, userStore.token).then(
+      res => {
+        console.log('key:', res);
+        if (res.code == 0) {
+
+        }
+      }
+    )
+
+
     // Toast("你的MBTI测试结果:" + mbti);
     resultBtnAni.reverse();
     gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
@@ -118,7 +130,6 @@ const showResult = (event) => {
 const prevePage = (event) => {
   let e = event.target;
   debounceTap(e, () => {
-    // gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
     if (currentId.value == 1) {
       gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
     }
@@ -128,42 +139,40 @@ const prevePage = (event) => {
     }
     activeId.value = "";
     currentId.value--;
-    // questionEntry.reverse(0.3);
-    // questionEntry.restart(true);
-    // setTimeout(()=>{})
   });
 };
 
 // 题目过渡动画
 const questionEntry = gsap.timeline({
   paused: true,
-  // onStart: () => {
-  //   gsap.to('.question-bg', { backgroundPosition: '0px 0px' })
-  // },
+  onStart: () => {
+    gsap.set(".answer-box", { pointerEvents: "none" });
+
+  },
   onComplete: () => {
-    // if (currentId.value != 0) {
-    //   gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
-    // }
-    gsap.set(".answer-box", { pointerEvents: "initial" });
+    gsap.set(".answer-box", { pointerEvents: "none" });
+
   },
 });
 const questionOut = gsap.timeline({
   paused: true,
   onStart: () => {
-    // gsap.to('.question-bg', { backgroundPosition: '0px 840px' })
-
     gsap.set(".answer-box", { pointerEvents: "none" });
   },
   onComplete: () => {
-
-    gsap.set(".answer-box", { pointerEvents: "initial" });
   },
 });
 
 // 查看结果事件及动画
 const resultBtnAni = gsap.timeline({ paused: true });
 onMounted(() => {
-  // gsap.from(".question-bg", { duration: 1, scale: 2, autoAlpha: 0 });
+
+  // 适配
+  if (!judgeBigScreen()) {
+    gsap.set('.answer-box', { scale: 0.9, marginTop: '-20px' })
+  }
+
+
   resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 });
   questionEntry
     .from(".question", { y: 100, autoAlpha: 0 })
@@ -197,7 +206,8 @@ onMounted(() => {
         }
       },
       0.5
-    ).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true }).to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true })
+    ).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true })
+    .to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true })
 
   questionEntry.play();
   questionOut
@@ -229,15 +239,6 @@ onMounted(() => {
       },
       1.5
     )
-  // .to(
-  //   ".question-bg",
-  //   {
-  //     duration: 3,
-  //     ease: "slow(0.7,0.7,false)",
-  //     background: `linear-gradient(95deg, #f6d365, #fda085)`,
-  //   },
-  //   1.5
-  // );
 });
 </script>
 
@@ -277,7 +278,6 @@ onMounted(() => {
 <style lang='scss' scope>
 .QuestionPage {
   @include pos(100%, 100%, 0px, 0px);
-  // background-color: rgb(68, 208, 112);
   overflow: hidden;
 
   .question-bg {
@@ -313,19 +313,17 @@ onMounted(() => {
         }
 
         .question-text {
-          @include pos(544px, 150px, 87px, 192px);
+          @include pos(544px, 170px, 87px, 192px);
           box-sizing: border-box;
-          //   padding-bottom: 20px;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 40px;
           font-weight: 700;
-          line-height: 50px;
+          // line-height: 50px;
 
           .text {
-            width: 80%;
-            // height: 100%;
+            width: 90%;
             display: flex;
             justify-content: center;
             align-content: center;
@@ -337,7 +335,7 @@ onMounted(() => {
         // display: flex;
         // flex-direction: column;
         @include box(750px, 886px);
-        margin-top: 10px;
+        // margin-top: 10px;
         position: relative;
 
         .answer {