数字课程详情

yiming

2024-06-18 4c46ea24641b5c1e18c55eb86477d0e0bc444580

数字课程详情

 pages/digitalCourses/digitalCoursesDetails/index.js

@@ -1,18 +1,104 @@
// pages/digitalCourses/digitalCoursesDetails/index.js
const app = getApp()
import Toast from "tdesign-miniprogram/toast";
Page({

  /**
   * é¡µé¢çš„初始数据
   */
  data: {

    scrollJudge: true,
    loading: true,
    digitalsData: [],
    tabValue: 0,
    learnResourceIcon: {
      name: "/static/images/digitalTextbooks/shengshu-t@2x.png",
    },
    learnResourceClickIcon: {
      name: "/static/images/digitalTextbooks/zhengshu-t-click@3x.png",
    },
    briefIcon: {
      name: "/static/images/digitalTextbooks/jibenxinxi-t@2x.png",
    },
    briefIconClick: {
      name: "/static/images/digitalTextbooks/jibenxinxi-t-click@3x.png",
    },
    courseLearning: {
      name: "/static/images/digitalCourses/jiaoxueziyuan@2x.png"
    },
    courseLearningClick: {
      name: "/static/images/digitalCourses/jiaoxueziyuan.png"
    },
    learningNotes: {
      name: "/static/images/digitalCourses/biji／icon@2x.png"
    },
    learningNotesClick: {
      name: "/static/images/bookService/detail/biji-click-icon.png",
  },

    onlineQuestioning: {
      name: "/static/images/digitalCourses/tiwen@2x.png"
    },
    onlineQuestioningClick: {
      name: "/static/images/digitalCourses/tiwen-click@2x.png"
    },

    dialogBox: false

  },
  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];
  },
  /**
   * ç”Ÿå‘½å‘¨æœŸå‡½æ•°--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.digitalCoursesDetailsGet(options.id)

  },

  /**
@@ -62,5 +148,216 @@
   */
  onShareAppMessage() {

  },
  digitalCoursesDetailsGet(digitalTextId) {

    let query = {
      path: '*',
      queryType: '*',
      productId: digitalTextId,
      storeInfo: 'jsek_digitalCourses',
      coverSize: {
        height: 300
      },
      fields: {
        seriesName: [],
        author: [],
        isbn: [],
        publicationDate: [],
        bookClassification: [],
        paperPrice: [],
        JDLink: [],
        tmallLink: [],
        dangdangLink: [],
        weidianLink: [],
        content: [],
        authorIntroduction: [],
        isApplyBook: [],
        isSell: [],
        pdf: [],
        protectedEpub: [],
        probationPage: [], //pdf试读页数
        freeEpubPage: [],
        courseLeader: [],
        affiliatedUnit: [],
        publishingUnit: [],
        classHours: [],
        productLinkPath: []
        //epub试读百分比
      }
    }
    app.MG.store.getProductDetail(query).then(res => {
      console.log(res);
      res.datas.publicationDate = this.formatDate(res.datas.publicationDate)
      res.datas.price = res.datas.price.toFixed(2)

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

      this.setData({
        digitalsData: res.datas,
        loading: false
      })
    })
  },
  onTabsChange(event) {

    const value = event.detail.value
    this.setData({
      tabValue: value
    })
    console.log(this.data.tabValue);
  },


  // å›¾ä¹¦æ·»åŠ è´­ç‰©è½¦
  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) => {
              this.digitalTextbooksDetailsGet(this.data.digitalTextId)
              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,
      });
    }
  },
  showDialog(e) {
    const {
      key
    } = e.currentTarget.dataset;
    this.setData({
      [key]: true,
      dialogKey: key
    });
  },

  closeDialog() {
    const {
      dialogKey
    } = this.data;
    this.setData({
      [dialogKey]: false
    });
  },
  onCertificate() {


    var page = getCurrentPages().pop(); // èŽ·å–当前页面实例
    page.setData({
      // åŠ¨æ€è®¾ç½®ç¦æ­¢æ»šåŠ¨çš„样式
      disableScrollStyle: 'overflow: hidden;'
    });
    this.setData({
      dialogBox: true,
      scrollJudge: ''
    })
  },
  closeDialog() {
    this.setData({
      dialogBox: false,
      scrollJudge: true
    })
  },
  confirmM() {
    this.setData({
      dialogBox: false,
      scrollJudge: true
    })
  }
})

 pages/digitalCourses/digitalCoursesDetails/index.json

