<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"> -->
|
<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 class="content-area">
|
<up-waterfall v-model="films">
|
<template #left="{ leftList }">
|
<FlowCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
|
<template #right="{ rightList }">
|
<FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
</up-waterfall>
|
<up-loadmore :status="filmStatus" :line="true" />
|
</view>
|
<view style="height: 50px; width: 100%;"></view>
|
<common-footer flg="0"></common-footer>
|
<setting-popup v-model="settingShow" />
|
</view>
|
</template>
|
<script setup lang="ts">
|
import SettingPopup from '@/components/setting/setting-popup.vue';
|
import { reactive, ref, onMounted } from 'vue';
|
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);
|
// 方法定义
|
function onSettingClick() {
|
settingShow.value = true;
|
}
|
|
// 创建响应式数据
|
// const list1 = reactive([
|
// { name: '关注' },
|
// { name: '发现' },
|
// { name: '苏州' },
|
// ]);
|
const parentTabIndex = ref<number>(0)
|
const userTabList = ref<FilmCategoryTree[]>([])
|
const tabList = ref<FilmCategoryTree[]>([])
|
|
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 = () => {
|
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: '',
|
type: '',
|
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'
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.header {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.content-area {
|
// padding: 20rpx;
|
margin-bottom: 100px;
|
}
|
</style>
|
