数字教材详情

yiming

2024-06-06 dcd5065a6ed1b75b0e3c1491d267ab73b4997f11

数字教材详情

 pages/digitalTextbooks/digitalTextbooksDetails/index.js

@@ -1,11 +1,23 @@
// pages/digitalTextbooks/digitalTextbooksDetails/index.js
import Toast from "tdesign-miniprogram/toast";
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

    digitalTextId: '',
    digitalsData: {},
    isFavourite: true,
    richStyle: 'font-size: 28rpx;color: #333; line-height: 48rpx;text-align: justify;margin: 20rpx; ',
    briefIconClick: {
      name: "/static/images/bookService/detail/tushujianjie-click.png",
    },
    relatedBookData: [],
    publicationDate: '',
    isBuy: false,
    loading: true,
  },

  /**
@@ -13,8 +25,60 @@
   */
  onLoad(options) {
    console.log(options.id);
  },
    this.setData({
      digitalTextId: options.id
    })
    this.digitalTextbooksDetailsGet(this.data.digitalTextId)

  },
  // 格式化日期
  // 格式化日期
  formatDate(dateString) {
    if (!dateString) {
      return "";
    }
    const match = dateString.match(
      /^(\d{4})\/(\d{1,2})\/(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
    );
    if (!match) {
      throw new Error("Invalid date format");
    }

    const [, year, month, day, hours, minutes, seconds] = match;
    const date = new Date(
      parseInt(year, 10),
      parseInt(month, 10) - 1,
      parseInt(day, 10),
      parseInt(hours, 10),
      parseInt(minutes, 10),
      parseInt(seconds, 10)
    );

    if (isNaN(date.getTime())) {
      throw new Error("Invalid date");
    }

    // 由于小程序环境可能不支持 Intl.DateTimeFormat，我们使用简化的格式化方法
    const formatted = `${year}年${this.formatMonth(month)}`;
    return formatted;
  }, // 简化的月份格式化函数，返回月份的中文表达
  formatMonth(month) {
    const months = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ];
    return months[parseInt(month, 10) - 1];
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
@@ -40,7 +104,9 @@
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

    this.setData({
      digitalsData: {}
    })
  },

  /**
@@ -62,5 +128,296 @@
   */
  onShareAppMessage() {

  },


  digitalTextbooksDetailsGet(digitalId) {

    let query = {
      path: '*',
      queryType: '*',
      productId: digitalId,
      storeInfo: 'jsek_digitalTextbooks',
      coverSize: {
        height: 300
      },
      fields: {
        seriesName: [],
        author: [],
        isbn: [],
        publicationDate: [],
        bookClassification: [],
        paperPrice: [],
        JDLink: [],
        tmallLink: [],
        dangdangLink: [],
        weidianLink: [],
        content: [],
        authorIntroduction: [],
        isApplyBook: [],
        isSell: [],
        pdf: [],
        protectedEpub: [],
        probationPage: [], //pdf试读页数
        freeEpubPage: [],
        catalogue: []
        //epub试读百分比
      }
    }
    app.MG.store.getProductDetail(query).then(res => {

      // console.log(res);
      if (res.datas.purchasedSaleMethodIdList.includes(res.datas.defaultSaleMethodId)) {

        this.setData({
          isBuy: true
        })

      } else {
        this.setData({
          isBuy: false
        })
      }
      // res.datas.publicationDate = 
      if (res.datas.icon == '') {
        res.datas.icon = '/static/images/default-book-img.png'
      }
      this.setData({
        publicationDate: this.formatDate(res.datas.publicationDate)
      })
      res.datas.price = res.datas.price.toFixed(2)
      res.datas.isFavourite = false
      this.setData({
        digitalsData: res.datas
      })

      wx.setNavigationBarTitle({
        title: res.datas.name,
      })

      this.getAboutBook(res.datas.productLinkInfo[res.datas.productLinkInfo.length - 1].LinkPath)

      console.log(this.data.isBuy);
      this.setData({
        loading: false,

      });
    })
  },
  setCoolect() {
    console.log(this.data.digitalsData.id);
    console.log(this.data.digitalsData.isFavourite);
    this.setData({
      isFavourite: !this.data.isFavourite
    })



    if (this.data.digitalsData.isFavourite) {
      app.MG.store
        .delProductLink({
          productIds: [this.data.digitalsData.id],
          linkType: 'FavoriteBookCity'
        })
        .then(() => {
          this.data.digitalsData.isFavourite = false
        })
    } else {
      let params = {
        productIds: [this.data.digitalsData.id],
        linkType: 'FavoriteBookCity'
      }
      app.MG.store.addProductLink(params).then((res) => {
        this.data.digitalsData.isFavourite = true
      })
    }
  },
  onTabsChange(event) {
    console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
  },

  onTabsClick(event) {
    console.log(`Click tab, tab-panel value is ${event.detail.value}.`);
  },

  // 获取相关教材
  getAboutBook(path) {
    let query = {
      path,
      queryType: '*',
      coverSize: {
        height: 243
      },
      paging: {
        start: 0,
        size: 99
      },
      fields: {
        author: [],
        publicationDate: []
      }
    }
    app.MG.store.getProductList(query).then(res => {
      const Arr = res.datas.filter(
        (item) => item.id != this.data.digitalsData.id
      );
      let bookArr = []
      if (Arr.length) {
        if (Arr.length > 9) {
          for (var i = 0; i < 9; i++) {
            var _num = Math.floor(Math.random() * Arr.length)
            var mm = Arr[_num]
            Arr.splice(_num, 1)
            bookArr.push(mm)
          }
        } else {
          bookArr = Arr
        }

        bookArr.forEach(item => {
          if (item.icon == '') {
            item.icon = '/static/images/default-book-img.png'
          }
        })
        this.setData({
          relatedBookData: bookArr
        })
        console.log(this.data.relatedBookData);
      } else {
        this.setData({
          relatedBookData: []
        })
      }
    })
  },
  onCorrelationBook(e) {



    const item = e.currentTarget.dataset.item

    console.log(item);
    this.digitalTextbooksDetailsGet(item.id)
  },
  // 图书添加购物车
  async addBookShopcCar() {
    if (!this.data.expire) {
      const shoppingCartGetId = [];
      let query = {
        start: 0,
        size: 9999,
        filterList: [],
        searchList: [],
      };
      const res = await app.MG.store.getShoppingCartProductList(query);
      res.datas.forEach((item) => {
        shoppingCartGetId.push(item.saleMethod.id);
      });
      const determine = shoppingCartGetId.some(
        (item) => item == this.data.digitalsData.defaultSaleMethodId
      );
      if (!determine) {
        let query = {
          requests: [{
            saleMethodId: this.data.digitalsData.defaultSaleMethodId,
            storeEventId: null,
            agentCode: "电子书",
          }, ],
        };
        const addRes = app.MG.store.addShoppingCart(query);
        this.showSuccessToast();
      } else {
        Toast({
          context: this,
          selector: "#t-toast",
          message: "该书已在购物车，请勿重复添加",
          theme: "warning",
          direction: "column",
        });
      }
    } else {
      wx.showToast({
        title: "商品不在有效期",
        icon: "none",
        duration: 1000,
      });
    }
  },
  showSuccessToast() {
    Toast({
      context: this,
      selector: "#t-toast",
      message: "添加成功",
      theme: "success",
      direction: "column",
    });
  },


  //购买按钮

  async buyBtn() {
    if (!this.data.expire) {
      let bookOrdersId = "";
      let query = {
        remarks: "电子书",
        requests: [{
          saleMethodId: this.data.digitalsData.defaultSaleMethodId,
          count: 1,
        }, ],
      };
      // 发起订单初始化请求并等待结果
      const res = await app.MG.store.initOrder(query);
      // 获取订单号并赋值给 orderNumber.value
      console.log(res, 'res456');
      bookOrdersId = res.orderNumber;
      // 检查订单号是否存在
      if (bookOrdersId) {
        if (this.data.digitalsData.price == "0.00") {
          app.MG.store
            .confirmOrder({
              orderNum: bookOrdersId,
            })
            .then((res) => {
              if (res) {
                wx.showToast({
                  title: "领取成功",
                  icon: "none",
                  duration: 1000,
                });
                this.getBookInfo(this.data.bookDetail.id);
              }
            });
        } else {
          const url = "/pages/cart/paymentPage/index?orderNumber=" + bookOrdersId + '&onNorderSaleMethod=' + res.saleMethodLinks[0].orderSaleMethod.id;
          wx.navigateTo({
            url,
          });
        }
      } else {
        console.log(222);
      }
    } else {
      wx.showToast({
        title: "商品不在有效期",
        icon: "none",
        duration: 1000,
      });
    }















  }
})

 pages/digitalTextbooks/digitalTextbooksDetails/index.json

