411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<script setup name="Question">
|
|
import gsap from "gsap";
|
|
import { Toast, Progress } from "vant";
|
|
import { data } from "@/data";
|
|
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
|
|
import { useMainStore } from "@/store";
|
|
import { subAnswer } from "@/api";
|
|
import Preloader from "@/plugins/Preloader";
|
|
import { pageResultImg } from "@/data/imgList";
|
|
|
|
// 页面配置初始化
|
|
const emit = defineEmits(["QuestionPage"]);
|
|
const userStore = useMainStore();
|
|
|
|
// 当前题目
|
|
const currentId = ref(0); //当前id 0~11
|
|
const questionList = ref(data); //随机打乱题库
|
|
const answerList = ref([]); // 答案库统计
|
|
const activeId = ref(""); // 当前题目所选答案选项
|
|
const showResultBtn = ref(false);
|
|
const isChecked = ref(false);
|
|
|
|
// 答题事件
|
|
const answerFn = (item, event) => {
|
|
let e = event.target.parentElement;
|
|
activeId.value = item.aid; //更新选中状态
|
|
// console.log("选项", item);
|
|
debounceTap(e, () => {
|
|
let cid = questionList.value[currentId.value].id;
|
|
let has = answerList.value.findIndex((obj) => obj.id === cid);
|
|
// 答案库中未存在该题的结果则新增，存在则更新最新选项
|
|
if (has == -1) {
|
|
answerList.value.push({
|
|
id: cid,
|
|
aid: item.aid,
|
|
answer: item.text,
|
|
});
|
|
} else {
|
|
answerList.value[has].aid = item.aid;
|
|
answerList.value[has].answer = item.text;
|
|
}
|
|
|
|
gsap.set(".option-tips,.analysis", { autoAlpha: 1 });
|
|
gsap.set(".answer-box", { pointerEvents: "none" });
|
|
isChecked.value = true;
|
|
// console.log("currentId.value", currentId.value);
|
|
if (currentId.value == 2) {
|
|
// console.log("over");
|
|
gsap.set(".create-btn", { autoAlpha: 1 });
|
|
} else {
|
|
gsap.set(".next-btn", { autoAlpha: 1 });
|
|
}
|
|
});
|
|
};
|
|
|
|
// 下一题
|
|
const nextQuestion = (event) => {
|
|
let e = event.target;
|
|
debounceTap(e, () => {
|
|
isChecked.value = false;
|
|
gsap.set(".option-tips,.analysis", { autoAlpha: 0 });
|
|
currentId.value++;
|
|
activeId.value = "";
|
|
gsap.set(".answer-box", { pointerEvents: "initial" });
|
|
gsap.set(".next-btn", { autoAlpha: 0 });
|
|
});
|
|
};
|
|
|
|
// 查看结果事件
|
|
const viewResult = (event) => {
|
|
let e = event.target;
|
|
debounceTap(e, () => {
|
|
// 随机生成海报id
|
|
userStore.updatePosterId(getRandomNumber([1, 2, 3]));
|
|
gsap.set(".question-box", { pointerEvents: "none" });
|
|
Toast("答题结束");
|
|
Toast.loading({
|
|
message: "结果生成中",
|
|
duration: 0,
|
|
forbidClick: true,
|
|
});
|
|
|
|
if (import.meta.env.VITE_MODE != "dev") {
|
|
// 提交完成记录
|
|
subAnswer({}, userStore.token).then((res) => {
|
|
console.log("key:", res);
|
|
if (res.code == 0) {
|
|
userStore.updateDrawKey(res.data);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
Toast.clear();
|
|
gsap.to(".QuestionPage", {
|
|
duration: 0.5,
|
|
autoAlpha: 0,
|
|
onComplete: () => {
|
|
emit("QuestionPage", { action: "showResult" });
|
|
},
|
|
});
|
|
}, 1000);
|
|
});
|
|
} else {
|
|
setTimeout(() => {
|
|
Toast.clear();
|
|
gsap.to(".QuestionPage", {
|
|
duration: 0.5,
|
|
autoAlpha: 0,
|
|
onComplete: () => {
|
|
emit("QuestionPage", { action: "showResult" });
|
|
},
|
|
});
|
|
}, 1000);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 从数组中随机生成一个数字
|
|
const getRandomNumber = (arr) => {
|
|
var randomIndex = Math.floor(Math.random() * arr.length);
|
|
return arr[randomIndex];
|
|
};
|
|
|
|
onMounted(() => {
|
|
gsap.from(".question-bg", { duration: 0.5, autoAlpha: 0 });
|
|
gsap.from(".question-box", { duration: 0.5, y: 30, autoAlpha: 0 });
|
|
gsap.from(".answer-box", {
|
|
duration: 0.5,
|
|
y: 30,
|
|
autoAlpha: 0,
|
|
onComplete: () => {
|
|
// 开始加载答题页面资源
|
|
Preloader({
|
|
name: "加载结果页资源",
|
|
imgs: pageResultImg,
|
|
callback: (progress) => {
|
|
// console.log("进度：", progress);
|
|
},
|
|
}).then((res) => {
|
|
console.log("done!");
|
|
});
|
|
},
|
|
});
|
|
gsap.to(".question-tree", {
|
|
duration: 3,
|
|
transformOrigin: "0% 70%",
|
|
rotation: "-10deg",
|
|
repeat: -1,
|
|
yoyo: true,
|
|
ease: "none",
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="QuestionPage" @touchmove.prevent>
|
|
<div class="question-bg"></div>
|
|
<div class="question-container">
|
|
<div class="question-box">
|
|
<div class="question-tree"></div>
|
|
<div class="question-con">
|
|
<!-- 问题序号 -->
|
|
<div class="qa-number">第{{ questionList[currentId].id }}题</div>
|
|
<div class="qa-question-box">
|
|
<!-- 问题 -->
|
|
<div
|
|
class="question-text"
|
|
v-for="item in questionList[currentId].question"
|
|
:key="item"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 选项 -->
|
|
<div class="answer-box">
|
|
<div
|
|
class="answer"
|
|
v-for="(item, index) in questionList[currentId].answer"
|
|
:class="[
|
|
isChecked ? item.result + '-text' : '',
|
|
isChecked ? item.result + '-box' : '',
|
|
]"
|
|
:key="item.aid"
|
|
>
|
|
<div class="answer-text" v-for="a in item.text" :key="a">
|
|
{{ item.aid }}.{{ a }}
|
|
</div>
|
|
<div class="option-tips">
|
|
<div :class="item.result"></div>
|
|
</div>
|
|
<!-- 对话框气泡 -->
|
|
<div class="bubble-1"></div>
|
|
<div :class="index == 0 ? 'bubble-left' : 'bubble-right'"></div>
|
|
<!-- 可点击区域 -->
|
|
<div class="click-area" @click="answerFn(item, $event)"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 解析 -->
|
|
<!-- <div class="analysis">
|
|
<div v-for="li in questionList[currentId].analysis" :key="li">
|
|
<span class="analysis-icon"></span>
|
|
{{ li }}
|
|
</div>
|
|
</div> -->
|
|
<div class="next-btn" @click="nextQuestion($event)"></div>
|
|
<div class="create-btn" @click="viewResult($event)"></div>
|
|
</div>
|
|
<!-- 进度条 -->
|
|
<Progress
|
|
:percentage="((currentId + 1) / 3) * 100"
|
|
pivot-color="#7232dd"
|
|
:show-pivot="false"
|
|
color="linear-gradient(to right, rgb(49, 116, 246), rgb(83, 131, 227))"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='scss' scope>
|
|
.QuestionPage {
|
|
@include pos(100%, 100%, 0px, 0px);
|
|
overflow: hidden;
|
|
|
|
.question-bg {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include bg_pos("qa/bg.jpg");
|
|
}
|
|
|
|
.question-container {
|
|
@include pos(750px, 1180px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include flexCen();
|
|
justify-content: space-around;
|
|
|
|
.question-box {
|
|
@include box(696px, 441px);
|
|
@include bg_pos("qa/question-box.png");
|
|
position: relative;
|
|
|
|
.question-tree {
|
|
@include pos(277px, 232px, -100px, -141px);
|
|
@include bg_pos("qa/tree.png");
|
|
}
|
|
|
|
.question-con {
|
|
@include pos(696px, 441px, 0px, 0px);
|
|
@include bg_pos("qa/question-box.png");
|
|
|
|
.qa-number {
|
|
@include pos(696px, 86px, 0px, 0px);
|
|
font-size: 40px;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: justifyLeft;
|
|
text-shadow: 0px 6px 6px rgba(49, 116, 246, 0.9);
|
|
}
|
|
|
|
.qa-question-box {
|
|
@include pos(626px, 243px, 37px, 177px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
// 问题样式
|
|
.question-text {
|
|
width: 100%;
|
|
font-family: "HarmonyOS_Sans_SC_Regular";
|
|
font-size: 30px;
|
|
letter-spacing: 1.5px;
|
|
color: #065ac6;
|
|
text-align: center;
|
|
padding: 40px;
|
|
text-align: justify;
|
|
line-height: 55px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 选项样式
|
|
.answer-box {
|
|
@include box(750px, 205px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #065ac6;
|
|
font-size: 26px;
|
|
line-height: 80px;
|
|
margin-top: 40px;
|
|
padding: 0 50px;
|
|
font-family: "HarmonyOS_Sans_SC_Regular";
|
|
|
|
|
|
|
|
.answer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
line-height: 75px;
|
|
height: 74px;
|
|
padding: 0px 30px;
|
|
border-radius: 50px;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
background-color: rgba(255, 255, 255, 0.361);
|
|
position: relative;
|
|
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.361) inset;
|
|
|
|
.answer-text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bubble-1 {
|
|
@include pos(55px, 5px, 88px, 7px);
|
|
@include bg_pos("qa/bubble-1.png");
|
|
}
|
|
|
|
.bubble-left {
|
|
@include pos(26px, 15px, 88px, 72px);
|
|
border: 10px solid transparent;
|
|
border-top-color: rgba(255, 255, 255, 0.9);
|
|
border-bottom: 0;
|
|
margin-left: -10px;
|
|
margin-bottom: -10px;
|
|
// @include bg_pos("qa/jiao-1.png");
|
|
}
|
|
|
|
.bubble-right {
|
|
@include box(26px, 15px);
|
|
border: 10px solid transparent;
|
|
border-top-color: rgba(255, 255, 255, 0.9);
|
|
border-bottom: 0;
|
|
margin-left: -5px;
|
|
margin-bottom: -5px;
|
|
position: absolute;
|
|
top: 72px;
|
|
right: 88px;
|
|
}
|
|
|
|
.click-area {
|
|
@include pos(100%, 100%, 0px, 0px);
|
|
border-radius: 47.5px;
|
|
// background: rgba($color: #000000, $alpha: 0.5);
|
|
}
|
|
}
|
|
|
|
.correct-text {
|
|
color: #e74c00;
|
|
// background-color: rgba(255, 255, 255, 0.471);
|
|
box-shadow: 5px 5px 5px rgba(255, 240, 192, 0.471) inset;
|
|
}
|
|
|
|
.option-tips {
|
|
@include box(40px, 40px);
|
|
visibility: hidden;
|
|
|
|
.correct {
|
|
@include box(74px, 74px);
|
|
@include bg_pos("qa/correct.png");
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 0px;
|
|
}
|
|
|
|
.incorrect {
|
|
@include box(74px, 74px);
|
|
@include bg_pos("qa/incorrect.png");
|
|
position: absolute;
|
|
right: -20px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 解析样式
|
|
.analysis {
|
|
visibility: hidden;
|
|
width: 95%;
|
|
font-family: "HarmonyOS_Sans_SC_Regular";
|
|
font-size: 25px;
|
|
color: #e74c00;
|
|
text-align: justify;
|
|
padding: 10px 50px;
|
|
// height: 100px;
|
|
.analysis-icon {
|
|
display: inline-block;
|
|
@include box(32px, 31px);
|
|
@include bg_pos("qa/analysis-icon.png");
|
|
}
|
|
}
|
|
|
|
.next-btn {
|
|
@include box(256px, 70px);
|
|
@include bg_pos("qa/next-btn.png");
|
|
// display: none;
|
|
visibility: hidden;
|
|
}
|
|
.create-btn {
|
|
@include box(256px, 70px);
|
|
@include bg_pos("qa/create-btn.png");
|
|
// display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style> |