-
- {{ item }}
+
+
{{ mbtiObj.type }} {{ mbtiObj.job }}
+
+
+
+
{{ mbtiObj.product }}
+
+
![]()
+
-
生成海报
-
-
![]()
+
-
![]()
+
+
+
+
+
+
+
![]()
+
+
@@ -88,7 +202,7 @@ const createPoster = (event) => {
background-color: azure;
.result-bg {
- @include pos(750px, 100%, 0px, 50%);
+ @include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
pointer-events: none;
@@ -98,25 +212,195 @@ const createPoster = (event) => {
}
.result-container {
- @include pos(750px, 100%, 0px, 50%);
+ @include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
- .bg-tab {
- width: 90%;
+ .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;
- flex-direction: row;
+
+ span {}
+
+ }
+
+ .mbti-des-box {
+ @include pos(517px, 90px, 110px, 547px);
+ display: flex;
+ flex-direction: column;
justify-content: space-around;
+ font-family: 'fzzy';
- .li {
- @include box(80px, 80px);
- background-color: aquamarine;
- @include flexCen();
- }
-
- .active {
- background: #bc0000;
+ .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 {
+ 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");
+ }
+
+ }
+
+
}
}
+
+.posterPop {
+ @include fixed();
+ @include flexCen();
+ background-color: rgba($color: #000000, $alpha: 0.54);
+ visibility: hidden;
+
+ .cls-btn {
+ @include box(41px, 41px);
+ @include bg_pos("result/cls-btn.png");
+ }
+
+ .poster-box {
+ @include box(495px, 990px);
+ 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");
+ }
+
+ .go-share {
+ @include box(226px, 76px);
+ @include bg_pos("result/go-share-btn.png");
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/Rule.vue b/src/components/Rule.vue
index 83c4a82..9f10bfd 100644
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -4,11 +4,58 @@ import { debounceTap } from '@/plugins'
// 页面配置初始化
const emit = defineEmits(["RulePage"]);
+const hide = (event) => {
+ debounceTap(event.target, () => {
+ emit('RulePage', { action: 'hide' })
+ })
+}
+
- 规则页面
+
+
+
+
+
+
【活动时间】：2024年2月5日——2月8日
+
【活动奖励】：0.5-8.88元微信红包
+
+
+
【活动攻略】：
+
1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
+
2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。
+
+
+
【领奖说明】：
+
1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；
+
2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；
+
3、中奖人请在活动结束前进行兑换，逾期视为弃权。
+
其他：
+
活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
+
说明：
+
+ 1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
+
+
(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+
(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+
(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+
2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
+
+
+
+
+
+
+
+
+
+
@@ -17,5 +64,54 @@ const emit = defineEmits(["RulePage"]);
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.7);
+
+ .rule-container {
+ position: relative;
+ @include box(492px, 712px);
+
+ .content {
+
+ .rule-content {
+ @include box(490px, 709px);
+ @include bg_pos('rule/rule-box.png');
+ position: relative;
+
+ .rule-text-area {
+ @include pos(405px, 523px, 41px, 101px);
+ // background-color: #000000;
+ overflow: hidden;
+ overflow-y: scroll;
+
+ .part {
+ font-family: 'fzcy';
+ color: #ac4d31;
+ font-size: 20px;
+ line-height: 30px;
+ margin-top: 30px;
+ text-align: justify;
+ padding: 0 10px;
+ }
+ }
+
+ }
+
+ .rule-arrow {
+ @include pos(38px, 23px, 224px, 641px);
+ @include bg_pos('rule/arrow.png');
+ }
+
+ .rule-cls-btn {
+ @include pos(48px, 48px, 441px, -76px);
+ @include bg_pos('rule/cls-btn.png');
+ }
+ }
+
+ .rule-caidai {
+ @include pos(135px, 185px, 357px, 557px);
+ @include bg_pos('rule/caidai.png');
+ pointer-events: none;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/src/data/index.js b/src/data/index.js
index c5734d1..4913d9b 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -208,62 +208,99 @@ export const data = [
export const mbtiList = [
{
type: 'INTJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'INTP',
- spe: '富有创造力的发明家，对知识有着止不住的渴望',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ENTJ',
- spe: '大胆，富有想象力且',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ENTP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'INFJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'INFP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ENFJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ENFP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ISTJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ISFJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ESTJ',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
{
type: 'ISTP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
- },
- {
- type: 'ISFP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
- },
- {
- type: 'ESTP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
- },
- {
- type: 'ESFP',
- spe: '富有想象力和战略性的思想家，一切皆在计划之中',
+ job: '建筑师',
+ des: ['富有想象力和战略性的思想家，', '一切皆在计划之中'],
+ blessings: ['江南几度梅花发', '福瘦双全有钱花'],
+ product: '启航一年定开1号',
+ productPic: new URL('../assets/images/result/product-1.png', import.meta.url).href,
},
+
]
\ No newline at end of file
diff --git a/src/page/Home/App.vue b/src/page/Home/App.vue
index a3833da..9f2a4f5 100644
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -1,10 +1,11 @@
-
+
+
@@ -17,6 +18,7 @@ import Question from "@/components/Question";
import MyPrize from "@/components/MyPrize";
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 { Toast } from "vant";
@@ -43,6 +45,10 @@ const indexFn = (item) => {
if (item.action == "start") {
showQuestion.value = true;
}
+
+ if (item.action == "showRule") {
+ showRule.value = true;
+ }
};
const showQuestion = ref(false);
@@ -76,6 +82,18 @@ const resultFn = (item) => {
if (item.action == "hide") {
showResult.value = false;
}
+ if (item.action == "showDraw") {
+ showDraw.value = true;
+ }
+};
+
+
+const showRule = ref(false);
+const ruleFn = (item) => {
+ if (item.action == "hide") {
+ showRule.value = false;
+ }
+
};
onMounted(() => {
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 71ddbd2..74cd490 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -433,7 +433,7 @@ export function mostValue(arr) {
// 海报生成
-export function posterCreate(option, imageArr) {
+export function posterCreate(option, imageArr, textArr, theme) {
let posterUrl = ''
const { width, height } = option
Toast.loading({
@@ -441,12 +441,13 @@ export function posterCreate(option, imageArr) {
duration: 0,
forbidClick: true
})
+ console.log('theme', theme);
let mycanvas = document.createElement('canvas') // 创建一个canvas画布元素
let ctx = mycanvas.getContext('2d')
mycanvas.width = width; //设置canvas的宽
mycanvas.height = height; //设置canvas的高
-
+ console.log('imgs:', imageArr);
//Promise对象加载资源
let loader_p = [];
imageArr.map((item) => {
@@ -469,6 +470,39 @@ export function posterCreate(option, imageArr) {
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 * (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); //绘制文字
+ })
+
+ // 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);
+ // }
+
+
//海报绘制完 ，转成图片对象
return mycanvas.toDataURL('image/jpeg', 1);
})
@@ -476,7 +510,11 @@ export function posterCreate(option, imageArr) {
//返回的图片地址，就是最后海报的地址，可以放在DOM显示
let posterImg = document.querySelector('#poster')
posterImg.src = baseURL
- setTimeout(() => Toast.success({ message: '已成功' }), 500)
+ setTimeout(() => {
+ Toast.success({ message: '生成成功！' })
+ gsap.to('.posterPop', { duration: 0.5, autoAlpha: 1 })
+
+ }, 500)
})
return posterUrl
diff --git a/src/store/index.js b/src/store/index.js
index d6aa0af..b5cd85b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,8 +4,10 @@ import { defineStore } from "pinia"
export const useMainStore = defineStore("counter", {
state: () => {
return {
+ hasDraw: true, //是否有抽奖机会
token: 'INFJ',
- MBTI: '', //测试结果
+ MBTI: 'INTJ', //测试结果
+ hasPrize: true, //是否有奖品
prizeCode: 'DKS18', //兑换码
prizeMoney: '8.88', //金额
drawKey: '',
@@ -27,6 +29,9 @@ export const useMainStore = defineStore("counter", {
},
updateDrawKey(key) {
this.drawKey = key
+ },
+ updateDraw(value) {
+ this.hasDraw = false
}
},
})
diff --git a/src/styles/global.scss b/src/styles/global.scss
index e6781bf..abf1834 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,9 +1,67 @@
@charset "utf-8";
-// @import url('@/assets/font/AlimamaShuHeiTi.ttf');
+/*--------------------
+ 默认设置
+ -------------------*/
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ // -webkit-user-select: none;
+ // -moz-user-select: none;
+ /*touch-action: none; */
+ // -webkit-transform: translate3d(0, 0, 0);
+ // -moz-transform: translate3d(0, 0, 0);
+ // -ms-transform: translate3d(0, 0, 0);
+ // transform: translate3d(0, 0, 0);
+}
+
+*:not(input, textarea) {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ //-webkit-touch-callout:none;
+ //user-select: none;
+ //-webkit-user-select: none;
+}
+
+html {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-tap-highlight: rgba(0, 0, 0, 0);
+ -webkit-text-size-adjust: none;
+ overflow: -moz-scrollbars-vertical;
+ width: 100%;
+ height: 100%;
+ font-size: 100px;
+}
+
+body {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ font: normal 12px / auto "Helvetica Neue", Helvetica, "Micorsoft YaHei", Arial,
+ sans-serif;
+ /* -webkit-user-select: none;*/
+}
@font-face {
- font-family: 'alimama';
- src: url(@/assets/font/AlimamaShuHeiTi.ttf) format('truetype');
+ font-family: "alimama";
+ src: url(@/assets/font/AlimamaShuHeiTi.ttf) format("truetype");
+}
+
+@font-face {
+ font-family: "HYYakuHei";
+ src: url(@/assets/font/HYYakuHei-85W.ttf) format("truetype");
+}
+
+@font-face {
+ font-family: "fzcy";
+ src: url(@/assets/font/fzcy.ttf) format("truetype");
+}
+
+@font-face {
+ font-family: "fzzy";
+ src: url(@/assets/font/fzzy.ttf) format("truetype");
}
* {
@@ -57,4 +115,4 @@
flex-direction: column;
align-items: center;
justify-content: center;
-}
\ No newline at end of file
+}