Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d8e942e4 1 parent 4f1a206e

feat(相册): 将家庭相册功能提取为独立组件 

将原本在Dashboard页面中的家庭相册功能提取为独立的FamilyAlbum组件
优化代码结构，提高可维护性和复用性
Inline Side-by-side
Showing 3 changed files with 135 additions and 108 deletions
......@@ -11,6 +11,7 @@ declare module 'vue' {
AppHeader: typeof import('./src/components/AppHeader.vue')['default']
BackToTop: typeof import('./src/components/BackToTop.vue')['default']
BottomNav: typeof import('./src/components/BottomNav.vue')['default']
FamilyAlbum: typeof import('./src/components/FamilyAlbum.vue')['default']
GlassCard: typeof import('./src/components/GlassCard.vue')['default']
NavBar: typeof import('./src/components/navBar.vue')['default']
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
......
<template>
<view>
<!-- Family album -->
<view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
<view class="flex justify-between items-center mb-2">
<h2 class="font-medium text-lg">多彩瞬间</h2>
<view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
查看更多
</view>
</view>
<p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
<view class="grid grid-cols-2 gap-3">
<view
v-for="(item, index) in albumData"
:key="index"
class="rounded-lg overflow-hidden h-32 relative cursor-pointer"
@click="handleMediaClick(item, albumData)"
>
<image
:src="item.type === 'video' ? item.thumbnail : item.url"
alt="家庭活动照片"
class="w-full h-full object-cover rounded-lg"
/>
<!-- 视频标识 -->
<view
v-if="item.type === 'video'"
class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-70 rounded text-white text-xs"
>
视频
</view>
</view>
</view>
</view>
<!-- 图片预览 -->
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="previewIndex"
:show-index="false"
@close="closePreview"
/>
<!-- 视频播放器 -->
<view
v-if="videoVisible"
class="fixed inset-0 bg-black"
style="z-index: 9999;"
@click="closeVideo"
>
<!-- 关闭按钮 -->
<view
@click.stop="closeVideo"
class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
style="z-index: 10000;"
>
<Close size="24" class="text-white" />
</view>
<!-- 视频播放器 -->
<video
v-if="currentVideo"
:id="'family-album-video-' + videoId"
:src="currentVideo.url"
:poster="currentVideo.thumbnail"
:controls="true"
:autoplay="false"
:show-center-play-btn="true"
:show-play-btn="true"
:object-fit="'contain'"
:show-fullscreen-btn="true"
style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
@click.stop
@play="handleVideoPlay"
@pause="handleVideoPause"
@error="handleVideoError"
@fullscreenchange="handleFullscreenChange"
/>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { Close } from '@nutui/icons-vue-taro';
import { useMediaPreview } from '@/composables/useMediaPreview';
// 使用媒体预览 composable
const {
previewVisible,
previewImages,
previewIndex,
videoVisible,
currentVideo,
videoId,
handleMediaClick,
closePreview,
closeVideo,
handleVideoPlay,
handleVideoPause,
handleFullscreenChange,
handleVideoError
} = useMediaPreview();
// 家庭相册数据
const albumData = ref([
{
type: 'image',
url: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
},
{
type: 'video',
url: 'https://vjs.zencdn.net/v/oceans.mp4',
thumbnail: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
}
]);
/**
* 打开相册列表页面
*/
const openAlbumList = () => {
Taro.navigateTo({ url: '/pages/AlbumList/index' });
};
</script>
<style lang="less" scoped>
// 组件样式
</style>
\ No newline at end of file
......@@ -138,36 +138,7 @@
<RankingCard ref="rankingCardRef" :onViewMore="openFamilyRank" />
<!-- Family album -->
<view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4">
<view class="flex justify-between items-center mb-2">
<h2 class="font-medium text-lg">多彩瞬间</h2>
<view class="text-blue-500 flex items-center text-xs" @click="openAlbumList">
查看更多
</view>
</view>
<p class="text-sm text-gray-500 mb-3">记录每一个家庭活动瞬间</p>
<view class="grid grid-cols-2 gap-3">
<view
v-for="(item, index) in albumData"
:key="index"
class="rounded-lg overflow-hidden h-32 relative cursor-pointer"
@click="handleMediaClick(item, albumData)"
>
<image
:src="item.type === 'video' ? item.thumbnail : item.url"
alt="家庭活动照片"
class="w-full h-full object-cover rounded-lg"
/>
<!-- 视频标识 -->
<view
v-if="item.type === 'video'"
class="absolute top-2 left-2 px-2 py-1 bg-black bg-opacity-70 rounded text-white text-xs"
>
视频
</view>
</view>
</view>
</view>
<FamilyAlbum />
<BottomNav />
......@@ -180,65 +151,21 @@
@click="handleAdClick"
/>
<!-- 图片预览 -->
<nut-image-preview
v-model:show="previewVisible"
:images="previewImages"
:init-no="previewIndex"
:show-index="false"
@close="closePreview"
/>
<!-- 视频播放器 -->
<view
v-if="videoVisible"
class="fixed inset-0 bg-black"
style="z-index: 9999;"
@click="closeVideo"
>
<!-- 关闭按钮 -->
<view
@click.stop="closeVideo"
class="absolute top-4 right-4 w-10 h-10 bg-black bg-opacity-50 rounded-full flex items-center justify-center"
style="z-index: 10000;"
>
<Close size="24" class="text-white" />
</view>
<!-- 视频播放器 -->
<video
v-if="currentVideo"
:id="'dashboard-video-' + videoId"
:src="currentVideo.url"
:poster="currentVideo.thumbnail"
:controls="true"
:autoplay="false"
:show-center-play-btn="true"
:show-play-btn="true"
:object-fit="'contain'"
:show-fullscreen-btn="true"
style="width: 100vw; height: 50vh; position: absolute; top: 20vh; left: 0;"
@click.stop
@play="handleVideoPlay"
@pause="handleVideoPause"
@error="handleVideoError"
@fullscreenchange="handleFullscreenChange"
/>
</view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import Taro, { useDidShow, useReady } from '@tarojs/taro';
import { Setting, Photograph, Close, Category } from '@nutui/icons-vue-taro';
import { Setting, Photograph, Category } from '@nutui/icons-vue-taro';
import BottomNav from '../../components/BottomNav.vue';
import TotalPointsDisplay from '@/components/TotalPointsDisplay.vue';
import PointsCollector from '@/components/PointsCollector.vue'
import WeRunAuth from '@/components/WeRunAuth.vue'
import RankingCard from '@/components/RankingCard.vue'
import AdOverlay from '@/components/AdOverlay.vue'
import { useMediaPreview } from '@/composables/useMediaPreview';
import FamilyAlbum from '@/components/FamilyAlbum.vue';
// 默认家庭封面图
const defaultFamilyCover = 'https://cdn.ipadbiz.cn/lls_prog/images/default-family-cover.png';
// 默认头像
......@@ -260,35 +187,7 @@ const familySlogn = ref('')
const familyCover = ref('')
const familyOwner = ref(false);
// 使用媒体预览 composable
const {
previewVisible,
previewImages,
previewIndex,
videoVisible,
currentVideo,
videoId,
handleMediaClick,
closePreview,
closeVideo,
handleVideoPlay,
handleVideoPause,
handleFullscreenChange,
handleVideoError
} = useMediaPreview();
// 家庭相册数据
const albumData = ref([
{
type: 'image',
url: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
},
{
type: 'video',
url: 'https://vjs.zencdn.net/v/oceans.mp4',
thumbnail: 'https://cdn.ipadbiz.cn/hager/0513-1_FsxMk28AGz6N_D1zZFFOl_EaRdss.png',
}
]);
// 广告遮罩层数据
const adObj = ref({})
......@@ -364,9 +263,7 @@ const goToProfile = () => {
Taro.navigateTo({ url: '/pages/EditFamily/index' });
};
const openAlbumList = () => {
Taro.navigateTo({ url: '/pages/AlbumList/index' });
};
/**
* 打开拍照上传页面
......