saas_miniprogram/pages2/dailyPractice/rankList.vue

<template>
    <view class="rank_list">
        <nav-bar title="打卡排行榜"></nav-bar>
        <view class="rank_bg">
            <image src="/pages2/static/daily/rank_bg.png" class="rank_bg"></image>
            <text class="tips">打卡PK榜</text>
        </view>
        <view class="contents">
            <view class="header_cons">
                <view class="header_left">
                    <text class="rank">排名</text>
                    <text>用户ID</text>
                </view>
                <view class="header_right">
                    <text>打卡天数</text>
                </view>
            </view>
            <view class="rank_con">
                <view v-for="(item, index) in rankList" :key="index" class="rank_item">
                    <view class="rank_left">
                        <view class="rank_num">
                            <image v-if="index == 0" src="/pages2/static/daily/rank_one.png" class="nums"></image>
                            <image v-else-if="index == 1" src="/pages2/static/daily/rank_two.png" class="nums"></image>
                            <image v-else-if="index == 2" src="/pages2/static/daily/rank_three.png" class="nums"></image>
                            <text v-else>{{ '0' + (index + 1) }}</text>
                        </view>
                        <view class="header_name">
                            <!-- <image :src="form.avatar ? $method.splitImgHost(form.avatar, true) : ''" class="avatar"></image> -->
                            <text>{{ item.userName }}</text>
                        </view>
                    </view>
                    <view class="rank_right">
                        <text>{{ item.recordCount }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'rankList',
    data() {
        return {
            rankList: [],
            goodsId: '',
        }
    },
    onLoad(option) {
        this.goodsId = option.goodsId
        this.getRank()
    },
    methods: {
        getRank() {
            this.$http({
                url: `/bank/question/todayExam/tob/${this.goodsId}`,
                method: 'get',
            }).then((res) => {
                if (res.data.code == 200) {
                    this.rankList = res.data.data || []
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.rank_bg {
    width: 100%;
    height: 280rpx;
    position: relative;
    top: 0rpx;
    left: 0rpx;
    .rank_bg {
        width: 100%;
        height: 280rpx;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
    }
    .tips {
        position: absolute;
        top: 68rpx;
        left: 56rpx;
        font-size: 52rpx;
        font-weight: 800;
        color: #33558F;
    }
}
.contents {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 40rpx 26rpx;
    position: relative; 
    top: -20rpx;
    left: 0rpx;
    .header_cons {
        width: 100%;
        height: 88rpx;
        background: #F8F8FA;
        border-radius: 24rpx;
        padding: 0rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header_left, .header_right {
        font-size: 28rpx;
        font-weight: 500;
        color: #888691;
        .rank {
            margin-right: 50rpx;
        }
    }
    .rank_con {
        width: 100%;
        margin-top: 32rpx;
    }
    .rank_item {
        width: 100%;
        padding: 0rpx 32rpx;
        margin-bottom: 48rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .rank_left {
            display: flex;
            align-items: center;
            .rank_num {
                font-size: 36rpx;
                font-family: DIN Alternate-Bold, DIN Alternate;
                font-weight: bold;
                color: #6C7386;
                margin-right: 56rpx;
            }
            .nums {
                width: 50rpx;
                height: 56rpx;
            }
            .header_name {
                // .avatar {
                //     width: 72rpx;
                //     height: 72rpx;
                //     border-radius: 50%;
                // }
                font-size: 28rpx;
                font-weight: 500;
                color: #222222;
                height: 56rpx;
                line-height: 45rpx;
            }
        }
        .rank_right {
            font-size: 40rpx;
            font-family: DIN Alternate-Bold, DIN Alternate;
            font-weight: bold;
            color: #222222;
        }
    }
}
</style>