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

<template>
  <view class="novel-list-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <uni-icons type="spinner-cycle" size="36" color="var(--primary-color)" class="loading-icon" />
      <text>加载中...</text>
    </view>
    
    <!-- 内容区域 -->
    <template v-else>
      <!-- 顶部广告 -->
      <ad-banner v-if="topAds.length" :ads="topAds" />
      
      <!-- 顶部分类导航 -->
      <scroll-view scroll-x class="category-nav">
        <view 
          v-for="category in categories" 
          :key="category.id"
          class="category-item"
          :class="{ active: activeCategory === category.id }"
          @click="changeCategory(category.id)"
        >
          {{ category.name }}
        </view>
      </scroll-view>
      
      <!-- 空状态 -->
      <view v-if="novels.length === 0 && !error" class="empty-container">
        <image src="/static/empty-book.png" class="empty-img" />
        <text class="empty-text">暂无小说数据</text>
        <button class="btn-refresh" @click="loadNovels">重新加载</button>
      </view>
      
      <!-- 错误状态 -->
      <view v-if="error" 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 class="section-header">
          <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 hotNovels" 
            :key="novel.id" 
            class="hot-item"
            @click="openNovel(novel)"
          >
            <image :src="getCoverUrl(novel.cover)" class="hot-cover" />
            <text class="hot-title">{{ novel.title }}</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 分类小说列表 -->
      <view v-if="novels.length > 0" class="section">
        <view class="section-header">
          <text class="section-title">{{ currentCategoryName }}作品</text>
        </view>
        <view class="novel-grid">
          <view 
            v-for="(novel, index) in novels" 
            :key="index" 
            class="novel-item"
            @click="openNovel(novel)"
          >
            <image :src="getCoverUrl(novel.cover)" class="novel-cover" />
            <text class="novel-title">{{ novel.title || '未知标题' }}</text>
            <text class="novel-author">{{ novel.author || '未知作者' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 成为签约作家按钮 -->
      <view class="become-author" @click="applyAuthor">
        <text>成为签约作家，发布你的作品</text>
      </view>
      
      <!-- 底部广告 -->
      <ad-banner v-if="bottomAds.length" :ads="bottomAds" />
    </template>
  </view>
</template>

<script>
// 确保路径正确
import AdBanner from '@/components/AdBanner';

export default {
  components: { AdBanner },
  data() {
    return {
      topAds: [],
      bottomAds: [],
      categories: [],
      activeCategory: 0,
      hotNovels: [],
      novels: [],
      loading: true,
      error: null,
      currentCategoryName: '全部'
    }
  },
  async mounted() {
    await this.initData();
  },
  methods: {
    async initData() {
      try {
        // 顺序加载数据，避免并行请求冲突
        await this.loadCategories();
        await this.loadHotNovels();
        await this.loadNovels();
        await this.loadAds();
      } catch (e) {
        console.error('初始化失败', e);
        this.error = '初始化失败，请检查网络连接';
      } finally {
        this.loading = false;
      }
    },
    
    // 加载广告
    async loadAds() {
      try {
        const [topRes, bottomRes] = await Promise.all([
          this.$http.get('/java-api/ad/position?code=TOP_BANNER'),
          this.$http.get('/java-api/ad/position?code=BOTTOM_BANNER')
        ]);
        
        this.topAds = topRes?.data || topRes || [];
        this.bottomAds = bottomRes?.data || bottomRes || [];
      } catch (e) {
        console.error('加载广告失败', e);
      }
    },
    
    // 加载分类
    async loadCategories() {
      try {
        const res = await this.$http.get('/category/tree');
        // 确保有"全部"选项
        this.categories = res?.data ? [{ id: 0, name: '全部' }, ...res.data] : [];
      } catch (e) {
        console.error('加载分类失败', e);
        this.categories = [{ id: 0, name: '全部' }];
      }
    },
    
    // 加载热门小说
    async loadHotNovels() {
      try {
        const res = await this.$http.get('/api/novel/hot');
        
        // 处理不同API响应格式
        if (res?.data?.rows) {
          this.hotNovels = res.data.rows;
        } else if (Array.isArray(res?.data)) {
          this.hotNovels = res.data;
        } else if (Array.isArray(res)) {
          this.hotNovels = res;
        } else {
          console.warn('热门小说API返回格式未知', res);
          this.hotNovels = [];
        }
      } catch (e) {
        console.error('加载热门小说失败', e);
        this.hotNovels = [];
      }
    },
    
    // 加载小说列表
    async loadNovels() {
      this.loading = true;
      this.error = null;
      try {
        const res = await this.$http.get('/api/novel/list');
        console.log('小说列表API响应:', res);
        
        // 处理不同API响应格式
        if (res?.data?.rows) {
          this.novels = res.data.rows;
        } else if (Array.isArray(res?.data)) {
          this.novels = res.data;
        } else if (res?.data?.list) {
          this.novels = res.data.list;
        } else if (Array.isArray(res)) {
          this.novels = res;
        } else {
          console.warn('小说列表API返回格式未知', res);
          this.novels = [];
          this.error = '数据格式错误';
        }
      } catch (e) {
        console.error('加载小说失败', e);
        this.error = '加载失败，请重试';
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
        this.novels = [];
      } finally {
        this.loading = false;
      }
    },
    
    // 封面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}`;
    },
    
    // 其他方法...
    changeCategory(categoryId) {
      this.activeCategory = categoryId;
      this.currentCategoryName = this.categories.find(c => c.id === categoryId)?.name || '全部';
      this.loadNovels();
    },
    
    openNovel(novel) {
      if (novel.id) {
        uni.navigateTo({
          url: `/pages/novel/detail?id=${novel.id}`
        });
      } else {
        uni.showToast({
          title: '小说ID不存在',
          icon: 'none'
        });
      }
    },
    
    applyAuthor() {
      if (!this.$store.getters.token) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        uni.navigateTo({ url: '/pages/login' });
        return;
      }
      uni.navigateTo({ url: '/pages/author/apply' });
    },
    
    goMore() {
      uni.navigateTo({
        url: '/pages/novel/more'
      });
    }
  }
}
</script>

<style scoped>
/* 添加加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

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

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

/* 添加空状态样式 */
.empty-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  text-align: center;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  opacity: 0.6;
  margin-bottom: 40rpx;
}

.empty-text, .error-text {
  font-size: 32rpx;
  color: var(--text-color);
  margin-bottom: 40rpx;
}

.error-text {
  color: var(--error-color);
}

.btn-refresh {
  background-color: var(--primary-color);
  color: white;
  width: 60%;
  border-radius: 50rpx;
}

/* 确保网格布局正确 */
.novel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
}

.novel-item {
  background-color: var(--card-bg);
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.novel-cover {
  width: 100%;
  height: 300rpx;
  background-color: #f5f5f5; /* 添加默认背景 */
}

.novel-title {
  display: block;
  font-size: 28rpx;
  padding: 10rpx 15rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.novel-author {
  display: block;
  font-size: 24rpx;
  color: #888;
  padding: 0 15rpx 15rpx;
}
</style>