|
|
@@ -5,43 +5,220 @@
|
|
|
style: {
|
|
|
// 'custom' 表示开启自定义导航栏，默认 'default'
|
|
|
navigationStyle: 'custom',
|
|
|
- navigationBarTitleText: '首页',
|
|
|
},
|
|
|
}
|
|
|
</route>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
defineOptions({
|
|
|
- name: 'Home',
|
|
|
+ name: 'Index', // 首页
|
|
|
})
|
|
|
|
|
|
// 获取屏幕边界到安全区域距离
|
|
|
-let safeAreaInsets
|
|
|
-let systemInfo
|
|
|
-
|
|
|
-// #ifdef MP-WEIXIN
|
|
|
-// 微信小程序使用新的API
|
|
|
-systemInfo = uni.getWindowInfo()
|
|
|
-safeAreaInsets = systemInfo.safeArea
|
|
|
- ? {
|
|
|
- top: systemInfo.safeArea.top,
|
|
|
- right: systemInfo.windowWidth - systemInfo.safeArea.right,
|
|
|
- bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
|
|
|
- left: systemInfo.safeArea.left,
|
|
|
- }
|
|
|
- : null
|
|
|
-// #endif
|
|
|
-
|
|
|
-// #ifndef MP-WEIXIN
|
|
|
-// 其他平台继续使用uni API
|
|
|
-systemInfo = uni.getSystemInfoSync()
|
|
|
-safeAreaInsets = systemInfo.safeAreaInsets
|
|
|
-// #endif
|
|
|
+const systemInfo = uni.getSystemInfoSync()
|
|
|
+const safeAreaInsets = systemInfo.safeAreaInsets
|
|
|
+
|
|
|
+// z-paging
|
|
|
+const paging = ref(null)
|
|
|
+
|
|
|
+// 轮播图
|
|
|
+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 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>
|
|
|
- <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
|
|
|
- 121212312312
|
|
|
- </view>
|
|
|
- <tabbar />
|
|
|
+ <z-paging
|
|
|
+ ref="paging"
|
|
|
+ :paging-style="{ paddingTop: `${safeAreaInsets?.top}px` }"
|
|
|
+ refresher-only
|
|
|
+ @query="queryList"
|
|
|
+ >
|
|
|
+ <template #top>
|
|
|
+ <view class="flex items-center justify-between pb-40rpx pl-42rpx pr-34rpx pt-26rpx">
|
|
|
+ <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" />
|
|
|
+ <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-25rpx">
|
|
|
+ <view class="flex items-end justify-between pb-22rpx pt-24rpx">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ src="/static/index/home-vip.png"
|
|
|
+ class="h-100rpx w-100rpx"
|
|
|
+ />
|
|
|
+ <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
|
|
|
+ {{ $t('home.vip') }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ src="/static/index/home-vip.png"
|
|
|
+ class="h-100rpx w-100rpx"
|
|
|
+ />
|
|
|
+ <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
|
|
|
+ {{ $t('home.vip') }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ src="/static/index/home-vip.png"
|
|
|
+ class="h-112rpx w-112rpx"
|
|
|
+ />
|
|
|
+ <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
|
|
|
+ {{ $t('home.vip') }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ src="/static/index/home-vip.png"
|
|
|
+ class="h-100rpx w-100rpx"
|
|
|
+ />
|
|
|
+ <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
|
|
|
+ {{ $t('home.vip') }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center">
|
|
|
+ <image
|
|
|
+ src="/static/index/home-vip.png"
|
|
|
+ class="h-100rpx w-100rpx"
|
|
|
+ />
|
|
|
+ <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
|
|
|
+ {{ $t('home.vip') }}
|
|
|
+ </view>
|
|
|
+ </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>
|
liangan
