<template>
|
<view :class="['app', theme]">
|
<top-tab-bar></top-tab-bar>
|
<view class="main-content">
|
<!-- 主要内容展示 -->
|
<HomeMain></HomeMain>
|
<!--
|
<section-title-btn title="内容精选" optitle="查看全部" goUrl="/pages/home/home-more" /> -->
|
<view class="section">
|
<u-row>
|
<u-col span="6">
|
<view class="row">
|
<!-- <u-icon v-if="iconName" :name="iconName" :size="iconSize" :color="iconColor" /> -->
|
<text class="theme-text left-text">内容精选</text>
|
</view>
|
</u-col>
|
<u-col span="3"></u-col>
|
<u-col span="3">
|
<view class="row-right">
|
<u-icon name="/static/common/left-arrow-dark.png" size="80" @click="prevPage" />
|
<u-icon name="/static/common/right-arrow-dark.png" size="80" @click="nextPage" />
|
</view>
|
</u-col>
|
</u-row>
|
</view>
|
|
<view class="trip-card-swiper">
|
<swiper :current="currentPage" @change="onSwiperChange" circular style="min-height: 1500rpx;">
|
<swiper-item v-for="(group, pageIndex) in pagedTripCards" :key="pageIndex">
|
<trip-card 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" />
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<!-- <trip-card v-for="(item, index) in visibleTripCards" :key="index" :tag="item.tag" :title="item.title"
|
:subtitle="item.subtitle" :score="item.score" :imageUrl="item.imageUrl" :detailUrl="item.detailUrl" /> -->
|
|
<section-title title="全球影视地标" optitle="查看全部" goUrl="/pages/home/home-more" />
|
<global-geo />
|
|
<section-title title="场景博物馆" optitle="查看全部" goUrl="/pages/home/home-more" />
|
<scene-museum-card v-for="(item, index) in cardList" :key="index" :image="item.image" :title="item.title"
|
:subtitle="item.subtitle" :readTime="item.readTime" />
|
|
<section-title 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" />
|
|
<view style="height: 300rpx;"></view>
|
</view>
|
|
<common-footer flg="0"></common-footer>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
|
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'
|
|
export default {
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
currentInfo: state => {
|
return state.currentInfo || {}
|
},
|
}),
|
visibleTripCards() {
|
const start = this.currentPage * this.pageSize;
|
const end = start + this.pageSize;
|
return this.tripCardList.slice(start, end);
|
},
|
totalPages() {
|
return Math.ceil(this.tripCardList.length / this.pageSize);
|
},
|
pagedTripCards() {
|
const pageSize = 3;
|
const pages = [];
|
for (let i = 0; i < this.tripCardList.length; i += pageSize) {
|
pages.push(this.tripCardList.slice(i, i + pageSize));
|
}
|
return pages;
|
},
|
},
|
components: {
|
HomeMain,
|
TripCard,
|
GlobalGeo,
|
SceneMuseumCard,
|
Community,
|
},
|
data() {
|
return {
|
theme: 'light', // 默认 light，可切换为 dark
|
search_flow: '',
|
CustomBar: uni.getStorageSync('CustomBar'),
|
StatusBar: uni.getStorageSync('StatusBar'),
|
tripCardList: [
|
{
|
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/1a65e5ff6452efb1e6db001fcefd0b42.jpg',
|
detailUrl: '/pages/detail?id=124'
|
},
|
{
|
tag: '文化探秘',
|
title: '日本京都文化巡游',
|
subtitle: '探访古都名刹5日行程',
|
score: 4.7,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f2262cda01488f5f44f6eabf63e5dc5a.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/1a65e5ff6452efb1e6db001fcefd0b42.jpg',
|
detailUrl: '/pages/detail?id=124'
|
},
|
{
|
tag: '文化探秘2',
|
title: '日本京都文化巡游',
|
subtitle: '探访古都名刹5日行程',
|
score: 4.7,
|
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f2262cda01488f5f44f6eabf63e5dc5a.jpg',
|
detailUrl: '/pages/detail?id=125'
|
}
|
],
|
currentPage: 0,
|
pageSize: 3,
|
cardList: [
|
{
|
image: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
title: '《盗梦空间》巴黎咖啡馆',
|
subtitle: '拷素诺兰如何创造这个标志性场景',
|
readTime: '12分钟阅读'
|
},
|
{
|
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
title: '《星际穿越》玉米田',
|
subtitle: '诺兰如何还原地球末日场景',
|
readTime: '8分钟阅读'
|
},
|
{
|
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
title: '《星球大战》塔图因星球',
|
subtitle: '经典科幻电影中的沙漠设定',
|
readTime: '10分钟阅读'
|
}
|
],
|
communitys: [
|
{
|
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
|
},
|
// 你可以继续添加更多帖子数据
|
]
|
};
|
},
|
onShareAppMessage() {
|
|
},
|
onShareTimeline() {
|
|
},
|
onLoad(options) {
|
// 尝试读取缓存设置的主题
|
console.log("theme", uni.getStorageSync('theme'))
|
const theme = uni.getStorageSync('theme') || 'light'
|
this.theme = theme
|
},
|
methods: {
|
nextPage() {
|
if (this.currentPage < this.totalPages - 1) {
|
this.currentPage++;
|
}
|
// else{
|
// this.currentPage = 0;
|
// }
|
},
|
prevPage() {
|
if (this.currentPage > 0) {
|
this.currentPage--;
|
}
|
},
|
onSwiperChange(e) {
|
this.currentPage = e.detail.current;
|
},
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.main-content {
|
margin: 30rpx;
|
}
|
|
.row {
|
display: flex;
|
align-items: center;
|
margin-top: 20rpx;
|
margin-bottom: 20rpx;
|
}
|
</style>
|
|
<style scoped lang="scss">
|
.section {
|
// margin-top: 30rpx;
|
|
.space-between {
|
justify-content: space-between;
|
}
|
|
.row {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
}
|
|
.row-right {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
// justify-content: end;
|
justify-content: space-between;
|
}
|
|
.left-text {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: var(--icon-color);
|
letter-spacing: 5rpx;
|
}
|
|
.right-text {
|
font-size: 25rpx;
|
margin-right: 10rpx;
|
}
|
|
.theme-text {
|
margin-left: 10rpx;
|
}
|
}
|
</style>
|
