tj

RuoYi-App/config.js

@@ -1,8 +1,11 @@
 // 应用全局配置
 module.exports = {
+	
   //baseUrl: 'https://vue.ruoyi.vip/prod-api',
    //baseUrl: 'http://localhost:8080',
    baseUrl: process.env.VUE_APP_BASE_API || 'http://localhost:8080',
+     // 未登录用户可阅读章节数（可配置）
+     freeChapters: uni.getStorageSync('freeChaptersLimit') || 5,
   // 应用信息
   appInfo: {
     // 应用名称

RuoYi-App/pages/novel/list.vue

@@ -446,18 +446,18 @@ export default {
       this.loadNovels(true); // 重置并加载新分类
     },
     
-    openNovel(novel) {
-      if (novel.id) {
-        uni.navigateTo({
-          url: `/pages/novel/detail?id=${novel.id}`
-        });
-      } else {
-        uni.showToast({
-          title: '小说ID不存在',
-          icon: 'none'
-        });
-      }
-    },
+openNovel(novel) {
+  if (novel.id) {
+    uni.navigateTo({
+      url: `/pages/novel/reader?novelId=${novel.id}`  // 使用反引号
+    });
+  } else {
+    uni.showToast({
+      title: '小说ID不存在',
+      icon: 'none'
+    });
+  }
+},
     
     applyAuthor() {
       if (!this.$store.getters.token) {

RuoYi-App/pages/novel/reader.vue

@@ -1,11 +1,24 @@
 <template>
   <view class="reader-container" :style="readerStyles">
+    <!-- 登录提示弹窗 -->
+    <uni-popup ref="loginPopup" type="dialog">
+      <uni-popup-dialog
+        type="info"
+        title="登录提示"
+        content="您已阅读完免费章节，登录后可继续阅读"
+        :duration="2000"
+        :before-close="true"
+        @close="closeLoginDialog"
+        @confirm="goToLogin"
+      ></uni-popup-dialog>
+    </uni-popup>
+    
     <!-- 顶部导航 -->
     <view class="reader-header">
       <uni-icons type="arrowleft" size="28" color="#fff" @click="goBack"></uni-icons>
       <text class="novel-title">{{ novelTitle }}</text>
       <view class="header-actions">
-        <uni-icons type="more" size="28" color="#fff"></uni-icons>
+        <uni-icons type="more" size="28" color="#fff" @click="showMoreActions"></uni-icons>
       </view>
     </view>
     
@@ -13,16 +26,23 @@
     <scroll-view scroll-y class="reader-content" :scroll-top="scrollTop" @scroll="onScroll">
       <view class="chapter-title">{{ chapterDetail.title }}</view>
       <rich-text :nodes="chapterContent" class="content-text"></rich-text>
+      
+      <!-- 章节结束提示 -->
+      <view v-if="isChapterEnd" class="chapter-end">
+        <text>本章结束</text>
+        <button v-if="!isLastChapter" @click="nextChapter">下一章</button>
+        <text v-else>已是最新章节</text>
+      </view>
     </scroll-view>
     
     <!-- 底部操作栏 -->
     <view class="reader-footer">
       <view class="progress">
-        <text>{{ chapterDetail.chapterNumber }}/{{ totalChapters }}</text>
-        <text>{{ progress }}%</text>
+        <text>{{ currentChapterIndex + 1 }}/{{ chapters.length }}</text>
+        <text>{{ readingProgress }}%</text>
       </view>
       <view class="actions">
-        <button class="action-btn" @click="prevChapter">
+        <button class="action-btn" @click="prevChapter" :disabled="isFirstChapter">
           <uni-icons type="arrow-up" size="24"></uni-icons>
           <text>上一章</text>
         </button>
@@ -34,7 +54,7 @@
           <uni-icons type="gear" size="24"></uni-icons>
           <text>设置</text>
         </button>
-        <button class="action-btn" @click="nextChapter">
+        <button class="action-btn" @click="nextChapter" :disabled="isLastChapter">
           <uni-icons type="arrow-down" size="24"></uni-icons>
           <text>下一章</text>
         </button>
@@ -45,23 +65,58 @@
     <uni-drawer ref="drawer" mode="right" :width="300">
       <view class="drawer-content">
         <text class="drawer-title">目录</text>
+        <view class="chapter-stats">
+          <text>共{{ chapters.length }}章</text>
+          <text>已读{{ readChaptersCount }}章</text>
+        </view>
         <scroll-view scroll-y class="chapter-list">
           <view 
-            v-for="chapter in chapters" 
+            v-for="(chapter, index) in chapters" 
             :key="chapter.id" 
             class="chapter-item"
-            :class="{ active: chapter.id === chapterDetail.id }"
-            @click="selectChapter(chapter)"
+            :class="{ 
+              active: chapter.id === chapterDetail.id,
+              read: isChapterRead(chapter.id),
+              locked: isChapterLocked(index)
+            }"
+            @click="selectChapter(chapter, index)"
           >
-            <text>{{ chapter.chapterNumber }}. {{ chapter.title }}</text>
+            <text>{{ index + 1 }}. {{ chapter.title }}</text>
+            <uni-icons v-if="isChapterLocked(index)" type="locked" size="16" color="#999"></uni-icons>
           </view>
         </scroll-view>
       </view>
     </uni-drawer>
+    
+    <!-- 设置面板 -->
+    <uni-popup ref="settingsPopup" type="bottom">
+      <view class="settings-panel">
+        <text class="panel-title">阅读设置</text>
+        <view class="setting-item">
+          <text>字体大小</text>
+          <slider :value="fontSize" min="24" max="40" @change="updateFontSize" />
+        </view>
+        <view class="setting-item">
+          <text>背景颜色</text>
+          <view class="color-options">
+            <view 
+              v-for="color in backgroundColors" 
+              :key="color.value"
+              class="color-option"
+              :class="{ active: readerStyles.backgroundColor === color.value }"
+              :style="{ backgroundColor: color.value }"
+              @click="changeBackgroundColor(color.value)"
+            ></view>
+          </view>
+        </view>
+        <button class="close-btn" @click="$refs.settingsPopup.close()">关闭</button>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
 <script>
+import config from '@/config'
 import novelService from '@/services/novelService'
 
 export default {
@@ -73,10 +128,20 @@ export default {
       chapterDetail: {},
       chapterContent: '',
       chapters: [],
-      // 确保所有字段初始化
-      totalChapters: 0,
-      progress: 0,
+      currentChapterIndex: 0,
+      // 阅读统计
+      readChapters: [],
+      readingProgress: 0,
       scrollTop: 0,
+      isChapterEnd: false,
+      // 阅读设置
+      fontSize: 32,
+      backgroundColors: [
+        { name: '护眼模式', value: '#f8f2e0' },
+        { name: '白色', value: '#ffffff' },
+        { name: '夜间', value: '#2c2c2c' },
+        { name: '淡蓝', value: '#e8f4f8' }
+      ],
       readerStyles: {
         fontSize: '32rpx',
         lineHeight: '1.8',
@@ -85,117 +150,403 @@ export default {
       }
     }
   },
+  computed: {
+    // 计算属性
+    isFirstChapter() {
+      return this.currentChapterIndex === 0
+    },
+    isLastChapter() {
+      return this.currentChapterIndex === this.chapters.length - 1
+    },
+    readChaptersCount() {
+      return this.readChapters.length
+    },
+    // 检查是否达到免费章节限制
+    reachedFreeLimit() {
+      const isLoggedIn = this.$store.getters.token
+      return !isLoggedIn && this.readChaptersCount >= config.freeChapters
+    }
+  },
   async onLoad(options) {
-    this.novelId = options.novelId;
-    this.chapterId = options.chapterId || 1;
+    this.novelId = options.novelId
+    this.chapterId = options.chapterId || null
     
-    await this.loadNovelData();
-    await this.loadChapter();
+    // 加载阅读进度
+    this.loadReadingProgress()
+    
+    await this.loadNovelData()
+    
+    // 如果有指定章节ID，加载该章节，否则加载第一章
+    if (this.chapterId) {
+      await this.loadChapter(this.chapterId)
+    } else {
+      // 尝试从阅读记录中恢复
+      const lastReadChapter = this.getLastReadChapter()
+      if (lastReadChapter) {
+        await this.loadChapter(lastReadChapter.id)
+      } else {
+        await this.loadFirstChapter()
+      }
+    }
+    
+    // 监听网络状态
+    uni.onNetworkStatusChange(this.handleNetworkChange)
+  },
+  onUnload() {
+    // 保存阅读进度
+    this.saveReadingProgress()
+    // 移除网络状态监听
+    uni.offNetworkStatusChange(this.handleNetworkChange)
   },
   methods: {
+    // 加载小说数据
     async loadNovelData() {
-      const res = await this.$http.get(`/novel/detail/${this.novelId}`);
-      if (res.data) {
-        this.novelTitle = res.data.title;
+      try {
+        uni.showLoading({ title: '加载中...' })
+        
+    // 加载小说基本信息 - 修复API路径
+    const novelRes = await this.$http.get(`/novel/detail/${this.novelId}`)
+    
+    // 使用统一的响应解析方法
+    const novelData = this.parseResponse(novelRes)
+    console.log('小说详情响应:', novelData)
+    
+    if (novelData.code === 200 && novelData.data) {
+      this.novelTitle = novelData.data.title
+      uni.setNavigationBarTitle({ title: this.novelTitle })
+    }
+    
+    // 加载章节列表 - 修复API路径
+    const chapterRes = await this.$http.get(`/chapter/list/${this.novelId}`)
+    
+    // 使用统一的响应解析方法
+    const chapterData = this.parseResponse(chapterRes)
+    console.log('章节列表响应:', chapterData)
+    
+    if (chapterData.code === 200) {
+      // 处理不同的响应格式
+      if (Array.isArray(chapterData.rows)) {
+        this.chapters = chapterData.rows
+      } else if (Array.isArray(chapterData.data)) {
+        this.chapters = chapterData.data
       }
       
-      // 获取章节列表
-      const chapterRes = await this.$http.get(`/chapter/list/${this.novelId}`);
-      if (chapterRes.rows && Array.isArray(chapterRes.rows)) {
-        this.chapters = chapterRes.rows;
-        this.totalChapters = this.chapters.length;
+      // 初始化当前章节索引
+      if (this.chapterId) {
+        this.currentChapterIndex = this.chapters.findIndex(ch => ch.id === this.chapterId)
+      }
+    }
+  } catch (error) {
+    console.error('加载小说数据失败:', error)
+    uni.showToast({
+      title: '加载失败',
+      icon: 'none'
+    })
+  } finally {
+    uni.hideLoading()
       }
     },
     
-    async loadChapter() {
-      uni.showLoading({ title: '加载中...' });
+    // 加载章节内容
+    async loadChapter(chapterId) {
+      // 检查章节是否锁定
+      const chapterIndex = this.chapters.findIndex(ch => ch.id === chapterId)
+      if (this.isChapterLocked(chapterIndex)) {
+        this.showLoginPrompt()
+        return
+      }
       
       try {
-        const res = await this.$http.get(`/chapter/content/${this.chapterId}`);
+        uni.showLoading({ title: '加载中...' })
+        
+        const res = await this.$http.get(`/chapter/content/${chapterId}`)
         if (res.data) {
-          this.chapterDetail = res.data;
-          this.chapterContent = this.formatContent(res.data.content);
-          this.progress = Math.round((this.chapterDetail.chapterOrder / this.totalChapters) * 100);
+          this.chapterDetail = res.data
+          this.chapterContent = this.formatContent(res.data.content)
+          this.chapterId = chapterId
+          this.currentChapterIndex = chapterIndex
+          
+          // 标记为已读
+          this.markChapterAsRead(chapterId)
+          
+          // 计算阅读进度
+          this.calculateReadingProgress()
         }
+      } catch (error) {
+        console.error('加载章节内容失败:', error)
+        uni.showToast({
+          title: '加载失败',
+          icon: 'none'
+        })
       } finally {
-        uni.hideLoading();
+        uni.hideLoading()
       }
     },
     
+    // 加载第一章
+    async loadFirstChapter() {
+      if (this.chapters.length > 0) {
+        await this.loadChapter(this.chapters[0].id)
+      }
+    },
+    
+    // 格式化内容
     formatContent(content) {
-      // 处理特殊格式
+      if (!content) return ''
+      
+      // 处理HTML标签和特殊字符
       return content
-        .replace(/<br>/g, '\n')
+        .replace(/<br\s*\/?>/gi, '\n')
         .replace(/&nbsp;/g, ' ')
         .replace(/<p>/g, '\n\n')
         .replace(/<\/p>/g, '')
-        .replace(/<[^>]+>/g, '');
-    }
-
+        .replace(/<[^>]+>/g, '')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim()
+    },
+    
+    // 标记章节为已读
+    markChapterAsRead(chapterId) {
+      if (!this.readChapters.includes(chapterId)) {
+        this.readChapters.push(chapterId)
+        this.saveReadingProgress()
+      }
+    },
+    
+    // 检查章节是否已读
+    isChapterRead(chapterId) {
+      return this.readChapters.includes(chapterId)
+    },
+    
+    // 检查章节是否锁定
+    isChapterLocked(chapterIndex) {
+      // 已登录用户可以阅读所有章节
+      if (this.$store.getters.token) return false
+      
+      // 未登录用户只能阅读前N章
+      return chapterIndex >= config.freeChapters
+    },
     
+    // 加载阅读进度
+    loadReadingProgress() {
+      const progress = uni.getStorageSync(`readingProgress_${this.novelId}`)
+      if (progress) {
+        this.readChapters = progress.readChapters || []
+        this.readerStyles = progress.readerStyles || this.readerStyles
+        this.fontSize = progress.fontSize || 32
+      }
+    },
+    
+    // 保存阅读进度
     saveReadingProgress() {
-      // 保存到本地
-      uni.setStorageSync('readingProgress', {
+      const progress = {
         novelId: this.novelId,
-        chapterId: this.chapterId
-      })
+        chapterId: this.chapterId,
+        readChapters: this.readChapters,
+        readerStyles: this.readerStyles,
+        fontSize: this.fontSize,
+        timestamp: Date.now()
+      }
       
-      // 如果已登录，同步到服务器
-      if (uni.getStorageSync('token')) {
-        this.$http.post('/reading/progress', {
-          novelId: this.novelId,
-          chapterId: this.chapterId
-        })
+      uni.setStorageSync(`readingProgress_${this.novelId}`, progress)
+      
+      // 同步到服务器（如果已登录）
+      if (this.$store.getters.token) {
+        this.$http.post('/reading/progress', progress)
       }
     },
     
+    // 获取最后阅读的章节
+    getLastReadChapter() {
+      if (this.chapterId) {
+        return this.chapters.find(ch => ch.id === this.chapterId)
+      }
+      
+      const progress = uni.getStorageSync(`readingProgress_${this.novelId}`)
+      if (progress && progress.chapterId) {
+        return this.chapters.find(ch => ch.id === progress.chapterId)
+      }
+      
+      return null
+    },
+    
+    // 计算阅读进度
+    calculateReadingProgress() {
+      if (this.chapters.length === 0) return 0
+      this.readingProgress = Math.round((this.readChaptersCount / this.chapters.length) * 100)
+    },
+    
+    // 显示登录提示
+    showLoginPrompt() {
+      this.$refs.loginPopup.open()
+    },
+    
+    // 关闭登录对话框
+    closeLoginDialog() {
+      this.$refs.loginPopup.close()
+    },
+    
+    // 跳转到登录页面
+    goToLogin() {
+      uni.navigateTo({
+        url: '/pages/login?redirect=' + encodeURIComponent(this.$route.fullPath)
+      })
+    },
+    
+    // 上一章
     prevChapter() {
-      if (this.chapterId > 1) {
-        this.chapterId--
-        this.loadChapter()
-      } else {
-        uni.showToast({
-          title: '已经是第一章',
-          icon: 'none'
-        })
+      if (this.currentChapterIndex > 0) {
+        const prevChapter = this.chapters[this.currentChapterIndex - 1]
+        this.loadChapter(prevChapter.id)
       }
     },
     
+    // 下一章
     nextChapter() {
-      if (this.chapterId < this.totalChapters) {
-        this.chapterId++
-        this.loadChapter()
-      } else {
+      if (this.currentChapterIndex < this.chapters.length - 1) {
+        const nextChapter = this.chapters[this.currentChapterIndex + 1]
+        
+        // 检查下一章是否锁定
+        if (this.isChapterLocked(this.currentChapterIndex + 1)) {
+          this.showLoginPrompt()
+          return
+        }
+        
+        this.loadChapter(nextChapter.id)
+      }
+    },
+    
+    // 选择章节
+    selectChapter(chapter, index) {
+      // 检查章节是否锁定
+      if (this.isChapterLocked(index)) {
+        this.showLoginPrompt()
+        return
+      }
+      
+      this.loadChapter(chapter.id)
+      this.$refs.drawer.close()
+    },
+    
+    // 显示更多操作
+    showMoreActions() {
+      uni.showActionSheet({
+        itemList: ['添加到书架', '分享', '举报', '设置'],
+        success: (res) => {
+          switch (res.tapIndex) {
+            case 0:
+              this.addToBookshelf()
+              break
+            case 1:
+              this.shareNovel()
+              break
+            case 2:
+              this.reportNovel()
+              break
+            case 3:
+              this.toggleSettings()
+              break
+          }
+        }
+      })
+    },
+    
+    // 添加到书架
+    addToBookshelf() {
+      if (!this.$store.getters.token) {
         uni.showToast({
-          title: '已是最新章节',
+          title: '请先登录',
           icon: 'none'
         })
+        return
       }
+      
+      this.$http.post('/bookshelf/add', {
+        novelId: this.novelId
+      }).then(res => {
+        uni.showToast({
+          title: '已添加到书架',
+          icon: 'success'
+        })
+      }).catch(error => {
+        uni.showToast({
+          title: '添加失败',
+          icon: 'none'
+        })
+      })
     },
     
-    selectChapter(chapter) {
-      this.chapterId = chapter.id
-      this.$refs.drawer.close()
-      this.loadChapter()
+    // 分享小说
+    shareNovel() {
+      uni.share({
+        title: this.novelTitle,
+        path: `/pages/novel/reader?novelId=${this.novelId}`,
+        success: () => {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    
+    // 举报小说
+    reportNovel() {
+      uni.navigateTo({
+        url: `/pages/report?novelId=${this.novelId}`
+      })
     },
     
+    // 打开目录
     toggleMenu() {
       this.$refs.drawer.open()
     },
     
+    // 打开设置
     toggleSettings() {
-      uni.navigateTo({
-        url: '/pages/reader/settings'
-      })
+      this.$refs.settingsPopup.open()
+    },
+    
+    // 更新字体大小
+    updateFontSize(e) {
+      this.fontSize = e.detail.value
+      this.readerStyles.fontSize = `${this.fontSize}rpx`
+      this.saveReadingProgress()
     },
     
+    // 更改背景颜色
+    changeBackgroundColor(color) {
+      this.readerStyles.backgroundColor = color
+      // 根据背景色调整文字颜色
+      this.readerStyles.color = color === '#2c2c2c' ? '#f0f0f0' : '#333'
+      this.saveReadingProgress()
+    },
+    
+    // 返回上一页
     goBack() {
       uni.navigateBack()
     },
     
+    // 滚动事件
     onScroll(e) {
-      // 记录滚动位置
       this.scrollTop = e.detail.scrollTop
+      
+      // 检测是否滚动到章节末尾
+      const scrollHeight = e.detail.scrollHeight
+      const scrollTop = e.detail.scrollTop
+      const clientHeight = e.detail.clientHeight
+      
+      this.isChapterEnd = scrollHeight - scrollTop - clientHeight < 50
+    },
+    
+    // 处理网络状态变化
+    handleNetworkChange(res) {
+      if (!res.isConnected) {
+        uni.showToast({
+          title: '网络已断开',
+          icon: 'none'
+        })
+      }
     }
   }
 }
@@ -207,6 +558,7 @@ export default {
   height: 100vh;
   padding: 20rpx;
   box-sizing: border-box;
+  transition: all 0.3s ease;
 }
 
 .reader-header {
@@ -250,6 +602,13 @@ export default {
   line-height: 1.8;
 }
 
+.chapter-end {
+  text-align: center;
+  margin-top: 40rpx;
+  padding: 20rpx;
+  border-top: 1rpx solid #eee;
+}
+
 .reader-footer {
   position: absolute;
   bottom: 0;
@@ -283,6 +642,10 @@ export default {
   padding: 10rpx;
 }
 
+.action-btn:disabled {
+  opacity: 0.5;
+}
+
 .drawer-content {
   padding: 30rpx;
 }
@@ -291,16 +654,27 @@ export default {
   font-size: 36rpx;
   font-weight: bold;
   display: block;
-  margin-bottom: 30rpx;
+  margin-bottom: 20rpx;
   border-bottom: 1rpx solid #eee;
   padding-bottom: 20rpx;
 }
 
+.chapter-stats {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  font-size: 24rpx;
+  color: #666;
+}
+
 .chapter-list {
-  height: calc(100vh - 150rpx);
+  height: calc(100vh - 200rpx);
 }
 
 .chapter-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 20rpx 10rpx;
   border-bottom: 1rpx solid #f0f0f0;
   font-size: 28rpx;
@@ -310,4 +684,58 @@ export default {
   color: #2a5caa;
   font-weight: bold;
 }
-</style>
+
+.chapter-item.read {
+  color: #666;
+}
+
+.chapter-item.locked {
+  color: #999;
+}
+
+.settings-panel {
+  padding: 30rpx;
+  background: white;
+  border-radius: 20rpx 20rpx 0 0;
+}
+
+.panel-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.setting-item {
+  margin-bottom: 30rpx;
+}
+
+.setting-item text {
+  display: block;
+  margin-bottom: 15rpx;
+  font-size: 28rpx;
+}
+
+.color-options {
+  display: flex;
+  justify-content: space-between;
+}
+
+.color-option {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  border: 2rpx solid #eee;
+}
+
+.color-option.active {
+  border-color: #2a5caa;
+}
+
+.close-btn {
+  margin-top: 30rpx;
+  background: #f0f0f0;
+  color: #333;
+}
+</style>