spinz777/src/components/popup/RankRewardPop.vue

<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="popup-view relative"
            :style="{ 'background': themeStore.theme.promo.rank.popBgColor, borderColor: themeStore.theme.promo.rank.popSpecialColor }">
            <view class="pop-title">Beting Ranking Started</view>
            <theme-image src="@/static/rank/image_phbsy_x.png" class="rank-reward-image" mode="aspectFit"
                @click="close"></theme-image>
            <view class="pop-content w-full">
                <view class="reward-desc" :style="{color: themeStore.theme.light}">
                    Place a bet and join the rankings for <text class="text-special"
                        :style="{ color: themeStore.theme.promo.rank.popSpecialColor }">free</text> rewards up to
                    <text :style="{ color: themeStore.theme.promo.rank.popSpecialColor }" class="text-special">
                        {{formatNum(rankData, 2) }}
                    </text>!
                </view>
                <view class="rewards-title flex-center"
                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.promo.rank.betRewardHeadBg}`, color: themeStore.theme.light }">
                    {{ $t('promo.pop.eventAward') }}
                </view>
                <view class="award-list w-full">
                    <view class="table-head flex justify-between items-center"
                        :style="{ color: themeStore.theme.promo.rank.tabColor }">
                        <view class="head-column-item flex-1" :style="{ color: themeStore.theme.promo.rank.rankColor }">
                            {{ $t("promo.public.rank") }}</view>
                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.dailyList") }}</view>
                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.weeklyList") }}</view>
                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.monthlyList") }}</view>
                    </view>
                    <div class="list-wraper">
                        <view v-for="item in promoStore.betrankList" :key="item.rank"
                            class="table-row flex justify-between items-center"
                            :style="{ color: themeStore.theme.promo.rank.rankNumPreColor }">
                            <view class="head-column-item flex-1"
                                :style="{ color: themeStore.theme.promo.rank.rankColor }">
                                {{ item.rank }}</view>
                            <view class="head-column-item flex-1">{{ formatNum(item.day * 100) + '%' }}</view>
                            <view class="head-column-item flex-1">{{ formatNum(item.week * 100) + '%' }}</view>
                            <view class="head-column-item flex-1">{{ formatNum(item.month * 100) + '%' }}</view>
                        </view>
                    </div>
                </view>
            </view>
            <view class="evt-button">
                <view class="show-dayonce flex items-center">
                    <view class="check-box relative" @click="onChecked">
                        <theme-image src="@/static/frecharge/image_gx.png" mode="aspectFit"
                            class="check-bg"></theme-image>
                        <theme-image v-if="showToday" src="@/static/frecharge/image_gou.png" class="checked-img"
                            mode="aspectFit"></theme-image>
                    </view>
                    <view class="tips" :style="{ color: themeStore.theme.text.normal }">{{ $t('home.popTip') }}</view>
                </view>
                <theme-image @click.stop="toRankEvent" src="@/static/rank/btn_EventDetails.png" class="rank-evt-image"
                    mode="aspectFit"></theme-image>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import { getBetRankDataApi } from '@/api/promo';
import { usePromoStore } from '@/store/usePromoStore';
import { useThemeStore } from '@/store/useThemeStore';
import { onMounted, ref } from 'vue';
import { formatNum } from '@/module/utils/util';

const promoStore = usePromoStore()
const themeStore = useThemeStore()
const popup = ref(null)
const rankData = ref(0)
const emit = defineEmits(['close', 'checked'])
defineProps({
    showToday: {
        type: Boolean,
        default: false
    }
})


const onChecked = () => {
    emit('checked')
}
const open = () => {
    popup.value.open()
}
const close = () => {
    popup.value.close()
    emit('close')
}
const toRankEvent = () => {
    const promo = promoStore.promoList.find((item) => item.jumpUrl === 'module:betrank')
    uni.navigateTo({
        url: '/pages/promo/Ranking/Ranking',
        success: function (res) {
            close()
            res.eventChannel.emit(
                "getContentInfo",
                JSON.stringify(promo.content)
            );
        },
    });
}
const getRankData = async () => {
    const { data } = await getBetRankDataApi({ rankOption: 0 })
    if (data) {
        const rank = data.ranks?.find(item => item.rankType === 'day')
        if (rank) {
            rankData.value = rank.totalBetAmount
        }
    }
}
defineExpose({
    open,
    close
})

onMounted(() => {
    getRankData()
})
</script>
<style lang="scss" scoped>
.popup-view {
    width: 632rpx;
    height: 930rpx;
    border-radius: 18rpx;
    border: 2px solid;

    .pop-title {
        font-family: Impact;
        font-weight: 400;
        font-size: 50rpx;
        // color: #F8C106;
        // color: #FFFCCF;
        // text-shadow: 0rpx 2rpx 0rpx #A61100;
        background: linear-gradient(0deg, #FFB600 20%, #EBDB25 43.212890625%, #FFFBB1 77.24609375%, #FFFCCF 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        line-height: 90rpx;
    }

    .rank-reward-image {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        top: -22rpx;
        right: -22rpx;
    }

    .pop-content {
        .reward-desc {
            font-style: italic;
            margin-top: 4rpx;
            padding: 0 36rpx;

            .text-special {
                font-size: 36rpx;
            }
        }

        .rewards-title {
            width: 235rpx;
            height: 58rpx;
            font-family: Roboto;
            font-weight: 500;
            font-size: 28rpx;
            margin: 0 auto;
            margin-top: 24rpx;
        }

        .award-list {
            height: 634rpx;
            padding: 28rpx 20rpx;

            .table-head {
                width: 100%;
                height: 63rpx;
                background: #6E0910;
                border-radius: 10rpx;
                border: 1px solid #8A4446;
                font-size: 21rpx;
                margin-bottom: 14rpx;
            }
            .list-wraper {
                height: 534rpx;
                overflow-y: auto;
            }

            .table-row {
                font-size: 21rpx;
                width: 100%;
                height: 63rpx;
                background: #5A1116;
                border-radius: 10rpx;
                border: 1px solid #8A4446;
                margin-bottom: 14rpx;
            }

            .head-column-item {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            
        }
    }

    .evt-button {
        position: absolute;
        bottom: -150rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 632rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .show-dayonce {
        .check-box {
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
            display: flex;

            .check-bg {
                width: 28rpx;
                height: 28rpx;
            }

            .checked-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 26rpx;
                height: 26rpx;
            }
        }

        .tips {
            font-size: 28rpx;
        }
    }

    .rank-evt-image {
        margin-top: 14rpx;
        width: 279rpx;
        height: 81rpx;
    }
}
</style>