<template>
    <div class="red-box">
        <div v-show="showRed && showRedInfo.id">
            <div class="default">
                <div class="get-box">
                    <i class="close" @click="_closeRed"></i>
                    <div class="head-box">
                        <div class="title">手机扫描领取红包</div>
                    </div>
                    <div class="ewm">
                        <img
                            :src="`https://console.guangdianyun.tv/qrcode.php?level=L&size=10&text=${slefHref}`"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
    data() {
        return {
            slefHref: ""
        };
    },
    computed: {
        ...mapGetters({
            showRed: "showRed",
            showRedInfo: "showRedInfo"
        })
    },
    mounted() {
        this.slefHref = encodeURIComponent(window.location.href);
    },
    methods: {
        ...mapMutations({
            set_showRed: "set_showRed"
        }),
        _closeRed() {
            this.set_showRed(false);
        }
    }
};
</script>

<style lang="less" scoped>
.red-box {
    .default {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background-color: rgba(0, 0, 0, 0.3);

        .get-box,
        .luck-box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 600px;
            width: 400px;
            margin: auto;

            .close {
                position: absolute;
                right: 10px;
                top: 10px;
                z-index: 2;
                width: 20px;
                height: 20px;
                background: url("./img/red-close.png") no-repeat center center;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
        .get-box {
            z-index: 100;
            background: url("./img/red-bg.png") no-repeat 0 0;
            background-size: 100% 100%;

            .head-box {
                display: table;
                width: 100%;
                height: 22%;
                text-align: center;

                .title {
                    display: table-cell;
                    vertical-align: middle;
                    font-size: 30px;
                    color: #fff;
                }
            }
            .ewm {
                margin: 30px auto;
                width: 300px;
                height: 300px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
