cloudroam
2025-07-17 f3ea52bf97e61f6917ccaab904817d74d9d4860c
pages/home/home-main.vue
@@ -1,23 +1,27 @@
<template>
    <view>
      <view class="card" v-if="!showVideo">
        <view class="main-title">每一帧画面,都藏着一个等待探索的世界</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">开始探索</text>
            <up-icon name="play-right-fill" size="34rpx" color="black" class="btn-icon" />
            <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">热门路线</text>
            <text class="btn-text">{{ config.btnText2 }}</text>
            <up-icon
              name="/static/common/road-map-fill.png"
                :name="config.btnIcon2"
                :color="config.iconColor2"
              size="34rpx"
              color="white"
              class="btn-icon"
            />
          </view>
@@ -39,7 +43,7 @@
      </view>
  
      <!-- 视频播放区域 -->
      <view v-else class="video-wrapper">
      <!-- <view v-else class="video-wrapper">
        <video
          :src="currentVideo"
          controls
@@ -47,13 +51,15 @@
          @ended="onVideoEnd"
          style="width: 100%; height: 400rpx;"
        ></video>
      </view>
      </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)
  
@@ -69,7 +75,17 @@
  ]
  
  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({
@@ -83,11 +99,46 @@
  }
  
  function hotRoute() {
    uni.showToast({
      title: '跳转热门路线',
      icon: 'none',
    uni.navigateTo({
      url: '/sub-pages/hot-spot/index',
    })
    // uni.showToast({
    //   title: 'sub-pages/hot-spot/index',
    //   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 {