新建元宵节项目分支
This commit is contained in:
Andy Leong
parent
a271b2cfab
commit
7915805444
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user