优化数字教材详情

yiming

2024-06-13 c95ed3b99b3cb75374f2c8819740a1839ed28a0f

优化数字教材详情

 pages/digitalTextbooks/digitalTextbooksDetails/index.js

@@ -1,5 +1,8 @@
// pages/digitalTextbooks/digitalTextbooksDetails/index.js
import Toast from "tdesign-miniprogram/toast";
import {
  loginInfo
} from '../../../assets/js/login';
const app = getApp()
Page({

@@ -7,9 +10,14 @@
   * 页面的初始数据
   */
  data: {


    type: 'basicInformation',


    digitalTextId: '',
    digitalsData: {},
    isFavourite: true,

    richStyle: 'font-size: 28rpx;color: #333; line-height: 48rpx;text-align: justify;margin: 20rpx; ',
    tabValue: "brief",
    relatedBookData: [],
@@ -45,7 +53,14 @@
    },
    testResourceClickIocn: {
      name: "/static/images/digitalTextbooks/Link@2x.png",
    }
    },

    catalogue: {
      name: "/static/images/digitalTextbooks/mulu@2x.png",
    },
    catalogueClickIcon: {
      name: "/static/images/digitalTextbooks/mulu@2x.png",
    },

  },

@@ -58,6 +73,11 @@
      digitalTextId: options.id
    })
    this.digitalTextbooksDetailsGet(this.data.digitalTextId)






  },
  // 格式化日期
@@ -215,7 +235,7 @@
        publicationDate: this.formatDate(res.datas.publicationDate)
      })
      res.datas.price = res.datas.price.toFixed(2)
      res.datas.isFavourite = false

      this.setData({
        digitalsData: res.datas
      })
