148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<script setup>
|
|
import { debounceTap } from "@/plugins";
|
|
import gsap from "gsap";
|
|
import { Toast } from "vant";
|
|
import useClipboard from "vue-clipboard3";
|
|
import { useMainStore } from "@/store";
|
|
import { onMounted } from "vue";
|
|
|
|
// 页面配置初始化
|
|
const emit = defineEmits(["MyPrizePage"]);
|
|
const userStore = useMainStore();
|
|
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;
|
|
toClipboard(code.value);
|
|
debounceTap(e, () => {
|
|
Toast(`复制成功：${code.value}`);
|
|
});
|
|
};
|
|
|
|
const hide = (event) => {
|
|
let e = event.target;
|
|
debounceTap(e, () => {
|
|
gsap.to(".MyPrizePage", {
|
|
duration: 0.4,
|
|
autoAlpha: 0,
|
|
onComplete: () => {
|
|
emit("MyPrizePage", { action: "hide" });
|
|
},
|
|
});
|
|
});
|
|
};
|
|
|
|
const entryAni = () => {
|
|
gsap.from(".MyPrizePage", { duration: 0.2, autoAlpha: 0 });
|
|
gsap.from(".myPrize-container", { duration: 1, autoAlpha: 0, scale: 0.7 });
|
|
};
|
|
|
|
onMounted(() => {
|
|
entryAni();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="MyPrizePage">
|
|
<div class="myPrize-container">
|
|
<div v-if="hasPrize" class="myPrize-has-prize">
|
|
<div class="myPrize-icon"></div>
|
|
<div class="myPrize-money">已获得¥{{ money }}元现金红包</div>
|
|
<div class="myPrize-code-box">
|
|
<div class="code">兑换码：{{ code }}</div>
|
|
<div class="myPrize-copy-btn" @click="copyFn($event)"></div>
|
|
</div>
|
|
<div class="myPrize-tips">兑换流程：前往微信搜索【平安理财服务号】公众号发送“清凉一夏”获取兑奖链接，输入兑换码兑换奖品。</div>
|
|
</div>
|
|
<div class="myPrize-no-prize">
|
|
暂无中奖记录
|
|
</div>
|
|
</div>
|
|
<div class="myPrize-cls-btn" @click="hide($event)"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.MyPrizePage {
|
|
@include fixed();
|
|
@include flexCen();
|
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
|
|
|
.myPrize-container {
|
|
position: relative;
|
|
@include box(683px, 585px);
|
|
@include bg_pos("prize/prize-box.png");
|
|
|
|
.myPrize-has-prize {
|
|
@include pos(683px, 485px, 0px, 130px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-around;
|
|
align-items: center;
|
|
color: #0070d9;
|
|
|
|
.myPrize-icon {
|
|
@include box(204px, 214px);
|
|
@include bg_pos("prize/lucky-bag.png");
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.myPrize-money {
|
|
align-items: center;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.myPrize-code-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 70%;
|
|
|
|
.code {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-right: 10px;
|
|
color: #0070d9;
|
|
}
|
|
|
|
.myPrize-copy-btn {
|
|
@include box(52px, 25px);
|
|
@include bg_pos("prize/copy-btn.png");
|
|
}
|
|
}
|
|
|
|
.myPrize-tips{
|
|
width: 70%;
|
|
font-size: 20px;
|
|
// padding: 0px 100px;
|
|
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
@include box(43px, 43px);
|
|
@include bg_pos("prize/cls-btn.png");
|
|
margin-top: 50px;
|
|
}
|
|
}
|
|
</style> |