From 8dd9360a0e4cfd22ea9e261bec3821eff3f57fe8 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期二, 12 八月 2025 10:10:07 +0800
Subject: [PATCH] add：分享功能
---
sub-pages/film-list/film-list.vue | 231 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 151 insertions(+), 80 deletions(-)
diff --git a/sub-pages/film-list/film-list.vue b/sub-pages/film-list/film-list.vue
index 957e691..3d06b07 100644
--- a/sub-pages/film-list/film-list.vue
+++ b/sub-pages/film-list/film-list.vue
@@ -14,7 +14,7 @@
</up-tabs>
<view class="list-view">
- <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>
@@ -22,94 +22,83 @@
<FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
</template>
</up-waterfall>
+ <up-loadmore :status="filmStatus" :line="true" />
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
+import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { FilmCategoryTree,FilmWorks,FilmWorksQueryDTO } from '@/types/index'
+import { useGlobal } from '@/composables/useGlobal'
+const { $http, $message, $store } = useGlobal()
+import { FilmTabCategory,FilmWorksCategory } from '@/enums/dict'
+import { useNavigator } from '@/composables/useNavigator'
+const { navigateTo } = useNavigator()
-interface Item {
- id: number
- title: string
- imgurl: string
- username: string
- avatar: string
- date: string
- likes: number
-}
+import { getTabList,getFilmWorksBase } from '@/sub-pages/utils/api'
+import { useUserStore } from '@/store/user'
const theme = ref('light')
const search = ref('')
-const flowList = ref<Item[]>([])
-
-const tabList = ref([
- { name: '关注' },
- { name: '推荐' },
- { name: '电影' },
- { name: '科技' },
- { name: '音乐' },
- { name: '美食' },
- { name: '文化' },
- { name: '财经' },
- { name: '手工' }
-])
-
-const items: Item[] = [
- {
- id: 1,
- title: 'iPhone 高清全屏壁纸，划走就后悔',
- imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
- username: '草莓喵喵',
- avatar: '/static/avatar1.jpg',
- date: '2024-12-01',
- likes: 1397
- },
- {
- id: 2,
- title: '高清 4K 全屏手机壁纸 #高质量壁纸高清 4K 全屏手机壁纸 #高质量壁纸',
- imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
- username: '4K wallpaper',
- avatar: '/static/avatar2.jpg',
- date: '02-24',
- likes: 167
- },
- {
- id: 3,
- title: 'iPhone 实况动态壁纸 #动态壁纸',
- imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
- username: '图墙精选',
- avatar: '/static/avatar3.jpg',
- date: '03-01',
- likes: 980
- },
- {
- id: 4,
- title: '高清小清新壁纸 浪漫的人都有自己的海',
- imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
- username: 'wallpaper',
- avatar: '/static/avatar4.jpg',
- date: '04-10',
- likes: 456
- }
-]
-
+const keywords = ref('') // 新增关键词状态
+const tabList = ref<FilmCategoryTree[]>([])
+const currentCategory = ref('') // 默认为空表示全部
const onSearch = (value: string) => {
- uni.showToast({
- title: `搜索：${value}`,
- icon: 'none'
+ const searchValue = typeof value === 'string' ? value : search.value
+ keywords.value = searchValue
+ filmPage.value = 1
+ films.value = []
+ filmStatus.value = 'loadmore'
+ getfilms()
+
+}
+
+const click = (item: FilmCategoryTree) => {
+ currentCategory.value = item.name // 更新当前分类
+ keywords.value = search.value
+ filmPage.value = 1 // 重置页码
+ films.value = [] // 清空电影列表
+ filmStatus.value = 'loadmore' // 重置加载状态
+ getfilms() // 重新加载数据
+}
+
+// const handleDetailClick = async (item: FilmCategoryTree) => {
+// const userStore = useUserStore()
+// // 尝试获取最新用户信息验证登录状态
+// try {
+// await userStore.getCurrentInfo()
+// if (userStore.hasLogin) {
+// navigateTo(`/sub-pages/film-list/film-detail?id=${item.id}`)
+// } else {
+// showLoginModal()
+// }
+// } catch (err) {
+// console.error('验证登录状态失败:', err)
+// showLoginModal()
+// }
+// // 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 handleDetailClick = async (item: FilmCategoryTree) => {
+ // 直接跳转到详情页，无需登录检查
+ const url= `/sub-pages/film-list/film-detail?id=${item.id}`
+ navigateTo(url)
+}
+
+const showLoginModal = () => {
+ uni.showModal({
+ title: '登录提示',
+ content: '查看详情需要登录，是否前往登录？',
+ confirmText: '去登录',
+ success: (res) => {
+ if(res.confirm) uni.navigateTo({ url: '/pages/login/login' })
+ }
})
}
-
-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 showToast = (msg: string) => {
uni.showToast({ title: msg, icon: 'none' })
}
@@ -119,11 +108,93 @@
theme.value = storedTheme
})
+
onMounted(() => {
- flowList.value = items
+
})
+
+onShow(() => {
+ // 获取分类
+ getTabList(FilmTabCategory.FILM_TYPE,tabList)
+
+ // 获取电影
+ getfilms()
+
+});
+
+onPullDownRefresh(async () => {
+ console.log('用户下拉刷新了')
+ filmPage.value = 1
+ getfilms()
+ uni.stopPullDownRefresh() // 停止下拉刷新动画
+})
+
+onReachBottom(() => {
+ console.log('用户触底了')
+ getfilms()
+})
+
+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 = {
+ category: currentCategory.value, // 将当前分类ID加入查询参数
+ classify: '',
+ type: '',
+ current: filmPage.value,
+ size: filmSize,
+ status: 'published',
+ keywords: keywords.value // 关键修改
+ };
+ 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>
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
--
Gitblit v1.9.3