From 8dd9360a0e4cfd22ea9e261bec3821eff3f57fe8 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期二, 12 八月 2025 10:10:07 +0800
Subject: [PATCH] add：分享功能
---
sub-pages/community/index.vue | 223 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 138 insertions(+), 85 deletions(-)
diff --git a/sub-pages/community/index.vue b/sub-pages/community/index.vue
index 388b7d7..6c005ea 100644
--- a/sub-pages/community/index.vue
+++ b/sub-pages/community/index.vue
@@ -1,31 +1,32 @@
<template>
<view :class="['app', theme]">
- <up-sticky bgColor="#ffffff">
- <view class="header">
- <up-icon name="list" size="40rpx" color="#333333" @click="onSettingClick" />
- <view>
- <up-tabs :list="list1">
- <!-- <template #left>
- <up-icon name="list" size="40rpx" color="#333333" />
- </template> -->
- <!-- <template #right>
- <up-icon name="search" size="48rpx" color="#333333" />
- </template> -->
- </up-tabs>
- </view>
- <up-icon name="search" size="48rpx" color="#333333" @click="toSearchPage()" />
- </view>
- </up-sticky>
+<!-- <up-sticky bgColor="#ffffff">-->
+<!-- <view class="header">-->
+<!--<!– <up-icon name="list" size="40rpx" color="#333333" @click="onSettingClick" />–>-->
+<!-- <view>-->
+<!-- <!– <up-tabs :list="list1"> –>-->
+<!-- <up-tabs v-model:current="parentTabIndex" :list="userTabList" @click="onChangeTab">-->
+<!-- <!– <template #left>-->
+<!-- <up-icon name="list" size="40rpx" color="#333333" />-->
+<!-- </template> –>-->
+<!-- <!– <template #right>-->
+<!-- <up-icon name="search" size="48rpx" color="#333333" />-->
+<!-- </template> –>-->
+<!-- </up-tabs>-->
+<!-- </view>-->
+<!--<!– <up-icon name="search" size="48rpx" color="#333333" @click="toSearchPage()" />–>-->
+<!-- </view>-->
+<!-- </up-sticky>-->
- <view style="margin: 10px 10px 10px 10px; ">
- <up-tabs :list="tabList" :itemStyle="{ padding: '0 16rpx', textAlign: 'center', flex: '1' }">
- <template #right>
- <up-icon name="arrow-down" size="15" color="#333333" />
- </template>
- </up-tabs>
- </view>
+<!-- <view style="margin: 10px 10px 10px 10px; ">-->
+<!-- <up-tabs :list="tabList" :itemStyle="{ padding: '0 16rpx', textAlign: 'center', flex: '1' }">-->
+<!-- <template #right>-->
+<!-- <up-icon name="arrow-down" size="15" color="#333333" />-->
+<!-- </template>-->
+<!-- </up-tabs>-->
+<!-- </view>-->
<view class="content-area">
- <up-waterfall v-model="flowList">
+ <up-waterfall v-model="films">
<template #left="{ leftList }">
<FlowCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick" />
</template>
@@ -34,8 +35,9 @@
<FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
</template>
</up-waterfall>
+ <up-loadmore :status="filmStatus" :line="true" />
</view>
- <!-- <view v-for="(item, index) in 100">safsafda</view> -->
+ <view style="height: 50px; width: 100%;"></view>
<common-footer flg="0"></common-footer>
<setting-popup v-model="settingShow" />
</view>
@@ -43,7 +45,16 @@
<script setup lang="ts">
import SettingPopup from '@/components/setting/setting-popup.vue';
import { reactive, ref, onMounted } from 'vue';
-import { onLoad } from '@dcloudio/uni-app'
+import { FilmCategoryTree, FilmWorks } from '@/types/index'
+import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { FilmTabCategory, FilmWorksCategory } from '@/enums/dict'
+import { useGlobal } from '@/composables/useGlobal'
+const { $http, $message, $store } = useGlobal()
+import { getParentTabList, getTabList, getFilmWorksBase } from '@/sub-pages/utils/api'
+import { FilmWorksQueryDTO } from '@/types/index'
+
+import { useNavigator } from '@/composables/useNavigator'
+const { navigateTo } = useNavigator()
// 控制设置弹窗显示
const settingShow = ref(false);
@@ -53,75 +64,116 @@
}
// 创建响应式数据
-const list1 = reactive([
- { name: '关注' },
- { name: '发现' },
- { name: '苏州' },
-]);
+// const list1 = reactive([
+// { name: '关注' },
+// { name: '发现' },
+// { name: '苏州' },
+// ]);
+const parentTabIndex = ref<number>(0)
+const userTabList = ref<FilmCategoryTree[]>([])
+const tabList = ref<FilmCategoryTree[]>([])
-const tabList = ref([
- { id: 'recommend', name: '推荐' },
- { id: 'straight', name: '直播' },
- { id: 'short', name: '短剧' },
- { id: 'food', name: '美食' },
- { id: 'travel', name: '穿搭' },
- { id: 'beauty', name: '美甲' },
- { id: 'more', name: '更多' },
-])
-
-const flowList = ref([
- {
- id: 1,
- title: 'iPhone 高清全屏壁纸，划走就后悔',
- imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
- username: '草莓喵喵',
- avatar: '/static/avatar1.jpg',
- likes: 1397
- },
- {
- id: 2,
- title: '高清 4K 全屏手机壁纸 #高质量壁纸',
- imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
- username: '4K wallpaper',
- avatar: '/static/avatar2.jpg',
- likes: 167
- },
- {
- id: 3,
- title: 'iPhone 实况动态壁纸 #动态壁纸',
- imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
- username: '图墙精选',
- avatar: '/static/avatar3.jpg',
- likes: 980
- },
- {
- id: 4,
- title: '高清小清新壁纸 浪漫的人都有自己的海',
- imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
- username: 'wallpaper',
- avatar: '/static/avatar4.jpg',
- likes: 456
- }
-])
-
-const handleDetailClick = (item: Item) => {
- const url =
- item.id === 1
- ? `/sub-pages/film-list/film-official-detail?id=${item.id}`
- : `/sub-pages/film-list/film-detail?id=${item.id}`
- uni.navigateTo({ url })
+const handleDetailClick = (item: FilmCategoryTree) => {
+ const urlOfficicl = `/sub-pages/film-list/film-official-detail?id=${item.id}`;
+ const url = `/sub-pages/film-list/film-detail?id=${item.id}`
+ navigateTo(url)
}
const toSearchPage = () => {
- uni.navigateTo({
- url: '/sub-pages/community/search-page'
- })
+ const url = `/sub-pages/community/search-page`
+ navigateTo(url)
+}
+
+const onChangeTab = (item: FilmCategoryTree) => {
+ getTabList(item.id, tabList)
}
const theme = ref('light')
onLoad(() => {
const storedTheme = uni.getStorageSync('theme') || 'light'
theme.value = storedTheme
+})
+
+
+onShow(() => {
+ getDefaultTabList()
+ // 获取电影
+ getfilms()
+});
+
+onPullDownRefresh(async () => {
+ console.log('用户下拉刷新了')
+ filmPage.value = 1
+ getfilms()
+ uni.stopPullDownRefresh() // 停止下拉刷新动画
+})
+
+onReachBottom(() => {
+ console.log('用户触底了')
+ getfilms()
+})
+
+const getDefaultTabList = async () => {
+ await getParentTabList(userTabList, false)
+ const curItem = userTabList.value[parentTabIndex.value]
+ getTabList(curItem.id, tabList)
+}
+
+const films = ref<FilmWorks[]>([])
+const filmPage = ref(1)
+const filmSize = 10
+const filmStatus = ref('loading')
+
+const getfilms = async () => {
+ if (filmStatus.value === 'nomore') return
+
+ filmStatus.value = 'loading'
+
+ // TODO 暂时使用光影的类别
+ const query: FilmWorksQueryDTO = {
+ classify: FilmWorksCategory.COMMUNITY,
+ status: 'published',
+ current: filmPage.value,
+ size: filmSize,
+ };
+ const records = await getFilmWorksBase(query)
+
+ if (records && records.length > 0) {
+ // 使用 Set 进行去重
+ const existingIds = new Set(films.value.map(item => item.id))
+ const uniqueRecords = records.filter(item => !existingIds.has(item.id))
+
+ films.value = [...films.value, ...uniqueRecords]
+
+ // 如果返回的记录数少于请求的 size，说明没有更多数据
+ if (records.length < filmSize) {
+ filmStatus.value = 'noMore'
+ }
+
+ filmPage.value++
+ } else {
+ filmStatus.value = 'noMore'
+ }
+}
+
+defineExpose({
+ onShareAppMessage() {
+ return {
+ title: '影视地标推荐',
+ path: '/pages/home/home',
+ imageUrl: '', // 可以设置默认分享图片
+ desc: '发现全球影视拍摄地，探索电影背后的故事'
+ }
+ },
+ // 分享到朋友圈
+ onShareTimeline() {
+ return {
+ title: '影视地标推荐',
+ query: '',
+ imageUrl: '', // 可以设置默认分享图片
+ desc: '发现全球影视拍摄地，探索电影背后的故事'
+ }
+ }
})
</script>
@@ -133,5 +185,6 @@
.content-area {
// padding: 20rpx;
+ margin-bottom: 100px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3