cloudroam
2025-06-06 4d8420e51aa39dd4c8bb49ae98c05aaf2479fcb1
pages/home/home.vue
@@ -43,7 +43,7 @@
      <Community v-for="(item, index) in communitys" :key="index" :avatar="item.avatar" :nickname="item.nickname"
        :time="formatRelativeTime(item.createTime)" :image="item.coverUrl" :content="item.coverAlt"
        :likeCount="item.likeCount" :commentCount="item.commentCount" />
      <up-loadmore :status="communityStatus" :line="true" />
      <view style="height: 300rpx;"></view>
    </view>
@@ -53,7 +53,7 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import HomeMain from './home-main.vue'
import TripCard from './trip-card.vue'
@@ -62,11 +62,11 @@
import Community from './community.vue'
import { SwiperChangeEvent } from '@dcloudio/uni-app'
import { useGlobal } from '@/composables/useGlobal'
import { number } from 'uview-plus/libs/function/test'
const { $http, $message, $store } = useGlobal()
import { FilmWorks } from '@/types/index'
import { formatRelativeTime } from '@/utils/time'
import { FilmWorksCategory } from '@/enums/dict'
// 主题
const theme = ref('light')
@@ -85,14 +85,18 @@
// 分页后的数组,每页3条
const pagedTripCards = computed(() => {
  const pages: FilmWorks[][] = []
  for (let i = 0; i < tripCardList.value.length; i += pageSize) {
    pages.push(tripCardList.value.slice(i, i + pageSize))
  const list = tripCardList.value || [] // 安全兜底
  for (let i = 0; i < list.length; i += pageSize) {
    pages.push(list.slice(i, i + pageSize))
  }
  return pages
})
// 总页数
const totalPages = computed(() => Math.ceil(tripCardList.value.length / pageSize))
const totalPages = computed(() => {
  const list = tripCardList.value || [] // 安全兜底
  return Math.ceil(list.length / pageSize)
})
// 场景博物馆卡片数据
const cardList = ref([
@@ -135,22 +139,63 @@
  getCommunitys()
});
async function getContentSelected() {
  tripCardList.value = await getFilmWorks(FilmWorksCategory.CONTENT_SELECTED, 20);
  console.log('内容精选', tripCardList.value);
onPullDownRefresh(async () => {
  console.log('用户下拉刷新了')
  // 内容精选
  getContentSelected()
  // 光影社区
  communityPage.value = 1
  getCommunitys()
  uni.stopPullDownRefresh() // 停止下拉刷新动画
})
onReachBottom(() => {
  console.log('用户触底了')
  getCommunitys()
})
const getContentSelected = async () => {
  tripCardList.value = await getFilmWorks(FilmWorksCategory.CONTENT_SELECTED, 20, 1);
}
async function getCommunitys() {
  communitys.value = await getFilmWorks(FilmWorksCategory.COMMUNITY, 10);
const communityPage = ref(1)
const communitySize = 10
const communityStatus = ref('loading')
const getCommunitys = async () => {
  if (communityStatus.value === 'nomore') return
  communityStatus.value = 'loading'
  const records = await getFilmWorks(FilmWorksCategory.COMMUNITY, communitySize, communityPage.value)
  if (records && records.length > 0) {
    // 使用 Set 进行去重
    const existingIds = new Set(communitys.value.map(item => item.id))
    const uniqueRecords = records.filter(item => !existingIds.has(item.id))
    communitys.value = [...communitys.value, ...uniqueRecords]
    // 如果返回的记录数少于请求的 size,说明没有更多数据
    if (records.length < communitySize) {
      communityStatus.value = 'noMore'
    }
    communityPage.value++
  } else {
    communityStatus.value = 'noMore'
  }
}
// 内容精选
const getFilmWorks = async (type: String, pageSize: Number) => {
const getFilmWorks = async (type: String, pageSize: Number, currentPage: Number) => {
  const {
    code, data
  } = await $http.request('get', '/api/filmWorks/list', {
    params: {
      classify: type,
      size: pageSize,
      current: currentPage
    }
  })
  if (code == 0) {
@@ -159,7 +204,6 @@
    $message.showToast('系统异常,无法获取数据')
    return null;
  }
}
// 下一页