@@ -1,3 +1,13 @@
{
  "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",
    "t-empty": "tdesign-miniprogram/empty/empty",
    "t-button": "tdesign-miniprogram/button/button",
    "t-input": "tdesign-miniprogram/input/input",
    "t-dialog": "tdesign-miniprogram/dialog/dialog"
  }
}

 pages/digitalCourses/digitalCoursesDetails/index.skeleton.wxml

New file
@@ -0,0 +1,153 @@
<!--
此文件为开发者工具生成，生成时间: 2024/6/18下午5:18:53
使用方法：
在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalCourses\digitalCoursesDetails\index.wxml å¼•å…¥æ¨¡æ¿

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

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalCourses\digitalCoursesDetails\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="digital">
        <view class="book-box sk-image">
          <view class="digitalCoursesDetailsTitle">
            <view class="imageBox">
              <image mode="true" class="sk-image"></image>
            </view>
            <view class="nameBox sk-transparent sk-text-14-2857-649 sk-text"> å¬æž—崇德老师讲基础教育</view>
            <view>
              <viwe class="styleCssBox">
                <view style="width: 85px;" class="sk-transparent sk-text-14-2857-501 sk-text"> ISBN： </view>
                <view class="sk-transparent sk-opacity">-</view>
              </viwe>
              <viwe class="styleCssBox">
                <view style="width: 85px;" class="sk-transparent sk-text-14-2857-24 sk-text">出版时间：</view>
                <view class="sk-transparent sk-opacity">-</view>
              </viwe>
              <viwe class="styleCssBox">
                <view style="width: 85px;" class="sk-transparent sk-text-14-2857-583 sk-text">课题负责人：</view>
                <view class="sk-transparent sk-text-14-2857-492 sk-text"> æž—崇德</view>
              </viwe>
              <viwe class="styleCssBox">
                <view style="width: 85px;" class="sk-transparent sk-text-14-2857-800 sk-text">所属单位：</view>
                <view class="sk-transparent sk-opacity">-</view>
              </viwe>
              <viwe class="styleCssBox">
                <view style="width: 85px;" class="sk-transparent sk-text-14-2857-931 sk-text">出版单位：</view>
                <view class="sk-transparent sk-opacity">-</view>
              </viwe>
              <image class="right-background sk-image"></image>
            </view>
          </view>
          <view class="certificate">
            <view style="margin-left: 15px;" class="sk-transparent">价格：
              <text class="sk-transparent sk-text-14-2857-22 sk-text">ï¿¥489.00</text>
            </view>
            <view style="margin-right: 15px;" class="sk-transparent">共
              <text></text>课时
            </view>
          </view>
        </view>
      </view>
      <view class="tabBox">
        <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  " 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__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>
                    </view>
                    <view class="t-tabs__track tabs--t-tabs__track t-tabs__track--top tabs--t-tabs__track--top " style="-webkit-transform: translateX(36px);transform: translateX(36px);"></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="fe3987bf--t_tabs_9_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-513 sk-text"> è¯¾ç¨‹ä»‹ç»</view>
                </view>
                <view style="margin: 15px; margin-bottom: 65px; min-height:130px ;">
                  <view class="noDataBox">
                    <view class="  t-empty empty--t-empty" style="true">
                      <view class="t-empty__thumb empty--t-empty__thumb">
                        <view class="t-icon icon--t-icon empty--t-empty__icon empty--undefined" style="true">
                          <label class="t-icon-folder-open icon--t-icon-folder-open t-icon-base icon--t-icon-base sk-pseudo sk-pseudo-circle"></label>
                        </view>
                      </view>
                      <view class="t-empty__description empty--t-empty__description "></view>
                      <view class="t-empty__actions empty--t-empty__actions t-class-actions empty--t-class-actions"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="box-bottom">
        <view class="application">
          <view class="applicationImageBox">
            <image mode="true" class="sk-image"></image>
          </view>
          <view class="sk-transparent sk-text-14-2857-181 sk-text">证书申请</view>
        </view>
        <view class="shopCarColor sk-transparent sk-text-14-2857-195 sk-text">加入购物车</view>
        <view class="buyColor sk-transparent sk-text-14-2857-148 sk-text">立即购买</view>
      </view>
    </view>
  </view>
