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

<template>
  <view>
    <!-- 顶部广告（来自Java后台） -->
    <ad-banner :ads="topAds" />
    
    <!-- 小说列表 -->
    <view class="novel-list">
      <view v-for="novel in novelList" :key="novel.id" @click="openNovel(novel)">
        <image :src="novel.cover" mode="aspectFill" />
        <text>{{ novel.title }}</text>
      </view>
    </view>
    
    <!-- 底部广告 -->
    <ad-banner :ads="bottomAds" />
  </view>
</template>
<script>
import AdBanner from '@/components/AdBanner';

export default {
	components: { AdBanner },
  data() {
    return {
      novelList: [], // 存储小说目录数据
	        topAds: [],
	        bottomAds: []
    }
  },
  async onLoad() {
    await this.loadAds();
    await this.loadNovels();
  },
  // onLoad() {
  //   this.loadNovelList();
  // },
  methods: {
    // 从Java后台加载广告
    async loadAds() {
      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;
      this.bottomAds = bottomRes.data;
    },
    
    // 从PHP系统加载小说目录
    async loadNovels() {
      const res = await this.$http.get('/php-api/novel/list');
      this.novelList = res.data;
    },
    
    // 打开小说详情页
    openNovel(novel) {
      uni.navigateTo({
        url: `/pages/novel/detail?id=${novel.id}&title=${encodeURIComponent(novel.title)}`
      });
    }
  }
}
</script>
<style scoped>
.novel-list-page {
  padding-bottom: 120rpx !important;
}
</style>