@@ -1,3 +1,9 @@
{
  "usingComponents": {}
  "component": true,
  "usingComponents": {
    "t-tabs": "tdesign-miniprogram/tabs/tabs",
    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
    "t-image": "tdesign-miniprogram/image/image",
    "t-toast": "tdesign-miniprogram/toast/toast"
  }
}

 pages/digitalTextbooks/digitalTextbooksDetails/index.skeleton.wxml

New file
@@ -0,0 +1,187 @@
<!--
此文件为开发者工具生成，生成时间: 2024/6/6上午11:26:43
使用方法：
在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\digitalTextbooksDetails\index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\digitalTextbooksDetails\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
  <view class="sk-container">
    <view>
      <view class="page-bookService">
        <view class="digital">
          <view class="book-box sk-image">
            <view class="textbookDetails">
              <view class="book-img">
                <view class="imageBox">
                  <image mode="true" class="sk-image"></image>
                </view>
                <view class="setCoolect">
                  <image style="width: 25px;" class="sk-image"></image>
                </view>
              </view>
              <view class="bookContent">
                <view class="headerText sk-transparent sk-text-14-2857-678 sk-text">
                  体育与健康（第3版）
                </view>
                <view class="content">
                  <view class="styleCssBox">
                    <view style="width: 75px;" class="sk-transparent sk-text-14-2857-984 sk-text"> 作者： </view>
                    <view></view>
                  </view>
                  <view class="styleCssBox">
                    <view style="width: 75px;" class="sk-transparent sk-text-14-2857-115 sk-text">ISBN：</view>
                    <view></view>
                  </view>
                  <view class="styleCssBox">
                    <view style="width: 75px;" class="sk-transparent sk-text-14-2857-39 sk-text"> 出版时间： </view>
                    <view></view>
                  </view>
                  <view class="styleCssBox">
                    <view style="width: 75px;" class="sk-transparent sk-text-14-2857-89 sk-text"> 定价： </view>
                    <view class="sk-transparent sk-text-14-2857-508 sk-text">￥38.80</view>
                  </view>
                </view>
                <image class="right-background sk-image"></image>
              </view>
            </view>
            <view class="certificate">
              <view class="publish sk-transparent sk-text-14-2857-640 sk-text">出版证书</view>
              <view class="curriculum sk-transparent sk-text-14-2857-770 sk-text">课程证书</view>
            </view>
          </view>
        </view>
        <view style="margin-top: 10px;">
          <view class="t-tabs tabs--t-tabs t-tabs--top tabs--t-tabs--top  custom-tabs" style="true">
            <view class="t-sticky sticky--t-sticky  tabs--t-tabs__sticky tabs--t-tabs__sticky--top" style="z-index:1;;">
              <view class="t-sticky__content sticky--t-sticky__content " style="z-index:1;;">
                <view class="t-tabs__wrapper tabs--t-tabs__wrapper t-tabs__wrapper--line tabs--t-tabs__wrapper--line">
                  <scroll-view enable-flex="true" enable-passive="true" enhanced="true" scroll-anchoring="true" scroll-with-animation="true" class="t-tabs__scroll tabs--t-tabs__scroll t-tabs__scroll--top tabs--t-tabs__scroll--top t-tabs__scroll--split tabs--t-tabs__scroll--split sk-pseudo sk-pseudo-circle" scroll-left="0" scroll-x="true">
                    <view class="t-tabs__nav tabs--t-tabs__nav t-tabs__nav--top tabs--t-tabs__nav--top" style="scroll-snap-align: none;">
                      <view class="t-tabs__item tabs--t-tabs__item t-tabs__item--line tabs--t-tabs__item--line t-tabs__item--evenly tabs--t-tabs__item--evenly t-tabs__item--top tabs--t-tabs__item--top t-tabs__item--active tabs--t-tabs__item--active sk-image" data-index="0">
                        <view class="t-tabs__item-inner tabs--t-tabs__item-inner t-tabs__item-inner--line tabs--t-tabs__item-inner--line t-tabs__item-inner--active tabs--t-tabs__item-inner--active sk-transparent">
                          <view class="t-icon icon--t-icon tabs--t-tabs__icon tabs--undefined" style="width: ; height: ;">
                            <view class="t-icon--image icon--t-icon--image">
                              <image class="t-icon__image icon--t-icon__image sk-image" mode="aspectFit"></image>
                            </view>
                          </view>基本信息
                        </view>
                      </view>
                      <view class="t-tabs__item tabs--t-tabs__item t-tabs__item--line tabs--t-tabs__item--line t-tabs__item--evenly tabs--t-tabs__item--evenly t-tabs__item--top tabs--t-tabs__item--top " data-index="1">
                        <view class="t-tabs__item-inner tabs--t-tabs__item-inner t-tabs__item-inner--line tabs--t-tabs__item-inner--line sk-transparent">
                          <view class="t-icon icon--t-icon tabs--t-tabs__icon tabs--undefined" style="width: ; height: ;">
                            <view class="t-icon--image icon--t-icon--image">
                              <image class="t-icon__image icon--t-icon__image sk-image" mode="aspectFit"></image>
                            </view>
                          </view>作者信息
                        </view>
                      </view>
                      <view class="t-tabs__item tabs--t-tabs__item t-tabs__item--line tabs--t-tabs__item--line t-tabs__item--evenly tabs--t-tabs__item--evenly t-tabs__item--top tabs--t-tabs__item--top " data-index="2">
                        <view class="t-tabs__item-inner tabs--t-tabs__item-inner t-tabs__item-inner--line tabs--t-tabs__item-inner--line sk-transparent">
                          <view class="t-icon icon--t-icon tabs--t-tabs__icon tabs--undefined" style="width: ; height: ;">
                            <view class="t-icon--image icon--t-icon--image">
                              <image class="t-icon__image icon--t-icon__image sk-image" mode="aspectFit"></image>
                            </view>
                          </view>目录
                        </view>
                      </view>
                      <view class="t-tabs__item tabs--t-tabs__item t-tabs__item--line tabs--t-tabs__item--line t-tabs__item--evenly tabs--t-tabs__item--evenly t-tabs__item--top tabs--t-tabs__item--top " data-index="3">
                        <view class="t-tabs__item-inner tabs--t-tabs__item-inner t-tabs__item-inner--line tabs--t-tabs__item-inner--line sk-transparent">
                          <view class="t-icon icon--t-icon tabs--t-tabs__icon tabs--undefined" style="width: ; height: ;">
                            <view class="t-icon--image icon--t-icon--image">
                              <image class="t-icon__image icon--t-icon__image sk-image" mode="aspectFit"></image>
                            </view>
                          </view>相关教材
                        </view>
                      </view>
                      <view class="t-tabs__track tabs--t-tabs__track t-tabs__track--top tabs--t-tabs__track--top " style="-webkit-transform: translateX(38.875px); transform: translateX(38.875px); "></view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
            <view class="t-tabs__content tabs--t-tabs__content">
              <view class="t-tabs__content-inner tabs--t-tabs__content-inner custom-panel" style="true">
                <view class="  t-tab-panel panel--t-tab-panel t-is-active panel--t-is-active" style="true" id="947897dc--t_tabs_3_panel_0">
                  <view class="rubricBox">
                    <view class="rubricimgBox">
                      <image mode="true" class="sk-image"></image>
                    </view>
                    <view class="basic sk-transparent sk-text-14-2857-357 sk-text"> 基本信息</view>
                  </view>
                  <view style="margin: 15px;">
                    <rich-text nodes="" style="font-size: 14px;color: #333; line-height: 24px;text-align: justify;margin: 10px;"></rich-text>
                  </view>
                </view>
                <view class="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="4fbdafa5--t_tabs_3_panel_1">
                  <view class="rubricBox">
                    <view class="rubricimgBox">
                      <image mode="true" class="sk-image"></image>
                    </view>
                    <view class="basic sk-transparent sk-text-14-2857-586 sk-text"> 作者信息</view>
                  </view>
                  <view style="margin: 15px;">
                    <rich-text nodes="" style="font-size: 14px;color: #333; line-height: 24px;text-align: justify;margin: 10px;"></rich-text>
                  </view>
                </view>
                <view class="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="a8fe62e6--t_tabs_3_panel_2">
                  <view class="rubricBox">
                    <view class="rubricimgBox">
                      <image mode="true" class="sk-image"></image>
                    </view>
                    <view class="basic sk-transparent sk-text-14-2857-540 sk-text"> 目录</view>
                  </view>
                  <view style="margin: 15px;">
                    <rich-text nodes="" style="font-size: 14px;color: #333; line-height: 24px;text-align: justify;margin: 10px;"></rich-text>
                  </view>
                </view>
                <view class="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="0d4979d4--t_tabs_3_panel_3">
                  <view class="correlation">
                    <view data-item="[object Object]">
                      <view class="correlationImage">
                        <image mode="true" class="sk-image"></image>
                      </view>
                      <view class="correlationName sk-transparent sk-text-14-2857-861 sk-text">婴幼儿生活照护</view>
                    </view>
                    <view data-item="[object Object]">
                      <view class="correlationImage">
                        <image mode="true" class="sk-image"></image>
                      </view>
                      <view class="correlationName sk-transparent sk-text-14-2857-135 sk-text">新标准通用职场英语基础模块一</view>
                    </view>
                    <view data-item="[object Object]">
                      <view class="correlationImage">
                        <image mode="true" class="sk-image"></image>
                      </view>
                      <view class="correlationName sk-transparent sk-text-14-2857-639 sk-text">学前儿童卫生与保健</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="box-bottom">
          <view class="trialReading">
            <view>
              <image class="t-image image--t-image t-image--shape-square image--t-image--shape-square sk-image" id="a67cec07--image" mode="scaleToFill" style="true"></image>
            </view>
            <view class="btn-text sk-transparent sk-text-14-2857-233 sk-text">试读</view>
          </view>
          <view class="shopCarColor sk-transparent sk-text-14-2857-769 sk-text">加入购物车</view>
          <view class="buyColor sk-transparent sk-text-14-2857-526 sk-text">立即购买</view>
        </view>
      </view>
    </view>
  </view>
