|
@@ -11,8 +11,9 @@
|
|
|
// 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
|
|
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
|
-import { onMounted, onUnmounted } from 'vue'
|
|
|
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
|
|
|
+import CustomTooltip from './components/CustomTooltip.vue'
|
|
|
+import NotificationCarousel from './components/NotificationCarousel.vue'
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'ProductDetail', // 商品详情
|
|
@@ -28,20 +29,37 @@ useZPaging(paging)
|
|
|
|
|
|
// 添加导航栏背景色变量
|
|
|
const navBgColor = ref('transparent')
|
|
|
-const navIconType = ref('tr') // tr表示透明背景下的图标,默认为白色图标
|
|
|
const changeNavbarThreshold = 300 // 滚动到这个高度时改变导航栏颜色
|
|
|
|
|
|
+const showTip = ref(false)
|
|
|
+
|
|
|
+// 添加通知轮播数据
|
|
|
+const notifications = ref([
|
|
|
+ { id: 1, name: 'Aamir Khan', time: '10s' },
|
|
|
+ { id: 2, name: 'John Smith', time: '30s' },
|
|
|
+ { id: 3, name: 'Maria Garcia', time: '1m' },
|
|
|
+])
|
|
|
+
|
|
|
onPageScroll((e) => {
|
|
|
// 根据滚动高度改变导航栏背景色
|
|
|
if (e.scrollTop > changeNavbarThreshold) {
|
|
|
navBgColor.value = '#ffffff'
|
|
|
- navIconType.value = '' // 切换为深色图标
|
|
|
}
|
|
|
else {
|
|
|
navBgColor.value = 'transparent'
|
|
|
- navIconType.value = 'tr' // 切换为白色图标
|
|
|
}
|
|
|
})
|
|
|
+// 点击页面任意地方隐藏提示
|
|
|
+function handlePageClick() {
|
|
|
+ if (showTip.value) {
|
|
|
+ showTip.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 生命周期钩子
|
|
|
+onMounted(() => {
|
|
|
+ showTip.value = true // 显示提示
|
|
|
+})
|
|
|
|
|
|
// 搜索结果
|
|
|
// 轮播图
|
|
@@ -52,42 +70,6 @@ const swiperList = ref([
|
|
|
'/static/images/vip-level1.png',
|
|
|
])
|
|
|
|
|
|
-// 添加通知轮播数据
|
|
|
-const notifications = ref([
|
|
|
- { id: 1, name: 'Aamir Khan', time: '10s' },
|
|
|
- { id: 2, name: 'John Smith', time: '30s' },
|
|
|
- { id: 3, name: 'Maria Garcia', time: '1m' },
|
|
|
-])
|
|
|
-const notificationIndex = ref(0)
|
|
|
-// 添加上一个索引的记录,用于判断动画方向
|
|
|
-const prevNotificationIndex = ref(0)
|
|
|
-
|
|
|
-// 设置通知轮播定时器
|
|
|
-let notificationTimer: number | null = null
|
|
|
-
|
|
|
-// 生命周期钩子中启动轮播
|
|
|
-onMounted(() => {
|
|
|
- startNotificationCarousel()
|
|
|
-})
|
|
|
-
|
|
|
-// 组件卸载时清除定时器
|
|
|
-onUnmounted(() => {
|
|
|
- if (notificationTimer) {
|
|
|
- clearInterval(notificationTimer)
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// 启动通知轮播
|
|
|
-function startNotificationCarousel() {
|
|
|
- notificationTimer = setInterval(() => {
|
|
|
- // 保存当前索引
|
|
|
- prevNotificationIndex.value = notificationIndex.value
|
|
|
-
|
|
|
- // 更新为下一个索引
|
|
|
- notificationIndex.value = (notificationIndex.value + 1) % notifications.value.length
|
|
|
- }, 1500) // 每1.5秒切换一次
|
|
|
-}
|
|
|
-
|
|
|
function handleClick(e) {
|
|
|
// console.log(e)
|
|
|
}
|
|
@@ -122,7 +104,7 @@ function queryList(pageNo, pageSize) {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
|
|
|
+ <z-paging ref="paging" refresher-only use-page-scroll @query="queryList" @click="handlePageClick">
|
|
|
<wd-navbar :bordered="false" safe-area-inset-top fixed :left-arrow="false" :custom-style="`background: ${navBgColor}; transition: background 0.3s;`" custom-class="h-auto!">
|
|
|
<template #title>
|
|
|
<view class="box-border h-full flex items-center justify-between p-24rpx">
|
|
@@ -137,28 +119,10 @@ function queryList(pageNo, pageSize) {
|
|
|
custom-indicator-class="bottom-40rpx!" :indicator="{ type: 'fraction' }" indicator-position="bottom-right"
|
|
|
image-mode="aspectFit" @click="handleClick" @change="onChange"
|
|
|
/>
|
|
|
- <view class="absolute left-24rpx h-56rpx w-70% overflow-hidden rounded-full" :style="{ top: `${safeAreaInsets?.top + 52}px` }">
|
|
|
- <view
|
|
|
- v-for="(notification, index) in notifications"
|
|
|
- :key="notification.id"
|
|
|
- class="flex items-center rounded-full bg-#000000/60 py-8rpx pl-8rpx pr-14rpx transition-all duration-500 ease-in-out"
|
|
|
- :style="{
|
|
|
- opacity: index === notificationIndex ? 1 : 0,
|
|
|
- transform: index === notificationIndex ? 'translateY(0)'
|
|
|
- : (index === prevNotificationIndex ? 'translateY(-100%)' : 'translateY(100%)'),
|
|
|
- position: 'absolute',
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
- width: '100%',
|
|
|
- zIndex: index === notificationIndex ? 2 : 1,
|
|
|
- }"
|
|
|
- >
|
|
|
- <wd-img width="40rpx" round height="40rpx" src="/static/images/avatar.jpg" />
|
|
|
- <text class="ml-12rpx truncate text-24rpx text-white">
|
|
|
- {{ notification.name }} joined this group {{ notification.time }} ago!
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <NotificationCarousel
|
|
|
+ :notifications="notifications"
|
|
|
+ :top="`${safeAreaInsets?.top + 52}px`"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view class="relative -top-24rpx">
|
|
|
<view
|
|
@@ -277,6 +241,39 @@ function queryList(pageNo, pageSize) {
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <template #bottom>
|
|
|
+ <view class="h-100rpx flex gap-32rpx bg-white bg-opacity-60 px-28rpx backdrop-blur-20">
|
|
|
+ <view class="flex items-center justify-between gap-20rpx">
|
|
|
+ <view class="flex flex-col items-center justify-center">
|
|
|
+ <wd-icon color="#BDBDBD" name="home" size="40rpx" />
|
|
|
+ <text class="text-18rpx text-#757575">
|
|
|
+ Home
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-col items-center justify-center">
|
|
|
+ <wd-icon color="#BDBDBD" name="heart-filled" size="40rpx" />
|
|
|
+ <text class="text-18rpx text-#757575">
|
|
|
+ Favorite
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex flex-1 items-center justify-end text-32rpx">
|
|
|
+ <view class="relative">
|
|
|
+ <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white">
|
|
|
+ Open Group
|
|
|
+ </view>
|
|
|
+ <CustomTooltip
|
|
|
+ v-model:visible="showTip"
|
|
|
+ highlight-text1="$99.99"
|
|
|
+ highlight-text2="$1.8"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="rounded-r-full bg-[var(--wot-color-theme)] px-34rpx py-18rpx text-white">
|
|
|
+ Join Group
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
</z-paging>
|
|
|
</template>
|
|
|
|