feat: 奖励排名页面开发

pages.config.ts

@@ -40,17 +40,14 @@ export default defineUniPages({
       iconPath: 'static/tabbar/home.png',
       selectedIconPath: 'static/tabbar/homeHL.png',
       pagePath: 'pages/index/index',
-      // text: '%tabbar.home%',
     }, {
       iconPath: 'static/tabbar/income.png',
       selectedIconPath: 'static/tabbar/incomeHL.png',
       pagePath: 'pages/income/income',
-      // text: '%tabbar.income%',
     }, {
       iconPath: 'static/tabbar/mine.png',
       selectedIconPath: 'static/tabbar/mineHL.png',
       pagePath: 'pages/mine/mine',
-      // text: '%tabbar.mine%',
     }],
   },
 })

src/layouts/fg-tabbar/tabbarList.ts

@@ -1,5 +1,3 @@
-import { t } from '@/locale/index'
-
 /**
  * 2025-06-25 v3.3.0版（重新梳理tabbar配置）
  *
@@ -24,14 +22,12 @@ export const CUSTOM_TABBAR_NO_CACHE = false
 export const tabbarList = [
   {
     pagePath: 'pages/index/index',
-    text: t('tabbar.home'),
     icon: 'home',
     // 选用 UI  框架自带的 icon时，iconType 为 uiLib
     iconType: 'uiLib',
   },
   {
     pagePath: 'pages/income/income',
-    text: t('tabbar.income'),
     icon: 'i-carbon-code',
     // 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
     iconType: 'unocss',

src/locale/en.json

@@ -1,11 +1,9 @@
 {
-  "tabbar.home": "Home",
-  "tabbar.income": "Income",
-  "tabbar.mine": "Mine",
   "home.missionCenter": "Mission Center",
   "home.refer&earn": "Refer & Earn",
   "home.vip": "VIP Membership",
   "home.bestSellers": "Best Sellers",
+  "home.topChampions": "Top Champions",
   "search.placeholder": "Search",
   "search.filterPrice": "All Price",
   "search.filterCategory": "Category",

src/pages.json

@@ -124,6 +124,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/topChampions/topChampions",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/vipMembership/vipMembership",
       "type": "page",

src/pages/index/index.vue

@@ -78,8 +78,9 @@ const navIcons = ref([
   },
   {
     image: '/static/icons/home-vip.png',
-    title: 'home.vip',
+    title: 'home.topChampions',
     size: '100rpx',
+    url: '/pages/topChampions/topChampions',
   },
 ])
 

src/pages/topChampions/topChampions.vue

@@ -0,0 +1,96 @@
+<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'
+
+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)
+
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+</script>
+
+<template>
+  <z-paging ref="paging" refresher-only 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" />
+          </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 class="flex items-center justify-between bg-white p-24rpx">
+        <view class="w-30% flex flex-col items-center justify-center text-center font-bold">
+          <wd-img width="80rpx" height="80rpx" round src="/static/images/avatar.jpg" />
+          <view class="text-28rpx">
+            Aamir Khan
+          </view>
+          <view class="text-24rpx">
+            V10
+          </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 v-for="i in 4" :key="i" class="flex flex-col items-center">
+            <view class="text-22rpx text-#5B5B5B">
+              Invited Friends
+            </view>
+            <view class="text-26rpx font-bold">
+              12,034
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>