</template>

 pages/digitalCourses/digitalCoursesDetails/index.skeleton.wxss

New file
@@ -0,0 +1,107 @@
/*
此文件为开发者工具生成，生成时间: 2024/6/18下午5:18:53

在 D:\course_of_growth\jsekXcx\jsek-applet\pages\digitalCourses\digitalCoursesDetails\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-649 {
    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-501 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6000rpx;
    position: relative !important;
  }
.sk-opacity {
    opacity: 0 !important;
  }
.sk-text-14-2857-24 {
    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-583 {
    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-492 {
    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-800 {
    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-931 {
    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-22 {
    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-513 {
    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-181 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 30.8000rpx;
    position: relative !important;
  }
.sk-text-14-2857-195 {
    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-148 {
    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/digitalCourses/digitalCoursesDetails/index.wxml

@@ -1,2 +1,227 @@
<!--pages/digitalCourses/digitalCoursesDetails/index.wxml-->
<text>数字课程详情页</text>
<import src="index.skeleton.wxml" />
<template is="skeleton" wx:if="{{loading}}" />


<scroll-view scroll-y="{{scrollJudge}}" wx:else class="outsideContentBox">

  <view>



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

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

          <view class="nameBox">{{digitalsData.name}}</view>


          <view>
            <viwe class="styleCssBox">
              <view style="width: 170rpx;"> ISBN： </view>
              <view wx:if="{{digitalsData.isbn}}"> {{digitalsData.isbn}} </view>
              <view wx:else="">-</view>
            </viwe>
            <viwe class="styleCssBox">
              <view style="width: 170rpx;">出版时间：</view>
              <view wx:if="{{digitalsData.publicationDate}}">{{digitalsData.publicationDate}} </view>
              <view wx:else="">-</view>
            </viwe>
            <viwe class="styleCssBox">
              <view style="width: 170rpx;">课题负责人：</view>
              <view wx:if="{{digitalsData.courseLeader}}"> {{digitalsData.courseLeader }}</view>
              <view wx:else="">-</view>
            </viwe>
            <viwe class="styleCssBox">
              <view style="width: 170rpx;">所属单位：</view>
              <view wx:if="{{digitalsData.affiliatedUnit}}"> {{ digitalsData.affiliatedUnit}}</view>
              <view wx:else="">-</view>
            </viwe>
            <viwe class="styleCssBox">
              <view style="width: 170rpx;">出版单位：</view>
              <view wx:if="{{digitalsData.publishingUnit}}">{{digitalsData.publishingUnit}} </view>
              <view wx:else="">-</view>
            </viwe>
            <image src="/static/images/bookService/detail/square.png" class="right-background" />
          </view>

        </view>

        <view class="certificate">

          <view style="margin-left: 30rpx;">价格： <text>ï¿¥{{digitalsData.price}}</text></view>
          <view style="margin-right: 30rpx;">共<text>{{ digitalsData.classHours}}</text>课时</view>

        </view>
      </view>






    </view>


    <view class="tabBox">
      <t-tabs defaultValue="{{tabValue}}" bind:change="onTabsChange" t-class="custom-tabs" t-class-content="custom-panel">
        <t-tab-panel icon="{{ tabValue == '0' ? briefIconClick : briefIcon}}" label="基本信息" value="0" style="{{tabPanelstyle}}">
          <!-- <scroll-view scroll-y="{{true}}" class="outsideContentBox"> -->

          <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; margin-bottom: 130rpx; min-height:260rpx ;">
            <rich-text wx:if="{{digitalsData.content}}" nodes="{{digitalsData.content}}" style="{{richStyle}}"></rich-text>



            <view wx:else="" class="noDataBox">
              <t-empty icon="folder-open" description="暂无数据" font-size="80" />
            </view>


          </view>

          <view class="rubricBox">
            <view class="rubricimgBox">
              <image src="/static/images/bookService/detail/label.png" mode="" />
            </view>
            <view class="basic"> ä¸»è®²è€å¸ˆ</view>
          </view>

          <view class="lecturer">
            <view class="lecturerImangBox">
              <image src="" mode="" />
            </view>
            <view class="lecturerInformation">

              <view class="lecturerName">
                <view style="font-weight: bold; font-size: 29rpx; color: #333333;">

                  æž—崇德

                </view>
                <view style="font-weight: 400; font-size: 25rpx; color: #949494;">讲师</view>
              </view>
              <view class="lecturerContent">中国学生发展核心素养研制首席专家，围绕大中小学教材建设开展了一系列开创性、奠基性工作。建立完善了我国发展心理学教材体系。</view>


            </view>

          </view>



          <!-- </scroll-view> -->


        </t-tab-panel>
        <t-tab-panel icon="{{ tabValue == '1' ?  learnResourceClickIcon : learnResourceIcon}}" label="证书信息" value="1" 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>

          <!-- 
    <view class="noDataBox">
      <t-empty icon="folder-open" description="暂无数据" font-size="80" />

    </view> -->



        </t-tab-panel>
        <t-tab-panel icon="{{ tabValue == '2' ? courseLearningClick : courseLearning}}" label="课程学习" value="2" style="{{tabPanelstyle}}">选项三内容</t-tab-panel>
        <t-tab-panel icon="{{ tabValue == '3' ? learningNotesClick : learningNotes}}" label="学习笔记" value="3" style="{{tabPanelstyle}}">选项四内容</t-tab-panel>
        <t-tab-panel icon="{{ tabValue == '4' ? onlineQuestioningClick : onlineQuestioning}}" label="在线提问" value="4" style="{{tabPanelstyle}}">选项五内容</t-tab-panel>
      </t-tabs>

    </view>


    <view class="box-bottom">



      <view class="application" bind:tap="onCertificate">
        <view class="applicationImageBox">
          <image src="/static/images/digitalCourses/zhengshushenqing@2x.png" mode="" />
        </view>
        <view>证书申请</view>
      </view>

      <view class="shopCarColor" bind:tap="addBookShopcCar" wx:if="{{!isBuy}}">加入购物车</view>
      <view class="buyColor" bind:tap="buyBtn" wx:if="{{!isBuy}}">立即购买</view>





    </view>








    <t-toast id="t-toast" />







  </view>


</scroll-view>


<!-- å¼¹çª— -->
<view wx:if="{{dialogBox}}">
  <view class="popup-box" bindtap="closeDialog"></view>
  <view class="info-center" style="top:{{height*0.4}}px;">


    <view>
      <view class="row-info">
        <view class="body">
          <view class="dialog-title">学习证书申请</view>
          <view style="width: 100%; height: 2rpx; background-color: #F4F4F4;"></view>
          <view class="input-box">
            <t-input style="{{inputStyle}}" class="input" placeholder="请输入真实姓名" value="{{input}}" bind:change="inputChange"></t-input>
          </view>
        </view>
        <view class="row-btn">
          <view class="left-btn" bindtap="closeDialog">取消</view>
          <view class="right-btn" bindtap="confirmM">确认</view>
        </view>
      </view>
    </view>


  </view>
</view>

 pages/digitalCourses/digitalCoursesDetails/index.wxss

@@ -1 +1,325 @@
/* pages/digitalCourses/digitalCoursesDetails/index.wxss */
@import "./index.skeleton.wxss";

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

