bandhuBuy-uniapp/src/pages/index/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    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'

import { getList } from '@/api/product'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Index', // 首页
})

// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// 搜索
function toSearch() {
  uni.navigateTo({
    url: '/pages/search/search',
  })
}

// 轮播图
const current = ref<number>(0)
const swiperList = ref([
  'https://picsum.photos/750/420?random=1',
  'https://picsum.photos/750/420?random=2',
  'https://picsum.photos/750/420?random=3',
  'https://picsum.photos/750/420?random=4',
])
function handleClick(e) {
  // console.log(e)
}
function onChange(e) {
  // console.log(e)
}

// 导航图标
const navIcons = ref([
  {
    image: '/static/icons/home-vip.png',
    title: 'home.missionCenter',
    size: '100rpx',
    url: '/pages/missionCenter/missionCenter',
  },
  {
    image: '/static/icons/home-vip.png',
    title: 'home.refer&earn',
    size: '100rpx',
    url: '/pages/referEarn/referEarn',
  },
  {
    image: '/static/icons/home-vip.png',
    title: 'home.vip',
    size: '112rpx',
    url: '/pages/vipMembership/vipMembership',
  },
  {
    image: '/static/icons/home-vip.png',
    title: 'home.bestSellers',
    size: '100rpx',
    url: '/pages/bestSellers/bestSellers',
  },
  {
    image: '/static/icons/home-vip.png',
    title: 'home.topChampions',
    size: '100rpx',
    url: '/pages/topChampions/topChampions',
  },
])

// 新品列表
const newProducts = ref<any>([])

async function getNewList() {
  const res = await getList({ page: 1, size: 10, isNew: true })
  console.log(res)
  newProducts.value = res.data.list
}

//  商品列表
const priceTab = ref<number>(0)

// 300Spot    500Spot    1000Spot    2000Spot
const priceTabList = ref([
  {
    title: '300Spot',
    value: 300,
    minPrice: 0,
    maxPrice: 300,
  },
  {
    title: '500Spot',
    value: 500,
    minPrice: 300,
    maxPrice: 500,
  },
  {
    title: '1000Spot',
    value: 1000,
    minPrice: 500,
    maxPrice: 1000,
  },
  {
    title: '2000Spot',
    value: 2000,
    minPrice: 1000,
    maxPrice: 2000,
  },
])

const dataList = ref<any>([])
async function queryList(pageNo, pageSize) {
  // 获取当前选中tab的价格范围，默认为第一个tab (0-300)
  const currentTab = priceTabList.value[priceTab.value] || priceTabList.value[0]
  const minPrice = currentTab?.minPrice ?? 0
  const maxPrice = currentTab?.maxPrice ?? 300

  const params = {
    page: pageNo,
    size: pageSize,
    minPrice,
    maxPrice,
  }
  const res = await getList(params)
  paging.value.complete(res.data.list)
}

// 价格tab切换事件
function onPriceTabChange() {
  paging.value.reload()
}

onLoad(() => {
  getNewList()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" bg-color="#fff" use-page-scroll @query="queryList">
    <template #top>
      <view
        class="flex items-center justify-between bg-white pb-40rpx pl-42rpx pr-34rpx pt-26rpx"
        :style="{ paddingTop: `${safeAreaInsets?.top + 13}px` }"
      >
        <image src="/static/header-logo.png" class="h-54rpx w-250rpx" />
        <view class="flex items-center">
          <wd-icon custom-class="mr-20rpx" name="search1" size="38rpx" @click="toSearch" />
          <wd-icon name="notification" size="38rpx" @click="toPage('/pages/notifications/notifications')" />
        </view>
      </view>
    </template>
    <wd-swiper
      v-model:current="current"
      :list="swiperList" autoplay
      :indicator="{ type: 'fraction' }"
      indicator-position="bottom-right"
      @click="handleClick"
      @change="onChange"
    />
    <view class="px-24rpx pb-24rpx">
      <view class="flex items-end justify-between pb-22rpx pt-24rpx">
        <view v-for="(item, index) in navIcons" :key="index" class="flex flex-col items-center" @click="toPage(item.url)">
          <image :src="item.image" :style="`width: ${item.size}; height: ${item.size};`" />
          <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
            {{ $t(item.title) }}
          </view>
        </view>
      </view>
      <view>
        <view class="mb-16rpx text-32rpx">
          News
        </view>
        <scroll-view scroll-x>
          <view class="flex items-center gap-22rpx pb-24rpx">
            <product v-for="(item, index) in newProducts" :key="index" :item="item" @item-click="toPage('/pages/productDetail/productDetail', { productId: item.productId, id: item.id })" />
          </view>
        </scroll-view>
      </view>
      <view>
        <wd-tabs v-model="priceTab" :line-width="0" :line-height="0" @change="onPriceTabChange">
          <template v-for="item in priceTabList" :key="item">
            <wd-tab :title="item.title" />
          </template>
        </wd-tabs>
        <view class="grid grid-cols-2 gap-22rpx">
          <product v-for="(item, index) in dataList" :key="index" width="100%" :height="340" :item="item" @item-click="toPage('/pages/productDetail/productDetail', { productId: item.productId, id: item.id })" />
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style>
page {
  background: #fff;
}
</style>