<template>
|
<view>
|
<!-- <view class="card" v-if="!showVideo"> -->
|
<view class="card">
|
<view class="main-title">{{ config.mainTitle }}</view>
|
<view class="sub-title">
|
{{ config.subTitle }}
|
</view>
|
|
<view class="btn-group">
|
<view class="custom-btn explore-btn" @click="startExplore">
|
<text class="btn-text">{{ config.btnText1 }}</text>
|
<up-icon
|
:name="config.btnIcon1"
|
:color="config.iconColor1"
|
size="34rpx" class="btn-icon" />
|
</view>
|
|
<view class="custom-btn route-btn" @click="hotRoute">
|
<text class="btn-text">{{ config.btnText2 }}</text>
|
<up-icon
|
:name="config.btnIcon2"
|
:color="config.iconColor2"
|
size="34rpx"
|
class="btn-icon"
|
/>
|
</view>
|
</view>
|
|
<view class="recommend">
|
<up-icon name="/static/common/earth.png" color="#fff" size="30" />
|
<up-notice-bar
|
:text="noticeList"
|
direction="column"
|
speed="2000"
|
font-size="30rpx"
|
url="/static/common/earth.png"
|
bgColor="transparent"
|
color="#fff"
|
icon=" "
|
/>
|
</view>
|
</view>
|
|
<!-- 视频播放区域 -->
|
<!-- <view v-else class="video-wrapper">
|
<video
|
:src="currentVideo"
|
controls
|
autoplay
|
@ended="onVideoEnd"
|
style="width: 100%; height: 400rpx;"
|
></video>
|
</view> -->
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
import { useGlobal } from '@/composables/useGlobal'
|
const { $http, $message, $store } = useGlobal()
|
const showVideo = ref(false)
|
const currentIndex = ref(0)
|
|
const videoList = [
|
'https://geo-app.tos-cn-beijing.volces.com/1.mp4',
|
'https://geo-app.tos-cn-beijing.volces.com/2.mp4',
|
]
|
|
const noticeList = [
|
'欢迎来到场景博物馆',
|
'全新内容已上线，快来探索',
|
'今日推荐：《盗梦空间》背后的故事',
|
]
|
|
const currentVideo = computed(() => videoList[currentIndex.value])
|
// 添加配置响应式对象
|
const config = ref({
|
mainTitle: '每一帧画面，都藏着一个等待探索的世界',
|
subTitle: '从经典场景到幕后故事，开启你的专属影视朝圣之旅',
|
btnText1: '开始探索',
|
btnText2: '热门路线',
|
btnIcon1: 'play-right-fill',
|
btnIcon2: '/static/common/road-map-fill.png',
|
iconColor1: 'black',
|
iconColor2: 'white'
|
})
|
function startExplore() {
|
// 跳转到具体页面
|
uni.navigateTo({
|
url: '/sub-pages/film-list/film-list',
|
})
|
}
|
|
function onVideoEnd() {
|
currentIndex.value = (currentIndex.value + 1) % videoList.length
|
showVideo.value = false
|
}
|
|
function hotRoute() {
|
uni.showToast({
|
title: '跳转热门路线',
|
icon: 'none',
|
})
|
}
|
|
onLoad((options: any) => {
|
getHomeConfig()
|
})
|
|
// 获取首页配置信息
|
const getHomeConfig = async () => {
|
try {
|
const { code, data } = await $http.request(
|
'get',
|
'/api/home/homeConfig/info',
|
{}
|
)
|
if (code == 0) {
|
console.log("接口返回数据:", data);
|
// 只更新接口返回的有效字段
|
Object.keys(config.value).forEach(key => {
|
const newValue = data[key];
|
console.log(`字段 ${key}: 接口值=${newValue}, 本地值=${config.value[key]}`);
|
if (newValue !== undefined && newValue !== null && newValue !== '') {
|
config.value[key] = newValue;
|
}
|
});
|
console.log("首页配置加载成功", config.value)
|
} else {
|
}
|
} catch (error) {
|
console.error('配置请求失败', error)
|
}
|
}
|
|
|
</script>
|
<style scoped>
|
.card {
|
padding: 50rpx 40rpx;
|
border-radius: 24rpx;
|
background: linear-gradient(135deg, #ff7e5f, #9e2cf8);
|
color: #fff;
|
}
|
|
.main-title {
|
font-size: 60rpx;
|
font-weight: bold;
|
line-height: 1.6;
|
margin-bottom: 20rpx;
|
letter-spacing: 4rpx;
|
text-align: center;
|
}
|
|
.sub-title {
|
font-size: 32rpx;
|
opacity: 0.9;
|
line-height: 1.4;
|
margin-bottom: 40rpx;
|
text-align: center;
|
letter-spacing: 3rpx;
|
}
|
|
.btn-group {
|
display: flex;
|
justify-content: space-between;
|
gap: 20rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.explore-btn {
|
background-color: #fff !important;
|
color: #000 !important;
|
flex: 1;
|
}
|
|
.route-btn {
|
border: 1px solid #fff;
|
background-color: transparent;
|
color: #fff;
|
flex: 1;
|
}
|
|
.recommend {
|
display: flex;
|
align-items: center;
|
background-color: rgba(30, 30, 30, 0.8);
|
padding: 10rpx;
|
padding-left: 50rpx;
|
border-radius: 100rpx;
|
}
|
|
.recommend-text {
|
margin-left: 12rpx;
|
font-size: 24rpx;
|
}
|
</style>
|
<style scoped>
|
.btn-group {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 30rpx;
|
}
|
|
.custom-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 16rpx 32rpx;
|
border-radius: 20rpx;
|
font-size: 28rpx;
|
font-weight: bold;
|
height: 60rpx;
|
}
|
|
.explore-btn {
|
background-color: #3c9cff;
|
color: #fff;
|
border: 2rpx solid #fff;
|
}
|
|
.route-btn {
|
color: #fff;
|
border: 2rpx solid #fff;
|
}
|
|
.btn-icon {
|
margin-left: 20rpx;
|
}
|
|
.btn-text {
|
line-height: 1;
|
margin-left: 20rpx;
|
margin-right: 20rpx;
|
}
|
</style>
|
|
