feat: 销量排名及奖励排名接口调试

src/api/wallet.ts

@@ -70,3 +70,10 @@ export function rechargeCallback(data: any) {
 export function rechargeRecordList(data: any) {
   return http.post<any>(`/cif/api/recharge/record/list`, data)
 }
+/**
+ * 排行榜type 1 7天收益排行
+ * @returns
+ */
+export function redEnvelopeTop(data: any) {
+  return http.get<any>(`/cif/api/red/envelope/top`, data)
+}

src/pages/bestSellers/bestSellers.vue

@@ -13,7 +13,7 @@
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
 import { getRankList } from '@/api/product'
-import { formatNumber } from '@/utils'
+import { formatNumber, formatSales } from '@/utils'
 import { goBack, toPage } from '@/utils/page'
 
 defineOptions({
@@ -80,7 +80,7 @@ function getRankNumber(index: number) {
       </view>
     </template>
     <view class="pt-20rpx">
-      <view v-for="(item, index) in dataList" :key="item.productId" class="flex items-center gap-24rpx bg-white p-24rpx" @click="toPage('/pages/productDetail/productDetail', { productId: item.productId, id: item.id })">
+      <view v-for="(item, index) in dataList" :key="item.productId" class="mb-20rpx mb-20rpx flex items-center gap-24rpx bg-white p-24rpx" @click="toPage('/pages/productDetail/productDetail', { productId: item.productId, id: item.id })">
         <view class="relative">
           <view class="h-160rpx w-160rpx shrink-0">
             <image
@@ -113,7 +113,7 @@ function getRankNumber(index: number) {
           </view>
           <view class="flex items-center rounded-8rpx from-white via-[rgba(255,210,212,0.58)] to-[rgba(255,0,16,0.2)] bg-gradient-to-l px-10rpx py-6rpx text-24rpx text-#FF0010">
             <image src="/static/icons/fire.png" class="mr-8rpx h-24rpx w-24rpx" />
-            <text>Successfully grouped over {{ formatNumber(item.sales) }} L7D</text>
+            <text>Successfully grouped over {{ formatSales(item.sales) }} L7D</text>
           </view>
         </view>
       </view>

src/pages/topChampions/topChampions.vue

@@ -12,6 +12,9 @@
 // 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', // 奖赏排名
@@ -25,24 +28,40 @@ 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([])
-function queryList(pageNo, pageSize) {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  setTimeout(() => {
-    dataList.value = [
-      { title: '123' },
-      { title: '123' },
-      { title: '123' },
-      { title: '12345' },
-    ]
-    paging.value.complete(dataList.value)
-  }, 1000)
+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" use-page-scroll refresher-only @query="queryList">
+  <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"
@@ -50,7 +69,7 @@ function queryList(pageNo, pageSize) {
       >
         <wd-navbar :bordered="false" custom-class="bg-transparent!">
           <template #left>
-            <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" />
+            <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="goBack" />
           </template>
           <template #title>
             <view class="text-white font-bold text-32rpx!">
@@ -65,35 +84,62 @@ function queryList(pageNo, pageSize) {
       <view class="py-22rpx text-center text-22rpx text-#5C5C5C">
         2025.05.05 Update
       </view>
-      <view class="relative flex items-center justify-between bg-white p-24rpx">
-        <!-- 左上角TOP 1标签 -->
-        <view class="absolute left-24rpx top-0rpx h-52rpx w-48rpx flex items-center justify-center rounded-4rpx bg-#DEA90B text-20rpx text-white font-bold" style="clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);">
+      <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">
-              1
+              {{ 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="/static/images/avatar.jpg" />
+          <wd-img width="80rpx" height="80rpx" round :src="item.headPic" />
           <view class="text-28rpx">
-            Aamir Khan
+            {{ item.name }}
           </view>
           <view class="text-24rpx">
-            V10
+            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 v-for="i in 4" :key="i" class="flex flex-col items-center">
+          <view class="flex flex-col items-center">
             <view class="text-22rpx text-#5B5B5B">
               Invited Friends
             </view>
             <view class="text-26rpx font-bold">
-              12,034
+              {{ 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>

src/utils/index.ts

@@ -257,3 +257,40 @@ export function formatNumber(num: number | string, decimals: number = 2): string
   // 添加千分位分隔符
   return formattedNum.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
 }
+
+/**
+ * 销量数字格式化
+ * 超过一千显示单位K，有小数保留一位，没有小数就显示整数，不超过一千正常显示
+ * @param num 要格式化的销量数字，支持 number 或 string 类型
+ * @returns 格式化后的字符串
+ */
+export function formatSales(num: number | string): string {
+  // 处理空值
+  if (num === undefined || num === null || num === '') {
+    return '0'
+  }
+
+  // 转换为数字
+  const numValue = typeof num === 'string' ? Number.parseFloat(num) : num
+
+  // 检查是否为有效数字
+  if (Number.isNaN(numValue)) {
+    return '0'
+  }
+
+  // 小于1000，直接显示整数
+  if (numValue < 1000) {
+    return Math.round(numValue).toString()
+  }
+
+  // 大于等于1000，转换为K单位
+  const kValue = numValue / 1000
+
+  // 如果是整数，不显示小数
+  if (kValue % 1 === 0) {
+    return `${Math.round(kValue)}K`
+  }
+
+  // 有小数，保留一位小数
+  return `${kValue.toFixed(1)}K`
+}