feat: 销量排行页面开发

src/locale/en.json

@@ -5,6 +5,7 @@
   "home.missionCenter": "Mission Center",
   "home.refer&earn": "Refer & Earn",
   "home.vip": "VIP Membership",
+  "home.bestSellers": "Best Sellers",
   "search.placeholder": "Search",
   "search.filterPrice": "All Price",
   "search.filterCategory": "Category",

src/pages.json

@@ -74,6 +74,14 @@
         "navigationBarTitleText": "%app.name%"
       }
     },
+    {
+      "path": "pages/bestSellers/bestSellers",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/income/income",
       "type": "page",

src/pages/bestSellers/bestSellers.vue

@@ -0,0 +1,89 @@
+<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: 'BestSellers', // 销量
+})
+
+// 获取屏幕边界到安全区域距离
+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!">
+              Best Sellers
+            </view>
+          </template>
+        </wd-navbar>
+        <image
+          src="/static/icons/seller-nav.png"
+          class="absolute bottom-12rpx right-12rpx h-166.27rpx w-180rpx"
+        />
+      </view>
+    </template>
+    <view class="pt-20rpx">
+      <view class="flex items-center gap-24rpx bg-white p-24rpx">
+        <image
+          src="/static/images/avatar.jpg"
+          class="h-160rpx w-160rpx shrink-0"
+        />
+        <view class="flex-1">
+          <view class="line-clamp-2 text-28rpx">
+            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+          </view>
+          <view class="text-28rpx text-#FF0010">
+            ৳ 300
+          </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>
+          </view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/index/index.vue

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