<template>
|
<view :class="['app', theme]">
|
<top-tab-bar></top-tab-bar>
|
<view class="main-content">
|
<!-- 主要内容展示 -->
|
<HomeMain></HomeMain>
|
<!-- <view class="row">
|
<u-icon name="star" size="40" color="yellow" />
|
<text class="theme-text">内容精选</text>
|
</view> -->
|
<section-title title="内容精选" optitle="查看全部" goUrl="/pages/home/home-more" />
|
<trip-card v-for="(item, index) in tripCardList" :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 || {}
|
},
|
}),
|
},
|
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'
|
}
|
],
|
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: {
|
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.main-content {
|
margin: 40rpx;
|
}
|
|
.row {
|
display: flex;
|
align-items: center;
|
margin-top: 20rpx;
|
margin-bottom: 20rpx;
|
}
|
</style>
|