.digitalCoursesDetailsTitle {
  background: #FFFFFF;
  /* box-shadow: 0rpx 9rpx 18rpx 2rpx rgba(0, 0, 0, 0.08); */
  border-radius: 0 0 20rpx 20rpx;
  padding: 30rpx;
  position: relative;
}

.imageBox {
  width: 690rpx;
  height: 400rpx;
}

.nameBox {
  font-weight: 800;
  font-size: 33rpx;
  color: #000000;
  margin: 30rpx 0;
}


.styleCssBox {
  display: flex;
  font-weight: 400;
  font-size: 25rpx;
  color: #333333;
  margin: 30rpx 0;
}

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

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

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

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

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

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

.tabBox {
  background-color: #fff;
  border-radius: 18rpx 18rpx 0rpx 0rpx;
}

.t-tabs__item-inner {
  flex-direction: column;

}

.t-tabs__track {
  /* bottom: -20rpx !important; */
}

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

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

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

.lecturer {
  padding: 30rpx;
  display: flex;
  margin-bottom: 170rpx;
}


.lecturerImangBox {
  width: 140rpx;
  height: 180rpx;
  border: 2rpx solid #ccc;
}

.lecturerInformation {
  width: 518rpx;
  height: 143rpx;
  margin-left: 30rpx;
}

