user edit

tj

2025-06-05 859352ee2e233e8ae80277539af62d982a317c6a

 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,79 +22,26 @@
          <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'

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 tabList = ref<FilmCategoryTree[]>([])
const onSearch = (value: string) => {
  uni.showToast({
    title: `搜索：${value}`,
@@ -102,12 +49,10 @@
  })
}

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 showToast = (msg: string) => {
@@ -119,11 +64,73 @@
  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 = {
    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>

</style>
<style lang="scss" scoped></style>