topChampions.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationStyle: 'custom',
  6. },
  7. }
  8. </route>
  9. <script lang="ts" setup>
  10. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  11. // eslint-disable-next-line unused-imports/no-unused-imports
  12. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  13. import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
  14. import { redEnvelopeTop } from '@/api/wallet'
  15. import { formatNumber } from '@/utils'
  16. import { goBack } from '@/utils/page'
  17. defineOptions({
  18. name: 'TopChampions', // 奖赏排名
  19. })
  20. // 获取屏幕边界到安全区域距离
  21. const systemInfo = uni.getSystemInfoSync()
  22. const safeAreaInsets = systemInfo.safeAreaInsets
  23. // z-paging
  24. const paging = ref(null)
  25. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  26. useZPaging(paging)
  27. // 根据排名获取标签背景色
  28. function getRankBgColor(index: number) {
  29. const colors = {
  30. 0: '#DEA90B', // 第一名
  31. 1: '#5E719E', // 第二名
  32. 2: '#D47128', // 第三名
  33. }
  34. return colors[index] || '#A5ADBD' // 其余排名
  35. }
  36. // 根据排名获取排名数字
  37. function getRankNumber(index: number) {
  38. return index + 1
  39. }
  40. // 搜索结果
  41. const dataList = ref([])
  42. async function queryList(pageNo: number, pageSize: number) {
  43. try {
  44. const res = await redEnvelopeTop({
  45. size: pageSize,
  46. page: pageNo,
  47. type: 1,
  48. })
  49. paging.value.complete(res.data.list)
  50. }
  51. catch {
  52. paging.value.complete(false)
  53. }
  54. }
  55. </script>
  56. <template>
  57. <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
  58. <template #top>
  59. <view
  60. class="relative from-[#FA2B19] to-[#FE6232] bg-gradient-to-br"
  61. :style="{ paddingTop: `${safeAreaInsets?.top}px` }"
  62. >
  63. <wd-navbar :bordered="false" custom-class="bg-transparent!">
  64. <template #left>
  65. <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="goBack" />
  66. </template>
  67. <template #title>
  68. <view class="text-white font-bold text-32rpx!">
  69. Top Champions
  70. </view>
  71. </template>
  72. </wd-navbar>
  73. <image src="/static/icons/top-nav.png" class="absolute bottom-12rpx right-12rpx h-166.27rpx w-180rpx" />
  74. </view>
  75. </template>
  76. <view>
  77. <view class="py-22rpx text-center text-22rpx text-#5C5C5C">
  78. 2025.05.05 Update
  79. </view>
  80. <view v-for="(item, index) in dataList" :key="index" class="relative mb-20rpx flex items-center justify-between bg-white p-24rpx">
  81. <!-- 左上角TOP标签 -->
  82. <view
  83. class="absolute left-24rpx top-0 h-52rpx w-48rpx flex items-center justify-center rounded-4rpx text-20rpx text-white font-bold"
  84. :style="{ backgroundColor: getRankBgColor(index), clipPath: 'polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)' }"
  85. >
  86. <view class="flex flex-col items-center leading-none">
  87. <text class="text-16rpx">
  88. TOP
  89. </text>
  90. <text class="text-18rpx">
  91. {{ getRankNumber(index) }}
  92. </text>
  93. </view>
  94. </view>
  95. <view class="w-30% flex flex-col items-center justify-center text-center font-bold">
  96. <wd-img width="80rpx" height="80rpx" round :src="item.headPic" />
  97. <view class="text-28rpx">
  98. {{ item.name }}
  99. </view>
  100. <view class="text-24rpx">
  101. V{{ item.vipLevel }}
  102. </view>
  103. </view>
  104. <wd-divider dashed custom-class="h-80rpx! mx-40rpx!" color="#A4A4A4" vertical />
  105. <view class="grid grid-cols-2 flex-1 gap-24rpx">
  106. <view class="flex flex-col items-center">
  107. <view class="text-22rpx text-#5B5B5B">
  108. Invited Friends
  109. </view>
  110. <view class="text-26rpx font-bold">
  111. {{ formatNumber(item.inviteNum, 0) }}
  112. </view>
  113. </view>
  114. <view class="flex flex-col items-center">
  115. <view class="text-22rpx text-#5B5B5B">
  116. L7D Earnings
  117. </view>
  118. <view class="text-26rpx text-[var(--wot-color-theme)] font-bold">
  119. {{ formatNumber(item.L7DEarnings) }}
  120. </view>
  121. </view>
  122. <view class="flex flex-col items-center">
  123. <view class="text-22rpx text-#5B5B5B">
  124. Team Members
  125. </view>
  126. <view class="text-26rpx font-bold">
  127. {{ formatNumber(item.teamNum, 0) }}
  128. </view>
  129. </view>
  130. <view class="flex flex-col items-center">
  131. <view class="text-22rpx text-#5B5B5B">
  132. Joined Groups
  133. </view>
  134. <view class="text-26rpx font-bold">
  135. {{ formatNumber(item.groupNum, 0) }}
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. </z-paging>
  142. </template>
  143. <style lang="scss" scoped>
  144. //
  145. </style>