From f5f314e167906ec5b15d4f56568408982178caa1 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期一, 26 五月 2025 17:00:16 +0800
Subject: [PATCH] 内容精选，光影社区接口对接
---
enums/dict.ts | 5 +
pages/home/home.vue | 133 ++++++++++++++++++--------------------------
types/index.ts | 6 ++
utils/time.ts | 21 +++++++
4 files changed, 87 insertions(+), 78 deletions(-)
diff --git a/enums/dict.ts b/enums/dict.ts
new file mode 100644
index 0000000..0fae0cc
--- /dev/null
+++ b/enums/dict.ts
@@ -0,0 +1,5 @@
+export enum FilmWorksCategory {
+ CONTENT_SELECTED = '1', // 内容精选
+ COMMUNITY = '2', // 社区推荐
+ // 可以根据业务继续扩展
+ }
\ No newline at end of file
diff --git a/pages/home/home.vue b/pages/home/home.vue
index bea0cf1..a71e374 100644
--- a/pages/home/home.vue
+++ b/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,8 +41,8 @@
<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" />
<view style="height: 300rpx;"></view>
</view>
@@ -52,15 +53,20 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
+import { onShow } 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'
+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')
@@ -71,61 +77,14 @@
// 每页显示条数
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 = '/api/filmworks/list'
+const tripCardList = ref<FilmWorks[]>([])
// 分页后的数组，每页3条
const pagedTripCards = computed(() => {
- const pages = []
+ const pages: FilmWorks[][] = []
for (let i = 0; i < tripCardList.value.length; i += pageSize) {
pages.push(tripCardList.value.slice(i, i + pageSize))
}
@@ -158,26 +117,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 +126,42 @@
theme.value = localTheme
})
+onShow(() => {
+
+ // 内容精选
+ getContentSelected()
+
+ // 光影社区
+ getCommunitys()
+});
+
+async function getContentSelected() {
+ tripCardList.value = await getFilmWorks(FilmWorksCategory.CONTENT_SELECTED, 20);
+ console.log('内容精选', tripCardList.value);
+}
+
+async function getCommunitys() {
+ communitys.value = await getFilmWorks(FilmWorksCategory.COMMUNITY, 10);
+}
+// 内容精选
+const getFilmWorks = async (type: String, pageSize: Number) => {
+ const {
+ code, data
+ } = await $http.request('get', '/api/filmWorks/list', {
+ params: {
+ classify: type,
+ size: pageSize,
+ }
+ })
+ if (code == 0) {
+ return data.records
+ } else {
+ $message.showToast('系统异常，无法获取数据')
+ return null;
+ }
+
+}
+
// 下一页
const nextPage = () => {
if (currentPage.value < totalPages.value - 1) {
diff --git a/types/index.ts b/types/index.ts
index 09c8301..3f1ff30 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -89,4 +89,10 @@
/** 封面图片描述主题 */
coverTitle?: string;
+ avatar?: String;
+
+ nickname?: String;
+
+ createTime?: String;
+
}
\ No newline at end of file
diff --git a/utils/time.ts b/utils/time.ts
new file mode 100644
index 0000000..8affc77
--- /dev/null
+++ b/utils/time.ts
@@ -0,0 +1,21 @@
+// utils/time.ts
+
+export function formatRelativeTime(inputTime: string | Date): string {
+ const now = new Date()
+ const time = typeof inputTime === 'string' ? new Date(inputTime) : inputTime
+ const diffMs = now.getTime() - time.getTime()
+
+ const minutes = Math.floor(diffMs / (1000 * 60))
+ const hours = Math.floor(minutes / 60)
+ const days = Math.floor(hours / 24)
+ const months = Math.floor(days / 30)
+ const years = Math.floor(days / 365)
+
+ if (years > 0) return `${years} 年前`
+ if (months > 0) return `${months} 个月前`
+ if (days > 0) return `${days} 天前`
+ if (hours > 0) return `${hours} 小时前`
+ if (minutes > 0) return `${minutes} 分钟前`
+ return '刚刚'
+ }
+
\ No newline at end of file
--
Gitblit v1.9.3