@@ -229,38 +249,14 @@
      console.log(this.data.isBuy);
      this.setData({
        loading: false,
        type: 'basicInformation',

      });

      // this.onCe()
    })
  },
  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) {

    this.setData({
@@ -446,16 +442,202 @@
  // console.log(token);
  goRead() {

    const item = this.data.digitalsData
    // 首页测试登录功能，后续注释
    // 检查登录状态
    const token = wx.getStorageSync(app.config.tokenKey)
    if (!token) {
      loginInfo(app, (data) => {
        // 如果不是第一次登录，会执行回调
        if (data) {
          // 登录成功，自动记录token和用户信息，并返回true

    let token = wx.getStorageSync(app.config.tokenKey)
    console.log();
    const URL = app.config.textReaderUrl + '?bookId=' + item.refCode + "&tryPageCount=" + item.probationPage + "&token=" + token
          const item = this.data.digitalsData
          wx.navigateTo({
            url: '/pages/digitalTextbooks/digitalTextbooksDetails/components/webView/index?refCode=' + item.refCode + "&tryPageCount=" + item.probationPage
          });
        } else {
          // 出现错误，返回false
        }
      })
    } else {
      // 如果是第一次登录，会跳转至绑定用户信息页面，填写完用户信息后进行登录并储存token和用户信息，结束后跳转回当前页面（携带页面参数）
      const item = this.data.digitalsData
      wx.navigateTo({
        url: '/pages/digitalTextbooks/digitalTextbooksDetails/components/webView/index?refCode=' + item.refCode + "&tryPageCount=" + item.probationPage
      });
    }
    // let token = wx.getStorageSync(app.config.tokenKey)
    // if (token) {


    wx.navigateTo({
      url: '/pages/digitalTextbooks/digitalTextbooksDetails/components/webView/index?refCode=' + item.refCode + "&tryPageCount=" + item.probationPage
    });


    // }


  },
  onTabClick(e) {
    // debugger
    console.log(e);
    let tab = e.currentTarget.dataset.tab;

    this.setData({
      type: tab,

    })

    if (tab == 'basicInformation') {
      this.setData({
        topPos: 0
      })
    } else if (tab == 'certificateInformation') {
      this.setData({
        topPos: this.certificateInformation
      })
    } else if (tab == 'authorSynopsis') {
      this.setData({
        topPos: this.authorSynopsis
      })
    } else if (tab == 'listings') {
      this.setData({
        topPos: this.listings
      })
    } else if (tab == 'relatedTextbooks') {
      this.setData({
        topPos: this.relatedTextbooks
      })
    }

  },


  onScroll(e) {

    let scrollTop = e.detail.scrollTop
    console.log(scrollTop);
    // this.setData({
    //   type: scrollTop
    // })


    if (scrollTop < this.basicInformation) {
      this.setData({
        type: 'basicInformation'
      })
    } else if (scrollTop >= this.basicInformation && scrollTop < this.certificateInformation) {
      this.setData({
        type: 'certificateInformation'
      })
    } else if (scrollTop >= this.certificateInformation && scrollTop < this.authorSynopsis) {
      this.setData({
        type: 'authorSynopsis'
      })
    } else if (scrollTop >= this.authorSynopsis && scrollTop < this.listings) {
      this.setData({
        type: 'listings'
      })
    } else if (scrollTop >= this.listings && scrollTop < this.relatedTextbooks) {
      this.setData({
        type: 'relatedTextbooks'
      })
    }



  },
  onCe() {

    let that = this;
    var query = wx.createSelectorQuery()
    console.log(query, '12355');
    //获取板块一离scroll-view顶部的距离,第一板块实际距离为0，此处获取只为给第二及第三板块减去第一板块距离scroll-view的顶部距离
    wx.createSelectorQuery().select('#basicInformation').boundingClientRect(function (res) {
      console.log(res, '456882588');
      that.basicInformation = res.top
    }).exec()
    //获取板块二离scroll-view顶部的距离
    query.select('#certificateInformation').boundingClientRect(function (res) {
      that.certificateInformation = res.top - that.basicInformation
    }).exec()
    //获取板块三离scroll-view顶部的距离
    query.select('#authorSynopsis').boundingClientRect(function (res) {
      that.authorSynopsis = res.top - that.basicInformation
    }).exec()
    //获取板块四离scroll-view顶部的距离
    query.select('#listings').boundingClientRect(function (res) {
      that.listings = res.top - that.basicInformation
    }).exec()
    //获取板块五离scroll-view顶部的距离
    query.select('#relatedTextbooks').boundingClientRect(function (res) {
      that.relatedTextbooks = res.top - that.basicInformation
    }).exec()
  },
  setCoolect() {
    console.log(456);

    // 首页测试登录功能，后续注释
    // 检查登录状态
    const token = wx.getStorageSync(app.config.tokenKey)
    if (!token) {
      loginInfo(app, (data) => {
        // 如果不是第一次登录，会执行回调
        if (data) {
          if (this.data.digitalsData.isFavourite) {
            app.MG.store
              .delProductLink({
                productIds: [this.data.digitalsData.id],
                linkType: 'FavoriteBookCity'
              })
              .then(() => {
                this.setData({
                  "digitalsData.isFavourite": false
                })
              })
          } else {
            let params = {
              productIds: [this.data.digitalsData.id],
              linkType: 'FavoriteBookCity'
            }
            app.MG.store.addProductLink(params).then((res) => {
              this.setData({
                "digitalsData.isFavourite": true
              })
            })
          }
        } else {
          // 出现错误，返回false
        }
      })
    } else {
      if (this.data.digitalsData.isFavourite) {
        app.MG.store
          .delProductLink({
            productIds: [this.data.digitalsData.id],
            linkType: 'FavoriteBookCity'
          })
          .then(() => {
            this.setData({
              "digitalsData.isFavourite": false
            })
          })
      } else {
        let params = {
          productIds: [this.data.digitalsData.id],
          linkType: 'FavoriteBookCity'
        }
        app.MG.store.addProductLink(params).then((res) => {
          this.setData({
            "digitalsData.isFavourite": true
          })
        })
      }
    }






  }

})

 pages/digitalTextbooks/digitalTextbooksDetails/index.json

@@ -4,6 +4,7 @@
    "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"
    "t-toast": "tdesign-miniprogram/toast/toast",
    "t-empty": "tdesign-miniprogram/empty/empty"
  }
}

 pages/digitalTextbooks/digitalTextbooksDetails/index.skeleton.wxml

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

