yihuo/pages/rich/rank.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="cu-dialog wrapper">
            <view class="paddingY25 flex-align-center relative">
                <view class="font6 bold color-1">实时榜单</view>
                <image :src="resource.icon_x" class="x" @click="close" />
            </view>
            <view>
                <scroll-view style="height: 350px" 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-1">{{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-1 font2 marginL12 flex1">{{item.nickname}}</view>
                        <view class="flex-shrink0 num color-theme">走到 {{item.quantity}}</view>
                    </view>
                </scroll-view>
                <empty v-if="!tableData || tableData.length === 0" :top="100" />
                <view v-if="myData" class="cell my flex-align">
                    <image v-if="myData.index === 0" class="rank_flag translateY" :src="resource.prince_rank_1" />
                    <image v-else-if="myData.index === 1" class="rank_flag translateY" :src="resource.prince_rank_2" />
                    <image v-else-if="myData.index === 2" class="rank_flag translateY" :src="resource.prince_rank_3" />
                    <view v-if="myData.index < 50" class="index bold color-white">{{myData.index + 1}}</view>
                    <view v-else class="index color-white">暂无排名</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 color-theme">走到 {{myData.quantity || 0}}</view>
                </view>
            </view>
        </view>
        <people ref="people"/>
    </view>
</template>

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

export default {
    components: { empty },
    data() {
        return {
            tableData: null,
            resource,
            visible: false,
            myData: null
        }
    },
    methods: {
        show() {
            this.$parent.$parent.lock = true
            this.visible = true
            this.refresh()
        },
        close() {
            this.$parent.$parent.lock = false
            this.visible = false
            this.tableData = null
            this.myData = null
        },
        refresh() {
            this.loadData()
        },
        async loadData() {
            const res = await this.$service.weal.richRank()
            if (res) {
                this.tableData = res.billboardList
                if (res.myBillboard) {
                    let my = res.myBillboard
                    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>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    padding: 0 28rpx 64rpx;
    background: #fff;
    border-radius: 15px 15px 2px 2px !important;
    .x {
        position: absolute;
        right: 28rpx;
        top: 50%;
        margin-top: -16rpx;
        width: 32rpx;
        height: 32rpx;
    }

    .cell {
        position: relative;
        height: 48px;
        background: rgba($color: #8f4bf1, $alpha: 0.1);
        border-radius: 4px;
        padding-left: 13px;
        padding-right: 25px;
        .index {
            width: 70px;
        }
        .num {
            font-size: 12px;
        }
        &.my {
            background: #8f4bf1;
            .num {
                color: #fff;
            }
        }
        .rank_flag {
            width: 21px;
            height: 20px;
            position: absolute;
            left: 35px;
        }
    }
}
</style>