yihuo/pages/award_detail/prince_rank.vue

<template>
    <view class="cu-modal bottom-modal" :class="{ show: visible }">
        <view class="prince-rank-mask" @click="close"></view>
        <view class="cu-dialog wrapper">
            <view class="paddingY25 flex-align-center relative">
                <image
                    v-if="tabIndex == 0"
                    :src="resource.prince_this_title_active"
                    class="title"
                />
                <image
                    v-else
                    :src="resource.prince_this_title"
                    class="title"
                    @click="tabIndex = 0"
                />
                <image
                    v-if="tabIndex == 1"
                    :src="resource.prince_last_title_active"
                    class="title marginL40"
                />
                <image
                    v-else
                    :src="resource.prince_last_title"
                    class="title marginL40"
                    @click="tabIndex = 1"
                />
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <view v-if="tabIndex == 0" style="height: 348px">
                <scroll-view
                    style="height: 300px"
                    scroll-y
                    v-if="tableData && tableData.length > 0"
                >
                    <view
                        v-for="(item, index) in tableData"
                        :key="index"
                        class="cell flex-align"
                        style="margin-bottom: 10px"
                    >
                        <view class="index bold color-white">{{ index + 1 }}</view>
                        <image
                            v-if="index === 0"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_1"
                        />
                        <image
                            v-if="index === 1"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_2"
                        />
                        <image
                            v-if="index === 2"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_3"
                        />
                        <image
                            :src="item.avatar"
                            style="width: 52rpx; height: 52rpx; border-radius: 26rpx"
                        />
                        <view class="color-white font2 marginL12 flex1">{{ item.nickname }}</view>
                        <view class="flex-shrink0 num">{{ item.quantity }}源力值</view>
                    </view>
                </scroll-view>
                <empty v-if="!tableData || tableData.length === 0" :top="0" />
                <view v-if="tabIndex == 0 && myData" class="cell my flex-align">
                    <image
                        v-if="myData.quantity >= luckKing.reachLuckQuantity && myData.index === 0"
                        class="rank_flag translateY"
                        :src="resource.prince_rank_1"
                    />
                    <image
                        v-else-if="
                            myData.quantity >= luckKing.reachLuckQuantity && myData.index === 1
                        "
                        class="rank_flag translateY"
                        :src="resource.prince_rank_2"
                    />
                    <image
                        v-else-if="
                            myData.quantity >= luckKing.reachLuckQuantity && myData.index === 2
                        "
                        class="rank_flag translateY"
                        :src="resource.prince_rank_3"
                    />
                    <view
                        v-if="myData.quantity < luckKing.reachLuckQuantity"
                        class="index color-white"
                    >
                        未在进阶区
                    </view>
                    <view
                        v-else-if="
                            myData.quantity >= luckKing.reachLuckQuantity && myData.index < 50
                        "
                        class="index bold color-white"
                    >
                        {{ myData.index + 1 }}
                    </view>
                    <view v-else class="index"></view>
                    <image
                        :src="myData.avatar"
                        style="width: 52rpx; height: 52rpx; border-radius: 26rpx"
                    />
                    <view class="color-white font2 marginL12 flex1">{{ myData.nickname }}</view>
                    <view class="flex-shrink0 num">{{ myData.quantity }}源力值</view>
                </view>
            </view>
            <view v-if="tabIndex == 1" style="height: 348px">
                <view v-if="pre" class="text-center paddingB10 color-white">
                    共瓜分{{ pre.magicQuantity }}源石
                </view>
                <scroll-view
                    style="height: 300px"
                    scroll-y
                    v-if="pre && pre.periodKingList && pre.periodKingList.length > 0"
                >
                    <view
                        v-for="(item, index) in pre.periodKingList"
                        :key="index"
                        class="cell flex-align"
                        style="margin-bottom: 10px"
                    >
                        <view class="index bold color-white">{{ index + 1 }}</view>
                        <image
                            v-if="index === 0"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_1"
                        />
                        <image
                            v-if="index === 1"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_2"
                        />
                        <image
                            v-if="index === 2"
                            class="rank_flag translateY"
                            :src="resource.prince_rank_3"
                        />
                        <image
                            :src="item.avatar"
                            style="width: 52rpx; height: 52rpx; border-radius: 26rpx"
                        />
                        <view class="color-white font2 marginL12 flex1">{{ item.nickname }}</view>
                        <view class="flex-shrink0 num">瓜分{{ item.magicQuantity }}源石</view>
                    </view>
                </scroll-view>
                <empty
                    v-if="!pre || !pre.periodKingList || pre.periodKingList.length === 0"
                    :top="0"
                />
            </view>
        </view>
    </view>
</template>

<script>
import pageMixin from '@/mixin/page'
import resource from '@/utils/resource'
import empty from '@/components/empty'

export default {
    // mixins: [pageMixin],
    components: { empty },
    props: {
        poolId: Number,
        luckKing: Object
    },
    data() {
        return {
            tabIndex: 0,
            tableData: null,
            pre: null,
            resource,
            visible: false,
            refreshing: false,
            myData: null
        }
    },
    methods: {
        show() {
            this.$parent.$parent.$parent.lock = true
            this.visible = true
            this.refresh()
        },
        close() {
            this.$parent.$parent.$parent.lock = false
            this.visible = false
            this.tableData = null
            this.myData = null
            this.pre = null
        },
        refresh() {
            this.loadData()
            this.getPre()
        },
        async getPre() {
            const res = await this.$service.award.preKing(this.poolId)
            this.pre = res
        },
        async loadData(loading = false) {
            const res = await this.$service.award.kingUser(this.poolId, loading)
            if (res) {
                this.tableData = res.periodKingList
                if (res.myPeriodKing) {
                    let my = res.myPeriodKing
                    let flag = 50
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (my.userId === this.tableData[i].userId) {
                            flag = i
                            break
                        }
                    }
                    my.index = flag
                    this.myData = my
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.prince-rank-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wrapper {
    padding: 0 28rpx 64rpx;
    background: #171b1e;
    border-radius: 15px 15px 2px 2px;

    .title {
        width: 176rpx;
        height: 28rpx;
    }

    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }

    .cell {
        position: relative;
        height: 48px;
        background: rgba(34, 35, 53, 0.6);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 13px;
        padding-right: 48px;

        .index {
            width: 82px;
        }

        .num {
            color: #44e5e3;
            font-size: 12px;
        }

        &.my {
            background: rgba(91, 92, 116, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .rank_flag {
            width: 21px;
            height: 20px;
            position: absolute;
            left: 35px;
        }
    }

    .user-wrapper {
        width: 280rpx;
        height: 324rpx;
        position: relative;
        margin-top: -10px;

        .bg-user {
            position: absolute;
            width: 280rpx;
            height: 324rpx;
            left: 0;
            top: 0;
        }

        .tx {
            border: 1px solid #00a2e7;
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }

        .bg-text-wrapper {
            width: 164rpx;
            height: 50rpx;
            position: relative;
            margin-top: 10px;

            .bg-text {
                position: absolute;
                left: 0;
                top: 0;
                width: 164rpx;
                height: 50rpx;
            }
        }
    }

    .item {
        width: 200rpx;
        height: 238rpx;
        position: relative;
        border-radius: 8rpx;
        overflow: hidden;

        .goods-wrapper {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .image {
            width: 200rpx;
            height: 238rpx;
        }
    }
}
</style>