图书馆小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
2.1 KiB

2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
1 month ago
2 months ago
  1. <template>
  2. <view class="container">
  3. <!-- 图书列表 -->
  4. <view class="list-box">
  5. <book-list-item
  6. v-for="(item, index) in bookList"
  7. :key="index"
  8. :data="item"
  9. :ranking="index + 1"
  10. @click="goToDetail(item)"
  11. />
  12. </view>
  13. <!-- 加载提示 -->
  14. <view class="load-tip" v-if="loading">加载中...</view>
  15. <view class="load-tip" v-if="noMore">没有更多了</view>
  16. </view>
  17. </template>
  18. <script>
  19. import bookListItem from "@/components/book-list-item/book-list-item.vue";
  20. import { FetchInitScreenBookRecommend } from '@/api/book';
  21. export default {
  22. components: {
  23. bookListItem
  24. },
  25. data() {
  26. return {
  27. bookList: [], // 图书列表
  28. loading: false, // 加载状态
  29. noMore: false // 是否到底
  30. };
  31. },
  32. onLoad() {
  33. this.getBookRecommendList();
  34. },
  35. // 下拉刷新
  36. onPullDownRefresh() {
  37. this.refresh();
  38. },
  39. methods: {
  40. // 刷新
  41. refresh() {
  42. this.bookList = [];
  43. this.noMore = false;
  44. this.getBookRecommendList();
  45. },
  46. // 获取【真实】图书推荐列表(和首页同源)
  47. async getBookRecommendList() {
  48. this.loading = true;
  49. try {
  50. const res = await FetchInitScreenBookRecommend({ libcode: '1201' });
  51. this.bookList = res.data || [];
  52. this.noMore = true; // 推荐数据一次性返回,没有分页
  53. } catch (err) {
  54. console.error('获取推荐图书列表失败:', err);
  55. } finally {
  56. this.loading = false;
  57. uni.stopPullDownRefresh();
  58. }
  59. },
  60. goToDetail(item) {
  61. // 把整个图书对象 转成字符串 带过去
  62. uni.navigateTo({
  63. url: "/subpkg/pages/book-detail/book-detail?bookData=" + encodeURIComponent(JSON.stringify(item))
  64. })
  65. },
  66. }
  67. };
  68. </script>
  69. <style lang="scss" scoped>
  70. .container {
  71. padding: 10px;
  72. background-color: #f5f5f5;
  73. min-height: 100vh;
  74. }
  75. .list-box {
  76. display: flex;
  77. flex-direction: column;
  78. gap: 8px;
  79. }
  80. .load-tip {
  81. text-align: center;
  82. padding: 15px;
  83. font-size: 14px;
  84. color: #999;
  85. }
  86. </style>