@@ -26,38 +26,50 @@
                <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">
                <view class="headerText sk-transparent sk-text-14-2857-391 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 style="width: 75px;" class="sk-transparent sk-text-14-2857-366 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 style="width: 75px;" class="sk-transparent sk-text-14-2857-515 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 style="width: 75px;" class="sk-transparent sk-text-14-2857-242 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 class="proposal">
                <view class="suggestion">
                  <image mode="true" class="sk-image"></image>
                </view>
                <view class="proposalText sk-transparent sk-text-14-2857-597 sk-text">我要建议</view>
              </view>
              <view class="frame"></view>
              <view class="information">
                <view class="proposal">
                  <view class="suggestion">
                    <image mode="true" class="sk-image"></image>
                  </view>
                  <view class="proposalText sk-transparent sk-text-14-2857-10 sk-text">证书申请</view>
                </view>
                <view class="informationPrice">
                  <view class="fixedPrice">
                    <view class="sk-transparent sk-text-14-2857-939 sk-text"> 定价： </view>
                    <view class="sk-transparent sk-text-14-2857-293 sk-text">￥38.80</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
@@ -83,7 +95,7 @@
                            <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>
                      <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">
@@ -92,7 +104,7 @@
                            <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>
                      <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">
@@ -101,10 +113,19 @@
                            <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="4">
                        <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 class="t-tabs__track tabs--t-tabs__track t-tabs__track--top tabs--t-tabs__track--top " style="-webkit-transform: translateX(32px);  transform: translateX(32px); "></view>
                    </view>
                  </scroll-view>
                </view>
@@ -112,58 +133,69 @@
            </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="  t-tab-panel panel--t-tab-panel t-is-active panel--t-is-active" style="true" id="a3607342--t_tabs_7_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 class="basic sk-transparent sk-text-14-2857-466 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 style="margin: 15px; margin-bottom: 65px;">
                    <rich-text 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="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="4b6ea136--t_tabs_7_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 class="basic sk-transparent sk-text-14-2857-927 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 style="margin: 15px; margin-bottom: 65px;">
                    <rich-text 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="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="403cd750--t_tabs_7_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 class="basic sk-transparent sk-text-14-2857-416 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 style="margin: 15px; margin-bottom: 65px;">
                    <rich-text 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="  t-tab-panel panel--t-tab-panel" style="height: 0;" id="092c1c04--t_tabs_7_panel_3">
                  <view class="rubricBox">
                    <view class="rubricimgBox">
                      <image mode="true" class="sk-image"></image>
                    </view>
                    <view class="basic sk-transparent sk-text-14-2857-874 sk-text"> 目录</view>
                  </view>
                  <view style="margin: 15px; margin-bottom: 65px;">
                    <rich-text 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="c786c51d--t_tabs_7_panel_4">
                  <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 class="correlationName sk-transparent sk-text-14-2857-494 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 class="correlationName sk-transparent sk-text-14-2857-938 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 class="correlationName sk-transparent sk-text-14-2857-12 sk-text">学前儿童卫生与保健</view>
                    </view>
                  </view>
                </view>
@@ -172,14 +204,24 @@
          </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 style="border-top:  1px solid #DDDDDD;  display: flex;">
            <view class="collection">
              <view class="collectionImage">
                <image mode="true" class="sk-image"></image>
              </view>
              <view class="sk-transparent sk-text-14-2857-834 sk-text">
                收藏
              </view>
            </view>
            <view class="btn-text sk-transparent sk-text-14-2857-233 sk-text">试读</view>
            <view class="trialReading">
              <view class="collectionImage">
                <image class="sk-image"></image>
              </view>
              <view class="btn-text sk-transparent sk-text-14-2857-761 sk-text">试读</view>
            </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 class="shopCarColor sk-transparent sk-text-14-2857-985 sk-text">加入购物车</view>
          <view class="buyColor sk-transparent sk-text-14-2857-221 sk-text">立即购买</view>
        </view>
      </view>
    </view>

 pages/digitalTextbooks/digitalTextbooksDetails/index.skeleton.wxss

