完成大概流程
This commit is contained in:
梁泽军
@@ -10,15 +10,23 @@ import { reactive } from "vue";
|
||||
// 页面配置初始化
|
||||
const emit = defineEmits(["ResultPage"]);
|
||||
const userStore = useMainStore();
|
||||
const posterId = ref(userStore.posterId); //海报背景id：1～4
|
||||
const posterId = ref(userStore.posterId); //海报背景id：1～11
|
||||
|
||||
console.log('海报id', posterId.value);
|
||||
|
||||
|
||||
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/poster/poster-1.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-2.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-3.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-4.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-5.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-6.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-7.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-8.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-9.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-10.jpg`, import.meta.url).href,
|
||||
new URL(`../assets/images/poster/poster-11.jpg`, import.meta.url).href,
|
||||
])
|
||||
|
||||
// 生成二维码逻辑
|
||||
@@ -28,8 +36,6 @@ onMounted(async () => {
|
||||
// 执行任务队列
|
||||
await executeTasks();
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -48,16 +54,17 @@ const executeTasks = async () => {
|
||||
|
||||
|
||||
if (posterImgList[posterId.value - 1] && eqcodePic.value) {
|
||||
await posterCreate(
|
||||
|
||||
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 } },
|
||||
]
|
||||
);
|
||||
}else{
|
||||
Toast.fail({message:'生成失败'})
|
||||
emit("ResultPage",{action: 'hide'})
|
||||
} else {
|
||||
Toast.fail({ message: '生成失败' })
|
||||
emit("ResultPage", { action: 'hide' })
|
||||
}
|
||||
|
||||
};
|
||||
@@ -75,13 +82,14 @@ const showPoster = () => {
|
||||
});
|
||||
gsap.from(".poster-box", {
|
||||
duration: 0.7,
|
||||
scale: 1.4,
|
||||
scale: 0.6,
|
||||
autoAlpha: 0,
|
||||
});
|
||||
gsap.from(".save-tips", {
|
||||
duration: 0.7,
|
||||
scale: 0.7,
|
||||
autoAlpha: 0,
|
||||
delay: 0.3
|
||||
});
|
||||
gsap.from(".go-draw", {
|
||||
duration: 0.7,
|
||||
@@ -99,35 +107,6 @@ const showPoster = () => {
|
||||
}
|
||||
|
||||
|
||||
// 生成海报逻辑
|
||||
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 },
|
||||
},
|
||||
],
|
||||
);
|
||||
|
||||
// gsap.to('.posterPop',{duration:0.5,autoAlpha:1})
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
// 去抽奖
|
||||
const goDraw = (event) => {
|
||||
let e = event.target;
|
||||
@@ -201,6 +180,7 @@ const posterCreate = (option, imageArr) => {
|
||||
//Promise的.all方法，当所有预加载的图像加载好的回调函数
|
||||
Promise.all(loader_p)
|
||||
.then(imgList => {
|
||||
console.log('imgList', imgList);
|
||||
|
||||
// 图片素材遍历绘制
|
||||
imgList.map((item, index) => {
|
||||
@@ -344,15 +324,47 @@ const posterCreate = (option, imageArr) => {
|
||||
}
|
||||
|
||||
.product-1 {
|
||||
@include bg_pos("result/product-1.png");
|
||||
@include bg_pos("poster/card-1.png");
|
||||
}
|
||||
|
||||
.product-2 {
|
||||
@include bg_pos("result/product-2.png");
|
||||
@include bg_pos("poster/card-2.png");
|
||||
}
|
||||
|
||||
.product-3 {
|
||||
@include bg_pos("result/product-3.png");
|
||||
@include bg_pos("poster/card-3.png");
|
||||
}
|
||||
|
||||
.product-4 {
|
||||
@include bg_pos("poster/card-4.png");
|
||||
}
|
||||
|
||||
.product-5 {
|
||||
@include bg_pos("poster/card-5.png");
|
||||
}
|
||||
|
||||
.product-6 {
|
||||
@include bg_pos("poster/card-6.png");
|
||||
}
|
||||
|
||||
.product-7 {
|
||||
@include bg_pos("poster/card-7.png");
|
||||
}
|
||||
|
||||
.product-8 {
|
||||
@include bg_pos("poster/card-8.png");
|
||||
}
|
||||
|
||||
.product-9 {
|
||||
@include bg_pos("poster/card-9.png");
|
||||
}
|
||||
|
||||
.product-10 {
|
||||
@include bg_pos("poster/card-10.png");
|
||||
}
|
||||
|
||||
.product-11 {
|
||||
@include bg_pos("poster/card-11.png");
|
||||
}
|
||||
|
||||
.result-tips {
|
||||
@@ -410,15 +422,47 @@ const posterCreate = (option, imageArr) => {
|
||||
}
|
||||
|
||||
.poster-1 {
|
||||
@include bg_pos("result/preveiw-1.png");
|
||||
@include bg_pos("poster/card-1.png");
|
||||
}
|
||||
|
||||
.poster-2 {
|
||||
@include bg_pos("result/preveiw-2.png");
|
||||
@include bg_pos("poster/card-2.png");
|
||||
}
|
||||
|
||||
.poster-3 {
|
||||
@include bg_pos("result/preveiw-3.png");
|
||||
@include bg_pos("poster/card-3.png");
|
||||
}
|
||||
|
||||
.poster-4 {
|
||||
@include bg_pos("poster/card-4.png");
|
||||
}
|
||||
|
||||
.poster-5 {
|
||||
@include bg_pos("poster/card-5.png");
|
||||
}
|
||||
|
||||
.poster-6 {
|
||||
@include bg_pos("poster/card-6.png");
|
||||
}
|
||||
|
||||
.poster-7 {
|
||||
@include bg_pos("poster/card-7.png");
|
||||
}
|
||||
|
||||
.poster-8 {
|
||||
@include bg_pos("poster/card-8.png");
|
||||
}
|
||||
|
||||
.poster-9 {
|
||||
@include bg_pos("poster/card-9.png");
|
||||
}
|
||||
|
||||
.poster-10 {
|
||||
@include bg_pos("poster/card-10.png");
|
||||
}
|
||||
|
||||
.poster-11 {
|
||||
@include bg_pos("poster/card-11.png");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user