paimaide/src/views/RankPage.vue

<template>
    <ion-page>
        <ion-content class="rank-page">
            <div class="top">
                <img src="../assets/png-bg-paihang.jpg" alt="" class="bg" />

                <!-- <img
                    src="../assets/png-shuzi.png"
                    class="img1 animate__tada animate__slow animate__animated animate__infinite"
                    alt=""
                /> -->
                <div class="top-num-box">
                    <div class="top-num animate__tada animate__slow animate__animated animate__infinite">
                        <span>{{ showBouns }}</span>
                    </div>
                </div>
                <div class="lottie-box">
                    <Vue3Lottie :width="100" :speed="1.2" :animationData="prizeJSON" />
                </div>
                <img
                    src="../assets/png-yaoqing-btn.png"
                    class="img2 animate__heartBeat animate__animated animate__infinite"
                    alt=""
                    @click="goInvite"
                />
            </div>
            <div class="rank-bg" :style="{ backgroundImage: `url(${rankBg})` }">
                <div class="rank">
                    <div class="tabs-wrapper">
                        <div class="tabs">
                            <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">
                                {{ $t('rank.rankByInvite') }}
                            </div>
                            <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">
                                {{ $t('rank.rankByProfit') }}
                            </div>
                            <div class="tabs-box" :style="{ left: tab === 0 ? 'calc(50% + 3px)' : '3px' }"></div>
                        </div>
                    </div>
                    <div class="rank-content-wrapper" :class="tab === 0 ? 'profit' : 'invite'">
                        <div class="rank-content">
                            <div class="row head">
                                <div class="col-1">{{ $t('rank.rank') }}</div>
                                <div class="col-2">{{ $t('rank.userInfo') }}</div>
                                <!-- <div class="col-2-1" v-if="tab === 0">
                                    {{ $t('rank.stake') }}
                                </div> -->
                                <div class="col-3">{{ tab === 0 ? $t('rank.profit') : $t('rank.inviteNum') }}</div>
                            </div>
                            <div class="row" v-for="(item, i) in tab === 0 ? profitList : inviteList" :key="i">
                                <div class="col-1">
                                    <img v-if="i < 3" :src="rankImg[i]" />
                                    <div v-else>{{ i + 1 }}</div>
                                </div>
                                <div class="col-2">
                                    <van-image
                                        class="avatar"
                                        :src="item.avatar"
                                        radius="4"
                                        width="24"
                                        height="24"
                                        fit="cover"
                                    />
                                    <div class="name">{{ item.nickname }}</div>
                                </div>

                                <div
                                    class="rank-val"
                                    :class="[`rank-val_${i}`]"
                                    v-if="tab === 1 && i < 10 && item.juniorCount > 0"
                                >
                                    <img class="val-bg" :src="rankValue[i].img" alt="" />
                                    <div class="val-content">
                                        <div class="text1">{{ rankValue[i].label }}</div>
                                        <div class="text2">
                                            <span class="nor">{{ $t('balance.symbol') }} </span>
                                            {{ getRankVal(rankValue[i].val) }}
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="col-2-1" v-if="tab === 0">{{ $t('balance.symbol') }}{{ item.stake }}</div> -->
                                <div class="col-3" :class="'rank_' + (i + 1)" v-if="tab === 0">
                                    <!-- {{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }} -->
                                    <span class="nor"> {{ $t('balance.symbol') }}</span
                                    >{{ item.money }}
                                </div>
                                <div class="col-3" :class="'rank_' + (i + 1)" v-else>
                                    {{ item.juniorCount }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-content>
    </ion-page>
</template>

<script setup>
import { ref, computed } from 'vue'
import { http } from '@/plugins/http'
import { onIonViewWillEnter } from '@ionic/vue'
import rank1 from '@/assets/rank_1.png'
import rank2 from '@/assets/rank_2.png'
import rank3 from '@/assets/rank_3.png'
import rankBg1 from '@/assets/png - shou yi-laxing1.png'
import rankBg2 from '@/assets/png - shou yi-laxing2.png'
import rankBg3 from '@/assets/png - shou yi-laxing3.png'
import rankBg4 from '@/assets/png - shou yi-laxing4.png'
import { Vue3Lottie } from 'vue3-lottie'
import prizeJSON from '@/assets/lottie/prize.json'
import '@/styles/animate.css'
import rankBg from '@/assets/png-bg-paihang-xiahua.jpg'
import { useIonRouter } from '@ionic/vue'
import { accMul } from '@/plugins/calc.js'

const rankImg = [rank1, rank2, rank3]
const rankValue = [
    {
        img: rankBg1,
        label: '40%',
        val: 0.4
    },
    {
        img: rankBg2,
        label: '20%',
        val: 0.2
    },
    {
        img: rankBg3,
        label: '10%',
        val: 0.1
    },
    {
        img: rankBg4,
        label: '8%',
        val: 0.08
    },
    {
        img: rankBg4,
        label: '7%',
        val: 0.07
    },
    {
        img: rankBg4,
        label: '5%',
        val: 0.05
    },
    {
        img: rankBg4,
        label: '4%',
        val: 0.04
    },
    {
        img: rankBg4,
        label: '3%',
        val: 0.03
    },
    {
        img: rankBg4,
        label: '2%',
        val: 0.02
    },
    {
        img: rankBg4,
        label: '1%',
        val: 0.01
    }
]
const showBouns = computed(() => {
    return bonus.value ? bonus.value.amount : 0
})

function getRankVal(val) {
    return accMul(showBouns.value, val)
}

const tab = ref(1)
const profitList = ref([])
const inviteList = ref([])
const bonus = ref(0)
onIonViewWillEnter(getRank)
function getRank() {
    http.get('/financeOrder/rank').then(res => {
        profitList.value = res
    })
    http.get('/user/rankByInvite').then(res => {
        inviteList.value = res
    })
    http.get('/bonus/today').then(res => {
        bonus.value = res
    })
}

const router = useIonRouter()
function goInvite() {
    router.replace({ name: 'distribution1', query: { showShare: true } })
}
</script>

<style lang="less" scoped>
.bg {
    position: relative;
    display: block;
    width: 100%;
    z-index: 1;
}
.rank-page {
    .f-col();
}

.top {
    position: relative;

    .top-num-box {
        position: absolute;
        z-index: 3;
        top: 49.6vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .top-num {
        background: linear-gradient(270deg, #d32dff 0%, #834efc 48%, #2b73f8 100%);
        border-radius: 18px;
        border: 1px solid #ffffff;
        line-height: 36px;
        padding: 0 12px;
        font-size: 30px;
        font-family: alibabaPuHui;
        font-weight: bold;
    }

    .img1 {
        position: absolute;
        top: 49.6vw;
        left: 50%;
        width: 160px;
        z-index: 3;
        margin-left: -80px;
    }

    .img2 {
        position: absolute;
        width: 150px;
        height: 46px;
        bottom: 30.9vw;
        left: 50%;
        margin-left: -75px;
        z-index: 2;
    }
    .lottie-box {
        position: absolute;
        width: 53.3vw;
        height: 53.3vw;
        overflow: hidden;
        top: 40vw;
        left: 50%;
        margin-left: -26.6vw;
        z-index: 2;
        border-radius: 100%;
    }

    .text {
        position: absolute;
        top: 41px;
        left: 18px;
        font-size: 10px;
        color: rgba(var(--ion-text-color-rgb), 0.6);
        line-height: 10px;
    }
}

.rank-bg {
    background-repeat: repeat-y;
    background-size: 100% auto;
}
.rank {
    flex-grow: 1;
    min-height: calc(100% - 116.2vw);
    padding: 0 10px;
    position: relative;
    .f-col();
    z-index: 2;
    transform: translateY(-21.3vw);
}
.tabs-wrapper {
    position: relative;
    height: 50px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(360deg, rgba(104, 13, 214, 1), rgba(225, 181, 255, 1));
    .tabs {
        .f();
        align-items: stretch;
        border-radius: 8px;
        position: relative;
        height: 100%;
        background: #19064f;
        .tab {
            width: 50%;
            text-align: center;
            position: relative;
            color: #fff;
            font-size: 12px;
            z-index: 1;
            .f();
            justify-content: center;
            transition: all 0.2s;
            &.active {
                color: #fff;
                font-size: 16px;
                font-family: TsangerYuMo;
            }
        }

        .tabs-box {
            position: absolute;
            width: calc(50% - 6px);
            z-index: 0;
            background: #6728f9;
            border-radius: 8px;
            left: 3px;
            top: 3px;
            bottom: 3px;
            transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
    }
}

.rank-content-wrapper {
    margin-top: 12px;
    padding: 2px;
    background: linear-gradient(162deg, rgba(104, 13, 214, 1), rgba(225, 181, 255, 1));
    border-radius: 8px;
    .rank-content {
        background: #19064f;
        padding: 0 12px;
        overflow: auto;
        min-height: 0;
        flex-basis: 0;
        flex-grow: 1;
        border-radius: 6px;
    }
    .row {
        .f();
        background: #4722ad linear-gradient(90deg, #6728f9 0%, #5724e3 100%);
        border-radius: 4px;
        font-size: 12px;
        height: 54px;
        margin-bottom: 12px;
        color: #ffffff;
        .col-1 {
            .f();
            justify-content: center;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            width: 52px;
            img {
                width: 32px;
                height: 32px;
            }
        }
        .col-2 {
            .f();
            min-width: 0;
            flex: 1 1 0;
            width: 80px;
            margin-left: 20px;
            .avatar {
                margin-right: 8px;
            }
            font-size: 12px;
        }
        .col-2-1 {
            flex: 1;
        }
        .col-3 {
            flex: 1;
            font-size: 14px;
            font-weight: bold;
            line-height: 24px;
            min-width: 50px;
            text-align: right;
            margin-right: 10px;
        }
    }
    .head {
        height: 49px;
        .f();
        background: #19064f;
        color: #fff;
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
        > * {
            font-size: 12px !important;
            font-weight: 400 !important;
        }
    }
}

.rank-val {
    position: relative;
    .val-bg {
        width: 66px;
        display: block;
    }

    .val-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .f-col();
        align-items: center;
        justify-content: center;

        .text1 {
            font-size: 12px;
            font-weight: bold;
            color: #4d4d4d;
            line-height: 14px;
        }
        .text2 {
            font-size: 12px;
            font-weight: bold;
            color: #4d4d4d;
            line-height: 12px;
            margin-top: 4px;
            .nor {
                font-weight: normal;
            }
        }
    }

    &.rank-val_0 {
        .val-content {
            .text1 {
                .gradient-text(#ed5701, #c40800);
            }
            .text2 {
                .gradient-text(#ed5701, #c40800);
            }
        }
    }
    &.rank-val_1 {
        .val-content {
            .text1 {
                .gradient-text(#004f84, #0a4268);
            }
            .text2 {
                .gradient-text(#004f84, #0a4268);
            }
        }
    }
    &.rank-val_2 {
        .val-content {
            .text1 {
                .gradient-text(#ae4432, #9d1c06);
            }
            .text2 {
                .gradient-text(#ae4432, #9d1c06);
            }
        }
    }
}

.nor {
    font-weight: normal;
}
</style>