<template>
|
<view :class="['app', theme]">
|
<view style="padding-top: 10rpx;">
|
<up-search height="70rpx" placeholder="搜索" search-icon-size="40rpx" margin="0rpx 30rpx" v-model="search"
|
:show-action="true" @search="onSearch" @custom="onSearch" @click-icon="onSearch" />
|
</view>
|
|
<up-tabs :list="tabList" @click="click">
|
<template #right>
|
<view style="padding-left: 4px;" @tap="() => showToast('插槽被点击')">
|
<up-icon name="list" size="40rpx" bold></up-icon>
|
</view>
|
</template>
|
</up-tabs>
|
|
<view class="list-view">
|
<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>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
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()
|
|
import { getTabList,getFilmWorksBase } from '@/sub-pages/utils/api'
|
|
const theme = ref('light')
|
const search = ref('')
|
const keywords = ref('') // 新增关键词状态
|
const tabList = ref<FilmCategoryTree[]>([])
|
const onSearch = (value: string) => {
|
const searchValue = typeof value === 'string' ? value : search.value
|
keywords.value = searchValue
|
filmPage.value = 1
|
films.value = []
|
filmStatus.value = 'loadmore'
|
getfilms()
|
|
}
|
|
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 showToast = (msg: string) => {
|
uni.showToast({ title: msg, icon: 'none' })
|
}
|
|
onLoad(() => {
|
const storedTheme = uni.getStorageSync('theme') || 'light'
|
theme.value = storedTheme
|
})
|
|
|
onMounted(() => {
|
|
})
|
|
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 = {
|
classify: '',
|
type: '',
|
current: filmPage.value,
|
size: filmSize,
|
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'
|
}
|
}
|
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped></style>
|
