107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<script setup>
|
|
import { debounceTap } from "@/plugins";
|
|
import gsap from "gsap";
|
|
import { Toast } from "vant";
|
|
import { Clipboard } from "v-clipboard";
|
|
import { useMainStore } from "@/store";
|
|
import { onMounted } from "vue";
|
|
|
|
// 页面配置初始化
|
|
const emit = defineEmits(["MyPrizePage"]);
|
|
const userStore = useMainStore();
|
|
|
|
const money = ref(userStore.prizeMoney);
|
|
const code = ref(userStore.prizeCode);
|
|
|
|
const copyFn = (event) => {
|
|
let e = event.target;
|
|
debounceTap(e, () => {
|
|
Clipboard.copy(code.value);
|
|
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: 0.5, autoAlpha: 0, scale: 0.7 });
|
|
};
|
|
|
|
onMounted(() => {
|
|
entryAni();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="MyPrizePage">
|
|
<div class="myPrize-container">
|
|
<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-cls-btn" @click="hide($event)"></div>
|
|
</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(665px, 731px);
|
|
@include bg_pos("prize/myPrize-box.png");
|
|
|
|
.myPrize-money {
|
|
@include pos(370px, 81px, 139px, 239px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #e95b46;
|
|
font-weight: 700;
|
|
font-size: 58px;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.myPrize-code-box {
|
|
@include pos(312px, 52px, 197px, 508px);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.code {
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
margin-right: 10px;
|
|
color: #fff6cc;
|
|
}
|
|
|
|
.myPrize-copy-btn {
|
|
@include box(77px, 39px);
|
|
@include bg_pos("prize/copy-btn.png");
|
|
}
|
|
}
|
|
|
|
.myPrize-cls-btn {
|
|
@include pos(82px, 82px, 517px, 114px);
|
|
@include bg_pos("prize/cls-btn.png");
|
|
}
|
|
}
|
|
}
|
|
</style> |