123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <!-- 使用 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.vip',
- size: '100rpx',
- },
- ])
- 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)
- }
- </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" />
- </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" :class="[`h-${item.size}`, `w-${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" />
- </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" />
- <view />
- </view>
- </view>
- </view>
- </z-paging>
- </template>
- <style>
- page {
- background: #fff;
- }
- </style>
|