zszq-celebration-88/src/components/MyPrize.vue

<template>
    <div class="myPrizeCon" @touchmove.prevent>
        <div class="myPrize_container">
            <div class="cake"></div>
            <div class="prize_box">
                <div class="prize_top">
                    <div class="prize_title"></div>
                </div>
                <div class="prize_middle">
                    <div class="prize_item" v-for="item in prizeList" v-show="item.isHas">
                        <div class="prize_li">
                            <div class="prize_num">{{ item.prizeNum }}元红包</div>
                            <div class="prize_spe">{{ item.spe }}</div>
                        </div>
                        <div class="buttom">
                            <img
                                :src="item.isGeted ? require('../assets/img/pop/view_btn.png') : require('../assets/img/pop/got_btn.png')" />
                        </div>
                    </div>
                </div>
                <div class="prize_bottom"></div>
            </div>
            <div class="cls_btn" @click="hide"></div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, onMounted, defineEmits, defineProps, reactive, ref, toRefs } from 'vue'
import gsap from "gsap";
import axios from 'axios'
import { Toast } from 'vant';
import { useStore } from "vuex";

// 初始化
const emit = defineEmits(["MyPrize"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore()


const prizeList = reactive([
    {
        id: 1,
        prizeNum: 8.8,
        isGeted: true,
        isHas: true,
        spe: '财富88，与“礼”共见证',
    },
    {
        id: 2,
        prizeNum: 8.8,
        isGeted: false,
        isHas: true,
        spe: '添加专属服务人员企微',

    },
])


// 页面挂载前
onBeforeMount(() => { })





// 页面挂载后
onMounted(() => {
    gsap.from('.myPrizeCon', { duration: 0.3, autoAlpha: 0 })
    gsap.from('.myPrize_container', { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 })
    // gsap.from('.rule_cls_btn', { duration: 0.3, y: 20, autoAlpha: 0, delay: 0.5 })
})

const hide = () => {
    emit('MyPrize')
}



</script>

<style lang="scss" scoped>
.myPrizeCon {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);

    .myPrize_container {
        width: 750px;
        height: 1180px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .cake {
            width: 382px;
            height: 201px;
            @include bg_pos('../assets/img/pop/cake.png');
            z-index: 999;
        }

        .prize_box {
            width: 550px;
            margin-top: -34px;

            .prize_top {
                width: 550px;
                height: 135px;
                @include bg_pos('../assets/img/pop/prize_box_top.png');
                pointer-events: none;
                display: flex;
                justify-content: center;
                align-items: center;

                .prize_title {
                    width: 267px;
                    height: 58px;
                    @include bg_pos('../assets/img/pop/my_prize.png');
                }
            }

            .prize_middle {
                width: 550px;
                height: 190px;
                @include bg_pos('../assets/img/pop/prize_box_middle.png');
                margin-top: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;


                .prize_item {
                    width: 463px;
                    height: 67px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: row;
                    margin: 20px auto;
                    padding-bottom: 10px;

                    .prize_li {
                        display: flex;
                        // justify-content: center;
                        // align-items: center;
                        flex-direction: column;

                        .prize_num {
                            color: #ca2f0a;
                            font-weight: 700;
                            font-size: 30px;
                        }

                        .prize_spe {
                            color: #ca2f0a;
                            font-weight: 700;
                            font-size: 24px;
                            margin-top: 5px;
                        }

                    }

                    .buttom {
                        width: 147px;
                        height: 62px;
                        background-size: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }


                }
            }

            .prize_bottom {
                width: 550px;
                height: 50px;
                @include bg_pos('../assets/img/pop/prize_box_bottom.png');
                margin-top: 0px;

            }

        }

        .cls_btn {
            @include box(72px, 72px);
            @include bg_pos('../assets/img/pop/cls_btn.png');
            margin-top: 50px;
        }
    }








}
</style>