.lecturerName {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.lecturerContent {
  font-weight: 400;
  font-size: 25rpx;
  color: #333333;
  line-height: 35rpx;
}

.outsideContentBox {
  height: calc(100vh - 120rpx);
}

.box-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  margin-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: row;
  background-color: #ccc;
}

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

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

.application {
  width: 351rpx;
  /* height: 100rpx; */
  background: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 2rpx solid #eee;
  font-weight: 400;
  font-size: 22rpx;
  color: #010101;
}

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


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

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

.custom-panel {
  min-height: 400px;

}




.wrapper {
  margin-bottom: 32rpx;
}

.placeholder {
  color: var(--td-text-color-placeholder);
  line-height: 96rpx;
  height: 96rpx !important;
  display: flex;
  align-items: center;
}

.dialog-input {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  margin-top: 32rpx;
  border-radius: 8rpx;
  background-color: var(--td-bg-color-page);
  box-sizing: border-box;
}

/* è’™å±‚ */
.popup-box {
  position: absolute;
  z-index: 99;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
}

.info-center {
  position: fixed;
  top: 32%;
  z-index: 999;
  background-color: white;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

.row-info .body {
  min-height: 300rpx;
}

.dialog-title {
  padding: 20rpx 0;
  text-align: center;
  font-weight: bold;
  font-size: 29rpx;
  color: #333333;
}

.input-box {
  padding: 0 20rpx;
  width: 92%;
  margin-bottom: 16rpx;
  margin-top: 60rpx;
}

.row-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1rpx solid #f1f1f1;
}

.row-btn view {
  flex: 1;
  text-align: center;
  margin: 20rpx 10%;
  padding: 12rpx 0;
  font-size: 32rpx;
  border-radius: 10rpx;
}

.left-btn {
  background-color: #f1f1f1;
  color: #5C5C5C;
}

.right-btn {
  background-color: #ff6c00;
  color: white;
}

.input {
  --td-input-border-radius: 20rpx;
  border-radius: 20rpx;
  border: 2rpx solid #ccc;
}

.t-input {
  background-color: var(--td-input-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  display: flex;
  align-items: center;
  flex: 1;
  padding: var(--td-input-vertical-padding, 22rpx) !important;
}

 pages/digitalCourses/index.wxss

@@ -138,7 +138,7 @@
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 15rpx;
  padding: 0 25rpx;
  margin-top: 40rpx;
}


 static/images/digitalCourses/back@2x(1).png

 static/images/digitalCourses/back@2x(2).png

 static/images/digitalCourses/back@2x(3).png

 static/images/digitalCourses/back@2x(4).png

 static/images/digitalCourses/back@2x(5).png

 static/images/digitalCourses/back@2x.png

 static/images/digitalCourses/biji£¯icon@2x.png

 static/images/digitalCourses/buy@2x.png

 static/images/digitalCourses/jiaoxueziyuan.png

 static/images/digitalCourses/jiaoxueziyuan@2x.png

 static/images/digitalCourses/jibenxinxi @2x.png

 static/images/digitalCourses/jibenxinxi-t@2x.png

 static/images/digitalCourses/link@2x.png

 static/images/digitalCourses/shidu@2x.png

 static/images/digitalCourses/shikan@2x.png

 static/images/digitalCourses/shuzijiaocai@2x.png

 static/images/digitalCourses/square@2x.png

 static/images/digitalCourses/tiwen-click@2x.png

 static/images/digitalCourses/tiwen@2x.png

 static/images/digitalCourses/zhengshushenqing@2x.png

 static/images/digitalCourses/zuozhejianjie@2x(1).png

 static/images/digitalCourses/zuozhejianjie@2x.png