</template>

 pages/digitalTextbooks/digitalTextbooksDetails/index.skeleton.wxss

New file
@@ -0,0 +1,129 @@
/*
此文件为开发者工具生成，生成时间: 2024/6/6上午11:26:43

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\digitalTextbooksDetails\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
  }
.sk-text-14-2857-678 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 50.4000rpx;
    position: relative !important;
  }
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
.sk-text-14-2857-984 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-115 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-39 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-89 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-508 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-640 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-770 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-357 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-586 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-540 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-861 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-135 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-639 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-233 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-769 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-526 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-image {
    background: #EFEFEF !important;
  }
.sk-pseudo::before, .sk-pseudo::after {
      background: #EFEFEF !important;
      background-image: none !important;
      color: transparent !important;
      border-color: transparent !important;
    }
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
      border-radius: 0 !important;
    }
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
      border-radius: 50% !important;
    }
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }

 pages/digitalTextbooks/digitalTextbooksDetails/index.wxml

@@ -1,5 +1,146 @@
<!--pages/digitalTextbooks/digitalTextbooksDetails/index.wxml-->
<view>
  数字教材详情
<import src="index.skeleton.wxml" />
<template is="skeleton" wx:if="{{loading}}" />

</view>

<view wx:if="{{!loading}}">
  <view class="page-bookService">

    <view class="digital">
      <view class="book-box">


        <view class="textbookDetails">
          <view class="book-img">
            <view class="imageBox">
              <image src="{{digitalsData.icon}}" mode="" />
            </view>

            <view class="setCoolect">
              <image src="/static/images/bookService/detail/collect.png" style="width: 50rpx;" bind:tap="setCoolect" wx:if="{{isFavourite}}" />
              <image src="/static/images/bookService/detail/collecting.png" style="width: 50rpx;" bind:tap="setCoolect" wx:else="" />
            </view>




          </view>
          <view class="bookContent">
            <view class="headerText">
              {{digitalsData.name}}
            </view>
            <view class="content">
              <view class="styleCssBox">
                <view style="width: 150rpx;"> 作者： </view>
                <view>{{ digitalsData.author}}</view>
              </view>
              <view class="styleCssBox">
                <view style="width: 150rpx;">ISBN：</view>
                <view>{{ digitalsData.isbn}}</view>
              </view>
              <view class="styleCssBox">
                <view style="width: 150rpx;"> 出版时间： </view>
                <view>{{ publicationDate}}</view>
              </view>
              <view class="styleCssBox">
                <view style="width: 150rpx;"> 定价： </view>
                <view wx:if="{{digitalsData.price !== 0}}">￥{{ digitalsData.price}}</view>
                <view wx:else>免费</view>
              </view>
            </view>
            <image src="/static/images/bookService/detail/square.png" class="right-background" />
          </view>



        </view>
        <view class="certificate">
          <view class="publish">出版证书</view>
          <view class="curriculum">课程证书</view>
        </view>


      </view>
    </view>

    <view style="margin-top: 20rpx;">
      <t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs" t-class-content="custom-panel">
        <t-tab-panel icon="{{ briefIconClick}}" label="基本信息" value="0" style="{{tabPanelstyle}}">
          <view class="rubricBox">
            <view class="rubricimgBox">
              <image src="/static/images/bookService/detail/label.png" mode="" />
            </view>
            <view class="basic"> 基本信息</view>
          </view>
          <view style="margin: 30rpx;">
            <rich-text nodes="{{digitalsData.content}}" style="{{richStyle}}"></rich-text>
          </view>

        </t-tab-panel>
        <t-tab-panel icon="{{ briefIconClick}}" label="作者信息" value="1" style="{{tabPanelstyle}}">
          <view class="rubricBox">
            <view class="rubricimgBox">
              <image src="/static/images/bookService/detail/author.png" mode="" />
            </view>
            <view class="basic"> 作者信息</view>
          </view>
          <view style="margin: 30rpx;">
            <rich-text nodes="{{digitalsData.authorIntroduction}}" style="{{richStyle}}"></rich-text>
          </view>


        </t-tab-panel>
        <t-tab-panel icon="{{ briefIconClick}}" label="目录" value="2" style="{{tabPanelstyle}}">

          <view class="rubricBox">
            <view class="rubricimgBox">
              <image src="/static/images/bookService/detail/author.png" mode="" />
            </view>
            <view class="basic"> 目录</view>
          </view>

          <view style="margin: 30rpx;">


            <rich-text nodes="{{digitalsData.catalogue}}" style="{{richStyle}}"></rich-text>
          </view>



        </t-tab-panel>
        <t-tab-panel icon="{{ briefIconClick}}" label="相关教材" value="3" style="{{tabPanelstyle}}">


          <view class="correlation">
            <view wx:for="{{relatedBookData}}" wx:key="index" wx:for-item="item" wx:for-index="index" data-item="{{item}}" bind:tap="onCorrelationBook">

              <view class="correlationImage">
                <image src="{{item.icon}}" mode="" />
                <img wx:if="{{item.icon == ''}}" src="/static/images/default-book-img.png" alt="" />
              </view>

              <view class="correlationName">{{item.name}}</view>
            </view>
          </view>



        </t-tab-panel>
      </t-tabs>

    </view>
    <view class="box-bottom">
      <view class="trialReading" bind:tap="goRead">
        <view>
          <t-image src="/static/images/bookService/detail/shidu.png"></t-image>
        </view>
        <view class="btn-text">试读</view>
      </view>
      <view class="shopCarColor" bind:tap="addBookShopcCar" wx:if="{{!isBuy}}">加入购物车</view>
      <view class="buyColor" bind:tap="buyBtn" wx:if="{{!isBuy}}">立即购买</view>
      <!-- <view class="buyColor" bind:tap="buyBtn" wx:if="{{digitalsData.price == 0}} ">免费领取</view> -->
      <view class="buyColor" bind:tap="goRead" wx:if="{{isBuy}}">立即阅读</view>
    </view>
  </view>
</view>
<t-toast id="t-toast" />

 pages/digitalTextbooks/digitalTextbooksDetails/index.wxss

@@ -1 +1,261 @@
/* pages/digitalTextbooks/digitalTextbooksDetails/index.wxss */
/* pages/digitalTextbooks/digitalTextbooksDetails/index.wxss */

