奖品状态判断

This commit is contained in:
2024-07-19 13:39:30 +08:00
parent bc1454a0e6
commit 6ea3f3da78
20 changed files with 39 additions and 6 deletions

View File

@@ -13,6 +13,8 @@ const { toClipboard } = useClipboard();
const money = ref(userStore.prizeMoney);
const code = ref(userStore.prizeCode);
const hasPrize = ref(userStore.hasPrize);
const copyFn = (event) => {
let e = event.target;
@@ -48,7 +50,7 @@ onMounted(() => {
<template>
<div class="MyPrizePage">
<div class="myPrize-container">
<div class="myPrize-has-prize">
<div v-if="hasPrize" class="myPrize-has-prize">
<div class="myPrize-icon"></div>
<div class="myPrize-money">已获得¥{{ money }}元现金红包</div>
<div class="myPrize-code-box">
@@ -57,7 +59,9 @@ onMounted(() => {
</div>
<div class="myPrize-tips">兑换流程前往微信搜索平安理财服务号公众号发送清凉一夏获取兑奖链接输入兑换码兑换奖品</div>
</div>
<div class="myPrize-no-prize">
暂无中奖记录
</div>
</div>
<div class="myPrize-cls-btn" @click="hide($event)"></div>
</div>
@@ -109,7 +113,7 @@ onMounted(() => {
}
.myPrize-copy-btn {
@include box(77px, 39px);
@include box(52px, 25px);
@include bg_pos("prize/copy-btn.png");
}
}
@@ -122,6 +126,17 @@ onMounted(() => {
}
}
.myPrize-no-prize{
@include pos(683px, 485px, 0px, 130px);
display: flex;
flex-direction: column;
// justify-content: space-around;
align-items: center;
color: #6b6b6b;
font-size: 50px;
line-height: 400px;
}
}
.myPrize-cls-btn {

View File

@@ -39,6 +39,24 @@ onMounted(() => {
scale: 1.2,
autoAlpha: 0,
});
gsap.from(".result-title", {
duration: 0.7,
y: 20,
autoAlpha: 0,
delay:0.3,
});
gsap.from(".r-text", {
duration: 0.7,
scale: .5,
autoAlpha: 0,
delay:0.5,
});
gsap.from(".r-click-area", {
duration: 0.7,
y: 20,
autoAlpha: 0,
delay:1,
});
});
// 生成海报逻辑
@@ -112,7 +130,7 @@ const hideShare = () => {
<template>
<div class="ResultPage" @touchmove.prevent>
<div :class="'result-bg-' + posterId"></div>
<div :class="'result-bg-' + posterId" class="result-bg"></div>
<div class="result-container">
<!-- 标题 -->
<div class="result-title"></div>

View File

@@ -33,7 +33,7 @@ onMounted(() => {
<div class="rule-text-area wrapper">
<div>
<div class="part">
<div>活动时间20242月232月25</div>
<div>活动时间20247月318月2日</div>
<div>活动奖励微信红包</div>
</div>
<div class="part">