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

切图完成

Browse Source
This commit is contained in:
梁泽军
2024-07-18 18:31:47 +08:00
parent e8fbcd48aa
commit bc1454a0e6
95 changed files with 1046 additions and 847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
src/components/Result.vue
View File

@@ -10,372 +10,294 @@ import { reactive } from "vue";
// 页面配置初始化
const emit = defineEmits(["ResultPage"]);
const userStore = useMainStore();
const posterId = ref(userStore.posterId); //海报背景id：1～4
const posterId = ref(Math.floor(Math.random() * 3) + 1); //海报背景id：1～3
const posterTextSrc = new URL(`../assets/images/result/poster-text.png`, import.meta.url).href
const posterImgList = reactive([
new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-4.jpg`, import.meta.url).href,
])
new URL(`../assets/images/result/poster-1.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-2.jpg`, import.meta.url).href,
new URL(`../assets/images/result/poster-3.jpg`, import.meta.url).href,
]);
// 生成二维码逻辑
const eqcodePic = ref();
onMounted(() => {
console.log('posterId:',posterId.value);
let eqCodeUrl = import.meta.env.VITE_URL;
QRCode.toDataURL(eqCodeUrl)
.then((url) => {
eqcodePic.value = url;
// console.log("eq", eqcodePic.value);
})
.catch((err) => {
console.error(err);
});
gsap.from(".result-bg", {
duration: 0.7,
scale: 1.2,
autoAlpha: 0,
console.log("posterId:", posterId.value);
let eqCodeUrl = import.meta.env.VITE_URL;
QRCode.toDataURL(eqCodeUrl)
.then((url) => {
eqcodePic.value = url;
// console.log("eq", eqcodePic.value);
})
.catch((err) => {
console.error(err);
});
gsap.from(".result-larnten-box", {
duration: 0.7,
scale: 1.4,
autoAlpha: 0,
});
gsap.from(".result-larnten", {
duration: 0.7,
scale: 0.7,
autoAlpha: 0,
});
gsap.from(".result-blessing-1", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:0.5
});
gsap.from(".result-blessing-2", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:0.7
});
gsap.from(".result-product", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1
});
gsap.from(".result-tips", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1.2
});
gsap.from(".create-poster", {
duration: 0.7,
y: -30,
autoAlpha: 0,
delay:1.4,
onComplete:()=>{
// gsap.to('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
let gl = gsap.timeline({repeat:-1,yoyo:true})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'3deg',ease:'none'})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'0deg',ease:'none'})
gl.to('.result-larnten',{duration:1,transformOrigin:'50% 0%',rotation:'-3deg',ease:'none'})
// gsap.fo('.result-larnten',{duration:5,transformOrigin:'50% 0%',rotation:'10deg',repeat:-1,yoyo:true,ease:'none'})
}
});
gsap.from(".result-bg", {
duration: 0.7,
scale: 1.2,
autoAlpha: 0,
});
});
// 生成海报逻辑
const createPoster = (event) => {
let e = event.target;
debounceTap(e, () => {
// 海报生成
posterCreate(
{ width: 750, height: 1334 }, //海报尺寸
// 海报素材，按顺序依次渲染
[
// 背景
{
name: "bg",
src: posterImgList[posterId.value-1],
pos: { w: 750, h: 1334, x: 0, y: 0 },
},
// 二维码
{
name: "eqcode",
src: eqcodePic.value,
pos: { w: 164, h: 164, x: 159, y: 1122 },
},
],
);
let e = event.target.parentElement;
debounceTap(e, () => {
// 海报生成
posterCreate(
{ width: 750, height: 1334 }, //海报尺寸
// 海报素材，按顺序依次渲染
[
// 背景
{
name: "bg",
src: posterImgList[posterId.value - 1],
pos: { w: 750, h: 1334, x: 0, y: 0 },
},
// 二维码
{
name: "eqcode",
src: eqcodePic.value,
pos: { w: 194, h: 195, x: 502, y: 1090 },
},
// 文案
{
name: "text",
src: posterTextSrc,
pos: { w: 337, h: 117, x: 81, y: 1133 },
},
]
);
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
});
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
});
};
// 去抽奖
const goDraw = (event) => {
let e = event.target;
debounceTap(e, () => {
if (userStore.hasDraw) {
emit("ResultPage", { action: "showDraw" });
} else {
Toast("今日暂无抽奖机会");
}
});
let e = event.target.parentElement;
console.log('e',e);
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 });
});
let e = event.target;
debounceTap(e, () => {
gsap.to(".posterPop", { duration: 0.5, autoAlpha: 0 });
});
};
// 展示分享
const goShare = (event) => {
let e = event.target;
debounceTap(e, () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
});
let e = event.target;
debounceTap(e, () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 1 });
});
};
// 隐藏分享提示
const hideShare = () => {
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
gsap.to(".sharePop", { duration: 0.5, autoAlpha: 0 });
};
</script>
<template>
<div class="ResultPage" @touchmove.prevent>
<div class="result-bg"></div>
<div class="result-container">
<div class="result-larnten-box" :class="'larnten-box-'+posterId"></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 class="ResultPage" @touchmove.prevent>
<div :class="'result-bg-' + posterId"></div>
<div class="result-container">
<!-- 标题 -->
<div class="result-title"></div>
<!-- 文案 -->
<div :class="'r-text-' + posterId" class="r-text"></div>
<!-- 生成海报按钮 -->
<div class="create-poster" >
<div class="r-click-area" @click="createPoster($event)"></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">
<div class="poster" :class="'poster-'+posterId">
<img id="posterSrc" src="" alt="" srcset="">
</div>
</div>
<div class="save-tips">*长按保存海报</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="posterPop" @touchmove.prevent>
<div class="cls-btn-box">
<div class="cls-btn" @click="hidePop($event)"></div>
</div>
<!-- 分享提示 -->
<div class="sharePop" @click="hideShare">
<div class="tips-pic"></div>
<div class="tips-text">点击右上角分享给你的好友！</div>
<div class="poster-box">
<div class="poster" :class="'poster-' + posterId">
<img id="posterSrc" src="" alt="" srcset="" />
</div>
</div>
<div class="save-tips">*长按保存海报</div>
<div class="btn-box">
<div class="go-draw" >
<div class="r-click-area" @click="goDraw($event)"></div>
</div>
<div class="go-share" >
<div class="r-click-area" @click="goShare($event)"></div>
</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%);
@include bg_pos("result/bg.jpg");
transform: translateY(-50%);
pointer-events: none;
.result-bg-1 {
@include pos(750px, 1624px, 0px, 50%);
@include bg_pos("result/r-bg-1.jpg");
transform: translateY(-50%);
pointer-events: none;
}
.result-bg-2 {
@include pos(750px, 1624px, 0px, 50%);
@include bg_pos("result/r-bg-2.jpg");
transform: translateY(-50%);
pointer-events: none;
}
.result-bg-3 {
@include pos(750px, 1624px, 0px, 50%);
@include bg_pos("result/r-bg-3.jpg");
transform: translateY(-50%);
pointer-events: none;
}
.result-container {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.result-title {
@include pos(537px, 116px, 118px, 258px);
@include bg_pos("result/title.png");
pointer-events: none;
}
.result-container {
@include pos(750px, 1624px, 0px, 50%);
transform: translateY(-50%);
.larnten-box-1{
@include pos(437px, 809px, 283px, 181px);
@include bg_pos("result/larnten-box-1.png");
}
.larnten-box-2{
@include pos(423px, 790px, 304px, 178px);
@include bg_pos("result/larnten-box-2.png");
}
.larnten-box-3{
@include pos(447px, 807px, 280px, 170px);
@include bg_pos("result/larnten-box-3.png");
}
.larnten-1{
@include pos(397px, 787px, 315px, 297px);
@include bg_pos("result/larnten-1.png");
}
.larnten-2{
@include pos(444px, 771px, 306px, 302px);
@include bg_pos("result/larnten-2.png");
}
.larnten-3{
@include pos(472px, 789px, 278px, 285px);
@include bg_pos("result/larnten-3.png");
}
.blessing-1-1{
@include pos(86px, 565px, 70px, 347px);
@include bg_pos("result/blessing-text-1-1.png");
}
.blessing-1-2{
@include pos(82px, 561px, 165px, 347px);
@include bg_pos("result/blessing-text-1-2.png");
}
.blessing-2-1{
@include pos(86px, 563px, 70px, 347px);
@include bg_pos("result/blessing-text-2-1.png");
}
.blessing-2-2{
@include pos(88px, 565px, 165px, 347px);
@include bg_pos("result/blessing-text-2-2.png");
}
.blessing-3-1{
@include pos(86px, 568px, 70px, 347px);
@include bg_pos("result/blessing-text-3-1.png");
}
.blessing-3-2{
@include pos(87px, 563px, 165px, 347px);
@include bg_pos("result/blessing-text-3-2.png");
}
.result-product{
@include pos(619px, 138px, 65px, 1015px);
}
.product-1{
@include bg_pos("result/product-1.png");
}
.product-2{
@include bg_pos("result/product-2.png");
}
.product-3{
@include bg_pos("result/product-3.png");
}
.result-tips{
@include pos(645px, 71px, 52px, 1183px);
@include bg_pos("result/text.png");
}
.create-poster{
@include pos(237px, 80px, 257px, 1284px);
@include bg_pos("result/create-btn.png");
}
.r-text {
pointer-events: none;
}
.r-text-1 {
@include pos(638px, 814px, 67px, 396px);
@include bg_pos("result/text-1.png");
}
.r-text-2 {
@include pos(643px, 814px, 67px, 396px);
@include bg_pos("result/text-2.png");
}
.r-text-3 {
@include pos(643px, 844px, 63px, 392px);
@include bg_pos("result/text-3.png");
}
.create-poster {
@include pos(337px, 151px, 206px, 1253px);
@include bg_pos("result/create-btn.png");
.r-click-area {
@include pos(256px, 69px, 35px, 14px);
}
}
}
}
.posterPop {
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.6);
visibility: hidden;
@include fixed();
@include flexCen();
background-color: rgba($color: #000000, $alpha: 0.6);
visibility: hidden;
.cls-btn-box {
width: 617px;
display: flex;
justify-content: flex-end;
.cls-btn-box {
width: 617px;
display: flex;
justify-content: flex-end;
.cls-btn {
@include box(49px, 49px);
@include bg_pos("result/cls-btn.png");
margin-right: -20px;
}
.cls-btn {
@include box(43px, 43px);
@include bg_pos("result/cls-btn.png");
margin-right: -20px;
}
}
.save-tips {
font-size: 20px;
line-height: 20px;
margin-top: 20px;
color: #fff;
letter-spacing: 2px;
}
.poster-box {
@include box(617px, 881px);
margin-top: 20px;
overflow: hidden;
.poster {
@include box(100%, 100%);
overflow: hidden;
display: flex;
justify-content: center;
#posterSrc {
// @include box(100%, 100%);
width: 80%;
border: 1px solid #fff;
border-radius: 20px;
// opacity: 0;
}
}
}
.btn-box {
@include box(650px, 76px);
display: flex;
justify-content: space-around;
margin-top: 20px;
.r-click-area {
@include pos(256px, 69px, 35px, 14px);
}
.save-tips {
font-size: 20px;
line-height: 20px;
margin-top: 20px;
color: #fff;
letter-spacing: 2px;
.go-draw {
@include box(337px, 151px);
@include bg_pos("result/go-draw-btn.png");
position: relative;
}
.poster-box {
@include box(617px, 881px);
margin-top: 20px;
overflow: hidden;
.poster {
@include box(100%, 100%);
overflow: hidden;
#posterSrc{
@include box(100%, 100%);
opacity: 0;
}
}
.poster-1{
@include bg_pos("result/preveiw-1.png");
}
.poster-2{
@include bg_pos("result/preveiw-2.png");
}
.poster-3{
@include bg_pos("result/preveiw-3.png");
}
}
.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");
}
.go-share {
@include box(337px, 151px);
@include bg_pos("result/go-share-btn.png");
position: relative;
}
}
}
.sharePop {
@include fixed();
background-color: rgba($color: #000000, $alpha: 0.54);
visibility: hidden;
@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-pic {
@include pos(100px, 100px, 600px, 100px);
@include bg_pos("result/share-tips.svg");
stroke: #ffffff;
}
.tips-text {
font-size: 25px;
@include pos(750px, 100px, 0px, 220px);
color: #ffffff;
text-align: right;
}
.tips-text {
font-size: 25px;
@include pos(750px, 100px, 0px, 220px);
color: #ffffff;
text-align: right;
}
}
</style>