hookehuyr

feat(相册): 添加弹窗打开关闭事件通知父组件

在FamilyAlbum组件中添加popup-open和popup-close事件,当上传弹窗打开或关闭时通知父组件Dashboard。父组件根据事件锁定或解锁页面滚动,防止弹窗打开时页面滚动。

在Dashboard组件中添加页面滚动锁定功能,通过计算属性和Taro API实现页面高度固定和滚动控制。
......@@ -129,6 +129,9 @@ import { Close, Photograph, IconFont } from '@nutui/icons-vue-taro';
import { getPhotoListAPI } from '@/api/photo';
import UploadMediaPopup from '@/components/UploadMediaPopup.vue';
// 定义事件
const emit = defineEmits(['popup-open', 'popup-close']);
// 视频播放相关状态
const videoVisible = ref(false);
const currentVideo = ref(null);
......@@ -256,6 +259,8 @@ const openAlbumList = () => {
*/
const navigateToUpload = () => {
uploadPopupVisible.value = true;
// 通知父组件弹窗已打开
emit('popup-open');
};
/**
......@@ -263,6 +268,8 @@ const navigateToUpload = () => {
*/
const closeUploadPopup = () => {
uploadPopupVisible.value = false;
// 通知父组件弹窗已关闭
emit('popup-close');
};
/**
......
<!--
* @Date: 2025-08-27 17:43:45
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-22 10:31:20
* @LastEditTime: 2025-09-23 11:08:57
* @FilePath: /lls_program/src/pages/Dashboard/index.vue
* @Description: 首页
-->
<template>
<view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;">
<view class="min-h-screen flex flex-col bg-white pb-16" :style="pageStyle">
<!-- Hero section with family name and background image -->
<view class=" bg-white rounded-xl shadow-md mx-4 mt-4 relative" :style="{ height: isTabletDevice ? '40vh' : '30vh' }">
<image :src="familyCover" mode="aspectFill" alt="Family background" class="w-full h-full object-cover rounded-xl" />
......@@ -152,7 +152,11 @@
<RankingCard ref="rankingCardRef" :onViewMore="openFamilyRank" />
<!-- Family album -->
<FamilyAlbum ref="familyAlbumRef" />
<FamilyAlbum
ref="familyAlbumRef"
@popup-open="lockPageScroll"
@popup-close="unlockPageScroll"
/>
<BottomNav />
......@@ -196,15 +200,64 @@ const finalTotalPoints = ref(0)
const pendingPoints = ref([]) // 待收集的积分数据
const familyAlbumRef = ref(null)
// 页面锁定相关状态
const isPageLocked = ref(false)
const pageHeight = ref(0)
const familyName = ref('')
const familySlogn = ref('')
const familyCover = ref('')
const familyOwner = ref(false);
// 广告遮罩层数据
const adOverlayRef = ref(null)
// 页面样式计算属性
const pageStyle = computed(() => {
const baseStyle = {
'background-color': '#F9FAFB'
}
if (isPageLocked.value && pageHeight.value > 0) {
return {
...baseStyle,
height: `${pageHeight.value}px`,
overflow: 'hidden'
}
}
return baseStyle
})
/**
* 锁定页面滚动
*/
const lockPageScroll = () => {
// 获取当前视窗高度
Taro.getSystemInfo({
success: (res) => {
pageHeight.value = res.windowHeight
isPageLocked.value = true
}
})
}
/**
* 解锁页面滚动
*/
const unlockPageScroll = () => {
isPageLocked.value = false
pageHeight.value = 0
// 解锁后滚动到页面底部
setTimeout(() => {
Taro.pageScrollTo({
scrollTop: 99999, // 使用一个很大的数值确保滚动到底部
duration: 50 // 滚动动画时长100ms
})
}, 50) // 延迟50ms确保页面解锁完成
}
/**
* 触发积分收集组件的一键收取
*/
......