From 79158054446817478e59b8c69ad27c49a3b0289e Mon Sep 17 00:00:00 2001
From: Andy Leong <andyleong007@gmail.com>
Date: Wed, 31 Jan 2024 10:54:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E5=85=83=E5=AE=B5=E8=8A=82?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Question.vue | 284 +++++++-----------------------------
 1 file changed, 51 insertions(+), 233 deletions(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index c529503..2fd4369 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -1,6 +1,6 @@
 <script setup name="Question">
 import gsap from "gsap";
-import { Toast,Progress  } from "vant";
+import { Toast, Progress } from "vant";
 import { data } from "@/data";
 import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
 import { useMainStore } from "@/store";
@@ -18,68 +18,12 @@ const activeId = ref(""); // 当前题目所选答案选项
 const showResultBtn = ref(false);
 // 答题事件
 const answerFn = (item, event) => {
-  console.log('current：',currentId.value);
+  console.log('current：', currentId.value);
   let e = event.target.parentElement.parentElement;
-  activeId.value = item.aid;
+
   debounceTap(e, () => {
-    if (currentId.value != 0 && currentId.value != 11) {
-      gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
-    }
-
-    if (currentId.value != 11) {
-      questionOut.timeScale(2);
-      questionOut.restart();
-      questionOut.eventCallback("onComplete", () => {
-        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,
-            aid: item.aid
-          });
-        } else {
-          answerList.value[has].answer = item.secore;
-          answerList.value[has].text = item.text;
-          answerList.value[has].aid = item.aid;
-
-        }
-
-        // 更新下一题信息
-        if (currentId.value >= 11) {
-          console.log("jieshu");
-          Toast("答题结束");
-          gsap.set(".answer", { pointerEvents: "none" });
-          
-          return;
-        } else {
-          activeId.value = "";
-          currentId.value++;
-        }
-        questionEntry.timeScale(2);
-        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,
-          aid: item.aid
-        });
-      } else {
-        answerList.value[has].answer = item.secore;
-        answerList.value[has].text = item.text;
-        answerList.value[has].aid = item.aid;
-      }
-      // resultBtnAni.play();
-      // 答题结束
-      showResult()
-    }
-    console.log("答案库", answerList.value);
+    activeId.value = item.aid;  //更新下一题
+    // console.log("答案库", answerList.value);
   });
 };
 
@@ -88,50 +32,50 @@ const showResult = () => {
 
   gsap.set(".answer-box", { pointerEvents: "none" });
 
-    console.log("答题结果：", answerList.value);
-    answerList.value.forEach((element) => {
-      if (element.answer == "E" || element.answer == "I")
-        mbtiArr[0].push(element.answer);
-      if (element.answer == "S" || element.answer == "N")
-        mbtiArr[1].push(element.answer);
-      if (element.answer == "T" || element.answer == "F")
-        mbtiArr[2].push(element.answer);
-      if (element.answer == "J" || element.answer == "P")
-        mbtiArr[3].push(element.answer);
-    });
-    // console.log('mbtiArr', mbtiArr.value);
-    let mbti =
-      mostValue(mbtiArr[0]).value +
-      mostValue(mbtiArr[1]).value +
-      mostValue(mbtiArr[2]).value +
-      mostValue(mbtiArr[3]).value;
-    console.log("MBTI:", mbti);
-    userStore.updateMBTI(mbti);
+  console.log("答题结果：", answerList.value);
+  answerList.value.forEach((element) => {
+    if (element.answer == "E" || element.answer == "I")
+      mbtiArr[0].push(element.answer);
+    if (element.answer == "S" || element.answer == "N")
+      mbtiArr[1].push(element.answer);
+    if (element.answer == "T" || element.answer == "F")
+      mbtiArr[2].push(element.answer);
+    if (element.answer == "J" || element.answer == "P")
+      mbtiArr[3].push(element.answer);
+  });
+  // console.log('mbtiArr', mbtiArr.value);
+  let mbti =
+    mostValue(mbtiArr[0]).value +
+    mostValue(mbtiArr[1]).value +
+    mostValue(mbtiArr[2]).value +
+    mostValue(mbtiArr[3]).value;
+  console.log("MBTI:", mbti);
+  userStore.updateMBTI(mbti);
 
-    if (import.meta.env.VITE_MODE != "dev") {
-      // 提交完成记录
-      subAnswer({}, userStore.token).then((res) => {
-        console.log("key:", res);
-        if (res.code == 0) {
-          userStore.updateDrawKey(res.data);
-        }
-      });
-    }
-
-    // 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" });
-        },
-      });
+  if (import.meta.env.VITE_MODE != "dev") {
+    // 提交完成记录
+    subAnswer({}, userStore.token).then((res) => {
+      console.log("key:", res);
+      if (res.code == 0) {
+        userStore.updateDrawKey(res.data);
+      }
     });
+  }
+
+  // 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" });
+      },
+    });
+  });
 
 };
 
