novel-app/RuoYi-App/pages/novel/reader.vue

<template>
  <view class="reader-container">
    <!-- 登录提示 -->
    <view v-if="requireLogin" class="login-prompt">
      <text>免费章节已结束，登录后继续阅读</text>
      <button class="btn-login" @click="showLoginPrompt">立即登录</button>
    </view>
    
    <!-- 广告提示 -->
    <view v-if="showAd" class="ad-prompt">
      <text>VIP用户免广告，开通VIP享受更好的阅读体验</text>
    </view>
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <uni-icons type="spinner-cycle" size="36" color="var(--primary-color)" class="loading-icon" />
      <text>加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="error" class="error-container">
      <uni-icons type="info" size="48" color="var(--error-color)" />
      <text class="error-text">{{ error }}</text>
      <button class="btn-retry" @click="retryLoad">重新加载</button>
    </view>
    
    <!-- 内容区域 -->
    <view v-else class="content-container">
      <!-- 小说标题 -->
      <view class="novel-header">
        <text class="novel-title">{{ novel.title || '加载中...' }}</text>
        <text class="novel-author">{{ novel.author || '未知作者' }}</text>
      </view>
      
      <!-- 章节标题 -->
      <view class="chapter-header">
        <text class="chapter-title">{{ currentChapter.title || '第一章' }}</text>
      </view>
      
      <!-- 章节内容 -->
      <scroll-view scroll-y class="chapter-content">
        <text class="content-text">
          {{ chapterContent || '正在加载章节内容...' }}
        </text>
      </scroll-view>
      
      <!-- 底部操作栏 -->
      <view class="action-bar">
        <button class="btn-action" @click="prevChapter" :disabled="!hasPrevChapter">
          上一章
        </button>
        <button class="btn-action" @click="showCatalog">
          目录
        </button>
        <button class="btn-action" @click="nextChapter" :disabled="!hasNextChapter">
          下一章
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  data() {
    return {
      novelId: null,
      novel: {},
      chapters: [],
      currentChapter: {},
      chapterContent: '',
      loading: true,
      error: null,
      currentChapterIndex: 0,
          // 新增字段
    freeChapters: 5, // 免费章节数
    adStartChapter: 15, // 开始显示广告的章节
    isVip: false,
    isLoggedIn: false,
    showLoginModal: false
    }
  },
  
  computed: {
    // 计算当前章节是否需要登录
  requireLogin() {
    return this.currentChapterIndex >= this.freeChapters && !this.isLoggedIn;
  },
  
  // 计算当前章节是否需要显示广告
  showAd() {
    return this.currentChapterIndex >= this.adStartChapter && !this.isVip;
  },
    hasPrevChapter() {
      return this.currentChapterIndex > 0;
    },
    hasNextChapter() {
      return this.currentChapterIndex < this.chapters.length - 1;
    }
  },
  
  // 使用 uni-app 生命周期
onLoad(options) {
  console.log('📥 READER onLoad 参数:', options);
  console.log('📍 READER 路由信息:', this.$route);
  
  // 简化参数获取
  this.novelId = options.novelId || this.$route.query.novelId;
  const chapterId = options.chapterId || this.$route.query.chapterId;
  
  console.log('🔍 READER 最终参数 - novelId:', this.novelId, 'chapterId:', chapterId);
  
  if (!this.novelId) {
    console.error('❌ READER: 无法获取小说ID');
    this.error = '无法获取小说信息';
    this.loading = false;
    return;
  }
  
  this.initReader();
},
// reader.vue - 添加 onShow 方法
onShow() {
  console.log('🔍 onShow 生命周期');
  // 再次检查参数，确保不会漏掉
  if (!this.novelId && this.$route.query.novelId) {
    console.log('🔄 onShow 中检测到参数，重新初始化');
    this.initReader(this.$route.query);
  }
},
  // 同时使用 Vue 生命周期作为备选
