更新
This commit is contained in:
Andy Leong
1
src/assets/images/result/share-tips.svg
Normal file
1
src/assets/images/result/share-tips.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705688936826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8789" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60"><path d="M405.333333 661.333333a42.666667 42.666667 0 0 1-30.08-72.746666l512-512a42.666667 42.666667 0 0 1 60.16 60.16l-512 512A42.666667 42.666667 0 0 1 405.333333 661.333333z" fill="#ffffff" p-id="8790" data-spm-anchor-id="a313x.search_index.0.i3.24243a81L3oZKa" class="selected"></path><path d="M794.453333 782.293333a61.44 61.44 0 0 1-21.333333-3.626666L59.52 528a64 64 0 0 1-3.413333-119.466667L885.333333 61.44a64 64 0 0 1 87.68 71.04l-115.84 597.333333a64 64 0 0 1-62.72 51.84z m-21.333333-68.053333zM140.16 465.92l638.08 224 103.466667-534.4z" fill="#ffffff" p-id="8791" data-spm-anchor-id="a313x.search_index.0.i1.24243a81L3oZKa" class="selected"></path><path d="M426.666667 887.253333a66.986667 66.986667 0 0 1-24.533334-4.906666A64 64 0 0 1 362.666667 823.253333V640a42.666667 42.666667 0 0 1 85.333333 0v131.626667l119.253333-119.04a42.666667 42.666667 0 0 1 60.16 60.16l-155.52 155.733333a64 64 0 0 1-45.226666 18.773333z" fill="#ffffff" p-id="8792" data-spm-anchor-id="a313x.search_index.0.i2.24243a81L3oZKa" class="selected"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -4,7 +4,7 @@ import { Toast } from "vant";
|
||||
import { data } from "@/data";
|
||||
import { debounceTap, FYShuffle, mostValue, judgeBigScreen } from "@/plugins";
|
||||
import { useMainStore } from "@/store";
|
||||
import { subAnswer } from '@/api'
|
||||
import { subAnswer } from "@/api";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["QuestionPage"]);
|
||||
@@ -99,16 +99,14 @@ const showResult = (event) => {
|
||||
console.log("MBTI:", mbti);
|
||||
userStore.updateMBTI(mbti);
|
||||
|
||||
// 提交完成记录
|
||||
subAnswer({}, userStore.token).then(
|
||||
res => {
|
||||
console.log('key:', res);
|
||||
if (import.meta.env.VITE_MODE != "dev") {
|
||||
// 提交完成记录
|
||||
subAnswer({}, userStore.token).then((res) => {
|
||||
console.log("key:", res);
|
||||
if (res.code == 0) {
|
||||
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// Toast("你的MBTI测试结果:" + mbti);
|
||||
resultBtnAni.reverse();
|
||||
@@ -148,11 +146,9 @@ const questionEntry = gsap.timeline({
|
||||
paused: true,
|
||||
onStart: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
|
||||
},
|
||||
onComplete: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
|
||||
},
|
||||
});
|
||||
const questionOut = gsap.timeline({
|
||||
@@ -160,20 +156,17 @@ const questionOut = gsap.timeline({
|
||||
onStart: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
||||
},
|
||||
onComplete: () => {
|
||||
},
|
||||
onComplete: () => {},
|
||||
});
|
||||
|
||||
// 查看结果事件及动画
|
||||
const resultBtnAni = gsap.timeline({ paused: true });
|
||||
onMounted(() => {
|
||||
|
||||
// 适配
|
||||
if (!judgeBigScreen()) {
|
||||
gsap.set('.answer-box', { scale: 0.9, marginTop: '-20px' })
|
||||
gsap.set(".answer-box", { scale: 0.9, marginTop: "-20px" });
|
||||
}
|
||||
|
||||
|
||||
resultBtnAni.from(".showResult-btn", { y: 200, autoAlpha: 0 });
|
||||
questionEntry
|
||||
.from(".question", { y: 100, autoAlpha: 0 })
|
||||
@@ -193,22 +186,23 @@ onMounted(() => {
|
||||
duration: 2,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
onStart: () => {
|
||||
gsap.to('.question-bg', {
|
||||
backgroundPosition: '0px 0px',
|
||||
gsap.to(".question-bg", {
|
||||
backgroundPosition: "0px 0px",
|
||||
duration: 1,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
})
|
||||
});
|
||||
},
|
||||
onComplete: () => {
|
||||
gsap.set(".answer-box", { pointerEvents: "initial" });
|
||||
if (currentId.value != 0) {
|
||||
gsap.to(".prev-btn", { duration: 0.5, x: "+=20px", autoAlpha: 1 });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
0.5
|
||||
).to('.answer-0', { duration: 1, y: '-=10px', repeat: -1, yoyo: true })
|
||||
.to('.answer-1', { duration: 1, y: '+=10px', repeat: -1, yoyo: true })
|
||||
)
|
||||
.to(".answer-0", { duration: 1, y: "-=10px", repeat: -1, yoyo: true })
|
||||
.to(".answer-1", { duration: 1, y: "+=10px", repeat: -1, yoyo: true });
|
||||
|
||||
questionEntry.play();
|
||||
questionOut
|
||||
@@ -222,11 +216,11 @@ onMounted(() => {
|
||||
duration: 1.5,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
onStart: () => {
|
||||
gsap.to('.question-bg', {
|
||||
backgroundPosition: '0px 835px',
|
||||
gsap.to(".question-bg", {
|
||||
backgroundPosition: "0px 835px",
|
||||
duration: 0.75,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
})
|
||||
});
|
||||
},
|
||||
})
|
||||
.to(
|
||||
@@ -239,7 +233,7 @@ onMounted(() => {
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
},
|
||||
1.5
|
||||
)
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -255,9 +249,16 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="answer-box">
|
||||
<div class="answer" v-for="(item, index) in questionList[currentId].answer" :class="'answer-' + index"
|
||||
:key="index">
|
||||
<div class="answer-bg" :class="activeId == item.aid ? 'active' : ''"></div>
|
||||
<div
|
||||
class="answer"
|
||||
v-for="(item, index) in questionList[currentId].answer"
|
||||
:class="'answer-' + index"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="answer-bg"
|
||||
:class="activeId == item.aid ? 'active' : ''"
|
||||
></div>
|
||||
<div class="answer-text">
|
||||
<div class="content-before"></div>
|
||||
<div class="content-after"></div>
|
||||
|
||||
@@ -3,404 +3,468 @@ import { gsap } from "gsap";
|
||||
import { debounceTap } from "@/plugins";
|
||||
import { useMainStore } from "@/store";
|
||||
import { mbtiList } from "@/data";
|
||||
import { posterCreate } from '@/plugins'
|
||||
import { posterCreate } from "@/plugins";
|
||||
import { Toast } from "vant";
|
||||
import { onBeforeMount } from "vue";
|
||||
import { computed } from "vue";
|
||||
import QRCode from "qrcode";
|
||||
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
const userStore = useMainStore();
|
||||
let bgId = ref(1); //海报背景id：1～4
|
||||
let bgId = ref(1); //海报背景id：1～4
|
||||
const bgPic = computed(() => {
|
||||
return new URL(
|
||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||
import.meta.url
|
||||
).href;
|
||||
return new URL(
|
||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
||||
import.meta.url
|
||||
).href;
|
||||
});
|
||||
|
||||
// 主题配色
|
||||
const theme = reactive(['#d3473a', '#fb7700', '#4172d8', '#eb5c37'])
|
||||
|
||||
const theme = reactive(["#d3473a", "#fb7700", "#4172d8", "#eb5c37"]);
|
||||
const mbti = ref(userStore.MBTI);
|
||||
const mbtiObj = ref(mbtiList.find(item => item.type == mbti.value))
|
||||
|
||||
console.log("mbti", mbti.value);
|
||||
|
||||
onBeforeMount(() => {
|
||||
// mbtiObj.value = mbtiList.find(item => item.type == mbti.value)
|
||||
console.log('mbtiObj.value', mbtiObj.value);
|
||||
})
|
||||
|
||||
const mbtiObj = ref(mbtiList.find((item) => item.type == mbti.value));
|
||||
|
||||
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
|
||||
);
|
||||
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(() => {
|
||||
let eqCodeUrl = import.meta.env.VITE_URL;
|
||||
console.log("url:", eqCodeUrl);
|
||||
QRCode.toDataURL(eqCodeUrl)
|
||||
.then((url) => {
|
||||
eqcodePic.value = url;
|
||||
console.log("eq", eqcodePic.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
|
||||
const createPoster = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
// 海报生成
|
||||
posterCreate(
|
||||
{ width: 750, height: 1500 }, //海报尺寸
|
||||
// 海报素材，按顺序依次渲染
|
||||
[
|
||||
// 背景
|
||||
{
|
||||
src: new URL('../assets/images/result/poster-bg-' + bgId.value + '.jpg', import.meta.url).href,
|
||||
pos: { w: 750, h: 1500, x: 0, y: 0 }
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
src: mbtiObj.value.productPic,
|
||||
pos: { w: 469, h: 102, x: 137, y: 911 }
|
||||
},
|
||||
],
|
||||
// 字体素材
|
||||
[
|
||||
// mbti title及职业
|
||||
{
|
||||
content: mbtiObj.value.type + mbtiObj.value.job,
|
||||
style: {
|
||||
font: 'normal 80px HYYakuHei',
|
||||
pos: { x: 70, y: 330 }
|
||||
}
|
||||
},
|
||||
// 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: 'normal 50px fzcy',
|
||||
pos: { x: 70, y: 650 }
|
||||
}
|
||||
},
|
||||
{
|
||||
content: mbtiObj.value.blessings[1],
|
||||
style: {
|
||||
font: 'normal 50px fzcy',
|
||||
pos: { x: 70, y: 725 }
|
||||
}
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
content: mbtiObj.value.product,
|
||||
style: {
|
||||
font: 'normal 50px fzcy',
|
||||
pos: { x: 70, y: 876 }
|
||||
}
|
||||
}
|
||||
],
|
||||
// 主题配色
|
||||
theme[bgId.value - 1]
|
||||
)
|
||||
}, 0.4)
|
||||
}
|
||||
let e = event.target;
|
||||
debounceTap(
|
||||
e,
|
||||
() => {
|
||||
// 海报生成
|
||||
posterCreate(
|
||||
{ width: 750, height: 1500 }, //海报尺寸
|
||||
// 海报素材，按顺序依次渲染
|
||||
[
|
||||
// 背景
|
||||
{
|
||||
name: "bg",
|
||||
src: new URL(
|
||||
"../assets/images/result/poster-bg-" + bgId.value + ".jpg",
|
||||
import.meta.url
|
||||
).href,
|
||||
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
name: "product",
|
||||
src: mbtiObj.value.productPic,
|
||||
pos: { w: 469, h: 102, x: 137, y: 911 },
|
||||
},
|
||||
// 二维码
|
||||
{
|
||||
name: "eqcode",
|
||||
src: eqcodePic.value,
|
||||
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: 330 },
|
||||
},
|
||||
},
|
||||
// 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: "normal 50px fzcy",
|
||||
pos: { x: 70, y: 650 },
|
||||
},
|
||||
},
|
||||
{
|
||||
content: mbtiObj.value.blessings[1],
|
||||
style: {
|
||||
font: "normal 50px fzcy",
|
||||
pos: { x: 70, y: 725 },
|
||||
},
|
||||
},
|
||||
// 产品
|
||||
{
|
||||
content: mbtiObj.value.product,
|
||||
style: {
|
||||
font: "normal 50px fzcy",
|
||||
pos: { x: 70, y: 876 },
|
||||
},
|
||||
},
|
||||
],
|
||||
// 主题配色
|
||||
theme[bgId.value - 1]
|
||||
);
|
||||
},
|
||||
0.4
|
||||
);
|
||||
};
|
||||
|
||||
const goDraw = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
if (userStore.hasDraw) {
|
||||
emit('ResultPage', { action: 'showDraw' })
|
||||
} else {
|
||||
Toast('暂无抽奖机会')
|
||||
}
|
||||
})
|
||||
}
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
if (userStore.hasDraw) {
|
||||
emit("ResultPage", { action: "showDraw" });
|
||||
} else {
|
||||
Toast("暂无抽奖机会");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const hidePop = (event) => {
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
|
||||
});
|
||||
};
|
||||
|
||||
const goShare = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
|
||||
})
|
||||
}
|
||||
const hidePop = (event) => {
|
||||
let e = event.target
|
||||
debounceTap(e, () => {
|
||||
gsap.to('.posterPop', { duration: 0.5, autoAlpha: 0 })
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let e = event.target;
|
||||
debounceTap(e, () => {
|
||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||||
});
|
||||
};
|
||||
const hideShare = () => {
|
||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ResultPage" @touchmove.prevent>
|
||||
<div class="result-bg">
|
||||
<img :src="bgPic" alt="" srcset="" />
|
||||
</div>
|
||||
<div class="result-container">
|
||||
<div :class="'page-theme-' + bgId">
|
||||
<div class="mbti-title"><span>{{ mbtiObj.type }} {{ mbtiObj.job }}</span></div>
|
||||
<div class="mbti-des-box">
|
||||
<div class="des" v-for="item in mbtiObj.des">{{ item }}</div>
|
||||
</div>
|
||||
<div class="mbti-blessings-box">
|
||||
<div class="blessings" v-for="item in mbtiObj.blessings">{{ item }}</div>
|
||||
</div>
|
||||
<div class="mbti-product">
|
||||
<div class="product">{{ mbtiObj.product }}</div>
|
||||
<div class="produc-img">
|
||||
<img :src="mbtiObj.productPic" alt="" srcset="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-tab">
|
||||
<div class="theme-select-tips"></div>
|
||||
<div class="theme-list">
|
||||
<div :class="{ active: bgId == item }" v-for="item in 4" @click="changBg($event, item)">
|
||||
<div class="theme-li" :class="'theme-li-' + item"></div>
|
||||
<div class="selected" v-show="bgId == item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="create-btn" @click="createPoster($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ResultPage" @touchmove.prevent>
|
||||
<div class="result-bg">
|
||||
<img :src="bgPic" alt="" srcset="" />
|
||||
</div>
|
||||
<!-- 海报弹窗 -->
|
||||
<div class="posterPop" @touchmove.prevent>
|
||||
<div class="cls-btn" @click="hidePop($event)"></div>
|
||||
<div class="poster-box">
|
||||
<img id="poster">
|
||||
<div class="result-container">
|
||||
<div :class="'page-theme-' + bgId">
|
||||
<div class="mbti-title">
|
||||
<span>{{ mbtiObj.type }} {{ mbtiObj.job }}</span>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<div class="go-draw" @click="goDraw($event)"></div>
|
||||
<div class="go-share" @click="goShare($event)"></div>
|
||||
<div class="mbti-des-box">
|
||||
<div class="des" v-for="item in mbtiObj.des">{{ item }}</div>
|
||||
</div>
|
||||
<div class="mbti-blessings-box">
|
||||
<div class="blessings" v-for="item in mbtiObj.blessings">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbti-product">
|
||||
<div class="product">{{ mbtiObj.product }}</div>
|
||||
<div class="produc-img">
|
||||
<img :src="mbtiObj.productPic" alt="" srcset="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-tab">
|
||||
<div class="theme-select-tips"></div>
|
||||
<div class="theme-list">
|
||||
<div
|
||||
class="theme-li-border"
|
||||
:class="{ active: bgId == item }"
|
||||
v-for="item in 4"
|
||||
@click="changBg($event, item)"
|
||||
>
|
||||
<div class="theme-li" :class="'theme-li-' + item"></div>
|
||||
<div class="selected" v-show="bgId == item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="create-btn" @click="createPoster($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 海报弹窗 -->
|
||||
<div class="posterPop" @touchmove.prevent>
|
||||
<div class="cls-btn-box">
|
||||
<div class="cls-btn" @click="hidePop($event)"></div>
|
||||
</div>
|
||||
<div class="poster-box">
|
||||
<img id="poster" />
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<div class="go-draw" @click="goDraw($event)"></div>
|
||||
<div class="go-share" @click="goShare($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分享提示 -->
|
||||
<div class="sharePop" @click="hideShare">
|
||||
<div class="tips-pic"></div>
|
||||
<div class="tips-text">点击右上角分享给你的好友！</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ResultPage {
|
||||
@include fixed();
|
||||
background-color: azure;
|
||||
@include fixed();
|
||||
background-color: azure;
|
||||
|
||||
.result-bg {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
.result-bg {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
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;
|
||||
}
|
||||
|
||||
.page-theme-2 {
|
||||
color: #fb7700;
|
||||
animation: color 1s;
|
||||
}
|
||||
|
||||
.page-theme-3 {
|
||||
color: #4172d8;
|
||||
animation: color 1s;
|
||||
}
|
||||
|
||||
.page-theme-4 {
|
||||
color: #eb5c37;
|
||||
animation: color 1s;
|
||||
}
|
||||
|
||||
.mbti-title {
|
||||
@include pos(480px, 120px, 90px, 418px);
|
||||
font-size: 80px;
|
||||
font-family: "HYYaKuHei";
|
||||
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;
|
||||
// -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
|
||||
font-weight: bolder;
|
||||
transform: rotate(-4deg);
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
}
|
||||
}
|
||||
|
||||
.mbti-des-box {
|
||||
@include pos(517px, 90px, 110px, 547px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-family: "fzzy";
|
||||
|
||||
.des {
|
||||
color: #af6f49;
|
||||
font-size: 30px;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mbti-blessings-box {
|
||||
@include pos(500px, 140px, 130px, 720px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-family: "fzcy";
|
||||
|
||||
.blessings {
|
||||
font-size: 50px;
|
||||
transform: rotate(-4deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
}
|
||||
|
||||
.mbti-product {
|
||||
@include pos(475px, 140px, 134px, 948px);
|
||||
font-family: "fzcy";
|
||||
|
||||
.product {
|
||||
font-size: 45px;
|
||||
transform: rotate(-3deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
|
||||
.produc-img {
|
||||
@include box(469px, 102px);
|
||||
margin-left: 10px;
|
||||
|
||||
img {
|
||||
@include box(100%, 100%);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-container {
|
||||
@include pos(750px, 1624px, 0px, 50%);
|
||||
transform: translateY(-50%);
|
||||
.theme-tab {
|
||||
@include pos(487px, 240px, 161px, 1108px);
|
||||
transform: rotate(-3deg);
|
||||
|
||||
.page-theme-1 {
|
||||
color: #d3473a;
|
||||
animation: color 1s;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.page-theme-2 {
|
||||
color: #fb7700;
|
||||
animation: color 1s;
|
||||
.active {
|
||||
@include box(115px, 116px);
|
||||
|
||||
position: relative;
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
border-color: rgb(255, 70, 76);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.page-theme-3 {
|
||||
color: #4172d8;
|
||||
animation: color 1s;
|
||||
|
||||
.theme-li-1 {
|
||||
@include bg_pos("result/theme-1.png");
|
||||
}
|
||||
|
||||
.page-theme-4 {
|
||||
color: #eb5c37;
|
||||
animation: color 1s;
|
||||
|
||||
.theme-li-2 {
|
||||
@include bg_pos("result/theme-2.png");
|
||||
}
|
||||
|
||||
.mbti-title {
|
||||
@include pos(480px, 120px, 90px, 418px);
|
||||
font-size: 80px;
|
||||
font-family: "HYYaKuHei";
|
||||
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;
|
||||
// -webkit-transform: matrix(2.63538838101382, -0.15627262233171, 0.15650043026188, 2.63155221026798, 0, 0);
|
||||
font-weight: bolder;
|
||||
transform: rotate(-4deg);
|
||||
display: flex;
|
||||
|
||||
span {}
|
||||
|
||||
.theme-li-3 {
|
||||
@include bg_pos("result/theme-3.png");
|
||||
}
|
||||
|
||||
.mbti-des-box {
|
||||
@include pos(517px, 90px, 110px, 547px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-family: 'fzzy';
|
||||
|
||||
.des {
|
||||
color: #af6f49;
|
||||
font-size: 30px;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
.theme-li-4 {
|
||||
@include bg_pos("result/theme-4.png");
|
||||
}
|
||||
|
||||
.mbti-blessings-box {
|
||||
@include pos(500px, 140px, 130px, 720px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-family: 'fzcy';
|
||||
|
||||
.blessings {
|
||||
font-size: 50px;
|
||||
transform: rotate(-4deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
.selected {
|
||||
@include bg_pos("result/select-arrow.png");
|
||||
@include pos(15px, 8px, 45px, 110px);
|
||||
}
|
||||
}
|
||||
|
||||
.mbti-product {
|
||||
@include pos(475px, 140px, 134px, 948px);
|
||||
font-family: 'fzcy';
|
||||
|
||||
.product {
|
||||
font-size: 45px;
|
||||
transform: rotate(-3deg);
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.004);
|
||||
}
|
||||
|
||||
.produc-img {
|
||||
@include box(469px, 102px);
|
||||
margin-left: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-tab {
|
||||
@include pos(487px, 240px, 161px, 1108px);
|
||||
|
||||
.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;
|
||||
|
||||
.active {
|
||||
border-style: solid;
|
||||
border-width: 8px;
|
||||
border-color: rgb(255, 70, 76);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.theme-li {
|
||||
@include box(97px, 98px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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, 60px, 120px);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
@include pos(258px, 69px, 126px, 159px);
|
||||
@include bg_pos("result/create-btn.png");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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);
|
||||
visibility: hidden;
|
||||
@include fixed();
|
||||
@include flexCen();
|
||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
||||
visibility: hidden;
|
||||
|
||||
.cls-btn-box {
|
||||
width: 495px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.cls-btn {
|
||||
@include box(41px, 41px);
|
||||
@include bg_pos("result/cls-btn.png");
|
||||
@include box(41px, 41px);
|
||||
@include bg_pos("result/cls-btn.png");
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-box {
|
||||
@include box(495px, 990px);
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
border: 2px solid #dbbb90;
|
||||
border-radius: 20px;
|
||||
|
||||
#poster {
|
||||
@include box(100%, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
@include box(489px, 76px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
|
||||
.go-draw {
|
||||
@include box(226px, 76px);
|
||||
@include bg_pos("result/go-draw-btn.png");
|
||||
}
|
||||
|
||||
.poster-box {
|
||||
@include box(495px, 990px);
|
||||
overflow: hidden;
|
||||
border: 2px solid #dbbb90;
|
||||
border-radius: 20px;
|
||||
|
||||
#poster {
|
||||
@include box(100%, 100%);
|
||||
}
|
||||
.go-share {
|
||||
@include box(226px, 76px);
|
||||
@include bg_pos("result/go-share-btn.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
@include box(489px, 76px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
|
||||
.go-draw {
|
||||
@include box(226px, 76px);
|
||||
@include bg_pos("result/go-draw-btn.png");
|
||||
}
|
||||
|
||||
.go-share {
|
||||
@include box(226px, 76px);
|
||||
@include bg_pos("result/go-share-btn.png");
|
||||
}
|
||||
}
|
||||
.sharePop {
|
||||
@include fixed();
|
||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
||||
visibility: hidden;
|
||||
.tips-pic {
|
||||
@include pos(100px, 100px, 600px, 100px);
|
||||
@include bg_pos("result/share-tips.svg");
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-family: "fzcy";
|
||||
font-size: 25px;
|
||||
@include pos(750px, 100px, 0px, 220px);
|
||||
color: #ffffff;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,11 +20,11 @@ import Draw from "@/components/Draw";
|
||||
import Result from "@/components/Result";
|
||||
import Rule from "@/components/Rule";
|
||||
import { createBGM, getQueryString } from "@/plugins";
|
||||
import { authorize, getUserInfo } from '@/api'
|
||||
import { authorize, getUserInfo } from "@/api";
|
||||
import { Toast } from "vant";
|
||||
import { useMainStore } from "@/store"
|
||||
import { useMainStore } from "@/store";
|
||||
|
||||
const userStore = useMainStore()
|
||||
const userStore = useMainStore();
|
||||
|
||||
const showLoad = ref(false);
|
||||
const loadFn = (item) => {
|
||||
@@ -77,7 +77,7 @@ const drawFn = (item) => {
|
||||
}
|
||||
};
|
||||
|
||||
const showResult = ref(false);
|
||||
const showResult = ref(true);
|
||||
const resultFn = (item) => {
|
||||
if (item.action == "hide") {
|
||||
showResult.value = false;
|
||||
@@ -87,114 +87,99 @@ const resultFn = (item) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const showRule = ref(false);
|
||||
const ruleFn = (item) => {
|
||||
if (item.action == "hide") {
|
||||
showRule.value = false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let code = getQueryString("code");
|
||||
console.log("code:", code);
|
||||
|
||||
let code = getQueryString('code')
|
||||
console.log('code:', code);
|
||||
|
||||
let dev = import.meta.env.VITE_MODE
|
||||
if (dev != 'dev') {
|
||||
let dev = import.meta.env.VITE_MODE;
|
||||
if (dev != "dev") {
|
||||
if (code) {
|
||||
getUserInfo({ code: code }).then(
|
||||
res => {
|
||||
if (res.code == 0) {
|
||||
console.log('我的信息：', res.data);
|
||||
userStore.updateToken(res.data.authorization)
|
||||
createBGM();
|
||||
// 开始加载组件
|
||||
showLoad.value = true
|
||||
return
|
||||
} else {
|
||||
authorize({ scopeType: 1 }).then(
|
||||
res => {
|
||||
getUserInfo({ code: code }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log("我的信息：", res.data);
|
||||
userStore.updateToken(res.data.authorization);
|
||||
createBGM();
|
||||
// 开始加载组件
|
||||
showLoad.value = true;
|
||||
return;
|
||||
} else {
|
||||
authorize({ scopeType: 1 }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log("重定向地址：", res.data);
|
||||
location.replace(res.data);
|
||||
}
|
||||
|
||||
if (res.code == 0) {
|
||||
console.log('重定向地址：', res.data);
|
||||
location.replace(res.data)
|
||||
}
|
||||
// 活动已结束：6001
|
||||
if (res.code == "6001") {
|
||||
Toast.fail({
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 活动已结束：6001
|
||||
if (res.code == '6001') {
|
||||
Toast.fail({
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
forbidClick: true
|
||||
})
|
||||
return
|
||||
}
|
||||
// 活动未开启：6002
|
||||
if (res.code == "6002") {
|
||||
Toast({
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
icon: "flag-o",
|
||||
forbidClick: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 活动未开启：6002
|
||||
if (res.code == '6002') {
|
||||
Toast({
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
icon: 'flag-o',
|
||||
forbidClick: true
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 其余情况
|
||||
Toast({
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
forbidClick: true
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
)
|
||||
} else {
|
||||
authorize({ scopeType: 1 }).then(
|
||||
res => {
|
||||
|
||||
if (res.code == 0) {
|
||||
console.log('重定向地址：', res.data);
|
||||
location.replace(res.data)
|
||||
}
|
||||
|
||||
// 活动已结束：6001
|
||||
if (res.code == '6001') {
|
||||
Toast.fail({
|
||||
message: '活动已结束',
|
||||
duration: 0,
|
||||
forbidClick: true
|
||||
})
|
||||
}
|
||||
|
||||
// 活动未开启：6002
|
||||
if (res.code == '6002') {
|
||||
// 其余情况
|
||||
Toast({
|
||||
message: '活动未开始',
|
||||
message: res.msg,
|
||||
duration: 0,
|
||||
icon: 'flag-o',
|
||||
forbidClick: true
|
||||
})
|
||||
}
|
||||
forbidClick: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
)
|
||||
});
|
||||
} else {
|
||||
authorize({ scopeType: 1 }).then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log("重定向地址：", res.data);
|
||||
location.replace(res.data);
|
||||
}
|
||||
|
||||
// 活动已结束：6001
|
||||
if (res.code == "6001") {
|
||||
Toast.fail({
|
||||
message: "活动已结束",
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
});
|
||||
}
|
||||
|
||||
// 活动未开启：6002
|
||||
if (res.code == "6002") {
|
||||
Toast({
|
||||
message: "活动未开始",
|
||||
duration: 0,
|
||||
icon: "flag-o",
|
||||
forbidClick: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
showLoad.value = true
|
||||
showLoad.value = true;
|
||||
}
|
||||
|
||||
fontAdpat()
|
||||
|
||||
fontAdpat();
|
||||
});
|
||||
|
||||
|
||||
// 字体适配
|
||||
const fontAdpat = () => {
|
||||
if (
|
||||
@@ -218,7 +203,6 @@ const fontAdpat = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
@@ -21,7 +21,6 @@ app.config.globalProperties.imgUrl = (url) => {
|
||||
wxShare({
|
||||
title: '分享标题',
|
||||
desc: '分享描述',
|
||||
link: '/index.html'
|
||||
})
|
||||
|
||||
// 测试环境开vconsole
|
||||
|
||||
@@ -433,7 +433,7 @@ export function mostValue(arr) {
|
||||
|
||||
|
||||
// 海报生成
|
||||
export function posterCreate(option, imageArr, textArr, theme) {
|
||||
export function posterCreate(option, imageArr, textArr, theme,eqcode) {
|
||||
let posterUrl = ''
|
||||
const { width, height } = option
|
||||
Toast.loading({
|
||||
@@ -445,8 +445,10 @@ export function posterCreate(option, imageArr, textArr, theme) {
|
||||
|
||||
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
|
||||
let ctx = mycanvas.getContext('2d')
|
||||
mycanvas.width = width; //设置canvas的宽
|
||||
mycanvas.height = height; //设置canvas的高
|
||||
mycanvas.style.width = '750px'; //设置canvas的宽
|
||||
mycanvas.style.height = '1500px'; //设置canvas的高
|
||||
mycanvas.width = width
|
||||
mycanvas.height = height
|
||||
console.log('imgs:', imageArr);
|
||||
//Promise对象加载资源
|
||||
let loader_p = [];
|
||||
@@ -464,14 +466,22 @@ export function posterCreate(option, imageArr, textArr, theme) {
|
||||
//Promise的.all方法，当所有预加载的图像加载好的回调函数
|
||||
Promise.all(loader_p)
|
||||
.then(imgList => {
|
||||
console.log('海报数组：', imgList);
|
||||
|
||||
imgList.map((item, index) => {
|
||||
console.log('item', imageArr[index].pos);
|
||||
// console.log('item',imageArr[index]);
|
||||
if (imageArr[index].name != 'eqcode') {
|
||||
ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
ctx.rotate(-4.3 * (Math.PI / 180));
|
||||
|
||||
// console.log('imgList[2]',imgList[2]);
|
||||
ctx.drawImage(imgList[2], imageArr[2].pos.x, imageArr[2].pos.y, imageArr[2].pos.w, imageArr[2].pos.h)
|
||||
|
||||
// 画签文
|
||||
ctx.rotate(-4 * (Math.PI / 180));
|
||||
// ctx.rotate(-4 * (Math.PI / 180));
|
||||
ctx.textAlign = 'start'; //type2
|
||||
ctx.textBaseline = 'top'
|
||||
textArr.map((item, index) => {
|
||||
@@ -490,17 +500,7 @@ export function posterCreate(option, imageArr, textArr, theme) {
|
||||
ctx.fillText(textArr[index].content, x, y); //绘制文字
|
||||
})
|
||||
|
||||
// let mbtiLogo = 'MBTI MBTI MBTI'
|
||||
// let radius = 75
|
||||
// var angleStep = ((3 / 4) * Math.PI) / mbtiLogo.length;
|
||||
// for (var i = 0; i < mbtiLogo.length; i++) {
|
||||
// var angle = i * angleStep + Math.PI / 250;
|
||||
// var x = 375 + Math.cos(angle) * radius;
|
||||
// var y = 775 + Math.sin(angle) * radius;
|
||||
// ctx.font = 'normal 30px HYYakuHei';
|
||||
// ctx.fillStyle = theme
|
||||
// ctx.fillText(mbtiLogo[i], x, y);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
//海报绘制完 ，转成图片对象
|
||||
|
||||
@@ -16,7 +16,7 @@ export function wxShare(option) {
|
||||
console.log('分享配置:', {
|
||||
'title': option.title,
|
||||
'desc': option.desc,
|
||||
'link': linkUrl + option.link
|
||||
'link': import.meta.env.VITE_URL
|
||||
});
|
||||
|
||||
let data = res.data;
|
||||
@@ -42,7 +42,7 @@ export function wxShare(option) {
|
||||
menuList: ["menuItem:copyUrl", "menuItem:share:appMessage", "menuItem:share:timeline"] // 屏蔽复制链接
|
||||
});
|
||||
wx.onMenuShareTimeline({
|
||||
link: linkUrl + option.link, // 分享链接
|
||||
link: import.meta.env.VITE_URL, // 分享链接
|
||||
title: option.title, // 分享标题
|
||||
desc: option.desc, // 分享描述
|
||||
imgUrl: imgUrl, // 分享图标
|
||||
@@ -51,7 +51,7 @@ export function wxShare(option) {
|
||||
},
|
||||
});
|
||||
wx.onMenuShareAppMessage({
|
||||
link: linkUrl + option.link, // 分享链接
|
||||
link: import.meta.env.VITE_URL, // 分享链接
|
||||
title: option.title, // 分享标题
|
||||
desc: option.desc, // 分享描述
|
||||
imgUrl: imgUrl, // 分享图标
|
||||
|
||||
Reference in New Issue
Block a user