de-net/src/view/iframe/publish/components/get-more.vue

<template>
    <div class="get-more-btns" v-if="props.style_type == 3">
        <div class="get-more-btn" @click="jumpMore">
            <img width="22" :src="require('@/assets/svg/icon-wallet-success.svg')" />
            <span>View wallet</span>
        </div>
        <div class="get-more-btn" @click="jumpMore">
            <img width="22" :src="require('@/assets/svg/icon-big-give.svg')" />
            <span>Get More Giveaway</span>
        </div>
    </div>
    <div class="getMore" @click="jumpMore" v-if="props.style_type == 1">
        <img width="20" :src="require('@/assets/svg/icon-big-give.svg')" />
        <span>Get More Giveaway</span>
        <img height="20" :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
    </div>
    <div class="get_more" v-if="props.style_type == 2" @click="jumpMore">
        <img width="18" :src="require('@/assets/svg/icon-big-give.svg')" />
        <span>Get More Giveaway</span>
    </div>
    <div v-if="style_type == 4" @click="jumpMore">
        <slot></slot>
    </div>
</template>

<script setup>
import { getFrontConfig } from "@/http/account";
import { number } from "mathjs";
import { onBeforeMount, ref, defineProps } from "vue";
import Report from "@/log-center/log"

const props = defineProps({
    style_type: {
        type: Number,
        default: 1,
    },
    reportData: {
        type: Object,
    }
})

// const
const moreUrl = ref('');

onBeforeMount(() => {
    getFrontConfig({
        params: {},
    }).then(res => {
        moreUrl.value = res.data.moreLuckdropsUrl;
    })
})

const jumpMore = () => {
    if (props.reportData) {
        Report.reportLog({
            pageSource: props.reportData.pageSource,
            businessType: Report.businessType.buttonClick,
            objectType: Report.objectType.getMoreGiveaway,
            postId: props.reportData.postId,
            redPacketType: props.reportData.redPacketType
        });
    }

    if (moreUrl.value) {
        window.open(moreUrl.value)
    }
}

</script>

<style lang="scss" scoped>
.getMore {
    display: flex;
    height: 50px;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.06);

    img {
        margin: 0 5px;
    }

    span {
        color: #000;
        font-size: 15px;
        font-weight: 500;
        line-height: 18px;
    }
}

.get_more {
    margin-top: 58px;
    width: 240px;
    height: 54px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
        margin-right: 8px;
    }
}

.get-more-btns {
    display: flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.06);
    position: relative;

    .get-more-btn {
        flex: 1;
        display: flex;
        cursor: pointer;
        user-select: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 44px;

        font {
            font-weight: 600;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
            letter-spacing: 0.3px;
            color: #000000;
        }
    }

    &::after {
        content: "";
        width: 1px;
        height: 88px;
        position: absolute;
        left: 50%;
        top: 13px;
        background-color: rgba(0, 0, 0, .2);
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}
</style>