123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <route lang="json5" type="page">
- {
- layout: 'default',
- style: {
- navigationStyle: 'custom',
- },
- }
- </route>
- <script lang="ts" setup>
- // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
- // eslint-disable-next-line unused-imports/no-unused-imports
- import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
- import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
- import { redEnvelopeTop } from '@/api/wallet'
- import { formatNumber } from '@/utils'
- import { goBack } from '@/utils/page'
- defineOptions({
- name: 'TopChampions', // 奖赏排名
- })
- // 获取屏幕边界到安全区域距离
- const systemInfo = uni.getSystemInfoSync()
- const safeAreaInsets = systemInfo.safeAreaInsets
- // z-paging
- const paging = ref(null)
- // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
- useZPaging(paging)
- // 根据排名获取标签背景色
- function getRankBgColor(index: number) {
- const colors = {
- 0: '#DEA90B', // 第一名
- 1: '#5E719E', // 第二名
- 2: '#D47128', // 第三名
- }
- return colors[index] || '#A5ADBD' // 其余排名
- }
- // 根据排名获取排名数字
- function getRankNumber(index: number) {
- return index + 1
- }
- // 搜索结果
- const dataList = ref([])
- async function queryList(pageNo: number, pageSize: number) {
- try {
- const res = await redEnvelopeTop({
- size: pageSize,
- page: pageNo,
- type: 1,
- })
- paging.value.complete(res.data.list)
- }
- catch {
- paging.value.complete(false)
- }
- }
- </script>
- <template>
- <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
- <template #top>
- <view
- class="relative from-[#FA2B19] to-[#FE6232] bg-gradient-to-br"
- :style="{ paddingTop: `${safeAreaInsets?.top}px` }"
- >
- <wd-navbar :bordered="false" custom-class="bg-transparent!">
- <template #left>
- <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="goBack" />
- </template>
- <template #title>
- <view class="text-white font-bold text-32rpx!">
- Top Champions
- </view>
- </template>
- </wd-navbar>
- <image src="/static/icons/top-nav.png" class="absolute bottom-12rpx right-12rpx h-166.27rpx w-180rpx" />
- </view>
- </template>
- <view>
- <view class="py-22rpx text-center text-22rpx text-#5C5C5C">
- 2025.05.05 Update
- </view>
- <view v-for="(item, index) in dataList" :key="index" class="relative mb-20rpx flex items-center justify-between bg-white p-24rpx">
- <!-- 左上角TOP标签 -->
- <view
- class="absolute left-24rpx top-0 h-52rpx w-48rpx flex items-center justify-center rounded-4rpx text-20rpx text-white font-bold"
- :style="{ backgroundColor: getRankBgColor(index), clipPath: 'polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)' }"
- >
- <view class="flex flex-col items-center leading-none">
- <text class="text-16rpx">
- TOP
- </text>
- <text class="text-18rpx">
- {{ getRankNumber(index) }}
- </text>
- </view>
- </view>
- <view class="w-30% flex flex-col items-center justify-center text-center font-bold">
- <wd-img width="80rpx" height="80rpx" round :src="item.headPic" />
- <view class="text-28rpx">
- {{ item.name }}
- </view>
- <view class="text-24rpx">
- V{{ item.vipLevel }}
- </view>
- </view>
- <wd-divider dashed custom-class="h-80rpx! mx-40rpx!" color="#A4A4A4" vertical />
- <view class="grid grid-cols-2 flex-1 gap-24rpx">
- <view class="flex flex-col items-center">
- <view class="text-22rpx text-#5B5B5B">
- Invited Friends
- </view>
- <view class="text-26rpx font-bold">
- {{ formatNumber(item.inviteNum, 0) }}
- </view>
- </view>
- <view class="flex flex-col items-center">
- <view class="text-22rpx text-#5B5B5B">
- L7D Earnings
- </view>
- <view class="text-26rpx text-[var(--wot-color-theme)] font-bold">
- {{ formatNumber(item.L7DEarnings) }}
- </view>
- </view>
- <view class="flex flex-col items-center">
- <view class="text-22rpx text-#5B5B5B">
- Team Members
- </view>
- <view class="text-26rpx font-bold">
- {{ formatNumber(item.teamNum, 0) }}
- </view>
- </view>
- <view class="flex flex-col items-center">
- <view class="text-22rpx text-#5B5B5B">
- Joined Groups
- </view>
- <view class="text-26rpx font-bold">
- {{ formatNumber(item.groupNum, 0) }}
- </view>
- </view>
- </view>
- </view>
- </view>
- </z-paging>
- </template>
- <style lang="scss" scoped>
- //
- </style>
|