palc-newyear2024/src/components/Draw.vue

<script setup>
import gsap from 'gsap'
import { addPoint, debounceTap } from '@/plugins'
import { Toast } from "vant";
import { Clipboard } from "v-clipboard";
import { useMainStore } from "@/store";
import { drawApi } from '@/api'


// 页面配置初始化
const emit = defineEmits(["DrawPage"]);
const userStore = useMainStore()

const money = ref('8.88')
const code = ref('sss')

const showResult = ref(false)
const hasPrize = ref(true)

const drawFn = (event) => {
    let e = event.target.parentElement
    debounceTap(e, async () => {
        console.log('抽奖');
        Toast.loading({
            message: '抽奖中',
            forbidClick: true,
            duration: 0
        })
        gsap.fromTo(e, { rotation: '-30' }, { rotation: '+30', repeat: -1, yoyo: true, ease: 'none', duration: 0.3 })

        try {
            const res = await drawApi({}, userStore.token)
            if (res.code == 0) {
                // isDrawn后端判断有没有中奖
                hasPrize.value = res.data.isDrawn == 1 ? true : false // true 中奖 || false 未中奖

                // if (res.data.isDrawn == 1) {
                //     hasPrize.value = true
                // } else {
                //     hasPrize.value = false
                // }
            } else {
                hasPrize.value = false  // true 中奖 || false 未中奖
            }

        } catch (e) {
            console.log('有才有无');
            hasPrize.value = false
        }

        userStore.updateDraw()
        setTimeout(() => {
            Toast.clear()
            showResult.value = true
            gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
            gsap.killTweensOf('.draw-light,.draw')
        }, 1000)


        // setTimeout(() => {
        //     hasPrize.value = false  // true 中奖 || false 未中奖
        //     showResult.value = true
        //     console.log("showResult:", showResult.value);
        //     Toast.clear()
        //     gsap.from('.result-container', { duration: 0.5, scale: 0.7, autoAlpha: 0 })
        //     gsap.killTweensOf('.draw-light,.draw')
        // }, 3000)
    })
}

const hide = (event) => {
    let e = event.target;
    debounceTap(e, () => {
        gsap.to('.DrawPage', { duration: 0.3, autoAlpha: 0, onComplete: () => { emit('DrawPage', 'hide') } })
    });
}
const copyFn = (event) => {
    let e = event.target;
    debounceTap(e, () => {
        Clipboard.copy(code.value);
        Toast(`复制成功：${code.value}`);
    });
}

const entryAni = () => {
    gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
    gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
    gsap.from(".draw-light", { duration: 3, rotation: '+=360', ease: 'none', repeat: -1 });
};

onMounted(() => {
    entryAni();
});

</script>


<template>
    <div class="DrawPage" @touchmove.prevent>
        <!-- 抽奖容器 -->
        <div v-show="!showResult" class="draw-container">
            <div class="draw-light"></div>
            <div class="draw-box">
                <div class="draw" @click="drawFn($event)"></div>
            </div>
            <div class="draw-star"></div>
            <div class="draw-tips"></div>
        </div>
        <div v-show="showResult" class="result-container">
            <!-- 有奖品 -->
            <div class="draw-has" v-show="hasPrize">
                <div class="money">¥{{ money }}元</div>
                <div class="code-box">
                    <div class="code">{{ code }}</div>
                    <div class="copy-btn" @click="copyFn($event)"></div>
                </div>
                <div class="cls-btn" @click="hide($event)"></div>
            </div>
            <!-- 没有奖品 -->
            <div class="draw-none" v-show="!hasPrize">
                <div class="none-prize"></div>
                <div class="cls-btn" @click="hide($event)"></div>
            </div>
        </div>

    </div>
</template>  

<style lang="scss" scoped>
.DrawPage {
    @include fixed();
    @include flexCen();
    background-color: rgba($color: #000000, $alpha: 0.8);

    // 抽奖弹窗样式
    .draw-container {
        @include box(685px, 694px);
        position: relative;

        .draw-light {
            pointer-events: none;
            @include pos(685px, 694px, 0px, 0px);
            @include bg_pos("prize/light.png");
        }

        .draw-star {
            pointer-events: none;
            @include pos(515px, 551px, 89px, 56px);
            @include bg_pos("prize/star.png");
        }

        .draw-box {
            @include pos(690px, 680px, 0px, 0px);
            @include bg_pos("prize/draw-box.png");

            .draw {
                @include pos(350px, 347px, 164px, 172px);
            }
        }

        .draw-tips {
            pointer-events: none;
            @include pos(187px, 34px, 250px, 605px);
            @include bg_pos("prize/tips.png");
        }
    }

    // 中奖弹窗样式
    .draw-has {
        position: relative;
        @include box(665px, 731px);
        @include bg_pos("prize/myPrize-box.png");

        .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;
        }

        .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;
            }

            .copy-btn {
                @include box(77px, 39px);
                @include bg_pos("prize/copy-btn.png");
            }
        }

        .cls-btn {
            @include pos(82px, 82px, 517px, 114px);
            @include bg_pos("prize/cls-btn.png");
        }
    }

    // 未中奖弹窗样式
    .draw-none {
        @include flexCen();

        .none-prize {
            @include box(521px, 447px);
            @include bg_pos("prize/no-prize.png");
        }

        .cls-btn {
            @include box(82px, 82px);
            @include bg_pos("prize/cls-btn.png");
            margin-top: 40px;
        }
    }
}
</style>