zdsc/yudao-mall-uniapp-master/pages/user/alternative.vue

<template>
    <s-layout class="set-wrap" title="五选一" :bgStyle="{ color: '#FFF' }">
        <view class="_bgc">

            <view class="body">
                <view class="top">
                    <view>
                        <view class="txt">总人数</view> {{ rankingData.totalNum }}
                    </view>
                    <view>
                        <view class="txt">我的排名</view> {{ rankingData.rankNum }}
                    </view>
                </view>
                <view class="content">
                    <view class="title">已出线人数列表</view>
                    <view class="table">
                        <scroll-view lower-threshold="300" scroll-y @scrolltolower="onPageScroll"
                            class="scroll-content">
                            <view v-for="(i, v) in ListData" :key="v" class="item">
                                <view>{{ v+1 }}</view>
                                <view>{{ i.nickname }}</view>
                                <view>{{ formattedDateTime(i.outTime)}}</view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </view>

        </view>
    </s-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import MineApi from '@/sheep/api/prize/index'
import sheep from '@/sheep';
import { name } from 'dayjs/locale/zh-cn';


let params = ref({
    pageNo: 1,
    pageSize: 50,
})

onLoad(async () => {
    getRanking()// 获取排名
    getListData()// 今日已出线列表
})


let rankingData = ref([])
const getRanking = async () => {
    const res = await MineApi.ranking()
    rankingData.value = res.data
}
let ListData = ref([])
const getListData = async () => {
    const res = await MineApi.wzyycx(params.value)
    ListData.value.push(...res.data.list)
}

const onPageScroll = (event) => {
    console.log(event, '12312313213132');
    params.value.pageNo += 1
    getListData()
}

const formattedDateTime = (timestampInMilliseconds) => {
    const date = new Date(timestampInMilliseconds);
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

<style lang="scss" scoped>
._bgc {
    width: 100%;
    height: 89vh;
    padding-top: 10rpx;
}

.body {
    .top {
        display: flex;
        height: 150rpx;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        font-size: 35rpx;
        border: 5rpx solid #e6e6e6;
        border-radius: 20rpx;
        background-color: #fff6f6;
        width: 95%;
        margin: 0 auto;
        font-weight: 600;

        &>view {
            text-align: center;
        }

        .txt {
            font-size: 42rpx;
        }
    }

    .content {
        background-color: #f5eaea;
        border-radius: 20rpx;
        width: 95%;
        margin: 0 auto;
        margin-top: 20rpx;

        .title {
            font-size: 35rpx;
            text-align: center;
            line-height: 88rpx;
        }

        .table {
            // background-color: red;
            width: 100%;
            margin: 0 auto;
            height: 72vh;
            border-radius: 20rpx;

            .scroll-content {
                height: 100%;

                .item {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    height: 88rpx;

                    &>view:nth-of-type(1) {
                        width: 5%;
                    }
                }
            }
        }
    }
}
</style>