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

新增海报生成页、H5端流程大致走通，差抽奖验证的逻辑，以及海报元素的对应关系

Browse Source
This commit is contained in:
Andy Leong
2024-01-19 20:22:31 +08:00
parent cac9a17d36
commit fc0d5fce8c
37 changed files with 654 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Draw.vue
View File

@@ -4,7 +4,7 @@ import { addPoint, debounceTap } from '@/plugins'
import { Toast } from "vant";
import { Clipboard } from "v-clipboard";
import { useMainStore } from "@/store";
// import { drawApi } from '@/api'
import { drawApi } from '@/api'
// 页面配置初始化
@@ -28,27 +28,34 @@ const drawFn = (event) => {
})
gsap.fromTo(e, { rotation: '-30' }, { rotation: '+30', repeat: -1, yoyo: true, ease: 'none', duration: 0.3 })
// const res = await drawApi({})
const res = await draw({},userStore.token)
if(res.code == 0){
// isDrawn后端判断有没有中将
hasPrize.value = res.data.isDrawn == 1 ? true : false // true 中奖 || false 未中奖
if(res.data.isDrawn == 1){
hasPrize.value = true
}else{
try {
const res = await drawApi({}, userStore.token)
if (res.code == 0) {
// isDrawn后端判断有没有中奖
hasPrize.value = res.data.isDrawn == 1 ? true : false // true 中奖 || false 未中奖
// if (res.data.isDrawn == 1) {
// hasPrize.value = true
// } else {
// hasPrize.value = false
// }
} else {
hasPrize.value = false // true 中奖 || false 未中奖
}
}else{
hasPrize.value = false // true 中奖 || false 未中奖
} catch (e) {
console.log('有才有无');
hasPrize.value = false
}
showResult.value = true
console.log("showResult:", showResult.value);
Toast.clear()
gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
gsap.killTweensOf('.draw-light,.draw')
userStore.updateDraw()
setTimeout(() => {
Toast.clear()
showResult.value = true
gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
gsap.killTweensOf('.draw-light,.draw')
}, 1000)
// setTimeout(() => {
// hasPrize.value = false // true 中奖 || false 未中奖

38
src/components/Index.vue
View File

@@ -1,20 +1,19 @@
<script setup>
import { Toast } from "vant";
import { Toast } from "vant";
import { debounceTap } from "@/plugins";
import gsap from "gsap";
import {draw} from '@/api'
import {useMainStore} from '@/store'
import { useMainStore } from '@/store'
const emit = defineEmits(["IndexPage"]);
const userStore = useMainStore()
const start = (event) => {
const start = (event) => {
debounceTap(event.target, () => {
emit("IndexPage", { action: "start" });
gsap.to(".IndexPage", {
duration: 0.5,
autoAlpha: 0,
onComplete: () => {},
onComplete: () => { },
});
});
};
@@ -26,6 +25,14 @@ const showMyPrize = (event) => {
});
};
const showRule = (event) => {
let e = event.target;
debounceTap(e, () => {
emit("IndexPage", { action: "showRule" });
});
};
const clockAni = () => {
gsap.to(".index-clock-h", {
duration: 12,
@@ -64,18 +71,14 @@ onMounted(() => {
</div>
<div class="index-container">
<div class="index-title"></div>
<div class="index-rule-btn"></div>
<div class="index-prize-btn" @click="showMyPrize($event)"></div>
<div class="index-rule-btn" @click="showRule($event)"></div>
<div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
<div class="index-start-btn" @click="start"></div>
<div class="index-agreement">
风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
class="b"
>本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
class="b"
>理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
>金融消费者不得利用金融产品和服务从事违法活动。
class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
</div>
</div>
</div>
@@ -90,21 +93,26 @@ onMounted(() => {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
@include bg_pos("index/bg.jpg");
.index-clock-box {
@include pos(125px, 125px, 213px, 700px);
@include bg_pos("load/clock-bg.png");
.index-clock-circle {
@include pos(13px, 13px, 57px, 55px);
@include bg_pos("load/clock-circle.png");
}
.index-clock-s {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-second.png");
}
.index-clock-m {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-minute.png");
}
.index-clock-h {
@include pos(125px, 125px, 0px, 0px);
@include bg_pos("load/clock-hour.png");
@@ -147,9 +155,11 @@ onMounted(() => {
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
.b {
font-weight: 700;
}
.orange {
color: #ea5404;
}

348
src/components/Result.vue
View File

@@ -4,11 +4,14 @@ import { debounceTap } from "@/plugins";
import { useMainStore } from "@/store";
import { mbtiList } from "@/data";
import { posterCreate } from '@/plugins'
import { Toast } from "vant";
import { onBeforeMount } from "vue";
import { computed } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
let bgId = ref(1);
let bgId = ref(1); //海报背景id：1～4
const bgPic = computed(() => {
return new URL(
`../assets/images/result/bg-${bgId.value}.jpg`,
@@ -16,11 +19,20 @@ const bgPic = computed(() => {
).href;
});
const mbti = ref(userStore.MBTI);
// 主题配色
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 changBg = (event, number) => {
let e = event.target;
if (number == bgId.value) return;
@@ -39,44 +51,146 @@ const createPoster = (event) => {
debounceTap(e, () => {
// 海报生成
posterCreate(
{ width: 750, height: 1450 }, //海报尺寸
{ width: 750, height: 1500 }, //海报尺寸
// 海报素材，按顺序依次渲染
[
// 背景
{
src: new URL(`@/assets/images/result/bg-2.jpg`, import.meta.url).href,
pos: { w: 750, h: 1624, x: 0, y: 0 }
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 }
}
},
{
src: new URL(`@/assets/images/qa/question.png`, import.meta.url).href,
pos: { w: 250, h: 1624, x: 0, y: 0 }
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 }
}
},
{
src: new URL(`@/assets/images/qa/showResult-btn.png`, import.meta.url).href,
pos: { w: 250, h: 124, x: 0, y: 0 }
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('暂无抽奖机会')
}
})
}
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 })
})
}
</script>
<template>
<div class="ResultPage">
<div class="ResultPage" @touchmove.prevent>
<div class="result-bg">
<img :src="bgPic" alt="" srcset="" />
</div>
<div class="result-container">
结果页:{{ mbti || "没结果" }}
<div class="bg-tab">
<div :class="{ active: bgId == item }" v-for="item in 4" class="li" @click="changBg($event, item)">
{{ item }}
<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 @click="createPoster($event)">生成海报</div>
<div style="width: 500px;height: 700px;">
<img class="pic" src="" alt="" srcset="">
<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>
<img id="poster" alt="" srcset="">
</div>
</div>
<!-- 海报弹窗 -->
<div class="posterPop" @touchmove.prevent>
<div class="cls-btn" @click="hidePop($event)"></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>
</template>
@@ -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");
}
}
}
</style>

98
src/components/Rule.vue
View File

@@ -4,11 +4,58 @@ import { debounceTap } from '@/plugins'
// 页面配置初始化
const emit = defineEmits(["RulePage"]);
const hide = (event) => {
debounceTap(event.target, () => {
emit('RulePage', { action: 'hide' })
})
}
</script>
<template>
<div class="RulePage">
规则页面
<div class="rule-container">
<div class="content">
<div class="rule-content">
<div class="rule-text-area">
<div class="part">
<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></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="rule-cls-btn" @click="hide($event)"></div>
<div class="rule-arrow"></div>
</div>
<div class="rule-caidai"></div>
</div>
</div>
</template>
@@ -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;
}
}
}
</style>