novel-app/RuoYi-App/pages/bookshelf/index.vue

<template>
  <view class="bookshelf">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="title">我的书架</text>
      <view class="actions">
        <uni-icons type="plus" size="24" color="#333" @click="addBook"></uni-icons>
        <uni-icons type="search" size="24" color="#333" @click="searchBooks"></uni-icons>
      </view>
    </view>
    
    <!-- 书架内容 -->
    <view v-if="books.length > 0" class="book-grid">
      <view v-for="book in books" :key="book.id" class="book-item" @click="readBook(book)">
        <image :src="book.cover" class="cover" />
        <text class="book-title">{{ book.title }}</text>
        <text class="progress">阅读到: {{ book.progress }}%</text>
      </view>
    </view>
    
    <!-- 空书架提示 -->
    <view v-else class="empty">
      <image src="/static/empty-bookshelf.png" class="empty-img" />
      <text class="empty-text">书架空空如也</text>
      <button class="btn-find" @click="goToHome">去发现好书</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      books: [
        // 从后端获取实际数据
        {
          id: 101,
          title: "万古神帝",
          cover: "/static/book1.jpg",
          progress: 65,
          lastChapter: 125
        }
      ]
    }
  },
  onLoad() {
    this.loadBookshelf()
  },
  methods: {
    async loadBookshelf() {
      try {
        // 调用后端API获取书架数据
        const res = await this.$http.get('/bookshelf', {
          headers: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })
        
        if (res.data.code === 0) {
          this.books = res.data.data
        }
      } catch (error) {
        uni.showToast({
          title: '加载书架失败',
          icon: 'none'
        })
      }
    },
    
    readBook(book) {
      uni.navigateTo({
        url: `/pages/novel/reader?novelId=${book.id}&chapterId=${book.lastChapter}`
      })
    },
    
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    
    addBook() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
    
    searchBooks() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    }
  }
}
</script>

<style scoped>
.bookshelf {
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 30rpx;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  margin-top: 30rpx;
}

.book-item {
  display: flex;
  flex-direction: column;
}

.cover {
  width: 200rpx;
  height: 280rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.book-title {
  font-size: 28rpx;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.progress {
  font-size: 24rpx;
  color: #666;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.empty-img {
  width: 300rpx;
  height: 300rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  margin: 30rpx 0;
}

.btn-find {
  background-color: #2a5caa;
  color: white;
  width: 60%;
  border-radius: 50rpx;
}
</style>