123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <!-- 使用 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>
|