新建元宵节项目分支
This commit is contained in:
Andy Leong
parent
a271b2cfab
commit
7915805444
@ -1,6 +1,6 @@
|
|||||||
<script setup name="Question">
|
<script setup name="Question">
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import { Toast,Progress } from "vant";
|
import { Toast, Progress } from "vant";
|
||||||
import { data } from "@/data";
|
import { data } from "@/data";
|
||||||
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
|
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
|
||||||
import { useMainStore } from "@/store";
|
import { useMainStore } from "@/store";
|
||||||
@ -18,68 +18,12 @@ const activeId = ref(""); // 当前题目所选答案选项
|
|||||||
const showResultBtn = ref(false);
|
const showResultBtn = ref(false);
|
||||||
// 答题事件
|
// 答题事件
|
||||||
const answerFn = (item, event) => {
|
const answerFn = (item, event) => {
|
||||||
console.log('current：',currentId.value);
|
console.log('current：', currentId.value);
|
||||||
let e = event.target.parentElement.parentElement;
|
let e = event.target.parentElement.parentElement;
|
||||||
activeId.value = item.aid;
|
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
if (currentId.value != 0 && currentId.value != 11) {
|
activeId.value = item.aid; //更新下一题
|
||||||
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
|
// console.log("答案库", answerList.value);
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -88,50 +32,50 @@ const showResult = () => {
|
|||||||
|
|
||||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||||
|
|
||||||
console.log("答题结果：", answerList.value);
|
console.log("答题结果：", answerList.value);
|
||||||
answerList.value.forEach((element) => {
|
answerList.value.forEach((element) => {
|
||||||
if (element.answer == "E" || element.answer == "I")
|
if (element.answer == "E" || element.answer == "I")
|
||||||
mbtiArr[0].push(element.answer);
|
mbtiArr[0].push(element.answer);
|
||||||
if (element.answer == "S" || element.answer == "N")
|
if (element.answer == "S" || element.answer == "N")
|
||||||
mbtiArr[1].push(element.answer);
|
mbtiArr[1].push(element.answer);
|
||||||
if (element.answer == "T" || element.answer == "F")
|
if (element.answer == "T" || element.answer == "F")
|
||||||
mbtiArr[2].push(element.answer);
|
mbtiArr[2].push(element.answer);
|
||||||
if (element.answer == "J" || element.answer == "P")
|
if (element.answer == "J" || element.answer == "P")
|
||||||
mbtiArr[3].push(element.answer);
|
mbtiArr[3].push(element.answer);
|
||||||
});
|
});
|
||||||
// console.log('mbtiArr', mbtiArr.value);
|
// console.log('mbtiArr', mbtiArr.value);
|
||||||
let mbti =
|
let mbti =
|
||||||
mostValue(mbtiArr[0]).value +
|
mostValue(mbtiArr[0]).value +
|
||||||
mostValue(mbtiArr[1]).value +
|
mostValue(mbtiArr[1]).value +
|
||||||
mostValue(mbtiArr[2]).value +
|
mostValue(mbtiArr[2]).value +
|
||||||
mostValue(mbtiArr[3]).value;
|
mostValue(mbtiArr[3]).value;
|
||||||
console.log("MBTI:", mbti);
|
console.log("MBTI:", mbti);
|
||||||
userStore.updateMBTI(mbti);
|
userStore.updateMBTI(mbti);
|
||||||
|
|
||||||
if (import.meta.env.VITE_MODE != "dev") {
|
if (import.meta.env.VITE_MODE != "dev") {
|
||||||
// 提交完成记录
|
// 提交完成记录
|
||||||
subAnswer({}, userStore.token).then((res) => {
|
subAnswer({}, userStore.token).then((res) => {
|
||||||
console.log("key:", res);
|
console.log("key:", res);
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
userStore.updateDrawKey(res.data);
|
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" });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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--;
|
currentId.value--;
|
||||||
|
|
||||||
// 查询上一题做的选择
|
// 查询上一题做的选择
|
||||||
console.log('当前题库：',answerList.value[currentId.value]);
|
console.log('当前题库：', answerList.value[currentId.value]);
|
||||||
activeId.value = answerList.value[currentId.value].aid
|
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 });
|
// const resultBtnAni = gsap.timeline({ paused: true });
|
||||||
onMounted(() => {
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="QuestionPage" @touchmove.prevent>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style lang='scss' scope>
|
<style lang='scss' scope>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user