<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>