novel-app/RuoYi-App/App.vue

<template>
  <view class="app-container">
    <router-view />
    <!-- 使用自定义TabBar组件 -->
    <CustomTabbar v-if="showTabBar" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/index.vue'
import config from './config'
import { getToken } from '@/utils/auth'

export default {
  components: { CustomTabbar },
  data() {
    return {
      showTabBar: false, // 默认不显示
      tabBarPages: [
        '/pages/index/index',
        '/pages/novel/list',
        '/pages/bookshelf/index',
        '/pages/me/index'
      ]
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler(newPath) {
        // 检查当前页面是否需要显示菜单
        this.showTabBar = this.tabBarPages.some(path => 
          newPath.includes(path)
        );
        
        // 特殊处理：在小说阅读页面也显示菜单
        if (newPath.includes('/pages/novel/read')) {
          this.showTabBar = true;
        }
        
        // 强制更新CustomTabbar组件
        this.$nextTick(() => {
          if (this.$refs.customTabbar) {
            this.$refs.customTabbar.updateSelectedIndex();
          }
        });
      }
    }
  },

  onLaunch() {
    // 初始化主题
    this.initTheme()
    
    // 检查阅读进度
    this.checkReadingProgress()
    
    // 初始化 store 状态
    this.initStoreState()
    console.log('App launched, store:', this.$store)
  },
  onShow() {
    // 初始检查路由
    this.$nextTick(() => {
      const currentPath = this.$route.path;
      this.showTabBar = this.tabBarPages.some(path => 
        currentPath.includes(path)
      );
    });
    
    // 检查云端阅读进度
    if (this.$store.getters.token) {
      this.syncReadingProgress()
    }
  },
  methods: {
    // 初始化 store 状态
    initStoreState() {
      // 从本地存储恢复状态
      const token = uni.getStorageSync('token')
      const readingProgress = uni.getStorageSync('readingProgress') || 1
      
      // 提交到 store
      this.$store.commit('SET_TOKEN', token)
      this.$store.commit('SET_READING_PROGRESS', readingProgress)
    },
    // 检查阅读进度
    checkReadingProgress() {
      // 直接从本地存储读取
      const chapter = uni.getStorageSync('readingProgress') || 1
      
      if (chapter > 5 && !uni.getStorageSync('token')) {
        uni.showModal({
          title: '登录提示',
          content: `您已阅读到第${chapter}章，登录后继续阅读`,
          confirmText: '立即登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/login' })
            }
          }
        })
      }
    },
    // 同步阅读进度 (修改后)
    async syncReadingProgress() {
      try {
        // 安全访问 store
        if (!this.$store) {
          console.warn('Store 未初始化，无法同步阅读进度')
          return
        }
        
        const token = this.$store.getters.token
        if (!token) {
          console.log('用户未登录，跳过同步')
          return
        }
        
        // 从本地存储获取进度
        const localChapter = uni.getStorageSync('readingProgress') || 1
        
        // 调用 API 同步
        const res = await this.$api.saveReadingProgress(localChapter)
        console.log('进度同步成功:', res.data)
      } catch (err) {
        console.error('同步阅读进度失败', err)
      }
    },
    // 添加 checkLogin 方法
    // checkLogin() {
    //   // 这里写登录检查逻辑
    //   // 示例：检查本地存储的登录状态
    //   const isLoggedIn = uni.getStorageSync('isLogin');
    //   if (!isLoggedIn) {
    //     uni.navigateTo({ url: '/pages/login' });
    //   }
    // },
    
    // 临时主题初始化
    initTheme() {
      const themeName = uni.getStorageSync('selectedTheme') || 'aydzBlue'
      
      // 应用主题变量
      const themes = {
        aydzBlue: {
          '--primary-color': '#2a5caa',
          '--bg-color': '#e6f7ff',
          '--text-color': '#1a3353',
          '--card-bg': '#d0e8ff',
          '--header-bg': '#2a5caa'
        },
        darkMode: {
          '--primary-color': '#52c41a',
          '--bg-color': '#1a1a1a',
          '--text-color': '#e6e6e6',
          '--card-bg': '#2a2a2a'
        },
        default: {
          '--primary-color': '#1890ff',
          '--bg-color': '#f8f9fa',
          '--text-color': '#333',
          '--card-bg': '#ffffff'
        }
      }
      
      const root = document.documentElement
      const themeVars = themes[themeName] || themes.aydzBlue
      
      Object.keys(themeVars).forEach(key => {
        root.style.setProperty(key, themeVars[key])
      })
      
      // 动态设置导航栏颜色
      if (themeName === 'darkMode') {
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#1a1a1a'
        })
      } else if (themeName === 'aydzBlue') {
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: '#2a5caa'
        })
      }
    }
  },
    mounted() {
      this.checkInitialRoute();
    }
}
</script>

<style lang="scss">
/* 确保自定义TabBar有足够的空间 */
.app-container {
  padding-bottom: 120rpx !important; /* 增加底部空间 */
}

/* 确保菜单不被其他元素覆盖 */
.custom-tabbar {
  z-index: 99999 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* 修复页面内容被遮挡的问题 */
.page-content {
  padding-bottom: 140rpx !important;
}
/* 确保tabbar显示 */
uni-tabbar {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* 修复高度问题 */
uni-tabbar .uni-tabbar {
  height: 50px !important;
}

/* 页面内容区域 */
.page-content {
  padding-bottom: 60px !important;
}
/* 保留原有样式 */
uni-tabbar {
  z-index: 999;
}
</style>