liangzejun/palc-newyear2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

灯笼选择页面及海报生产

Browse Source
This commit is contained in:
梁泽军
2025-01-15 16:27:44 +08:00
parent cc3a3df9bc
commit c55d13ebeb
43 changed files with 851 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/Question.vue
View File

@@ -7,64 +7,53 @@ import { useMainStore } from "@/store";
import { subAnswer } from "@/api";
// 页面配置初始化
const emit = defineEmits(["QuestionPage"]);
const emit = defineEmits(["hide", "showResult"]);
const userStore = useMainStore();
const props = defineProps({
questionId: {
default: 0,
required: true,
}
})
// 当前题目
const currentId = ref(0); //当前id 0~11
const currentId = ref(props.questionId); //当前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;
}
console.log('当前题目：', currentId.value + 1);
debounceTap(e, () => {
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 ){
if (item.result === 'correct') {
gsap.set('.create-btn', { display: 'block' })
}else{
gsap.set('.next-btn', { display: 'block' })
} else {
gsap.set('.return-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' })
gsap.to('.question-box', {
duration: 0.5, autoAlpha: 0, scale: 0.3, onComplete: () => {
emit('hide')
}
})
})
@@ -74,8 +63,9 @@ const nextQuestion = (event) => {
const viewResult = (event) => {
let e = event.target;
debounceTap(e, () => {
// 随机生成海报id
userStore.updatePosterId(getRandomNumber([1, 2, 3]))
// 更新海报id
userStore.posterId = currentId.value + 1
gsap.set('.question-box', { pointerEvents: 'none' })
Toast('答题结束')
Toast.loading({
@@ -106,7 +96,7 @@ const viewResult = (event) => {
Toast.clear()
gsap.to('.QuestionPage', {
duration: 0.5, autoAlpha: 0, onComplete: () => {
emit("QuestionPage", { action: "showResult" });
emit("showResult", { pid: currentId.value });
}
})
}, 1000)
@@ -114,32 +104,19 @@ const viewResult = (event) => {
})
}
// 从数组中随机生成一个数字
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-bg"></div>
<div class="question-container">
<div class="container-fan-1"></div>
<div class="container-fan-2"></div>
<div class="question-box">
<!-- 问题序号 -->
@@ -150,7 +127,7 @@ onMounted(() => {
<div class="question-text" v-for="item in questionList[currentId].question" :key="item">
{{ item }}
</div>
<div class="question-tips">打一系列产品</div>
<div class="question-tips">打一个字</div>
</div>
<!-- 选项 -->
<div class="answer-box">
@@ -169,20 +146,20 @@ onMounted(() => {
</div>
</div>
<!-- 解析 -->
<div class="analysis" >
<div v-for="li in questionList[currentId].analysis" :key="li">{{li}}</div>
<div class="analysis">
<div v-for="li in questionList[currentId].analysis" :key="li">
提示：<span v-html="li"></span>
</div>
</div>
<div class="next-btn" @click="nextQuestion($event)"></div>
<div class="return-btn" @click="nextQuestion($event)"></div>
<div class="create-btn" @click="viewResult($event)"></div>
</div>
<div class="answer-larnten"></div>
<div class="answer-baozhu"></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>
@@ -194,26 +171,7 @@ onMounted(() => {
.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');
}
background-color: rgba($color: #000000, $alpha: 0.6);
}
@@ -223,29 +181,31 @@ onMounted(() => {
@include flexCen();
.question-lantern-icon {
// pointer-events: none;
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 pos(616px, 873px, 68px, 350px);
@include bg_pos("qa/question-box.png");
.answer-larnten {
@include pos(310px, 526px, -120px, -120px);
@include bg_pos('qa/lantern-icon.png');
pointer-events: none
}
.answer-baozhu {
@include pos(145px, 167px, 507px, 725px);
@include bg_pos('qa/baozhu.png');
pointer-events: none
}
.qa-number {
@include pos(100px, 56px, 278px, 89px);
@include pos(100px, 56px, 255px, 79px);
font-size: 40px;
font-style: italic;
color: #c61a1a;
@@ -256,7 +216,7 @@ onMounted(() => {
}
.qa-question-box {
@include pos(570px, 700px, 43px, 194px);
@include pos(570px, 700px, 22px, 194px);
display: flex;
flex-direction: column;
// justify-content: space-around;
@@ -301,6 +261,9 @@ onMounted(() => {
justify-content: space-between;
height: 200px;
// 选中状态
.correct-bg {
border: 1px solid rgb(255, 238, 186) !important;
@@ -334,7 +297,8 @@ onMounted(() => {
.answer {
@include box(476px, 92px);
@include box(350px, 92px);
position: relative;
border-radius: 47.5px;
border: 2px solid rgb(255, 225, 172);
@@ -346,7 +310,7 @@ onMounted(() => {
align-items: center;
.click-area {
@include pos(476px, 92px, 0px, 0px);
@include pos(350px, 92px, 0px, 0px);
border-radius: 47.5px;
}
@@ -369,7 +333,7 @@ onMounted(() => {
.answer-text-box {
@include box(335px, 100%);
@include box(270px, 100%);
font-family: 'HarmonyOS_Sans_SC_Regular';
color: #ffe2ad;
font-size: 28px;
@@ -394,13 +358,12 @@ onMounted(() => {
// 解析样式
.analysis {
visibility: hidden;
// visibility: hidden;
width: 95%;
font-family: 'HarmonyOS_Sans_SC_Regular';
font-size: 20px;
color: #ffe2ad;
color: #ffffff;
text-align: center;
// padding: 20px;
height: 100px;
display: flex;
justify-content: center;
@@ -408,17 +371,17 @@ onMounted(() => {
flex-direction: column;
}
.next-btn{
@include box(234px,65px);
@include bg_pos("qa/next-btn.png");
.return-btn {
@include box(246px, 73px);
@include bg_pos("qa/go-back.png");
display: none;
}
.create-btn{
@include box(234px,65px);
.create-btn {
@include box(246px, 73px);
@include bg_pos("qa/create-btn.png");
display: none;
}
}
@@ -430,11 +393,7 @@ onMounted(() => {
@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");
}
}
}