tj

RuoYi-App/pages/novel/list.vue

@@ -25,59 +25,61 @@
       </scroll-view>
       
       <!-- 空状态 -->
-      <view v-if="novels.length === 0 && !error" class="empty-container">
+      <view v-if="showEmptyState" class="empty-container">
         <image src="/static/empty-book.png" class="empty-img" />
         <text class="empty-text">暂无小说数据</text>
-		<button class="btn-refresh" @click="reloadData">重新加载</button>
+        <button class="btn-refresh" @click="reloadData">重新加载</button>
       </view>
       
       <!-- 错误状态 -->
-      <view v-if="error" class="error-container">
+      <view v-if="error && !showNovels" class="error-container">
         <uni-icons type="info" size="48" color="var(--error-color)" />
         <text class="error-text">{{ error }}</text>
         <button class="btn-refresh" @click="loadNovels">重新加载</button>
       </view>
       
       <!-- 热门推荐 -->
-      <view v-if="hotNovels.length > 0" class="section">
-    <!-- ... -->
-  </view>
-  <view v-else class="section">
+      <view v-if="showHotNovels" class="section">
         <view class="section-header">
-      <text class="section-title">热门推荐（演示数据）</text>
+          <text class="section-title">热门推荐</text>
           <text class="section-more" @click="goMore">更多 ></text>
         </view>
         <scroll-view scroll-x class="hot-list">
           <view 
-        v-for="novel in demoHotNovels" 
+            v-for="novel in displayedHotNovels" 
             :key="novel.id" 
             class="hot-item"
             @click="openNovel(novel)"
           >
-        <image :src="novel.cover" class="hot-cover" />
+            <image 
+              :src="getCoverUrl(novel.coverImg)" 
+              class="hot-cover"
+              @error="handleImageError"
+            />
             <text class="hot-title">{{ novel.title }}</text>
           </view>
         </scroll-view>
       </view>
       
-      <!-- 分类小说列表 -->
-      <view v-if="novels.length > 0" class="section">
-    <!-- ... -->
-  </view>
-  <view v-else class="section">
+      <!-- 小说列表 -->
+      <view v-if="showNovels" class="section">
         <view class="section-header">
-      <text class="section-title">小说列表（演示数据）</text>
+          <text class="section-title">小说列表</text>
         </view>
         <view class="novel-grid">
           <view 
-        v-for="novel in demoNovels" 
-        :key="novel.id" 
+            v-for="novel in displayedNovels" 
+            :key="novel.id" 
             class="novel-item"
             @click="openNovel(novel)"
           >
-        <image :src="novel.cover" class="novel-cover" />
-        <text class="novel-title">{{ novel.title }}</text>
-        <text class="novel-author">{{ novel.author }}</text>
+            <image 
+              :src="getCoverUrl(novel.coverImg)" 
+              class="novel-cover"
+              @error="handleImageError"
+            />
+            <text class="novel-title">{{ novel.title }}</text>
+            <text class="novel-author">{{ novel.author || '未知作者' }}</text>
           </view>
         </view>
       </view>
@@ -94,9 +96,7 @@
 </template>
 
 <script>
-// 确保路径正确
 import AdBanner from '@/components/AdBanner';