@@ -1,5 +1,5 @@
/*
此文件为开发者工具生成，生成时间: 2024/6/6上午11:26:43
此文件为开发者工具生成，生成时间: 2024/6/13上午9:45:29

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalTextbooks\digitalTextbooksDetails\index.wxss 中引入样式
```
@@ -11,7 +11,7 @@
.sk-transparent {
    color: transparent !important;
  }
.sk-text-14-2857-678 {
.sk-text-14-2857-391 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 50.4000rpx;
    position: relative !important;
@@ -23,82 +23,92 @@
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
.sk-text-14-2857-984 {
.sk-text-14-2857-366 {
    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 {
.sk-text-14-2857-515 {
    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 {
.sk-text-14-2857-242 {
    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 {
.sk-text-14-2857-597 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-508 {
.sk-text-14-2857-10 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 39.2000rpx;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-text-14-2857-640 {
.sk-text-14-2857-939 {
    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 {
.sk-text-14-2857-293 {
    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 {
.sk-text-14-2857-466 {
    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 {
.sk-text-14-2857-927 {
    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 {
.sk-text-14-2857-416 {
    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 {
.sk-text-14-2857-874 {
    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-494 {
    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 {
.sk-text-14-2857-938 {
    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 {
.sk-text-14-2857-12 {
    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 {
.sk-text-14-2857-834 {
    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 {
.sk-text-14-2857-761 {
    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 {
.sk-text-14-2857-985 {
    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-221 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 44.8000rpx;
    position: relative !important;

 pages/digitalTextbooks/digitalTextbooksDetails/index.wxml

@@ -15,15 +15,10 @@
            <view class="imageBox">
              <image src="{{digitalsData.icon}}" mode="" />
            </view>

            <view class="setCoolect">
            <!-- <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>
          <view class="bookContent">
            <view class="headerText">
@@ -42,11 +37,7 @@
                <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>
@@ -55,8 +46,28 @@

        </view>
        <view class="certificate">
          <view class="publish">出版证书</view>
          <view class="curriculum">课程证书</view>
          <view class="proposal">
            <view class="suggestion">
              <image src="/static/images/digitalTextbooks/Suggestion@2x.png" mode="" />
            </view>
            <view class="proposalText">我要建议</view>
          </view>
          <view class="frame"></view>
          <view class="information">
            <view class="proposal">
              <view class="suggestion">
                <image src="/static/images/digitalTextbooks/shengshu-t@2x.png" mode="" />
              </view>
              <view class="proposalText">证书申请</view>
            </view>
            <view class="informationPrice">
              <view wx:if="{{digitalsData.price != 0}}" class="fixedPrice">
                <view> 定价： </view>
                <view>￥{{ digitalsData.price}}</view>
              </view>
              <view wx:else>免费</view>
            </view>
          </view>
        </view>


@@ -77,6 +88,29 @@
          </view>

        </t-tab-panel>
        <t-tab-panel icon="{{tabValue == 'jsek_cloudLearning' ? learnResourceClickIcon : learnResourceIcon}}" value="jsek_cloudLearning" label="证书信息" style="{{tabPanelstyle}}">
          <view class="rubricBox">
            <view class="rubricimgBox">
              <image src="/static/images/digitalTextbooks/zhengshu@2x.png" mode="" />
            </view>
            <view class="basic"> 证书信息</view>





          </view>


          <view class="certificateChart">
            <view class="chart">
              <image src="" mode="" />
            </view>
            <view class="chart">
              <image src="" mode="" />
            </view>
          </view>
        </t-tab-panel>
        <t-tab-panel icon="{{tabValue == 'jsek_teachingResources' ? teachResourcesClickIcon : teachResourcesIcon}}" value="jsek_teachingResources" label="作者信息" style="{{tabPanelstyle}}">
          <view class="rubricBox">
            <view class="rubricimgBox">
@@ -87,10 +121,8 @@
          <view style="margin: 30rpx; margin-bottom: 130rpx;">
            <rich-text nodes="{{digitalsData.authorIntroduction}}" style="{{richStyle}}"></rich-text>
          </view>


        </t-tab-panel>
        <t-tab-panel icon="{{tabValue == 'jsek_cloudLearning' ? learnResourceClickIcon : learnResourceIcon}}" value="jsek_cloudLearning" label="目录" style="{{tabPanelstyle}}">
        <t-tab-panel icon="{{tabValue == 'catalogue' ? catalogueClickIcon : catalogue}}" value="catalogue" label="目录" style="{{tabPanelstyle}}">

          <view class="rubricBox">
            <view class="rubricimgBox">
@@ -98,10 +130,7 @@
            </view>
            <view class="basic"> 目录</view>
          </view>

          <view style="margin: 30rpx; margin-bottom: 130rpx;">


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

@@ -120,28 +149,77 @@
              </view>

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

              <view class="correlationAuthor">{{digitalsData.author}}</view>
            </view>
          </view>



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

    </view>



























    <view class="box-bottom">
      <view class="trialReading" bind:tap="goRead" wx:if="{{!isBuy}}">
        <view>
          <t-image src="/static/images/bookService/detail/shidu.png"></t-image>

      <view style="border-top:  1rpx solid #DDDDDD;  display: flex;">

        <view class="collection" bind:tap="setCoolect">
          <view class="collectionImage">
            <image wx:if="{{!digitalsData.isFavourite}}" src="/static/images/digitalTextbooks/wodeshoucang@2x.png" mode="" />
            <image wx:else src="/static/images/bookService/detail/collecting.png" mode="" />
          </view>
          <view>
            收藏
          </view>
        </view>
        <view class="btn-text">试读</view>
        <view class="trialReading" bind:tap="goRead" wx:if="{{!isBuy}}">
          <view class="collectionImage">
            <image src="/static/images/digitalTextbooks/shidu@2x.png"></image>
          </view>
          <view class="btn-text">试读</view>
        </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 class="{{!isBuy ? 'buyColor' :'reading'}}" bind:tap="goRead" wx:if="{{isBuy}}">
        立即阅读
      </view>




    </view>
  </view>
</view>

 pages/digitalTextbooks/digitalTextbooksDetails/index.wxss

@@ -19,10 +19,7 @@
}

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

.setCoolect {
@@ -34,9 +31,8 @@
}

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

.bookContent {
@@ -71,15 +67,15 @@

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

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

@@ -92,23 +88,9 @@
  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;
@@ -205,9 +187,10 @@
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;

  font-weight: bold;
  font-size: 28rpx;
  font-size: 25rpx;
  color: #333333;
}

.page-bookService {
@@ -222,24 +205,26 @@
  bottom: 0;
  width: 100%;
  height: 110rpx;

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

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

}

.shopCarColor {
  width: 350rpx;
  width: 200rpx;
  height: 110rpx;
  border-right: 1px solid #DDD;
  color: #fff;
@@ -250,6 +235,164 @@
}

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

.suggestion {
  width: 35rpx;
  height: 35rpx;
}

.proposal {
  width: 250rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-right: 1rpx solid #fff; */
}

