添加相关图书功能

闫增涛

2024-04-03 0780b14607594c4300143091153bf635781ca55e

添加相关图书功能

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.js

@@ -6,10 +6,20 @@
  properties: {
    relatedBookData: {
      type: Array,
      value:[]
      value: [],
    },
    relatedBookLoading: {
      type: Boolean,
    },
    noRelatedBookData: {
      type: Boolean,
    },
  },

  observers: {
    relatedBookLoading: function (newValue) {
      console.log("l", newValue);
    },
  },
  /**
   * 组件的初始数据
   */
@@ -18,5 +28,18 @@
  /**
   * 组件的方法列表
   */
  methods: {},
  methods: {
    goBookDetails(e) {
      const item = e.currentTarget.dataset.item;
      var myEventDetail = {
        id: item.id,
        name: item.name,
      };
      var myEventOption = {
        bubbles: true,
        composed: true,
      };
      this.triggerEvent("goBookDetails", myEventDetail, myEventOption);
    },
  },
});

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.json

@@ -1,4 +1,7 @@
{
  "component": true,
  "usingComponents": {}
  "usingComponents": {
    "t-empty": "tdesign-miniprogram/empty/empty",
    "t-loading": "tdesign-miniprogram/loading/loading"
  }
}

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxml

@@ -1,8 +1,29 @@
<!--packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxml-->
<view class="reletedBooks">
  <!-- <view wx:for="{{relatedBookData}}" wx:key="id" class="book-box">
    <image src="{{item.icon}}" />
    <text>{{item.name}}</text>
  </view> -->
  相关图书
<view class="reletedBooks fl between">
  <view
    wx:for="{{relatedBookData}}"
    wx:key="id"
    class="book-box"
    wx:if="{{relatedBookData.length && !relatedBookLoading}}"
    bind:tap="goBookDetails"
    data-item="{{item}}"
  >
    <view class="book-image"
      ><image
        src="{{item.icon ? item.icon : '/static/images/default-book-img.png'}}"
        mode="aspectFit"
    /></view>
    <text class="book-name">{{item.name}}</text>
  </view>
  <view class="noData" wx:if="{{noRelatedBookData}}">
    <t-empty icon="folder-open" description="暂无数据" />
  </view>
  <view class="loading-box" wx:if="{{relatedBookLoading}}">
    <t-loading
      theme="circular"
      size="60rpx"
      class="loading"
      loading="{{relatedBookLoading}}"
    />
  </view>
</view>

 packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxss

@@ -1 +1,54 @@
/* packageBookService/pages/bookServices/detail/components/relatedBooks/index.wxss */
.fl {
  display: flex;
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.ctr {
  justify-content: center;
}

.reletedBooks {
  padding: 80rpx 40rpx;
}

.book-box {
  width: 28%;
  margin-bottom: 40rpx;
}

.book-image {
  width: 180rpx;
  height: 254rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
}

.book-image image {
  height: 100%;
}

.book-name {
  color: #333;
  margin-top: 20rpx;
  width: 100%;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loading-box {
  margin: 100rpx auto;
}

.noData {
  margin: 0 auto;
}

 packageBookService/pages/bookServices/detail/index.js

@@ -59,6 +59,8 @@
      residue: 0, // 组卷剩余次数
      mockList: [], // 用户组卷提交信息
    },
    relatedBookLoading: false,
    noRelatedBookData: false,
    relatedBookPath: "", // 相关图书path
    relatedBookData: [], // 相关图书列表
    flag: true,
@@ -143,27 +145,12 @@
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 检查登录状态
    // const token = wx.getStorageSync(app.config.tokenKey)
    // if (!token) {
    //   loginInfo(app, (data) => {
    //     // 如果不是第一次登录，会执行回调
    //     if (data) {
    //       // 登录成功，自动记录token和用户信息，并返回true
    //     } else {
    //       // 出现错误，返回false
    //     }
    //   })
    // } else {
    //   // 如果是第一次登录，会跳转至绑定用户信息页面，填写完用户信息后进行登录并储存token和用户信息，结束后跳转回当前页面（携带页面参数）
    // }

    const systInfo = wx.getSystemInfoSync();
    const menu = wx.getMenuButtonBoundingClientRect(); // 胶囊信息
    const navBarHeight =
      (menu.top - systInfo.statusBarHeight) * 2 + menu.height; // 导航栏高度
    this.setData({
      bookId: options.id,
      bookId: options.id + "",
      barHeight: systInfo.statusBarHeight,
      navBarHeight: navBarHeight,
    });
@@ -173,7 +160,6 @@
        name: options.name,
      },
    });

    this.getBookInfo(options.id);
    this.getResourceClass(); // 获取资源所属分类
    const token = wx.getStorageSync(app.config.tokenKey);
@@ -1601,7 +1587,10 @@
  },
  // 获取相关图书
  getAboutBook(path) {
    // loadings.value.aboutBook = true
    this.setData({
      relatedBookLoading: true,
      noRelatedBookData: false,
    });
    let query = {
      path,
      queryType: "*",
@@ -1623,24 +1612,30 @@
        (item) => item.id != this.data.bookDetail.id
      );
      let bookArr = [];
      if (Arr.length) {
        if (Arr.length > 3) {
          for (var i = 0; i < 3; i++) {
            var _num = Math.floor(Math.random() * Arr.length);
            var mm = Arr[_num];
            Arr.splice(_num, 1);
            bookArr.push(mm);
          }
        } else {
          bookArr = Arr;
        }
      // if (Arr.length > 3) {
      //   for (var i = 0; i < 3; i++) {
      //     var _num = Math.floor(Math.random() * Arr.length);
      //     var mm = Arr[_num];
      //     Arr.splice(_num, 1);
      //     bookArr.push(mm);
      //   }
      // } else {
      //   bookArr = Arr;
      // }
        this.setData({
          relatedBookData: bookArr,
        relatedBookData: Arr,
        relatedBookLoading: false,
      });
      if (!this.data.relatedBookData.length)
        this.setData({
          noRelatedBookData: true,
        });
        console.log("相关图书", this.data.relatedBookData);
      }
    });
    // loadings.value.aboutBook = false
  },
  goBookDetails(e) {
    console.log(e);
    this.onLoad({ id: e.detail.id, name: e.detail.name });
  },
  // 底部购买按钮
  buyBtn() {

 packageBookService/pages/bookServices/detail/index.wxml

@@ -287,7 +287,12 @@
          value="related_books"
          style="{{tabPanelstyle}}"
        >
          <related-books relatedBookData="{{relatedBookData}}"></related-books>
          <related-books
            relatedBookData="{{relatedBookData}}"
            relatedBookLoading="{{relatedBookLoading}}"
            noRelatedBookData="{{noRelatedBookData}}"
            bind:goBookDetails="goBookDetails"
          ></related-books>
        </t-tab-panel>
      </t-tabs>
    </view>