@import "./index.skeleton.wxss";

image {
  width: 100%;
  height: 100%;
}




.textbookDetails {
  display: flex;
  flex-direction: row;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 0 0 20rpx 20rpx;
}

.book-img {
  width: 240rpx;
  min-height: 340rpx;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  padding: 15rpx;
}

.setCoolect {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 50rpx;
  margin: 10rpx 0;
}

.imageBox {
  width: 210rpx;
  height: 310rpx;
  margin: 0 auto;
}

.bookContent {
  margin-left: 30rpx;
}

.right-background {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  top: 150rpx;
  right: -50rpx;
  z-index: 0;
}

.content {
  margin-top: 30rpx;
}

.styleCssBox {
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
  font-size: 28rpx;
}

.headerText {
  font-weight: bold;
  font-size: 36rpx;
  color: #000000;
}

.certificate {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 120rpx;
  border-radius: 0 0 20rpx 20rpx;
}

.book-box {
  background: linear-gradient(to right, #FFB400, #FF6C00);
  border-radius: 0 0 20rpx 20rpx;
}





.digital {
  background-color: #F2F3F8;
  padding-bottom: 20rpx;
}

.publish {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300rpx;
  height: 80rpx;
  background-color: #fff;
}

.curriculum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300rpx;
  height: 80rpx;
  background-color: #fff;
}

