303 lines
7.0 KiB
Vue
303 lines
7.0 KiB
Vue
<script setup>
|
||
import { gsap } from "gsap";
|
||
import { debounceTap } from "@/plugins";
|
||
import { useMainStore } from "@/store";
|
||
import { posterCreate } from "@/plugins";
|
||
import { Toast } from "vant";
|
||
import QRCode from "qrcode";
|
||
import { reactive } from "vue";
|
||
|
||
// 页面配置初始化
|
||
const emit = defineEmits(["ResultPage"]);
|
||
const userStore = useMainStore();
|
||
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,
|
||
]);
|
||
|
||
// 生成二维码逻辑
|
||
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,
|
||
});
|
||
});
|
||
|
||
// 生成海报逻辑
|
||
const createPoster = (event) => {
|
||
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})
|
||
});
|
||
};
|
||
|
||
// 去抽奖
|
||
const goDraw = (event) => {
|
||
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 });
|
||
});
|
||
};
|
||
|
||
// 展示分享
|
||
const goShare = (event) => {
|
||
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-' + 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>
|
||
<!-- 海报弹窗 -->
|
||
<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" >
|
||
<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;
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
|
||
.cls-btn-box {
|
||
width: 617px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.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);
|
||
}
|
||
|
||
.go-draw {
|
||
@include box(337px, 151px);
|
||
@include bg_pos("result/go-draw-btn.png");
|
||
position: relative;
|
||
}
|
||
|
||
.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;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style> |