You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

153 lines
4.0 KiB
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>