完成海报页面逻辑，及流程整合
This commit is contained in:
Andy Leong
@@ -18,7 +18,7 @@ onMounted(() => {
|
||||
name: "加载页资源",
|
||||
imgs: loadImg,
|
||||
callback: (progress) => {
|
||||
// console.log('进度：', progress);
|
||||
console.log('进度：', progress);
|
||||
},
|
||||
}).then((res) => {
|
||||
gsap.to(".LoadPage", {
|
||||
|
||||
@@ -42,32 +42,46 @@ const answerFn = (item, event) => {
|
||||
activeId.value = ''
|
||||
|
||||
} else {
|
||||
// 随机生成海报id
|
||||
userStore.updatePosterId(getRandomNumber([1, 2, 3]))
|
||||
gsap.set('.question-box', { pointerEvents: 'none' })
|
||||
Toast('答题结束')
|
||||
gsap.set('.question-box',{pointerEvents:'none'})
|
||||
}
|
||||
|
||||
if (import.meta.env.VITE_MODE != "dev") {
|
||||
// 提交完成记录
|
||||
subAnswer({}, userStore.token).then((res) => {
|
||||
console.log("key:", res);
|
||||
if (res.code == 0) {
|
||||
userStore.updateDrawKey(res.data);
|
||||
}
|
||||
|
||||
gsap.to('.QuestionPage', {
|
||||
duration: 0.5, autoAlpha: 0, onComplete: () => {
|
||||
emit("QuestionPage", { action: "showResult" });
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
gsap.to('.QuestionPage', {
|
||||
duration: 0.5, autoAlpha: 0, onComplete: () => {
|
||||
emit("QuestionPage", { action: "showResult" });
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log("答案库", answerList.value);
|
||||
});
|
||||
};
|
||||
|
||||
const mbtiArr = [[], [], [], []]; //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
|
||||
|
||||
|
||||
const showResult = () => {
|
||||
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
|
||||
|
||||
|
||||
if (import.meta.env.VITE_MODE != "dev") {
|
||||
// 提交完成记录
|
||||
subAnswer({}, userStore.token).then((res) => {
|
||||
console.log("key:", res);
|
||||
if (res.code == 0) {
|
||||
userStore.updateDrawKey(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
gsap.set(".answer-box", { pointerEvents: "none" })
|
||||
// Toast("你的MBTI测试结果:" + mbti);
|
||||
// resultBtnAni.reverse();
|
||||
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
|
||||
@@ -85,7 +99,11 @@ const showResult = () => {
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 从数组中随机生成一个数字
|
||||
const getRandomNumber = (arr) => {
|
||||
var randomIndex = Math.floor(Math.random() * arr.length);
|
||||
return arr[randomIndex];
|
||||
}
|
||||
|
||||
// 查看结果事件及动画
|
||||
// const resultBtnAni = gsap.timeline({ paused: true });
|
||||
|
||||
@@ -6,50 +6,19 @@ import { mbtiList } from "@/data";
|
||||
import { posterCreate } from "@/plugins";
|
||||
import { Toast } from "vant";
|
||||
import QRCode from "qrcode";
|
||||
import { reactive } from "vue";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
const userStore = useMainStore();
|
||||
let bgId = ref(1); //海报背景id：1～4
|
||||
const bgPic = computed(() => {
|
||||
return new URL(
|
||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||
import.meta.url
|
||||
).href;
|
||||
});
|
||||
const posterId = ref(userStore.posterId); //海报背景id：1～4
|
||||
|
||||
// 主题配色
|
||||
const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]);
|
||||
const mbti = ref(userStore.MBTI);
|
||||
const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
|
||||
const posterBg = reactive([
|
||||
new URL("@/assets/images/result/poster-bg-1.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-2.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-3.jpg", import.meta.url).href,
|
||||
new URL("@/assets/images/result/poster-bg-4.jpg", import.meta.url).href,
|
||||
]);
|
||||
|
||||
// console.log("mbtiList", mbtiList.length);
|
||||
|
||||
const changBg = (event, number) => {
|
||||
let e = event.target;
|
||||
if (number == bgId.value) return;
|
||||
bgId.value = number;
|
||||
debounceTap(
|
||||
e,
|
||||
() => {
|
||||
// console.log("bgId", bgId.value);
|
||||
},
|
||||
0.3
|
||||
);
|
||||
};
|
||||
|
||||
// With async/await
|
||||
// 生成二维码逻辑
|
||||
const eqcodePic = ref();
|
||||
onMounted(() => {
|
||||
console.log('posterId:',posterId.value);
|
||||
let eqCodeUrl = import.meta.env.VITE_URL;
|
||||
console.log("url:", eqCodeUrl);
|
||||
QRCode.toDataURL(eqCodeUrl)
|
||||
.then((url) => {
|
||||
eqcodePic.value = url;
|
||||
@@ -64,131 +33,39 @@ onMounted(() => {
|
||||
scale: 1.2,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.from(".mbti-title", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
delay: 0.3,
|
||||
});
|
||||
gsap.from(".des", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
stagger: 0.3,
|
||||
delay: 0.5,
|
||||
});
|
||||
gsap.from(".blessings", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
stagger: 0.2,
|
||||
delay: 0.6,
|
||||
});
|
||||
gsap.from(".product", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
delay: 0.9,
|
||||
});
|
||||
gsap.from(".produc-img", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
delay: 1.2,
|
||||
});
|
||||
gsap.from(".theme-tab", {
|
||||
duration: 0.7,
|
||||
x: 100,
|
||||
autoAlpha: 0,
|
||||
stagger: 0.3,
|
||||
delay: 1.4,
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// 生成海报逻辑
|
||||
const createPoster = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
// 海报生成
|
||||
posterCreate(
|
||||
{ width: 750, height: 1500 }, //海报尺寸
|
||||
{ width: 750, height: 1334 }, //海报尺寸
|
||||
// 海报素材，按顺序依次渲染
|
||||
[
|
||||
// 背景
|
||||
{
|
||||
name: "bg",
|
||||
src: posterBg[bgId.value - 1],
|
||||
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
name: "product",
|
||||
src: mbtiObj.value.productPic,
|
||||
pos: { w: mbtiObj.value.picPos.w, h: mbtiObj.value.picPos.h, x: 137, y: mbtiObj.value.type == 'INFP' ? 900 : 921 },
|
||||
src: new URL(`../assets/images/result/poster.jpg`, import.meta.url).href,
|
||||
pos: { w: 750, h: 1334, x: 0, y: 0 },
|
||||
},
|
||||
// 二维码
|
||||
{
|
||||
name: "eqcode",
|
||||
src: eqcodePic.value,
|
||||
pos: { w: 140, h: 140, x: bgId.value == 3 ? 75 : 66, y: 1070 },
|
||||
pos: { w: 140, h: 140, x: 66, y: 1070 },
|
||||
},
|
||||
],
|
||||
// 字体素材
|
||||
[
|
||||
// mbti title及职业
|
||||
{
|
||||
content: mbtiObj.value.type + " " + mbtiObj.value.job,
|
||||
style: {
|
||||
font: "normal 80px HYYakuHei",
|
||||
pos: { x: 70, y: 340 },
|
||||
},
|
||||
},
|
||||
// mbti 描述
|
||||
{
|
||||
content: mbtiObj.value.des[0],
|
||||
style: {
|
||||
font: "normal 30px fzzy",
|
||||
color: "#af6f49",
|
||||
pos: { x: 70, y: 470 },
|
||||
},
|
||||
},
|
||||
{
|
||||
content: mbtiObj.value.des[1],
|
||||
style: {
|
||||
font: "normal 30px fzzy",
|
||||
color: "#af6f49",
|
||||
pos: { x: 70, y: 520 },
|
||||
},
|
||||
},
|
||||
// 新年寄语
|
||||
{
|
||||
content: mbtiObj.value.blessings[0],
|
||||
style: {
|
||||
font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
|
||||
pos: { x: 70, y: 650 },
|
||||
},
|
||||
},
|
||||
{
|
||||
content: mbtiObj.value.blessings[1],
|
||||
style: {
|
||||
font: mbtiObj.value.type == 'ISFJ' ? "normal 45px fzcy" : "normal 50px fzcy",
|
||||
pos: { x: 70, y: 725 },
|
||||
},
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
content: mbtiObj.value.product,
|
||||
style: {
|
||||
font: mbtiObj.value.type == 'ISTJ' || mbtiObj.value.type == 'INTJ' ? "normal 40px fzcy" : "normal 50px fzcy",
|
||||
pos: { x: 70, y: 876 },
|
||||
},
|
||||
},
|
||||
],
|
||||
// 主题配色
|
||||
theme[bgId.value - 1]
|
||||
);
|
||||
|
||||
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// 去抽奖
|
||||
const goDraw = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
@@ -200,6 +77,7 @@ const goDraw = (event) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 隐藏海报弹窗
|
||||
const hidePop = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
@@ -207,12 +85,15 @@ const hidePop = (event) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 展示分享
|
||||
const goShare = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||||
});
|
||||
};
|
||||
|
||||
// 隐藏分享提示
|
||||
const hideShare = () => {
|
||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||||
};
|
||||
@@ -220,11 +101,19 @@ const hideShare = () => {
|
||||
|
||||
<template>
|
||||
<div class="ResultPage" @touchmove.prevent>
|
||||
<div class="result-bg">
|
||||
<img :src="bgPic" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="result-bg"></div>
|
||||
<div class="result-container">
|
||||
|
||||
<div class="created-tips"></div>
|
||||
<div class="result-larnten" :class="'larnten-'+posterId"></div>
|
||||
<!-- 新年祝福语 -->
|
||||
<div class="result-blessing-1" :class="'blessing-'+posterId+'-1'"></div>
|
||||
<div class="result-blessing-2" :class="'blessing-'+posterId+'-2'"></div>
|
||||
<!-- 产品 -->
|
||||
<div class="result-product" :class="'product-'+posterId"></div>
|
||||
<!-- 提示语 -->
|
||||
<div class="result-tips"></div>
|
||||
<!-- 生成海报按钮 -->
|
||||
<div class="create-poster" @click="createPoster($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 海报弹窗 -->
|
||||
@@ -233,7 +122,9 @@ const hideShare = () => {
|
||||
<div class="cls-btn" @click="hidePop($event)"></div>
|
||||
</div>
|
||||
<div class="poster-box">
|
||||
<img id="poster" />
|
||||
<div class="poster" :class="'poster-'+posterId">
|
||||
<img id="posterSrc" src="" alt="" srcset="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="save-tips">*长按保存海报</div>
|
||||
<div class="btn-box">
|
||||
@@ -256,187 +147,91 @@ const hideShare = () => {
|
||||
|
||||
.result-bg {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
@include bg_pos("result/bg.jpg");
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
@include box(100%, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.result-container {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
.page-theme-1 {
|
||||
color: #d3473a;
|
||||
animation: color 1s;
|
||||
.created-tips{
|
||||
@include pos(316px, 91px, -54px, 267px);
|
||||
@include bg_pos("result/tips.png");
|
||||
}
|
||||
|
||||
.page-theme-2 {
|
||||
color: #fb7700;
|
||||
animation: color 1s;
|
||||
.larnten-1{
|
||||
// @include pos(609px, 878px, -54px, 267px);
|
||||
// @include bg_pos("result/larnten-1.png");
|
||||
}
|
||||
|
||||
.page-theme-3 {
|
||||
color: #4172d8;
|
||||
animation: color 1s;
|
||||
.blessing-1-1{
|
||||
@include pos(86px, 565px, 119px, 409px);
|
||||
@include bg_pos("result/blessing-text-1-1.png");
|
||||
}
|
||||
.blessing-1-2{
|
||||
@include pos(82px, 561px, 214px, 409px);
|
||||
@include bg_pos("result/blessing-text-1-2.png");
|
||||
}
|
||||
|
||||
.page-theme-4 {
|
||||
color: #eb5c37;
|
||||
animation: color 1s;
|
||||
.blessing-2-1{
|
||||
@include pos(86px, 563px, 119px, 409px);
|
||||
@include bg_pos("result/blessing-text-2-1.png");
|
||||
}
|
||||
.blessing-2-2{
|
||||
@include pos(88px, 565px, 214px, 409px);
|
||||
@include bg_pos("result/blessing-text-2-2.png");
|
||||
}
|
||||
|
||||
.mbti-title {
|
||||
@include pos(600px, 120px, 90px, 418px);
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
|
||||
text-stroke: 1px #ffffff;
|
||||
-webkit-text-stroke: 1px #ffffff;
|
||||
font-weight: bolder;
|
||||
transform: rotate(-4deg);
|
||||
display: flex;
|
||||
|
||||
.blessing-3-1{
|
||||
@include pos(86px, 568px, 119px, 409px);
|
||||
@include bg_pos("result/blessing-text-3-1.png");
|
||||
}
|
||||
.blessing-3-2{
|
||||
@include pos(87px, 563px, 214px, 409px);
|
||||
@include bg_pos("result/blessing-text-3-2.png");
|
||||
}
|
||||
|
||||
.mbti-des-box {
|
||||
@include pos(557px, 90px, 110px, 547px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.des {
|
||||
color: #af6f49;
|
||||
font-size: 30px;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
.result-product{
|
||||
@include pos(659px, 159px, 45px, 1004px);
|
||||
}
|
||||
.product-1{
|
||||
@include bg_pos("result/product-1.png");
|
||||
}
|
||||
.product-2{
|
||||
@include bg_pos("result/product-2.png");
|
||||
}
|
||||
.product-3{
|
||||
@include bg_pos("result/product-3.png");
|
||||
}
|
||||
|
||||
.mbti-blessings-box {
|
||||
@include pos(500px, 160px, 130px, 715px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.blessings {
|
||||
font-size: 50px;
|
||||
transform: rotate(-4deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
|
||||
.isfj-blessings {
|
||||
font-size: 40px;
|
||||
}
|
||||
.result-tips{
|
||||
@include pos(645px, 71px, 52px, 1195px);
|
||||
@include bg_pos("result/text.png");
|
||||
}
|
||||
|
||||
.mbti-product {
|
||||
@include pos(630px, 140px, 134px, 948px);
|
||||
|
||||
.product {
|
||||
font-size: 45px;
|
||||
transform: rotate(-4deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
|
||||
.adptFont {
|
||||
font-style: 35px;
|
||||
}
|
||||
|
||||
.produc-img {
|
||||
// @include box(469px, 102px);
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
transform: rotate(0deg);
|
||||
display: flex;
|
||||
|
||||
|
||||
img {
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
@include box(50%, 50%);
|
||||
}
|
||||
}
|
||||
.create-poster{
|
||||
@include pos(237px, 80px, 257px, 1302px);
|
||||
@include bg_pos("result/create-btn.png");
|
||||
}
|
||||
|
||||
.theme-tab {
|
||||
@include pos(487px, 240px, 161px, 1108px);
|
||||
transform: rotate(-3deg);
|
||||
|
||||
.theme-select-tips {
|
||||
@include pos(250px, 21px, 118.5px, 0px);
|
||||
@include bg_pos("result/select-tips.png");
|
||||
}
|
||||
|
||||
.theme-list {
|
||||
@include pos(483px, 116px, 2.5px, 36px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.theme-li-border {
|
||||
// @include box(97px, 98px);
|
||||
|
||||
.theme-li {
|
||||
@include box(97px, 98px);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
@include box(115px, 116px);
|
||||
|
||||
position: relative;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
border-color: rgb(255, 70, 76);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.theme-li-1 {
|
||||
@include bg_pos("result/theme-1.png");
|
||||
}
|
||||
|
||||
.theme-li-2 {
|
||||
@include bg_pos("result/theme-2.png");
|
||||
}
|
||||
|
||||
.theme-li-3 {
|
||||
@include bg_pos("result/theme-3.png");
|
||||
}
|
||||
|
||||
.theme-li-4 {
|
||||
@include bg_pos("result/theme-4.png");
|
||||
}
|
||||
|
||||
.selected {
|
||||
@include bg_pos("result/select-arrow.png");
|
||||
@include pos(15px, 8px, 45px, 110px);
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
@include pos(258px, 69px, 126px, 165px);
|
||||
@include bg_pos("result/create-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.posterPop {
|
||||
@include fixed();
|
||||
@include flexCen();
|
||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
||||
background-color: rgba($color: #000000, $alpha: 0.6);
|
||||
visibility: hidden;
|
||||
|
||||
.cls-btn-box {
|
||||
width: 495px;
|
||||
width: 617px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.cls-btn {
|
||||
@include box(41px, 41px);
|
||||
@include box(49px, 49px);
|
||||
@include bg_pos("result/cls-btn.png");
|
||||
margin-right: -20px;
|
||||
}
|
||||
@@ -451,14 +246,26 @@ const hideShare = () => {
|
||||
}
|
||||
|
||||
.poster-box {
|
||||
@include box(495px, 990px);
|
||||
@include box(617px, 881px);
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #dbbb90;
|
||||
border-radius: 20px;
|
||||
|
||||
#poster {
|
||||
.poster {
|
||||
@include box(100%, 100%);
|
||||
overflow: hidden;
|
||||
#posterSrc{
|
||||
@include box(100%, 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.poster-1{
|
||||
@include bg_pos("result/preveiw-1.png");
|
||||
}
|
||||
.poster-2{
|
||||
@include bg_pos("result/preveiw-2.png");
|
||||
}
|
||||
.poster-3{
|
||||
@include bg_pos("result/preveiw-3.png");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user