.frame {
  width: 2rpx;
  height: 72rpx;
  background-color: #fff;
  opacity: 0.2;
}

.information {
  color: #FFFFFF;
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.proposalText {
  font-weight: 400;
  font-size: 25rpx;
  color: #FFFFFF;
  margin-left: 10rpx;
}

.informationPrice {
  display: flex;
  flex-direction: row;
  margin-right: 30rpx;
}

.fixedPrice {
  display: flex;
  flex-direction: row;
}



.main-box {
  width: 100vw;
  /* min-height: 89vh; */
  margin-top: 30rpx;
}

.top-tab {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 750rpx;
  min-height: 70rpx;
  overflow-x: scroll;
  border-bottom: 2rpx solid #EFF0F1;
  padding-bottom: 30rpx;

}

.tabBox {
  min-width: 130rpx;
  display: flex;
  justify-content: center;
}

.tab-view {
  width: 100%;
  height: 100%;
}

.view-color1 {
  /* background-color: palegoldenrod; */
}

.view-color2 {
  /* background-color: palegreen; */
}

.view-color3 {
  /* background-color: paleturquoise; */
}

.view-color4 {
  /* background-color: #ccc; */
}

.view-color5 {
  /* background-color: gold; */
}

.top-label-sel {
  font-weight: bold;
  border-bottom: solid 5rpx #FF6C00;
}

.scrollView {
  /* height: calc(100vh - 300rpx); */
  height: 100vh;
  /* min-height: 86vh; */
}

.contentBox {
  width: 100%;
  /* height: 660rpx; */
  height: 100%;
  overflow: scroll;
}

.certificateChart {
  display: flex;
  flex-direction: row;
  margin-top: 30rpx;
  margin-left: 40rpx;
}

.chart {
  width: 230rpx;
  height: 325rpx;
  border: 1rpx solid #ccc;
  margin-right: 50rpx;
}


.noData {}

.collection {
  width: 175rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.collectionImage {
  width: 35rpx;
  height: 35rpx;
  margin-bottom: 5rpx;
}


.reading {
  width: 100%;
  height: 110rpx;
  border-right: 1px solid #DDD;
@@ -258,4 +401,16 @@
  display: flex;
  justify-content: center;
  align-items: center;
}

.correlationAuthor {
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  font-size: 22rpx;
  color: #333333;
  margin: 15rpx 0;
}