mounted() {
  console.log('🔄 mounted 生命周期');
  // 如果 onLoad 没有获取到参数，尝试从路由获取
  if (!this.novelId) {
    const route = this.$route;
    console.log('🔄 从 $route 获取参数:', route);
    
    // 合并所有可能的参数来源
    const allParams = {
      ...(route.params || {}),
      ...(route.query || {}),
      novelId: route.query.novelId // 确保novelId被单独提取
    };
    
    this.initReader(allParams);
  }
},

  
  methods: {
  // 检查用户状态
  checkUserStatus() {
    const token = uni.getStorageSync('token');
    this.isLoggedIn = !!token;
    
    // 这里可以调用API检查VIP状态
    // const userInfo = uni.getStorageSync('userInfo');
    // this.isVip = userInfo && userInfo.isVip;
  },
  
  // 修改下一章方法，添加限制
  async nextChapter() {
    if (!this.hasNextChapter) {
      uni.showToast({
        title: '已经是最后一章了',
        icon: 'none'
      });
      return;
    }
    
    // 检查是否需要登录
    if (this.currentChapterIndex + 1 >= this.freeChapters && !this.isLoggedIn) {
      this.showLoginPrompt();
      return;
    }
    
    // 正常跳转到下一章
    this.currentChapterIndex++;
    this.currentChapter = this.chapters[this.currentChapterIndex];
    await this.loadChapterContent(this.currentChapter.id);
    
    // 检查是否需要显示广告
    if (this.showAd) {
      this.showChapterAd();
    }
  },
  // 显示登录提示
  showLoginPrompt() {
    uni.showModal({
      title: '登录提示',
      content: `免费阅读前${this.freeChapters}章，第${this.currentChapterIndex + 2}章需要登录后阅读\n是否立即登录？`,
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/index'
          });
        }
      }
    });
  },
  
  // 显示章节广告
  showChapterAd() {
    // 这里可以集成广告SDK
    console.log('显示章节广告');
    uni.showToast({
      title: '广告展示中...',
      icon: 'none'
    });
  },
  
  // 在初始化时检查用户状态
    async initReader(params) {
      console.log('🎬 初始化阅读器，参数:', params);
    console.log('📍 当前路由查询参数:', this.$route.query);
      
    // 修复参数获取逻辑 - 从多个位置获取novelId
    this.novelId = params.novelId || 
                   params.id || 
                   this.$route.query.novelId || 
                   this.$route.query.id ||
                   (this.$route.params && this.$route.params.id);
      
      console.log('🔍 最终获取到的小说ID:', this.novelId);
          // 检查用户状态
    this.checkUserStatus();
    // 如果还是没有获取到，从URL中解析
    if (!this.novelId) {
      console.log('🔄 尝试从URL解析参数...');
      const urlParams = new URLSearchParams(window.location.search);
      this.novelId = urlParams.get('novelId') || urlParams.get('id');
      console.log('🔍 从URL解析到的小说ID:', this.novelId);
    }
    
    if (!this.novelId) {
      this.error = '无法获取小说ID，请返回重新选择';
      this.loading = false;
      console.error('❌ 小说ID为空，所有获取方式都失败了');
      console.error('📋 可用参数:', {
        params: params,
        routeQuery: this.$route.query,
        routeParams: this.$route.params,
        fullPath: this.$route.fullPath
      });
      return;
    }
    
      
      try {
        await this.loadNovelDetail();
        await this.loadChapters();
        await this.loadFirstChapterContent();
      } catch (error) {
        console.error('💥 初始化失败:', error);
        this.error = '加载失败: ' + (error.message || '未知错误');
      } finally {
        this.loading = false;
      }
    },
    
    // 加载小说详情
    async loadNovelDetail() {
      console.log('📚 加载小说详情，ID:', this.novelId);
      try {
      // 使用导入的 request，而不是 this.$http
      const res = await request.get(`/novel/detail/${this.novelId}`, {}, {
        header: { isToken: false }
      });
      console.log('✅ 小说详情响应:', res);
      
      if (res && res.code === 200 && res.data) {
        this.novel = res.data;
        console.log('✅ 成功加载小说详情:', this.novel.title);
      } else {
        console.warn('⚠️ 小说详情接口返回异常:', res);
        this.useMockNovelData();
      }
      } catch (error) {
        console.error('❌ 加载小说详情失败:', error);
    // 使用模拟数据继续流程
    this.useMockNovelData();
  }
},
    useMockNovelData() {
  this.novel = {
    title: '加载中的小说',
    author: '加载中...',
    description: '正在加载小说信息...'
  };
},
    // 加载章节列表
    async loadChapters() {
      console.log('📑 加载章节列表，小说ID:', this.novelId);
      try {
      const token = getToken();
      let requestConfig = {
        header: { isToken: false }
      };
      
      if (token) {
        requestConfig.header = {
          'Authorization': 'Bearer ' + token,
          isToken: true
        };
      }
      const res = await request.get(`/chapter/list/${this.novelId}`, {}, requestConfig);
      console.log('✅ 章节列表响应:', res);
        
        let chapters = [];
        
      if (res && res.code === 200 && res.rows) {
        chapters = res.rows;
      } else if (res && res.rows) {
        chapters = res.rows;
      }
      
      if (chapters.length > 0) {
        this.chapters = chapters;
        console.log(`✅ 成功加载 ${chapters.length} 个章节`);
      } else {
        this.useMockChapters();
        console.log('⚠️ 使用模拟章节数据');
      }
      } catch (error) {
      console.error('❌ 加载章节列表失败:', error);
      this.useMockChapters();
    }
    },
    
    // 加载第一章内容
    async loadFirstChapterContent() {
      if (this.chapters.length > 0) {
        this.currentChapterIndex = 0;
        this.currentChapter = this.chapters[0];
        await this.loadChapterContent(this.chapters[0].id);
      }
    },
    
    // 加载章节内容
    async loadChapterContent(chapterId) {
      console.log('📖 加载章节内容，章节ID:', chapterId);
      
      if (!chapterId) {
        console.error('❌ 章节ID为空');
        return;
      }
      
      this.loading = true;
      
      try {
      const token = getToken();
      let requestConfig = {
        header: { isToken: false }
      };
      
      if (token) {
        requestConfig.header = {
          'Authorization': 'Bearer ' + token,
          isToken: true
        };
      }
      const res = await request.get(`/chapter/content/${chapterId}`, {}, requestConfig);
      console.log('✅ 章节内容响应:', res);
      
      if (res && res.code === 200 && res.data) {
        // 后端返回的数据在 res.data 中
        this.chapterContent = res.data.content || '本章节内容为空';
        console.log('✅ 成功加载章节内容');
      } else if (res && res.content) {
        // 或者直接返回 content
        this.chapterContent = res.content;
        console.log('✅ 成功加载章节内容(direct)');
      } else {
          // 模拟章节内容
          this.chapterContent = `这是第${this.currentChapterIndex + 1}章的示例内容。\n\n这是一个美丽的春天，主人公开始了他的冒险旅程...\n\n本章内容正在努力加载中，请稍后查看完整内容。`;
          console.log('⚠️ 使用模拟章节内容');
        }
      } catch (error) {
        console.error('❌ 加载章节内容失败:', error);
        // 模拟错误时的内容
        this.chapterContent = `第${this.currentChapterIndex + 1}章内容加载失败，请检查网络连接后重试。\n\n错误信息: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },
      // 添加模拟章节方法
  useMockChapters() {
    this.chapters = [
      { id: 1, title: '第一章 开始', content: null },
      { id: 2, title: '第二章 发展', content: null },
      { id: 3, title: '第三章 结束', content: null }
    ];
  },
    // 上一章
    async prevChapter() {
      if (this.hasPrevChapter) {
        this.currentChapterIndex--;
        this.currentChapter = this.chapters[this.currentChapterIndex];
        await this.loadChapterContent(this.currentChapter.id);
      }
    },
    

    
    // 显示目录
    showCatalog() {
      uni.showToast({
        title: '目录功能开发中',
        icon: 'none'
      });
    },
    
    // 重新加载
    retryLoad() {
      this.loading = true;
      this.error = null;
      this.initReader({ id: this.novelId });
    }
  }
}
</script>

<style scoped>
.reader-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  text-align: center;
}

.loading-icon {
  animation: rotate 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.error-text {
  font-size: 32rpx;
  color: var(--error-color);
  margin: 20rpx 0;
  text-align: center;
}

.btn-retry {
  background-color: var(--primary-color);
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.novel-header {
  text-align: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 30rpx;
}

.novel-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.novel-author {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.chapter-header {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 30rpx;
}

.chapter-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.chapter-content {
  height: 70vh;
  padding: 30rpx;
  background: white;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.content-text {
  font-size: 32rpx;
  line-height: 1.8;
  color: #333;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  background: white;
  border-radius: 10rpx;
}

.btn-action {
  flex: 1;
  margin: 0 10rpx;
  padding: 20rpx;
  background-color: var(--primary-color);
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.btn-action:disabled {
  background-color: #ccc;
  color: #666;
}
.login-prompt, .ad-prompt {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 8rpx;
  text-align: center;
}

.btn-login {
  background: var(--primary-color);
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  margin-top: 10rpx;
  font-size: 26rpx;
}
</style>