-import urls from '@/api/urls';
 
 export default {
   components: { AdBanner },
@@ -114,49 +114,66 @@ export default {
       
       // 临时解决方案 - 模拟数据
       mockHotNovels: [
-        { id: 1, title: '总裁的替身前妻', cover: '/static/demo-cover1.jpg' },
-        { id: 2, title: '神医毒妃', cover: '/static/demo-cover2.jpg' },
-        { id: 3, title: '穿越之王妃逆袭', cover: '/static/demo-cover3.jpg' }
+        { id: 1, title: '总裁的替身前妻', coverImg: '/static/demo-cover1.jpg', author: '言情作家' },
+        { id: 2, title: '神医毒妃', coverImg: '/static/demo-cover2.jpg', author: '古风大神' },
+        { id: 3, title: '穿越之王妃逆袭', coverImg: '/static/demo-cover3.jpg', author: '穿越达人' }
       ],
       mockNovels: [
-        { id: 4, title: '都市最强赘婿', author: '网络作家', cover: '/static/demo-cover4.jpg' },
-        { id: 5, title: '修仙归来', author: '仙侠迷', cover: '/static/demo-cover5.jpg' },
-        { id: 6, title: '校园纯爱物语', author: '青春校园', cover: '/static/demo-cover6.jpg' }
-      ]
+        { id: 4, title: '都市最强赘婿', author: '网络作家', coverImg: '/static/demo-cover4.jpg' },
+        { id: 5, title: '修仙归来', author: '仙侠迷', coverImg: '/static/demo-cover5.jpg' },
+        { id: 6, title: '校园纯爱物语', author: '青春校园', coverImg: '/static/demo-cover6.jpg' }
+      ],
+      // 添加分页参数
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      hasMore: true
+    }
+  },
+  computed: {
+    // 添加计算属性控制显示逻辑
+    showEmptyState() {
+      return this.novels.length === 0 && !this.error && !this.loading;
+    },
+    showHotNovels() {
+      return this.hotNovels.length > 0 && !this.error;
+    },
+    showNovels() {
+      return this.novels.length > 0 && !this.error;
+    },
+    displayedHotNovels() {
+      return this.hotNovels.length > 0 ? this.hotNovels : this.mockHotNovels;
+    },
+    displayedNovels() {
+      return this.novels.length > 0 ? this.novels : this.mockNovels;
     }
   },
   mounted() {
-    console.log('$http available in component:', typeof this.$http.get === 'function');
-    
-    // 确保所有方法都已绑定
-    console.log('loadCategories:', typeof this.loadCategories);
-    console.log('loadHotNovels:', typeof this.loadHotNovels);
-    console.log('loadNovels:', typeof this.loadNovels);
-    console.log('loadAds:', typeof this.loadAds);
-    
     this.initData();
   },
   methods: {
     async initData() {
-      // 确保所有方法都已绑定
-      if (
-        typeof this.loadCategories !== 'function' ||
-        typeof this.loadHotNovels !== 'function' ||
-        typeof this.loadNovels !== 'function' ||
-        typeof this.loadAds !== 'function'
-      ) {
-        console.error('一个或多个方法未绑定!');
-        this.error = '系统初始化失败，请刷新页面';
-        this.loading = false;
-        return;
-      }
-      
       try {
-        // 顺序加载数据
-        await this.loadCategories();
-        await this.loadHotNovels();
-        await this.loadNovels();
-        await this.loadAds();
+        // 确保所有方法都已绑定
+        if (
+          typeof this.loadCategories !== 'function' ||
+          typeof this.loadHotNovels !== 'function' ||
+          typeof this.loadNovels !== 'function' ||
+          typeof this.loadAds !== 'function'
+        ) {
+          console.error('一个或多个方法未绑定!');
+          this.error = '系统初始化失败，请刷新页面';
+          this.loading = false;
+          return;
+        }
+        
+        // 并行加载数据以提高性能
+        await Promise.all([
+          this.loadCategories(),
+          this.loadHotNovels(),
+          this.loadNovels(),
+          this.loadAds()
+        ]);
       } catch (e) {
         console.error('初始化失败', e);
         this.error = '初始化失败，请检查网络连接';
@@ -164,33 +181,63 @@ export default {
         this.loading = false;
       }
     },
-        // 加载分类
+
+    // 修复API请求逻辑
     async loadCategories() {
       try {
-    // 使用正确的参数格式
-    const res = await this.$http.get('/category/tree', {
-      header: { isToken: false }
-              });
-        this.categories = res && res.data ? [{ id: 0, name: '全部' }, ...res.data] : [];
+        const res = await this.$http.get('/category/tree', {
+          header: { isToken: false }
+        });
+        
+        console.log('分类API响应:', res);
+        
+        // 确保正确解析API响应
+        if (res && res.data && res.data.code === 200 && Array.isArray(res.data.data)) {
+          // 提取所有子分类（第二级分类）
+          let subCategories = [];
+          res.data.data.forEach(parent => {
+            if (parent.children && Array.isArray(parent.children)) {
+              subCategories = subCategories.concat(parent.children);
+            }
+          });
+          
+          // 添加"全部"分类
+          this.categories = [
+            { id: 0, name: '全部' }, 
+            ...subCategories
+          ];
+        } else {
+          console.warn('分类数据结构异常，使用默认分类');
+          this.categories = [{ id: 0, name: '全部' }];
+        }
       } catch (e) {
         console.error('加载分类失败', e);
         this.categories = [{ id: 0, name: '全部' }];
       }
     },
-    // 加载热门小说
+
     async loadHotNovels() {
       try {
-      // 公开API，不需要认证
-    const res = await this.$http.get('/novel/hot', {
-      header: { isToken: false }
-      });
-        // 处理响应
-        if (res && res.data && res.data.rows) {
-          this.hotNovels = res.data.rows;
-        } else if (res && res.data && Array.isArray(res.data)) {
-          this.hotNovels = res.data;
-        } else {
-          console.warn('热门小说API返回格式未知', res);
+        const res = await this.$http.get('/novel/hot', {
+          header: { isToken: false }
+        });
+        
+        console.log('热门小说API响应:', res);
+        
+        // 处理不同API响应格式
+        if (res && res.data) {
+          if (res.data.code === 200 && Array.isArray(res.data.rows)) {
+            this.hotNovels = res.data.rows;
+          } else if (Array.isArray(res.data)) {
+            this.hotNovels = res.data;
+          } else {
+            console.error('热门小说数据结构异常');
+          }
+        }
+        
+        // 只在真实数据不可用时使用模拟数据
+        if (!this.hotNovels || this.hotNovels.length === 0) {
+          console.warn('使用模拟热门小说数据');
           this.hotNovels = this.mockHotNovels;
         }
       } catch (e) {
@@ -198,66 +245,119 @@ export default {
         this.hotNovels = this.mockHotNovels;
       }
     },
-    // 加载小说列表
-    async loadNovels() {
+
+    async loadNovels(reset = false) {
+      if (reset) {
+        this.page = 1;
+        this.hasMore = true;
+        this.novels = [];
+      }
+      
+      if (!this.hasMore) return;
+      
       this.loading = true;
       this.error = null;
+      
       try {
-        // 使用正确的请求方式
-        //const res = await this.$http.get('/novel/list');
-    const res = await this.$http.get('/novel/list', {
-      header: { isToken: false }
+        const res = await this.$http.get('/novel/list', {
+          params: {
+            page: this.page,
+            pageSize: this.pageSize,
+            categoryId: this.activeCategory
+          },
+          header: { isToken: false }
         });
         
-        // 修复可选链操作符问题
-        if (res && res.data && res.data.rows) {
-          this.novels = res.data.rows;
-        } else if (res && res.data && Array.isArray(res.data)) {
-          this.novels = res.data;
-        } else {
-          console.warn('小说列表API返回格式未知', res);
-          this.novels = this.mockNovels;
+        console.log('小说列表API响应:', res);
+        
+        let newNovels = [];
+        let total = 0;
+        
+        // 处理不同API响应格式
+        if (res && res.data) {
+          if (res.data.code === 200 && Array.isArray(res.data.rows)) {
+            newNovels = res.data.rows;
+            total = res.data.total;
+          } 
+          else if (Array.isArray(res.data)) {
+            newNovels = res.data;
+            total = res.data.length;
+          }
+        }
+        
+        if (newNovels.length > 0) {
+          this.novels = [...this.novels, ...newNovels];
+          this.hasMore = this.novels.length < total;
+          this.page++;
+        } else if (this.page === 1) {
+          console.warn('小说列表为空');
+          this.novels = [];
         }
       } catch (e) {
         console.error('加载小说失败', e);
         this.error = '加载失败，请重试';
-        this.novels = this.mockNovels;
+        if (this.novels.length === 0) {
+          this.novels = this.mockNovels;
+        }
       } finally {
         this.loading = false;
       }
     },
-    
-    // 加载广告
+
     async loadAds() {
       try {
+        // 使用Promise.all并行请求
         const [topRes, bottomRes] = await Promise.all([
-      this.$http.get('/ad/position?code=TOP_BANNER', {
-        header: { isToken: false }
-      }),
-      this.$http.get('/ad/position?code=BOTTOM_BANNER', {
-        header: { isToken: false }
-      })
+          this.$http.get('/ad/position?code=TOP_BANNER', {
+            header: { isToken: false }
+          }),
+          this.$http.get('/ad/position?code=BOTTOM_BANNER', {
+            header: { isToken: false }
+          })
         ]);
         
-        this.topAds = topRes && topRes.data ? topRes.data : [];
-        this.bottomAds = bottomRes && bottomRes.data ? bottomRes.data : [];
+        // 处理广告响应
+        this.topAds = this.parseAdResponse(topRes);
+        this.bottomAds = this.parseAdResponse(bottomRes);
       } catch (e) {
         console.error('加载广告失败', e);
       }
     },
-    // 封面URL处理
+    
+    // 新增：广告响应解析方法
+    parseAdResponse(response) {
+      if (!response || !response.data) return [];
+      
+      if (response.data.code === 200 && Array.isArray(response.data.data)) {
+        return response.data.data;
+      } else if (Array.isArray(response.data)) {
+        return response.data;
+      } else if (Array.isArray(response.data.rows)) {
+        return response.data.rows;
+      }
+      
+      return [];
+    },
+
+    // 修复封面URL处理
     getCoverUrl(cover) {
       if (!cover) return '/static/default-cover.jpg';
       if (cover.startsWith('http')) return cover;
       if (cover.startsWith('/')) return cover;
-      return `${process.env.VUE_APP_BASE_URL || ''}/uploads/${cover}`;
+      return `${process.env.VUE_APP_BASE_URL || ''}${cover}`;
+    },
+    
+    // 添加图片错误处理
+    handleImageError(event) {
+      event.target.src = '/static/default-cover.jpg';
     },
     
     // 其他方法...
     changeCategory(categoryId) {
       this.activeCategory = categoryId;
-      this.currentCategoryName = this.categories.find(c => c.id === categoryId)?.name || '全部';
-      this.loadNovels();
+      const category = this.categories.find(c => c.id === categoryId);
+      this.currentCategoryName = category ? category.name : '全部';
+      this.loadNovels(true); // 重置并加载新分类
     },
     
     openNovel(novel) {
@@ -287,9 +387,15 @@ export default {
         url: '/pages/novel/more'
       });
     },
-        // 确保重新加载按钮绑定到正确的方法
+    
+    // 确保重新加载按钮绑定到正确的方法
     reloadData() {
       this.initData();
+    },
+    
+    // 添加上拉加载事件
+    onReachBottom() {
+      this.loadNovels();
     }
   }
 }
@@ -358,16 +464,18 @@ export default {
 }
 
 .novel-item {
-  background-color: var(--card-bg);
+  background-color: white;
   border-radius: 12rpx;
   overflow: hidden;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
 }
 
-.novel-cover {
+/* 确保封面有默认背景和固定比例 */
+.novel-cover, .hot-cover {
   width: 100%;
   height: 300rpx;
-  background-color: #f5f5f5; /* 添加默认背景 */
+  background-color: #f5f5f5;
+  object-fit: cover;
 }
 
 .novel-title {
@@ -385,4 +493,87 @@ export default {
   color: #888;
   padding: 0 15rpx 15rpx;
 }
+
+/* 热门列表样式 */
+.hot-list {
+  display: flex;
+  padding: 20rpx;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.hot-item {
+  display: inline-block;
+  width: 200rpx;
+  margin-right: 30rpx;
+}
+
+.hot-cover {
+  width: 200rpx;
+  height: 280rpx;
+  border-radius: 8rpx;
+}
+
+.hot-title {
+  display: block;
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 分类导航样式 */
+.category-nav {
+  white-space: nowrap;
+  padding: 20rpx 0;
+  background-color: #fff;
+  border-bottom: 1rpx solid #eee;
+}
+
+.category-item {
+  display: inline-block;
+  padding: 10rpx 30rpx;
+  margin: 0 10rpx;
+  border-radius: 30rpx;
+  font-size: 28rpx;
+}
+
+.category-item.active {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+/* 章节标题样式 */
+.section {
+  margin-top: 30rpx;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20rpx 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.section-more {
+  font-size: 26rpx;
+  color: var(--text-secondary-color);
+}
+
+/* 成为作家按钮样式 */
+.become-author {
+  margin: 40rpx 20rpx;
+  padding: 20rpx;
+  text-align: center;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 10rpx;
+  font-size: 30rpx;
+}
 </style>