441 lines
12 KiB
Vue
441 lines
12 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";
|
|
|
|
// 页面配置初始化
|
|
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 ){
|
|
gsap.set('.create-btn', { display: 'block' })
|
|
}else{
|
|
gsap.set('.next-btn', { display: 'block' })
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
// 下一题
|
|
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', { display: 'none' })
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 查看结果事件
|
|
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, scale: 0.4, autoAlpha: 0, })
|
|
gsap.to('.question-lantern-icon', { duration: 5, transformOrigin: '100% 0%', rotation: '10deg', repeat: -1, yoyo: true, ease: 'none' })
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="QuestionPage" @touchmove.prevent>
|
|
<div class="question-bg">
|
|
<div class="bottom-fan-1"></div>
|
|
<div class="bottom-fan-2"></div>
|
|
<div class="question-bottom-bg"></div>
|
|
</div>
|
|
<div class="question-container">
|
|
<div class="container-fan-1"></div>
|
|
<div class="container-fan-2"></div>
|
|
|
|
<div class="question-box">
|
|
<!-- 问题序号 -->
|
|
<div class="qa-number">{{ questionList[currentId].id }}</div>
|
|
<div class="qa-question-box">
|
|
<!-- 问题 -->
|
|
<div class="question">
|
|
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
|
|
{{ item }}
|
|
</div>
|
|
<div class="question-tips">打一系列产品</div>
|
|
</div>
|
|
<!-- 选项 -->
|
|
<div class="answer-box">
|
|
<div class="answer" :class="isChecked ? item.result + '-bg' : ''"
|
|
v-for="item in questionList[currentId].answer" :key="item.aid">
|
|
<div class="answer-text-box">
|
|
<div class="answer-text" v-for="a in item.text" :key="a">
|
|
{{ item.aid }}.{{ a }}
|
|
</div>
|
|
</div>
|
|
<div class="option-tips">
|
|
<div :class="item.result"></div>
|
|
</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">{{li}}</div>
|
|
</div>
|
|
<div class="next-btn" @click="nextQuestion($event)"></div>
|
|
<div class="create-btn" @click="viewResult($event)"></div>
|
|
</div>
|
|
</div>
|
|
<div class="question-lantern-icon"></div>
|
|
<div class="question-gold-icon-1"></div>
|
|
<div class="question-gold-icon-2"></div>
|
|
</div>
|
|
<!-- 进度条 -->
|
|
<Progress :percentage="(currentId + 1) / 3 * 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>
|
|
.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-bottom-bg {
|
|
pointer-events: none;
|
|
@include box(750px, 393px);
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
@include bg_pos("qa/bottom-bg.png");
|
|
}
|
|
|
|
.bottom-fan-1 {
|
|
@include pos(370px, 334px, 545px, 1022px);
|
|
@include bg_pos('index/fan-3.png');
|
|
}
|
|
|
|
.bottom-fan-2 {
|
|
@include pos(350px, 205px, 494px, 1128px);
|
|
@include bg_pos('index/fan-4.png');
|
|
}
|
|
}
|
|
|
|
|
|
.question-container {
|
|
@include pos(750px, 1624px, 0px, 50%);
|
|
transform: translateY(-50%);
|
|
@include flexCen();
|
|
|
|
.question-lantern-icon {
|
|
// pointer-events: none;
|
|
@include pos(349px, 443px, 489px, 49px);
|
|
@include bg_pos('qa/lantern-icon.png');
|
|
}
|
|
|
|
.container-fan-1 {
|
|
pointer-events: none;
|
|
@include pos(235px, 574px, 0px, 60px);
|
|
@include bg_pos("index/fan-1.png");
|
|
}
|
|
|
|
.container-fan-2 {
|
|
pointer-events: none;
|
|
@include pos(316px, 317px, -205px, 405px);
|
|
@include bg_pos("index/fan-2.png");
|
|
}
|
|
|
|
.question-box {
|
|
@include pos(656px, 913px, 47px, 339px);
|
|
@include bg_pos("qa/question-box.png");
|
|
|
|
.qa-number {
|
|
@include pos(100px, 56px, 278px, 89px);
|
|
font-size: 40px;
|
|
font-style: italic;
|
|
color: #c61a1a;
|
|
font-weight: 700;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.qa-question-box {
|
|
@include pos(570px, 700px, 43px, 194px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-around;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
// 问题样式
|
|
.question {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// margin-bottom: 10px;
|
|
height: 270px;
|
|
justify-content: center;
|
|
|
|
.question-text {
|
|
width: 100%;
|
|
font-family: 'DouyinSansBold';
|
|
font-size: 35px;
|
|
color: rgb(255, 255, 255);
|
|
text-align: center;
|
|
padding: 10px;
|
|
text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
|
|
// -webkit-transform: matrix( 0.63514641527437,0,0,0.63514641527437,0,0);
|
|
}
|
|
|
|
.question-tips {
|
|
font-size: 25px;
|
|
width: 100%;
|
|
font-family: 'DouyinSansBold';
|
|
color: rgb(255, 255, 255);
|
|
text-align: center;
|
|
padding: 10px;
|
|
text-shadow: 0.675px 2.923px 6px rgba(164, 18, 14, 0.004);
|
|
}
|
|
}
|
|
|
|
// 选项样式
|
|
.answer-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 200px;
|
|
|
|
// 选中状态
|
|
.correct-bg {
|
|
border: 1px solid rgb(255, 238, 186) !important;
|
|
background-image: linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
|
|
background-image: -webkit-linear-gradient(177deg, rgb(255, 184, 127) 0%, rgb(255, 238, 186) 100%);
|
|
|
|
.answer-option {
|
|
color: #96100f;
|
|
}
|
|
|
|
.answer-text-box {
|
|
color: #96100f !important;
|
|
}
|
|
|
|
}
|
|
|
|
.incorrect-bg {
|
|
background-image: -webkit-linear-gradient(177deg, rgb(195, 59, 22) 0%, rgb(209, 84, 51) 100%);
|
|
box-shadow: 0px 3px 6px 0px rgba(133, 0, 3, 0.85), inset 0px 2px 5px 0px rgba(236, 74, 42, 0.004);
|
|
|
|
.answer-option {
|
|
color: #ffe2ad;
|
|
}
|
|
|
|
.answer-text-box {
|
|
color: #ffe2ad !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.answer {
|
|
@include box(476px, 92px);
|
|
position: relative;
|
|
border-radius: 47.5px;
|
|
border: 2px solid rgb(255, 225, 172);
|
|
// margin-bottom: 35px;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.click-area {
|
|
@include pos(476px, 92px, 0px, 0px);
|
|
border-radius: 47.5px;
|
|
}
|
|
|
|
|
|
.option-tips {
|
|
@include box(60px, 60px);
|
|
visibility: hidden;
|
|
|
|
.correct {
|
|
@include box(100%, 100%);
|
|
@include bg_pos("qa/correct.png");
|
|
}
|
|
|
|
.incorrect {
|
|
@include box(100%, 100%);
|
|
@include bg_pos("qa/incorrect.png");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.answer-text-box {
|
|
@include box(335px, 100%);
|
|
font-family: 'HarmonyOS_Sans_SC_Regular';
|
|
color: #ffe2ad;
|
|
font-size: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.answer-text {
|
|
width: 100%;
|
|
// text-align: center;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
// 解析样式
|
|
.analysis {
|
|
visibility: hidden;
|
|
width: 95%;
|
|
font-family: 'HarmonyOS_Sans_SC_Regular';
|
|
font-size: 20px;
|
|
color: #ffe2ad;
|
|
text-align: center;
|
|
// padding: 20px;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.next-btn{
|
|
@include box(234px,65px);
|
|
@include bg_pos("qa/next-btn.png");
|
|
display: none;
|
|
|
|
}
|
|
.create-btn{
|
|
@include box(234px,65px);
|
|
@include bg_pos("qa/create-btn.png");
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.question-gold-icon-1 {
|
|
pointer-events: none;
|
|
@include pos(135px, 128px, 604px, 773px);
|
|
@include bg_pos("qa/gold-icon.png");
|
|
}
|
|
|
|
.question-gold-icon-2 {
|
|
pointer-events: none;
|
|
@include pos(276px, 241px, -70px, 1089px);
|
|
@include bg_pos("qa/gold-icon-2.png");
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |