309 lines
7.6 KiB
Vue
309 lines
7.6 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 { computed } from "vue";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["hide", "showResult", "QuestionPage"]);
|
||
const userStore = useMainStore();
|
||
|
||
const props = defineProps({
|
||
questionId: {
|
||
default: 0,
|
||
required: true,
|
||
}
|
||
})
|
||
|
||
// 当前题目
|
||
const currentId = ref(props.questionId); //当前id 0~11
|
||
|
||
|
||
|
||
const questionList = ref(data); //随机打乱题库
|
||
const isChecked = ref(false)
|
||
const checkedOption = ref('')
|
||
|
||
// 答题事件
|
||
const answerFn = (item, event) => {
|
||
let e = event.target.parentElement;
|
||
|
||
debounceTap(e, () => {
|
||
gsap.set('.answer-box', { pointerEvents: 'none' })
|
||
isChecked.value = true
|
||
checkedOption.value = item
|
||
console.log('checkedOption', checkedOption.value);
|
||
|
||
if (item.result) {
|
||
gsap.set('.create-btn', { display: 'block' })
|
||
} else {
|
||
gsap.set('.return-btn', { display: 'block' })
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
// 下一题
|
||
const nextQuestion = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
gsap.to('.question-box', {
|
||
duration: 0.5, autoAlpha: 0, scale: 0.3, onComplete: () => {
|
||
emit('hide')
|
||
}
|
||
|
||
})
|
||
|
||
})
|
||
|
||
}
|
||
|
||
// 查看结果事件
|
||
const viewResult = (event) => {
|
||
let e = event.target;
|
||
debounceTap(e, () => {
|
||
// 更新海报id
|
||
userStore.posterId = currentId.value + 1
|
||
|
||
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("showResult", { action: "showResult" });
|
||
}
|
||
})
|
||
}, 1000)
|
||
});
|
||
} else {
|
||
setTimeout(() => {
|
||
Toast.clear()
|
||
gsap.to('.QuestionPage', {
|
||
duration: 0.5, autoAlpha: 0, onComplete: () => {
|
||
emit("showResult", { pid: currentId.value });
|
||
}
|
||
})
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
onMounted(() => {
|
||
gsap.from('.question-bg', { duration: 0.5, autoAlpha: 0, })
|
||
gsap.from('.question-box', { duration: 0.5, scale: 0.4, autoAlpha: 0, })
|
||
|
||
});
|
||
|
||
|
||
|
||
const getClass = (item) => {
|
||
if (isChecked.value) {
|
||
if (checkedOption.value.aid == item.aid) {
|
||
return item.result ? 'correct' : 'incorrect'
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="QuestionPage" @touchmove.prevent>
|
||
<div class="question-bg"></div>
|
||
<div class="question-container">
|
||
<div class="question-box">
|
||
<!-- 问题序号 -->
|
||
<div class="qa-question-box">
|
||
<!-- 问题 -->
|
||
<div class="question">
|
||
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<!-- 选项 -->
|
||
<div class="answer-box">
|
||
<div class="answer" :class="getClass(item)" v-for="item in questionList[currentId].answer" :key="item.aid">
|
||
<div class="answer-text">
|
||
{{ item.aid }}.{{ item.text }}
|
||
</div>
|
||
<div class="result-icon" v-if="isChecked && (item.aid == checkedOption.aid)">
|
||
<div :class="item.result ? 'icon-correct' : 'icon-incorrect'"></div>
|
||
</div>
|
||
<!-- 可点击区域 -->
|
||
<div class="click-area" @click="answerFn(item, $event)"></div>
|
||
</div>
|
||
</div>
|
||
<div class="question-tips" v-for="(t, i) in questionList[currentId].tips" :key="i">
|
||
<div v-if='questionList[currentId].tips.length == 1'>
|
||
{{ isChecked ? `${['回答错误！', '回答正确！'][checkedOption.result]}` : `提示：${t}` }}
|
||
</div>
|
||
<div v-else>
|
||
{{ isChecked ? `${i==0?['回答错误！', '回答正确！'][checkedOption.result]:''}` : `${i==0?'提示：':''}${t}` }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="return-btn" @click="nextQuestion($event)"></div>
|
||
<div class="create-btn" @click="viewResult($event)"></div>
|
||
<div class="qa-megaphone"></div>
|
||
</div>
|
||
<div class="question-gold-icon-1"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang='scss' scope>
|
||
.QuestionPage {
|
||
@include pos(100%, 1624px, 0px, 0px);
|
||
overflow: hidden;
|
||
|
||
.question-bg {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
// transform: translateY(-50%);
|
||
@include bg_pos("index/bg.jpg");
|
||
}
|
||
|
||
|
||
.question-container {
|
||
@include pos(750px, 1624px, 0px, 0px);
|
||
@include flexCen();
|
||
background-color: rgba($color: #000000, $alpha: 0.3);
|
||
|
||
.question-box {
|
||
@include pos(721px, 857px, 20px, 340px);
|
||
@include bg_pos("qa/paper.png");
|
||
|
||
.qa-question-box {
|
||
@include pos(563px, 660px, 74px, 106px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
// justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
// 问题样式
|
||
.question {
|
||
|
||
.question-text {
|
||
font-family: 'HarmonyOS_Sans_SC_Regular';
|
||
font-size: 34px;
|
||
color: #9e4b00;
|
||
line-height: 50px;
|
||
text-align: justify;
|
||
}
|
||
|
||
}
|
||
|
||
// 选项样式
|
||
.answer-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
height: 200px;
|
||
|
||
|
||
// 选项通用样式
|
||
.answer {
|
||
@include box(350px, 65px);
|
||
position: relative;
|
||
border-radius: 32.5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid #fff;
|
||
color: #9e4b00;
|
||
background-color: #fff2b9;
|
||
font-weight: 700;
|
||
|
||
.answer-text {
|
||
font-size: 30px;
|
||
@include flexCen()
|
||
}
|
||
|
||
.click-area {
|
||
@include pos(350px, 65px, 0px, 0px);
|
||
border-radius: 32.5px;
|
||
}
|
||
|
||
.result-icon {
|
||
|
||
@include box(49px, 45px);
|
||
margin-left: 20px;
|
||
|
||
|
||
.icon-correct {
|
||
@include box(100%, 100%);
|
||
@include bg_pos("qa/correct.png");
|
||
}
|
||
|
||
.icon-incorrect {
|
||
@include box(49px, 45px);
|
||
@include bg_pos("qa/incorrect.png");
|
||
}
|
||
}
|
||
}
|
||
|
||
.correct {
|
||
color: #d42122;
|
||
}
|
||
|
||
.incorrect {
|
||
color: #fff2b9;
|
||
background-color: #d42122;
|
||
|
||
}
|
||
}
|
||
|
||
.question-tips {
|
||
font-size: 25px;
|
||
width: 100%;
|
||
font-family: 'HarmonyOS_Sans_SC_Regular';
|
||
color: #ab7133;
|
||
text-align: center;
|
||
padding: 5px;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.return-btn {
|
||
@include pos(363px, 113px, 179px, 887px);
|
||
@include bg_pos("qa/cls-btn.png");
|
||
display: none;
|
||
}
|
||
|
||
.create-btn {
|
||
@include pos(363px, 113px, 179px, 887px);
|
||
@include bg_pos("qa/create-btn.png");
|
||
display: none;
|
||
}
|
||
|
||
.qa-megaphone {
|
||
@include pos(171px, 208px, 562px, 512px);
|
||
@include bg_pos("qa/megaphone.png");
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
</style> |