.t-tabs__item-inner {
  flex-direction: column;
  color: #ff6c00;
}

.t-tabs__item--active {
  color: #FF6C00 !important;
}

.t-tabs__track {
  background-color: #FF6C00 !important;
  bottom: -20rpx !important;
}

.t-tabs__scroll--split {
  height: 120rpx !important;
}

.t-tabs__item-inner .t-icon {
  margin-bottom: 10rpx;
}

.t-tabs__item-inner .t-icon {
  margin-bottom: 20rpx;
}

.t-tabs__item-inner .t-icon__image {
  width: 36rpx !important;
  height: 44rpx !important;
}

.t-tabs__nav .t-tabs__item:nth-child(3) .t-tabs__item-inner .t-icon__image {
  width: 44rpx !important;
  height: 40rpx !important;
}

.t-tabs__nav .t-tabs__item {
  width: 160rpx !important;
  padding: 0 !important;
}

.t-tabs__scroll {
  overflow-x: auto;
}

.t-tabs__item--evenly {
  flex: 1 0 auto !important;
}

.t-tabs .t-tabs__item--active {
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: 50% 40%;
  background-image: url(https://jsek.bnuic.com/home/image/click-icon.png);
}

.rubricBox {
  display: flex;
  flex-direction: row;
  margin: 50rpx;
  margin-bottom: 0;
}

.rubricimgBox {
  width: 40rpx;
  height: 45rpx;
}

.basic {
  margin-left: 18rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.correlationImage {
  width: 180rpx;
  height: 255rpx;
}

.correlation {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 30rpx;
}

.correlationName {
  width: 150rpx;
  margin-top: 20rpx;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
  font-weight: bold;
  font-size: 28rpx;
}

.page-bookService {
  width: 100vw;
  height: 100%;
  /* position: relative; */
}

.box-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110rpx;

  margin-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: row;
}

.trialReading {
  width: 50%;
  height: 110rpx;
  border-right: 1px solid #DDD;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shopCarColor {
  width: 350rpx;
  height: 110rpx;
  border-right: 1px solid #DDD;
  color: #fff;
  background-color: #f0ad36;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buyColor {
  width: 50%;
  height: 110rpx;
  border-right: 1px solid #DDD;
  color: #fff;
  background-color: #f04d3b;
  display: flex;
  justify-content: center;
  align-items: center;
}

 pages/digitalTextbooks/index.js

@@ -3,6 +3,11 @@
import {
  getPublicImage
} from "../../assets/js/middleGround/tool";
import {
  setSessionGuid,
  setNewView,
  storage
} from "../../assets/js/userAction";
Page({

  /**
@@ -17,6 +22,7 @@
    selectedIndex: 0,
    digitalTextbooksData: [],
    path: "jsek_dTHigherEducation",
    loading: true

  },

@@ -208,11 +214,13 @@
          viewCount: [],
          ...searchObj
        }
      })
      .then((res) => {
      }).then((res) => {
        this.setData({
          digitalTextbooksData: res.datas
          digitalTextbooksData: res.datas,
          loading: false
        })


        console.log(this.data.digitalTextbooksData);
      })
  },
@@ -224,6 +232,8 @@
    const item = e.currentTarget.dataset.item
    console.log(item);
    // 在某个事件处理函数中，比如按钮的点击事件
    setNewView('productId', item.id)
    this.bookExhibitionGet()
    wx.navigateTo({
      url: '/pages/digitalTextbooks/digitalTextbooksDetails/index?id=' + item.id
    });

 pages/digitalTextbooks/index.skeleton.wxml

New file
@@ -0,0 +1,146 @@
<!--
此文件为开发者工具生成，生成时间: 2024/6/6上午11:33:06
使用方法：
在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
  <view class="sk-container">
    <view class="fixed-header">
      <view style="width: 100%; height: 44px;"></view>
      <view class="nacigationBar" style="width: 70%; height: 40px;">
        <view>
          <view class="t-icon icon--t-icon  " style="font-size: 30px;">
            <label class="t-icon-chevron-left icon--t-icon-chevron-left t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
          </view>
        </view>
        <view class="navBar-search t-search search--t-search " style="width: 232px;">
          <view class="t-search__input-box search--t-search__input-box t-not-focused search--t-not-focused t-search__input-box-- search--t-search__input-box-- t-search__input-box--round search--t-search__input-box--round ">
            <view class="t-icon icon--t-icon search--t-icon  " style="font-size: 24px;">
              <label class="t-icon-search icon--t-icon-search t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
            </view>
            <view class="t-input__keyword search--t-input__keyword sk-image" cursor="0" maxlength="-1" name="input" placeholder="请输入关键词/书名/ISBN/作者" placeholder-class=" t-search__placeholder t-search__placeholder--normal" placeholder-style="true" selection-end="-1"
              selection-start="-1" type="text" value="true"></view>
          </view>
        </view>
      </view>
      <view class="tabBox">
        <view data-index="0">
          <view class="sk-transparent sk-text-14-2857-9 sk-text">
            高等教育
          </view>
          <view style="margin-top: 10px;"></view>
        </view>
        <view data-index="1" class="nameBox">
          <view class="sk-transparent sk-text-14-2857-611 sk-text">
            职业教育
          </view>
          <view style="margin-top: 10px;" class="bottomLineBox"></view>
        </view>
        <view data-index="2">
          <view class="sk-transparent sk-text-14-2857-795 sk-text">
            教师教育
          </view>
          <view style="margin-top: 10px;"></view>
        </view>
        <view data-index="3">
          <view class="sk-transparent sk-text-14-2857-936 sk-text">
            基础教育
          </view>
          <view style="margin-top: 10px;"></view>
        </view>
      </view>
    </view>
    <view class="contentBox">
      <view class="titleBox">
        <view class="frameBox"></view>
        <view class="titleTextBox">
          <view class="sk-transparent sk-text-14-2857-285 sk-text">数字教材列表</view>
        </view>
      </view>
      <view class="bookContentBox">
        <view class="external" data-item="[object Object]">
          <view class="amountClick">
            <view class="t-icon icon--t-icon  " style="font-size: 15px;">
              <label class="t-icon-browse icon--t-icon-browse t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
            </view>
            <view style="margin-left: 2px;" class="sk-transparent sk-text-14-2857-217 sk-text">41</view>
          </view>
          <view class="imageBox">
            <image mode="true" class="sk-image"></image>
          </view>
          <view class="bookName sk-transparent sk-text-14-2857-567 sk-text">体育与健康（第3版）</view>
          <view class="information">
            <view class="sk-transparent sk-opacity">-</view>
            <view class="price sk-transparent sk-text-14-2857-919 sk-text">￥38.8</view>
          </view>
        </view>
        <view class="external" data-item="[object Object]">
          <view class="amountClick">
            <view class="t-icon icon--t-icon  " style="font-size: 15px;">
              <label class="t-icon-browse icon--t-icon-browse t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
            </view>
            <view style="margin-left: 2px;" class="sk-transparent sk-text-14-2857-267 sk-text">34</view>
          </view>
          <view class="imageBox">
            <image mode="true" class="sk-image"></image>
          </view>
          <view class="bookName sk-transparent sk-text-14-2857-920 sk-text">婴幼儿生活照护</view>
          <view class="information">
            <view class="book-author sk-transparent sk-text-14-2857-788 sk-text">
              赵青
            </view>
            <view class="price sk-transparent sk-text-14-2857-635 sk-text"> 免费</view>
          </view>
        </view>
        <view class="external" data-item="[object Object]">
          <view class="amountClick">
            <view class="t-icon icon--t-icon  " style="font-size: 15px;">
              <label class="t-icon-browse icon--t-icon-browse t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
            </view>
            <view style="margin-left: 2px;" class="sk-transparent sk-text-14-2857-575 sk-text">186</view>
          </view>
          <view class="imageBox">
            <image mode="true" class="sk-image"></image>
          </view>
          <view class="bookName sk-transparent sk-text-14-2857-586 sk-text">新标准通用职场英语基础模块一</view>
          <view class="information">
            <view class="book-author sk-transparent sk-text-14-2857-82 sk-text">
              王朝晖总主编
            </view>
            <view class="price sk-transparent sk-text-14-2857-5 sk-text">￥0.01</view>
          </view>
        </view>
        <view class="external" data-item="[object Object]">
          <view class="amountClick">
            <view class="t-icon icon--t-icon  " style="font-size: 15px;">
              <label class="t-icon-browse icon--t-icon-browse t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
            </view>
            <view style="margin-left: 2px;" class="sk-transparent sk-text-14-2857-620 sk-text">129</view>
          </view>
          <view class="imageBox">
            <image mode="true" class="sk-image"></image>
          </view>
          <view class="bookName sk-transparent sk-text-14-2857-616 sk-text">学前儿童卫生与保健</view>
          <view class="information">
            <view class="book-author sk-transparent sk-text-14-2857-82 sk-text">
              张兰香 潘秀萍
            </view>
            <view class="price sk-transparent sk-text-14-2857-116 sk-text"> 免费</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

 pages/digitalTextbooks/index.skeleton.wxss

New file
@@ -0,0 +1,142 @@
/*
此文件为开发者工具生成，生成时间: 2024/6/6上午11:33:06

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
  }
.sk-text-14-2857-9 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
.sk-text-14-2857-611 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-795 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-936 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-285 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-217 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-567 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-opacity {
    opacity: 0 !important;
  }
.sk-text-14-2857-919 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-267 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-920 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-788 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-635 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-575 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-586 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-82 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-5 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-620 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-616 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    position: relative !important;
  }
.sk-text-14-2857-116 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-image {
    background: #EFEFEF !important;
  }
.sk-pseudo::before, .sk-pseudo::after {
      background: #EFEFEF !important;
      background-image: none !important;
      color: transparent !important;
      border-color: transparent !important;
    }
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
      border-radius: 0 !important;
    }
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
      border-radius: 50% !important;
    }
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }

 pages/digitalTextbooks/index.wxml

@@ -1,63 +1,71 @@
<!--pages/digitalTextbooks/digitalTextbooks.wxml-->

<view class="fixed-header">
  <view style="width: 100%; height: {{barHeight}}px;"></view>
  <view class="nacigationBar" style="width: 70%; height: {{navBarHeight}}px;">
    <view>
      <t-icon name="chevron-left" size="30" data-name="{{item}}" bind:click="goBack" />
    </view>
    <t-search model:value="{{searchValue}}" shape="round" placeholder="请输入关键词/书名/ISBN/作者" class="navBar-search" style="width: 464rpx" bind:submit="searchBook" />
  </view>
<import src="index.skeleton.wxml" />
<template is="skeleton" wx:if="{{loading}}" />


<view wx:if="{{!loading}}">

  <view class="tabBox">
    <view wx:for="{{tabList}}" wx:key="index" wx:for-item="item" wx:for-index="index" class="{{selectedIndex == index? 'nameBox' :''}}" data-index="{{index}}" bind:tap="selectTab">

  <view class="fixed-header">
    <view style="width: 100%; height: {{barHeight}}px;"></view>
    <view class="nacigationBar" style="width: 70%; height: {{navBarHeight}}px;">
      <view>
        {{item.name}}
        <t-icon name="chevron-left" size="30" data-name="{{item}}" bind:click="goBack" />
      </view>
      <view style="margin-top: 20rpx; " class="{{selectedIndex == index? 'bottomLineBox' :''}}"></view>
      <t-search model:value="{{searchValue}}" shape="round" placeholder="请输入关键词/书名/ISBN/作者" class="navBar-search" style="width: 464rpx" bind:submit="searchBook" />
    </view>
  </view>

</view>



<view class="contentBox">

  <view class="titleBox">
    <view class="frameBox"></view>
    <view class="titleTextBox">
      <!-- <image src="/static/images/bookExhibitionList/zhuantitaolun.png" mode="aspectFit" /> -->

      <view>数字教材列表</view>
    </view>
  </view>



  <view class="bookContentBox">
    <view class="external" wx:for="{{digitalTextbooksData}}" wx:key="index" wx:for-item="item" wx:for-index="index" data-item="{{item}}" bind:tap="jumpDetails">
      <view class="amountClick">
        <t-icon name="browse" size="15" data-name="{{item}}" bind:click="goBack" />
        <view>{{item.viewCount}}</view>
      </view>
      <view class="imageBox">
        <image src="{{item.icon ? item.icon : '/static/images/default-book-img.png'}}" mode="" />
      </view>
      <view class="bookName">{{item.name}}</view>
      <view class="information">
        <view wx:if="{{item.author}}" class="book-author">
          {{ item.author }}
    <view class="tabBox">
      <view wx:for="{{tabList}}" wx:key="index" wx:for-item="item" wx:for-index="index" class="{{selectedIndex == index? 'nameBox' :''}}" data-index="{{index}}" bind:tap="selectTab">
        <view>
          {{item.name}}
        </view>
        <view wx:else>-</view>
        <view wx:if="{{item.price == 0}}" class="price"> 免费</view>
        <view wx:else class="price">￥{{ item.price }}</view>
        <view style="margin-top: 20rpx; " class="{{selectedIndex == index? 'bottomLineBox' :''}}"></view>
      </view>
    </view>
    <view wx:if="{{!digitalTextbooksData.length }}" class="noData">
      <t-empty icon="folder-open" description="暂无数据" />

  </view>



  <view class="contentBox">

    <view class="titleBox">
      <view class="frameBox"></view>
      <view class="titleTextBox">
        <!-- <image src="/static/images/bookExhibitionList/zhuantitaolun.png" mode="aspectFit" /> -->

        <view>数字教材列表</view>
      </view>
    </view>



    <view class="bookContentBox">
      <view class="external" wx:for="{{digitalTextbooksData}}" wx:key="index" wx:for-item="item" wx:for-index="index" data-item="{{item}}" bind:tap="jumpDetails">
        <view class="amountClick">
          <t-icon name="browse" size="15" data-name="{{item}}" bind:click="goBack" />
          <view style="margin-left: 5rpx;">{{item.viewCount}}</view>
        </view>
        <view class="imageBox">
          <image src="{{item.icon ? item.icon : '/static/images/default-book-img.png'}}" mode="" />
        </view>
        <view class="bookName">{{item.name}}</view>
        <view class="information">
          <view wx:if="{{item.author}}" class="book-author">
            {{ item.author }}
          </view>
          <view wx:else>-</view>
          <view wx:if="{{item.price == 0}}" class="price"> 免费</view>
          <view wx:else class="price">￥{{ item.price }}</view>
        </view>
      </view>
      <view wx:if="{{!digitalTextbooksData.length }}" class="noData">
        <t-empty icon="folder-open" description="暂无数据" />
      </view>
    </view>
  </view>

</view>

 pages/digitalTextbooks/index.wxss

@@ -1,4 +1,5 @@
/* pages/digitalTextbooks/index.wxss */
@import "./index.skeleton.wxss";

.nacigationBar {
  display: flex;
@@ -47,6 +48,10 @@
  width: 50rpx;
  background-color: #FF6C00;
  margin: 0 auto;
}

page {
  background-color: #F2F3F8;
}

.contentBox {
@@ -117,7 +122,8 @@
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 30rpx;
  font-size: 25rpx;
  color: rgb(153, 153, 153);

}


 pages/home/home.js

@@ -151,6 +151,7 @@
  //点击目录
  toPages(item) {
    let info = item.target.dataset.info
    console.log(info);
    if (info.url) {
      if (info.text == "图书服务") {
        wx.switchTab({

 services/home/home.js

@@ -23,12 +23,22 @@
          icon: '/static/images/home/shuzikecheng@2x.png',
          url: '',
        },





        {
          text: '数字教材',
          key: 3,
          icon: '/static/images/home/shuzijiaocai@2x.png',
          url: '',
          url: '/pages/digitalTextbooks/index',
        },





        {
          text: '专题讨论',
          key: 4,