完成海报页面逻辑，及流程整合
Andy Leong
@ -6,6 +6,7 @@
|
|||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||||||
<title><%- title%></title>
|
<title><%- title%></title>
|
||||||
|
<link rel="shortcut icon" href="./public/icon.svg">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
1
public/icon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 454 KiB After Width: | Height: | Size: 405 KiB |
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 294 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 87 KiB |
BIN
src/assets/images/result/bg.jpg
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/images/result/blessing-text-1-1.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/images/result/blessing-text-1-2.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/images/result/blessing-text-2-1.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
src/assets/images/result/blessing-text-2-2.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/images/result/blessing-text-3-1.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/images/result/blessing-text-3-2.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 724 B After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 26 KiB |
BIN
src/assets/images/result/larnten-1.png
Normal file
|
After Width: | Height: | Size: 580 KiB |
BIN
src/assets/images/result/larnten-2.png
Normal file
|
After Width: | Height: | Size: 479 KiB |
BIN
src/assets/images/result/larnten-3.png
Normal file
|
After Width: | Height: | Size: 536 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 121 KiB |
BIN
src/assets/images/result/poster.jpg
Normal file
|
After Width: | Height: | Size: 963 KiB |
BIN
src/assets/images/result/preveiw-1.png
Normal file
|
After Width: | Height: | Size: 881 KiB |
BIN
src/assets/images/result/preveiw-2.png
Normal file
|
After Width: | Height: | Size: 902 KiB |
BIN
src/assets/images/result/preveiw-3.png
Normal file
|
After Width: | Height: | Size: 911 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 61 KiB |
BIN
src/assets/images/result/product-2.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/images/result/product-3.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 190 B |
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/result/text.png
Normal file
|
After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/images/result/tips.png
Normal file
|
After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 50 KiB |
@ -18,7 +18,7 @@ onMounted(() => {
|
|||||||
name: "加载页资源",
|
name: "加载页资源",
|
||||||
imgs: loadImg,
|
imgs: loadImg,
|
||||||
callback: (progress) => {
|
callback: (progress) => {
|
||||||
// console.log('进度：', progress);
|
console.log('进度：', progress);
|
||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
gsap.to(".LoadPage", {
|
gsap.to(".LoadPage", {
|
||||||
|
|||||||
@ -42,32 +42,46 @@ const answerFn = (item, event) => {
|
|||||||
activeId.value = ''
|
activeId.value = ''
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
// 随机生成海报id
|
||||||
|
userStore.updatePosterId(getRandomNumber([1, 2, 3]))
|
||||||
|
gsap.set('.question-box', { pointerEvents: 'none' })
|
||||||
Toast('答题结束')
|
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);
|
console.log("答案库", answerList.value);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const mbtiArr = [[], [], [], []]; //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
|
|
||||||
|
|
||||||
const showResult = () => {
|
const showResult = () => {
|
||||||
|
|
||||||
gsap.set(".answer-box", { pointerEvents: "none" });
|
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toast("你的MBTI测试结果:" + mbti);
|
// Toast("你的MBTI测试结果:" + mbti);
|
||||||
// resultBtnAni.reverse();
|
// resultBtnAni.reverse();
|
||||||
gsap.to(".prev-btn", { duration: 0.5, x: "-=20px", autoAlpha: 0 });
|
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 });
|
// const resultBtnAni = gsap.timeline({ paused: true });
|
||||||
|
|||||||
@ -6,50 +6,19 @@ import { mbtiList } from "@/data";
|
|||||||
import { posterCreate } from "@/plugins";
|
import { posterCreate } from "@/plugins";
|
||||||
import { Toast } from "vant";
|
import { Toast } from "vant";
|
||||||
import QRCode from "qrcode";
|
import QRCode from "qrcode";
|
||||||
import { reactive } from "vue";
|
|
||||||
|
|
||||||
// 页面配置初始化
|
// 页面配置初始化
|
||||||
const emit = defineEmits(["ResultPage"]);
|
const emit = defineEmits(["ResultPage"]);
|
||||||
const userStore = useMainStore();
|
const userStore = useMainStore();
|
||||||
let bgId = ref(1); //海报背景id：1～4
|
const posterId = ref(userStore.posterId); //海报背景id：1～4
|
||||||
const bgPic = computed(() => {
|
|
||||||
return new URL(
|
|
||||||
`../assets/images/result/bg-${bgId.value}.jpg`,
|
|
||||||
import.meta.url
|
|
||||||
).href;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 主题配色
|
|
||||||
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();
|
const eqcodePic = ref();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
console.log('posterId:',posterId.value);
|
||||||
let eqCodeUrl = import.meta.env.VITE_URL;
|
let eqCodeUrl = import.meta.env.VITE_URL;
|
||||||
console.log("url:", eqCodeUrl);
|
|
||||||
QRCode.toDataURL(eqCodeUrl)
|
QRCode.toDataURL(eqCodeUrl)
|
||||||
.then((url) => {
|
.then((url) => {
|
||||||
eqcodePic.value = url;
|
eqcodePic.value = url;
|
||||||
@ -64,131 +33,39 @@ onMounted(() => {
|
|||||||
scale: 1.2,
|
scale: 1.2,
|
||||||
autoAlpha: 0,
|
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) => {
|
const createPoster = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
// 海报生成
|
// 海报生成
|
||||||
posterCreate(
|
posterCreate(
|
||||||
{ width: 750, height: 1500 }, //海报尺寸
|
{ width: 750, height: 1334 }, //海报尺寸
|
||||||
// 海报素材，按顺序依次渲染
|
// 海报素材，按顺序依次渲染
|
||||||
[
|
[
|
||||||
// 背景
|
// 背景
|
||||||
{
|
{
|
||||||
name: "bg",
|
name: "bg",
|
||||||
src: posterBg[bgId.value - 1],
|
src: new URL(`../assets/images/result/poster.jpg`, import.meta.url).href,
|
||||||
pos: { w: 750, h: 1500, x: 0, y: 0 },
|
pos: { w: 750, h: 1334, 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 },
|
|
||||||
},
|
},
|
||||||
// 二维码
|
// 二维码
|
||||||
{
|
{
|
||||||
name: "eqcode",
|
name: "eqcode",
|
||||||
src: eqcodePic.value,
|
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) => {
|
const goDraw = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
@ -200,6 +77,7 @@ const goDraw = (event) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 隐藏海报弹窗
|
||||||
const hidePop = (event) => {
|
const hidePop = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
@ -207,12 +85,15 @@ const hidePop = (event) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 展示分享
|
||||||
const goShare = (event) => {
|
const goShare = (event) => {
|
||||||
let e = event.target;
|
let e = event.target;
|
||||||
debounceTap(e, () => {
|
debounceTap(e, () => {
|
||||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 隐藏分享提示
|
||||||
const hideShare = () => {
|
const hideShare = () => {
|
||||||
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
|
||||||
};
|
};
|
||||||
@ -220,11 +101,19 @@ const hideShare = () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="ResultPage" @touchmove.prevent>
|
<div class="ResultPage" @touchmove.prevent>
|
||||||
<div class="result-bg">
|
<div class="result-bg"></div>
|
||||||
<img :src="bgPic" alt="" srcset="" />
|
|
||||||
</div>
|
|
||||||
<div class="result-container">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- 海报弹窗 -->
|
<!-- 海报弹窗 -->
|
||||||
@ -233,7 +122,9 @@ const hideShare = () => {
|
|||||||
<div class="cls-btn" @click="hidePop($event)"></div>
|
<div class="cls-btn" @click="hidePop($event)"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="poster-box">
|
<div class="poster-box">
|
||||||
<img id="poster" />
|
<div class="poster" :class="'poster-'+posterId">
|
||||||
|
<img id="posterSrc" src="" alt="" srcset="">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="save-tips">*长按保存海报</div>
|
<div class="save-tips">*长按保存海报</div>
|
||||||
<div class="btn-box">
|
<div class="btn-box">
|
||||||
@ -256,187 +147,91 @@ const hideShare = () => {
|
|||||||
|
|
||||||
.result-bg {
|
.result-bg {
|
||||||
@include pos(750px, 1624px, 0px, 50%);
|
@include pos(750px, 1624px, 0px, 50%);
|
||||||
|
@include bg_pos("result/bg.jpg");
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
img {
|
|
||||||
@include box(100%, 100%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-container {
|
.result-container {
|
||||||
@include pos(750px, 1624px, 0px, 50%);
|
@include pos(750px, 1624px, 0px, 50%);
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
.page-theme-1 {
|
.created-tips{
|
||||||
color: #d3473a;
|
@include pos(316px, 91px, -54px, 267px);
|
||||||
animation: color 1s;
|
@include bg_pos("result/tips.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-theme-2 {
|
.larnten-1{
|
||||||
color: #fb7700;
|
// @include pos(609px, 878px, -54px, 267px);
|
||||||
animation: color 1s;
|
// @include bg_pos("result/larnten-1.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-theme-3 {
|
.blessing-1-1{
|
||||||
color: #4172d8;
|
@include pos(86px, 565px, 119px, 409px);
|
||||||
animation: color 1s;
|
@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 {
|
.blessing-2-1{
|
||||||
color: #eb5c37;
|
@include pos(86px, 563px, 119px, 409px);
|
||||||
animation: color 1s;
|
@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 {
|
.blessing-3-1{
|
||||||
@include pos(600px, 120px, 90px, 418px);
|
@include pos(86px, 568px, 119px, 409px);
|
||||||
font-size: 80px;
|
@include bg_pos("result/blessing-text-3-1.png");
|
||||||
text-align: center;
|
}
|
||||||
text-shadow: 3.109px 2.517px 4px rgba(215, 70, 56, 0.47);
|
.blessing-3-2{
|
||||||
text-stroke: 1px #ffffff;
|
@include pos(87px, 563px, 214px, 409px);
|
||||||
-webkit-text-stroke: 1px #ffffff;
|
@include bg_pos("result/blessing-text-3-2.png");
|
||||||
font-weight: bolder;
|
|
||||||
transform: rotate(-4deg);
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbti-des-box {
|
.result-product{
|
||||||
@include pos(557px, 90px, 110px, 547px);
|
@include pos(659px, 159px, 45px, 1004px);
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
.product-1{
|
||||||
justify-content: space-around;
|
@include bg_pos("result/product-1.png");
|
||||||
|
}
|
||||||
.des {
|
.product-2{
|
||||||
color: #af6f49;
|
@include bg_pos("result/product-2.png");
|
||||||
font-size: 30px;
|
}
|
||||||
transform: rotate(-4deg);
|
.product-3{
|
||||||
}
|
@include bg_pos("result/product-3.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbti-blessings-box {
|
.result-tips{
|
||||||
@include pos(500px, 160px, 130px, 715px);
|
@include pos(645px, 71px, 52px, 1195px);
|
||||||
display: flex;
|
@include bg_pos("result/text.png");
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbti-product {
|
.create-poster{
|
||||||
@include pos(630px, 140px, 134px, 948px);
|
@include pos(237px, 80px, 257px, 1302px);
|
||||||
|
@include bg_pos("result/create-btn.png");
|
||||||
.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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.posterPop {
|
||||||
@include fixed();
|
@include fixed();
|
||||||
@include flexCen();
|
@include flexCen();
|
||||||
background-color: rgba($color: #000000, $alpha: 0.54);
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
.cls-btn-box {
|
.cls-btn-box {
|
||||||
width: 495px;
|
width: 617px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.cls-btn {
|
.cls-btn {
|
||||||
@include box(41px, 41px);
|
@include box(49px, 49px);
|
||||||
@include bg_pos("result/cls-btn.png");
|
@include bg_pos("result/cls-btn.png");
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
}
|
}
|
||||||
@ -451,14 +246,26 @@ const hideShare = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.poster-box {
|
.poster-box {
|
||||||
@include box(495px, 990px);
|
@include box(617px, 881px);
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 2px solid #dbbb90;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
#poster {
|
.poster {
|
||||||
@include box(100%, 100%);
|
@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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,70 +6,67 @@ const load = [
|
|||||||
|
|
||||||
const page = [
|
const page = [
|
||||||
|
|
||||||
|
'index/prize-btn.png',
|
||||||
|
'index/cloud.png',
|
||||||
|
'index/firework.png',
|
||||||
|
'index/rule-btn.png',
|
||||||
|
'index/start-btn.png',
|
||||||
|
'index/fan-3.png',
|
||||||
|
'index/title.png',
|
||||||
|
'index/fan-4.png',
|
||||||
|
'index/pet-icon.png',
|
||||||
|
'index/fan-2.png',
|
||||||
|
'index/fan-1.png',
|
||||||
|
'index/windows.png',
|
||||||
|
'index/bottom-bg.png',
|
||||||
|
'index/bg.jpg',
|
||||||
|
|
||||||
'prize/tips.png',
|
'prize/tips.png',
|
||||||
'prize/star.png',
|
|
||||||
'prize/cls-btn.png',
|
'prize/cls-btn.png',
|
||||||
'prize/copy-btn.png',
|
'prize/copy-btn.png',
|
||||||
'prize/draw-box.png',
|
|
||||||
'prize/draw-text.png',
|
'prize/draw-text.png',
|
||||||
'prize/light.png',
|
'prize/light.png',
|
||||||
|
'prize/draw-box.png',
|
||||||
'prize/myPrize-box.png',
|
'prize/myPrize-box.png',
|
||||||
'prize/no-prize.png',
|
'prize/no-prize.png',
|
||||||
'music-on.png',
|
'prize/star.png',
|
||||||
'music-off.png',
|
|
||||||
'orientation-icon.png',
|
'qa/gold-icon.png',
|
||||||
'share.jpg',
|
'qa/question-box.png',
|
||||||
'index/title.png',
|
'qa/lantern-icon.png',
|
||||||
'index/start-btn.png',
|
'qa/gold-icon-2.png',
|
||||||
'index/rule-btn.png',
|
'qa/bg.jpg',
|
||||||
'index/prize-btn.png',
|
'qa/bottom-bg.png',
|
||||||
'index/bg.jpg',
|
|
||||||
'qa/showResult-btn.png',
|
'result/share-tips.svg',
|
||||||
'qa/question.png',
|
'result/cls-btn.png',
|
||||||
'qa/prev-btn.png',
|
'result/create-btn.png',
|
||||||
'qa/answer-box-2.png',
|
'result/go-draw-btn.png',
|
||||||
'qa/answer-box-1.png',
|
'result/go-share-btn.png',
|
||||||
'result/theme-4.png',
|
'result/blessing-text-1-2.png',
|
||||||
'result/theme-3.png',
|
'result/tips.png',
|
||||||
'result/theme-2.png',
|
'result/product-2.png',
|
||||||
'result/theme-1.png',
|
'result/blessing-text-3-1.png',
|
||||||
'result/share-tips.svg',
|
'result/blessing-text-1-1.png',
|
||||||
'result/select-tips.png',
|
'result/blessing-text-2-1.png',
|
||||||
'result/product-1.png',
|
'result/product-3.png',
|
||||||
'result/select-arrow.png',
|
'result/blessing-text-3-2.png',
|
||||||
'result/poster-bg-4.jpg',
|
'result/blessing-text-2-2.png',
|
||||||
'result/poster-bg-3.jpg',
|
'result/product-1.png',
|
||||||
'result/poster-bg-2.jpg',
|
'result/text.png',
|
||||||
'result/poster-bg-1.jpg',
|
'result/larnten-1.png',
|
||||||
'result/go-share-btn.png',
|
'result/larnten-3.png',
|
||||||
'result/go-draw-btn.png',
|
'result/larnten-2.png',
|
||||||
'result/create-btn.png',
|
'result/preveiw-1.png',
|
||||||
'result/bg-4.jpg',
|
'result/preveiw-2.png',
|
||||||
'result/cls-btn.png',
|
'result/preveiw-3.png',
|
||||||
'result/bg-2.jpg',
|
'result/bg.jpg',
|
||||||
'result/bg-3.jpg',
|
'result/poster.jpg',
|
||||||
'result/bg-1.jpg',
|
'rule/cls-btn.png',
|
||||||
'rule/rule-box.png',
|
'rule/icon.png',
|
||||||
'rule/cls-btn.png',
|
'rule/arrow.png',
|
||||||
'rule/caidai.png',
|
'rule/rule-box.png',
|
||||||
'rule/arrow.png',
|
|
||||||
|
|
||||||
'result/product/INFP.png',
|
|
||||||
'result/product/INFJ.png',
|
|
||||||
'result/product/ESFP.png',
|
|
||||||
'result/product/ENFP.png',
|
|
||||||
'result/product/ESTJ.png',
|
|
||||||
'result/product/ISFJ.png',
|
|
||||||
'result/product/ENTJ.png',
|
|
||||||
'result/product/ENFJ.png',
|
|
||||||
'result/product/ESFJ.png',
|
|
||||||
'result/product/ISTP.png',
|
|
||||||
'result/product/ESTP.png',
|
|
||||||
'result/product/ISFP.png',
|
|
||||||
'result/product/INTJ.png',
|
|
||||||
'result/product/ISTJ.png',
|
|
||||||
'result/product/ENTP.png',
|
|
||||||
'result/product/INTP.png',
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -83,7 +83,7 @@ const drawFn = (item) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const showResult = ref(true);
|
const showResult = ref(false);
|
||||||
const resultFn = (item) => {
|
const resultFn = (item) => {
|
||||||
if (item.action == "hide") {
|
if (item.action == "hide") {
|
||||||
showResult.value = false;
|
showResult.value = false;
|
||||||
@ -211,7 +211,7 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// showLoad.value = true;
|
showLoad.value = true;
|
||||||
createBGM();
|
createBGM();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -225,7 +225,7 @@ const playMusic = () => {
|
|||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
#app {
|
#app {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: linear-gradient(135deg, #f6d365, #fda085);
|
background: linear-gradient(135deg, #a11b15, #f80c00);
|
||||||
}
|
}
|
||||||
|
|
||||||
#__vconsole {
|
#__vconsole {
|
||||||
|
|||||||
@ -433,7 +433,7 @@ export function mostValue(arr) {
|
|||||||
|
|
||||||
|
|
||||||
// 海报生成
|
// 海报生成
|
||||||
export function posterCreate(option, imageArr, textArr, theme, eqcode) {
|
export function posterCreate(option, imageArr) {
|
||||||
let posterUrl = ''
|
let posterUrl = ''
|
||||||
const { width, height } = option
|
const { width, height } = option
|
||||||
Toast.loading({
|
Toast.loading({
|
||||||
@ -441,15 +441,14 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
|
|||||||
duration: 0,
|
duration: 0,
|
||||||
forbidClick: true
|
forbidClick: true
|
||||||
})
|
})
|
||||||
console.log('theme', theme);
|
|
||||||
|
|
||||||
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
|
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
|
||||||
let ctx = mycanvas.getContext('2d')
|
let ctx = mycanvas.getContext('2d')
|
||||||
mycanvas.style.width = '750px'; //设置canvas的宽
|
mycanvas.style.width = `${width}px`; //设置canvas的宽
|
||||||
mycanvas.style.height = '1500px'; //设置canvas的高
|
mycanvas.style.height = `${height}px`; //设置canvas的高
|
||||||
mycanvas.width = width
|
mycanvas.width = width
|
||||||
mycanvas.height = height
|
mycanvas.height = height
|
||||||
console.log('imgs:', imageArr);
|
|
||||||
//Promise对象加载资源
|
//Promise对象加载资源
|
||||||
let loader_p = [];
|
let loader_p = [];
|
||||||
imageArr.map((item) => {
|
imageArr.map((item) => {
|
||||||
@ -467,48 +466,17 @@ export function posterCreate(option, imageArr, textArr, theme, eqcode) {
|
|||||||
Promise.all(loader_p)
|
Promise.all(loader_p)
|
||||||
.then(imgList => {
|
.then(imgList => {
|
||||||
|
|
||||||
|
// 图片素材遍历绘制
|
||||||
imgList.map((item, index) => {
|
imgList.map((item, index) => {
|
||||||
// console.log('item',imageArr[index]);
|
ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
|
||||||
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.textAlign = 'start'; //type2
|
|
||||||
ctx.textBaseline = 'top'
|
|
||||||
textArr.map((item, index) => {
|
|
||||||
const { x, y } = textArr[index].style.pos
|
|
||||||
ctx.font = textArr[index].style.font; // normal bold
|
|
||||||
|
|
||||||
// title绘制描边
|
|
||||||
if (index == 0) {
|
|
||||||
ctx.lineWidth = 5
|
|
||||||
ctx.strokeStyle = 'white'
|
|
||||||
ctx.strokeText(textArr[index].content, x, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ctx.fillStyle = textArr[index].style.color ? textArr[index].style.color : theme; //原生canvas的绘制文字方法,属性类似css，确定好文字颜色、粗细、字号、字体、对齐方式
|
|
||||||
ctx.fillText(textArr[index].content, x, y); //绘制文字
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//海报绘制完 ，转成图片对象
|
//海报绘制完 ，转成图片对象
|
||||||
return mycanvas.toDataURL('image/jpeg', 1);
|
return mycanvas.toDataURL('image/jpeg', 1);
|
||||||
})
|
})
|
||||||
.then(baseURL => {
|
.then(baseURL => {
|
||||||
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
|
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
|
||||||
let posterImg = document.querySelector('#poster')
|
let posterImg = document.querySelector('#posterSrc')
|
||||||
posterImg.src = baseURL
|
posterImg.src = baseURL
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Toast.success({ message: '生成成功！' })
|
Toast.success({ message: '生成成功！' })
|
||||||
|
|||||||
@ -6,7 +6,7 @@ export const useMainStore = defineStore("counter", {
|
|||||||
return {
|
return {
|
||||||
hasDraw: true, //是否有抽奖机会
|
hasDraw: true, //是否有抽奖机会
|
||||||
token: '',
|
token: '',
|
||||||
MBTI: 'ESFJ', //测试结果
|
posterId: 3, //测试结果
|
||||||
hasPrize: true, //是否有奖品
|
hasPrize: true, //是否有奖品
|
||||||
prizeCode: 'oggSVMbeLgSK', //兑换码
|
prizeCode: 'oggSVMbeLgSK', //兑换码
|
||||||
prizeMoney: '8.88', //金额
|
prizeMoney: '8.88', //金额
|
||||||
@ -27,8 +27,8 @@ export const useMainStore = defineStore("counter", {
|
|||||||
this.prizeMoney = data.prizeAmount
|
this.prizeMoney = data.prizeAmount
|
||||||
this.hasPrize = true
|
this.hasPrize = true
|
||||||
},
|
},
|
||||||
updateMBTI(type) {
|
updatePosterId(id) {
|
||||||
this.MBTI = type
|
this.posterId = id
|
||||||
},
|
},
|
||||||
updateDrawKey(data) {
|
updateDrawKey(data) {
|
||||||
console.log('保存结果:', data);
|
console.log('保存结果:', data);
|
||||||
|
|||||||
317
字体压缩.txt
@ -1,308 +1,15 @@
|
|||||||
1、fzcy
|
锦鲤花灯：
|
||||||
<div>【活动时间】：2024年2月5日——2月8日</div>
|
多资产、多策略，有望更好在不同市场环境中，实现风险与收益的平衡
|
||||||
<div>【活动奖励】：0.5-8.88元微信红包</div>
|
多金多财多好运，好年好景好时光
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div>【活动攻略】：</div>
|
|
||||||
<div>
|
|
||||||
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
|
|
||||||
</div>
|
|
||||||
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
|
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div>【领奖说明】：</div>
|
|
||||||
<div>
|
|
||||||
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]
|
|
||||||
消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品]
|
|
||||||
内查看兑换码；
|
|
||||||
</div>
|
|
||||||
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
|
||||||
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
|
||||||
<div>其他：</div>
|
|
||||||
<div>
|
|
||||||
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
|
|
||||||
</div>
|
|
||||||
<div>说明：</div>
|
|
||||||
<div>
|
|
||||||
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(1)
|
|
||||||
以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(2)
|
|
||||||
同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等)
|
|
||||||
单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(3)
|
|
||||||
有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
点击右上角分享给你的好友！*长按保存海报
|
|
||||||
<div class="part">
|
|
||||||
<div>【活动时间】：2024年2月4日——2月8日</div>
|
|
||||||
<div>【活动奖励】：微信红包</div>
|
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div>【活动攻略】：</div>
|
|
||||||
<div>
|
|
||||||
1、进入活动参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
|
|
||||||
</div>
|
|
||||||
<div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
|
|
||||||
</div>
|
|
||||||
<div class="part">
|
|
||||||
<div>【领奖说明】：</div>
|
|
||||||
<div>
|
|
||||||
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框输入“2024”获取兑换链接，进入链接输入兑换码兑换奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
|
|
||||||
</div>
|
|
||||||
<div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
|
|
||||||
<div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
|
|
||||||
<div class="part">其他：</div>
|
|
||||||
<div>
|
|
||||||
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
|
|
||||||
</div>
|
|
||||||
<div class="part">说明：</div>
|
|
||||||
<div>平安理财有权对活动规则进行解释</div>
|
|
||||||
<div class="part">【活动规则】：</div>
|
|
||||||
<div>
|
|
||||||
1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权益，井保留追究其法律责任的权利:
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(1)以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(2)同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
(3)有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
3、用户参与本活动，即视为理解并同意本活动细则。在法律规定的范围内，平安理财有权对活动规则进行解释，并根据活动实际情况对本活动的规则进行变动或调整，相关变动或调整将公布在规则页面，并于公布时即时生效。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
2、AlimamaShuHeiTi
|
|
||||||
id: 1,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '当朋友约你外出，你会？', id: 2,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你更喜欢什么样的社交生活？', id: 3,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '当你想要做一个计划时，你会？', id: 4,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '得知朋友因心情不好买了很多饼干，你第一想到的是？', id: 5,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当你考虑投资一个新的金融产品时，你更倾向于？', id: 6,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当评估一项投资机会时，你更倾向于？', id: 7,
|
|
||||||
type: 'lc',
|
|
||||||
question: '在选择一个投资合伙人时，你更看重？', id: 8,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当面对投资市场的不确定性和变化时，你更倾向于？', id: 9,
|
|
||||||
type: 'lc',
|
|
||||||
question: '在做某项决定时，你认为比较重要的是？', id: 10,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你认为别人一般会？', id: 11,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '哪些人会更吸引你？', id: 12,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你是否经常让', type: 'ISTJ',
|
|
||||||
job: '物流师', type: 'ISTP',
|
|
||||||
job: '鉴赏家', type: 'ESTP',
|
|
||||||
job: '企业家', type: 'ESTJ',
|
|
||||||
job: '总经理', type: 'ISFJ',
|
|
||||||
job: '守卫者', type: 'ISFP',
|
|
||||||
job: '探险家', type: 'ESFP',
|
|
||||||
job: '表演者', type: 'ESFJ',
|
|
||||||
job: '执行官', type: 'INFJ',
|
|
||||||
job: '提倡者', type: 'INFP',
|
|
||||||
job: '调停者', type: 'ENFP',
|
|
||||||
job: '竞选者', type: 'ENFJ',
|
|
||||||
job: '主人公', type: 'INTJ',
|
|
||||||
job: '建筑师', type: 'INTP',
|
|
||||||
job: '逻辑学家', type: 'ENTP',
|
|
||||||
job: '辩论家', type: 'ENTJ',
|
|
||||||
job: '指挥官',
|
|
||||||
|
|
||||||
|
宫灯
|
||||||
|
坚持长期主义，用耐心积累实力
|
||||||
|
花灯璀璨福星照，金银满袋喜气绕
|
||||||
|
|
||||||
3、fzzy
|
圆灯：
|
||||||
aid: 'A',
|
锚定“绝对收益”目标，追求在震荡市场中提供相对稳定的收益
|
||||||
text: '询问计划具体时间段做什么',
|
花好月圆迎佳节，富贵安康乐绵延
|
||||||
secore: 'J',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '说走就走',
|
|
||||||
secore: 'P', aid: 'A',
|
|
||||||
text: '独处回血爽歪歪',
|
|
||||||
secore: 'I',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '呼朋唤友快乐多',
|
|
||||||
secore: 'E',
|
|
||||||
}, aid: 'A',
|
|
||||||
text: '收集尽量多的信息',
|
|
||||||
secore: 'S',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '偏向依靠经验',
|
|
||||||
secore: 'N', aid: 'A',
|
|
||||||
text: '买了多少？一个人能吃完吗',
|
|
||||||
secore: 'T',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '为什么心情不好呢',
|
|
||||||
secore: 'F', aid: 'A',
|
|
||||||
text: '与朋友、同事或专业顾问讨论， 通过外部交流获得信息和建议',
|
|
||||||
secore: 'E',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '独立研究，通过阅读、在线课程和个人分析来形成决策',
|
|
||||||
secore: 'I', {
|
|
||||||
aid: 'A',
|
|
||||||
text: '依赖详细的市场报告、历史数据和具体分析',
|
|
||||||
secore: 'S',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '依赖整体市场趋势、未来预测和直觉感受 ',
|
|
||||||
secore: 'N',
|
|
||||||
}, answer: [
|
|
||||||
{
|
|
||||||
aid: 'A',
|
|
||||||
text: '他们的专业能力、以往的业绩和逻辑决策过程',
|
|
||||||
secore: 'T',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '他们的个人价值观、信任度和与你的情感共鸣',
|
|
||||||
secore: 'F',
|
|
||||||
}, {
|
|
||||||
aid: 'A',
|
|
||||||
text: '坚持你的投资计划和策略，不轻易改变已经制定的计划',
|
|
||||||
secore: 'J',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: 'B.保持灵活性，根据市场的最新变化调整你的投资策略',
|
|
||||||
secore: 'P',
|
|
||||||
}, {
|
|
||||||
aid: 'A',
|
|
||||||
text: '根据实际情况衡量考虑',
|
|
||||||
secore: 'J',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '考虑他人的感受和意见',
|
|
||||||
secore: 'P',
|
|
||||||
}, answer: [
|
|
||||||
{
|
|
||||||
aid: 'A',
|
|
||||||
text: '花很长时间才认识你',
|
|
||||||
secore: 'I',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '很短的时间便了解你',
|
|
||||||
secore: 'E',
|
|
||||||
},
|
|
||||||
], {
|
|
||||||
aid: 'A',
|
|
||||||
text: '一个思想敏捷及非常聪颖的人',
|
|
||||||
secore: 'N',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '实事求是，具有丰富常识的人',
|
|
||||||
secore: 'S',
|
|
||||||
}, {
|
|
||||||
aid: 'A',
|
|
||||||
text: '你的情感支配你的理智',
|
|
||||||
secore: 'F',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
aid: 'B',
|
|
||||||
text: '你的理智主宰你的情感',
|
|
||||||
secore: 'T',
|
|
||||||
}, des: ['实际且注重事实的个人，', '可靠性不容怀疑'], des: ['大胆而实际的实验家，', '擅长使用任何形式的工具'],
|
|
||||||
des: ['聪明，精力充沛善于感知的人们，','每天都在冲向新的冒险'],
|
|
||||||
des: ['出色的管理者，', '在管理事情或人的方面无与伦比'],
|
|
||||||
des: ['非常专注而温暖的守护者，', '时刻准备保护爱着的人'],
|
|
||||||
des: ['灵活有魅力的艺术家，', '时刻准备着探索和体验新鲜事物'],
|
|
||||||
des: ['外向随和，', '对生活充满热情，享受物质生活'],
|
|
||||||
des: ['极有同情心，爱交往受欢迎的人们，', '总是热心提供帮助'],
|
|
||||||
des: ['安静而神秘，同时鼓舞人心，', '且不知疲倦的理想主义者'],
|
|
||||||
des: ['诗意，善良的利他主义者，', '总是热情地为正当理由提供帮助'],
|
|
||||||
des: ['热情，有创造力', '爱社交的自由自在的人'],
|
|
||||||
des: ['富有魅力鼓舞人心的领导者', '有使听众着迷的能力'],
|
|
||||||
des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
|
|
||||||
des: ['具有创造力的发明家，', '对知识有着止不住的渴望'],
|
|
||||||
des: ['聪明好奇的思想者，', '不会放弃任何智力上的挑战'],
|
|
||||||
des: ['大胆，富有想象力且意志强大的领导者，', '总能找到或创造解决方法'],
|
|
||||||
风险提示: 本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。本资料内容及观点仅供参考，不构成对任何人的投资建议。以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。理财非存款，产品有风险，投资须谨慎。金融消费者不得利用金融产品和服务从事违法活动。
|
|
||||||
|
|
||||||
4、HYYakuHei-85W
|
分享配置：
|
||||||
id: 1,
|
标题：今夜宜赏灯，来测测你的专属元宵花灯
|
||||||
type: 'mbti',
|
摘要：赏花灯，赢惊喜，欢天喜地闹元宵！
|
||||||
question: '当朋友约你外出，你会？', id: 2,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你更喜欢什么样的社交生活？', id: 3,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '当你想要做一个计划时，你会？', id: 4,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '得知朋友因心情不好买了很多饼干，你第一想到的是？', id: 5,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当你考虑投资一个新的金融产品时，你更倾向于？', id: 6,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当评估一项投资机会时，你更倾向于？', id: 7,
|
|
||||||
type: 'lc',
|
|
||||||
question: '在选择一个投资合伙人时，你更看重？', id: 8,
|
|
||||||
type: 'lc',
|
|
||||||
question: '当面对投资市场的不确定性和变化时，你更倾向于？', id: 9,
|
|
||||||
type: 'lc',
|
|
||||||
question: '在做某项决定时，你认为比较重要的是？', id: 10,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你认为别人一般会？', id: 11,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '哪些人会更吸引你？', id: 12,
|
|
||||||
type: 'mbti',
|
|
||||||
question: '你是否经常让', type: 'ISTJ',
|
|
||||||
job: '物流师', type: 'ISTP',
|
|
||||||
job: '鉴赏家', type: 'ESTP',
|
|
||||||
job: '企业家', type: 'ESTJ',
|
|
||||||
job: '总经理', type: 'ISFJ',
|
|
||||||
job: '守卫者', type: 'ISFP',
|
|
||||||
job: '探险家', type: 'ESFP',
|
|
||||||
job: '表演者', type: 'ESFJ',
|
|
||||||
job: '执行官', type: 'INFJ',
|
|
||||||
job: '提倡者', type: 'INFP',
|
|
||||||
job: '调停者', type: 'ENFP',
|
|
||||||
job: '竞选者', type: 'ENFJ',
|
|
||||||
job: '主人公', type: 'INTJ',
|
|
||||||
job: '建筑师', type: 'INTP',
|
|
||||||
job: '逻辑学家', type: 'ENTP',
|
|
||||||
job: '辩论家', type: 'ENTJ',
|
|
||||||
job: '指挥官',
|
|
||||||
|
|
||||||
|
|
||||||
5、SourceHanSansCN Medium
|
|
||||||
———本活动测试结果仅供娱乐，不能代替投资者风险承受能力评级结果 ——— 风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
|
|
||||||
class="b"
|
|
||||||
>本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
|
|
||||||
>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
|
|
||||||
class="b"
|
|
||||||
>理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
|
|
||||||
><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
|
|
||||||
>金融消费者不得利用金融产品和服务从事违法活动。
|
|
||||||