add: 分享

cloudroam

7 天以前 c31a8def0ac90d86b8e8e345441bd28002a9ef2f

 pages/home/home.vue

@@ -23,10 +23,11 @@
      </view>

      <view class="trip-card-swiper">
        <swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1410rpx;">
        <swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1450rpx;">
          <swiper-item v-for="(group, pageIndex) in pagedTripCards" :key="pageIndex">
            <TripCard v-for="(item, index) in group" :key="index" :tag="item.tag" :title="item.title"
              :subtitle="item.subtitle" :score="item.score" :imageUrl="item.imageUrl" :detailUrl="item.detailUrl" />
            <TripCard v-for="(item, index) in group" :key="index" :tag="item.tag" :title="item.coverTitle"
              :subtitle="item.coverAlt" :score="item.collectCount" :imageUrl="item.coverUrl"
              :detailUrl="`${detailUrl}?id=${item.id}`" />
          </swiper-item>
        </swiper>
      </view>
@@ -40,9 +41,9 @@

      <SectionTitle title="光影社区" optitle="加入社区" goUrl="/pages/home/home-more" />
      <Community v-for="(item, index) in communitys" :key="index" :avatar="item.avatar" :nickname="item.nickname"
        :time="item.time" :image="item.image" :content="item.content" :likeCount="item.likeCount"
        :commentCount="item.commentCount" />

        :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>

@@ -52,14 +53,19 @@

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

import HomeMain from './home-main.vue'
import TripCard from './trip-card.vue'
import GlobalGeo from './global-geo.vue'
import SceneMuseumCard from './scene-museum-card.vue'
import Community from './community.vue'

import { SwiperChangeEvent } from '@dcloudio/uni-app'
import { useGlobal } from '@/composables/useGlobal'
const { $http, $message, $store } = useGlobal()
import { FilmWorks } from '@/types/index'
import { formatRelativeTime } from '@/utils/time'
import { FilmWorksCategory } from '@/enums/dict'


// 主题
@@ -71,69 +77,26 @@
// 每页显示条数
const pageSize = 3


// 旅行卡片数据
const tripCardList = ref([
  {
    tag: '史诗邮轮',
    title: '《权力的游戏》君临城朝圣之旅',
    subtitle: '克罗地亚杜布罗夫尼克5日深度游',
    score: 4.9,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=123',
  },
  {
    tag: '经典路线',
    title: '冰岛极光探索之旅',
    subtitle: '冬季极地风光6日深度体验',
    score: 4.8,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=124',
  },
  {
    tag: '文化探秘',
    title: '日本京都文化巡游',
    subtitle: '探访古都名刹5日行程',
    score: 4.7,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=125',
  },
  {
    tag: '史诗邮轮2',
    title: '《权力的游戏》君临城朝圣之旅',
    subtitle: '克罗地亚杜布罗夫尼克5日深度游',
    score: 4.9,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=123',
  },
  {
    tag: '经典路线2',
    title: '冰岛极光探索之旅',
    subtitle: '冬季极地风光6日深度体验',
    score: 4.8,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=124',
  },
  {
    tag: '文化探秘2',
    title: '日本京都文化巡游',
    subtitle: '探访古都名刹5日行程',
    score: 4.7,
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    detailUrl: '/pages/detail?id=125',
  },
])
const detailUrl = '/sub-pages/film-list/film-detail'
const tripCardList = ref<FilmWorks[]>([])

// 分页后的数组，每页3条
const pagedTripCards = computed(() => {
  const pages = []
  for (let i = 0; i < tripCardList.value.length; i += pageSize) {
    pages.push(tripCardList.value.slice(i, i + pageSize))
  const pages: FilmWorks[][] = []
  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([
@@ -158,26 +121,8 @@
])

// 社区帖子数据
const communitys = ref([
  {
    avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
    nickname: '电影探索者',
    time: '2天前',
    image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    content: '终于站在了《权游》中君临城的台阶上！这里的每一块石头都仿佛在讲述故事...',
    likeCount: 128,
    commentCount: 24,
  },
  {
    avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
    nickname: '美食家',
    time: '1天前',
    image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    content: '这家巴黎咖啡馆的氛围真是太棒了，感觉回到了电影里的场景。',
    likeCount: 76,
    commentCount: 12,
  },
])
const communitys = ref<FilmWorks[]>([])


// 生命周期
onMounted(() => {
@@ -185,6 +130,82 @@
  theme.value = localTheme
})

onShow(() => {

  // 内容精选
  getContentSelected()

  // 光影社区
  getCommunitys()
});


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);
}


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, currentPage: Number) => {
  const {
    code, data
  } = await $http.request('get', '/api/filmWorks/list', {
    params: {
      classify: type,
      size: pageSize,
      current: currentPage
    }
  })
  if (code == 0) {
    return data.records
  } else {
    $message.showToast('系统异常，无法获取数据')
    return null;
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) {