@@ -150,152 +94,26 @@ const prevePage = (event) => {
     currentId.value--;
 
     // 查询上一题做的选择
-    console.log('当前题库：',answerList.value[currentId.value]);
+    console.log('当前题库：', answerList.value[currentId.value]);
     activeId.value = answerList.value[currentId.value].aid
   });
 };
 
-// 题目过渡动画
-const questionEntry = gsap.timeline({
-  paused: true,
-  onStart: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-  onComplete: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-});
-const questionOut = gsap.timeline({
-  paused: true,
-  onStart: () => {
-    gsap.set(".answer-box", { pointerEvents: "none" });
-  },
-  onComplete: () => {},
-});
 
 // 查看结果事件及动画
 // const resultBtnAni = gsap.timeline({ paused: true });
 onMounted(() => {
-  // 适配
-  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 })
-    .from(".answer-0", {
-      y: 400,
-      scale: 0.3,
-      autoAlpha: 0,
-      duration: 2,
-      ease: "slow(0.7,0.7,false)",
-    })
-    .from(
-      ".answer-1",
-      {
-        y: 400,
-        scale: 0.3,
-        autoAlpha: 0,
-        duration: 2,
-        ease: "slow(0.7,0.7,false)",
-        onStart: () => {
-          gsap.to(".question-bg", {
-            backgroundPosition: "0px 0px",
-            duration: 1,
-            ease: "slow(0.7,0.7,false)",
-          });
-        },
-        onComplete: () => {
-          gsap.set(".answer-box", { pointerEvents: "initial" });
-          if (currentId.value != 0) {
-            gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
-          }
-        },
-      },
-      0.5
-    )
-    .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
-    .to(".question", { y: -50, autoAlpha: 0, duration: 0.3 })
-    .to(".answer-0", { scale: 0.3, duration: 1 })
-    .to(".answer-1", { scale: 0.3, duration: 1 }, 0.5)
-    .to(".answer-0", {
-      y: -600,
-      scale: 0.5,
-      autoAlpha: 0,
-      duration: 1.5,
-      ease: "slow(0.7,0.7,false)",
-      onStart: () => {
-        // gsap.to(".question-bg", {
-        //   backgroundPosition: "0px 835px",
-        //   duration: 0.75,
-        //   ease: "slow(0.7,0.7,false)",
-        // });
-      },
-    })
-    .to(
-      ".answer-1",
-      {
-        y: -600,
-        scale: 0.5,
-        autoAlpha: 0,
-        duration: 1.5,
-        ease: "slow(0.7,0.7,false)",
-      },
-      1.5
-    );
 });
 </script>
 
 <template>
   <div class="QuestionPage" @touchmove.prevent>
-    <div class="question-bg"></div>
-    <div class="question-container">
-      <div class="question-content">
-        <div class="question">
-          <div class="question-order">{{ currentId + 1 }}</div>
-          <div class="question-text">
-            <div class="text">{{ questionList[currentId].question }}</div>
-          </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-text">
-              <div class="content-before"></div>
-              <div class="content-after"></div>
-              <div class="text" @click="answerFn(item, $event)">
-                {{ item.aid }}<br />{{ item.text }}
-              </div>
-            </div>
-          </div>
-          <!-- 查看结果 -->
-          <!-- <div class="showResult-btn" @click="showResult"></div> -->
-          <!-- 上一页 -->
-          <div class="prev-btn" @click="prevePage($event)"></div>
-        </div>
-      </div>
-    </div>
-    <Progress
-      :percentage="(currentId+1)/12 *100"
-      pivot-color="#7232dd"
-      :show-pivot="false"
-      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))"
-    />
-  </div>
 
+    <Progress :percentage="(currentId + 1) / 12 * 100" pivot-color="#7232dd" :show-pivot="false"
+      color="linear-gradient(to right, rgb(255 153 153), rgb(221 50 50))" />
+  </div>
 </template>
 
 <style lang='scss' scope>