feat: 销量排名

src/api/product.ts

@@ -1,5 +1,5 @@
+import { extractAndRetained, qs } from '@/utils'
 import { http } from '@/utils/http'
-import { extractAndRetained, qs } from '@/utils/index'
 
 /**
  * 获取商品列表
@@ -9,6 +9,14 @@ export function getList(data: any) {
   const { extract, retained } = extractAndRetained(data, ['page', 'size'])
   return http.post<any>(`/mall/combination/app/list?${qs(extract)}`, { ...retained, isShow: 1 })
 }
+/**
+ * 获取商品列表
+ * @returns data.list[]
+ */
+export function getRankList(data: any) {
+  const { extract, retained } = extractAndRetained(data, ['page', 'size'])
+  return http.post<any>(`/mall/combination/rank?${qs(extract)}`, { ...retained })
+}
 
 /**
  * 获取商品详情

src/pages/bestSellers/bestSellers.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 { getRankList } from '@/api/product'
+import { formatNumber } from '@/utils'
+import { goBack, toPage } from '@/utils/page'
 
 defineOptions({
   name: 'BestSellers', // 销量
@@ -27,27 +30,42 @@ 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)
+async function queryList(pageNo: number, pageSize: number) {
+  try {
+    const res = await getRankList({
+      page: pageNo,
+      size: pageSize,
+    })
+    paging.value.complete(res.data.list)
+  }
+  catch {
+    paging.value.complete(false)
+  }
+}
+
+// 根据排名获取标签背景色
+function getRankBgColor(index: number) {
+  const colors = {
+    0: '#DEA90B', // 第一名
+    1: '#5E719E', // 第二名
+    2: '#D47128', // 第三名
+  }
+  return colors[index] || '#A5ADBD' // 其余排名
+}
+
+// 根据排名获取排名数字
+function getRankNumber(index: number) {
+  return index + 1
 }
 </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" :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" />
+            <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="goBack" />
           </template>
           <template #title>
             <view class="text-white font-bold text-32rpx!">
@@ -62,34 +80,40 @@ function queryList(pageNo, pageSize) {
       </view>
     </template>
     <view class="pt-20rpx">
-      <view class="flex items-center gap-24rpx bg-white p-24rpx">
+      <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 class="relative">
-          <image
-            src="/static/images/avatar.jpg"
-            class="h-160rpx w-160rpx shrink-0"
-          />
-          <!-- 左上角TOP 1标签 -->
-          <view class="absolute left-10rpx top-10rpx 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 class="h-160rpx w-160rpx shrink-0">
+            <image
+              :src="item.image"
+              class="w-full"
+              mode="widthFix"
+            />
+          </view>
+          <!-- 左上角TOP标签 -->
+          <view
+            class="absolute left-10rpx top-10rpx 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>
         <view class="flex-1">
           <view class="line-clamp-2 text-28rpx">
-            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+            {{ item.productName }}
           </view>
           <view class="text-28rpx text-#FF0010">
-            ৳ 300
+            ৳ {{ formatNumber(item.price) }}
           </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">
-            <view class="i-carbon-fire mr-8rpx" />
-            <text>Successfully grouped over 9K L7D</text>
+            <image src="/static/icons/fire.png" class="mr-8rpx h-24rpx w-24rpx" />
+            <text>Successfully grouped over {{ formatNumber(item.sales) }} L7D</text>
           </view>
         </view>
       </view>