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'

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',
  },
])

function toPage(url: string) {
  if (url) {
    uni.navigateTo({
      url,
    })
  }
}

// 新品列表
const newProducts = ref([
  {
    image: 'https://picsum.photos/260?random=1',
    title: 'Chanel Rouge Coco Shine…',
    price: '123',
    sold: 100,
  },
  {
    image: 'https://picsum.photos/260?random=2',
    title: 'Chanel Rouge Coco Shine…',
    price: '123',
    sold: 100,
  },
  {
    image: 'https://picsum.photos/260?random=3',
    title: 'Chanel Rouge Coco Shine…',
    price: '123',
    sold: 100,
  },
  {
    image: 'https://picsum.photos/260?random=4',
    title: 'Chanel Rouge Coco Shine…',
    price: '123',
    sold: 100,
  },
  {
    image: 'https://picsum.photos/260?random=5',
    title: 'Chanel Rouge Coco Shine…',
    price: '123',
    sold: 100,
  },
])

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

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

const dataList = ref([])
function queryList(pageNo, pageSize) {
  // 此处请求仅为演示，请替换为自己项目中的请求
  setTimeout(() => {
    dataList.value = [
      { title: '123' },
      { title: '123' },
      { title: '123' },
      { title: '12345' },
    ]
    paging.value.complete(dataList.value)
  }, 1000)
}

function toProductDetail(item) {
  const data = JSON.stringify({ id: item.id })
  uni.navigateTo({
    url: `/pages/productDetail/productDetail?data=${encodeURIComponent(data)}`,
  })
}
function toNotifications() {
  uni.navigateTo({
    url: '/pages/notifications/notifications',
  })
}
</script>

<template>
  <z-paging ref="paging" refresher-only 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="toNotifications" />
        </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="toProductDetail" />
          </view>
        </scroll-view>
      </view>
      <view>
        <wd-tabs v-model="priceTab" :line-width="0" :line-height="0">
          <block v-for="item in priceTabList" :key="item">
            <wd-tab :title="item.title" />
          </block>
        </wd-tabs>
        <view class="flex flex-wrap gap-22rpx">
          <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" @item-click="toProductDetail" />
          <view />
        </view>
      </view>
    </view>
  </z-paging>
</template>

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