|
|
@@ -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>
|
liangan
