添加讲师介绍组件

src/components/cme/item-intro.vue

@@ -36,7 +36,7 @@ export default {
                 this.btnText = '收起';
                 this.allTextFlag = true;
             }else {
-                this.newText = this.textContent.slice(0,69) + "...";;
+                this.newText = this.textContent.slice(0,69) + "...";
                 this.btnText = '详情';
                 this.allTextFlag = false;
             }

src/components/cme/teacter-intro.vue

+<template>
+    <div class="teacter-intro-container">
+        <div class="basic-title">讲师介绍</div>
+        <div class="leader-info">
+            <img src="../../images/video-cover.png"/>
+            <div class="leader-text">
+                <span>王荣英</span>
+                <span>主任医师 教授 硕士生导师</span>
+                <div class="address">河北医科大学第二医院</div>
+            </div>
+        </div>
+        <div class="leader-info">
+            <img src="../../images/video-cover.png"/>
+            <div class="leader-text">
+                <span>王荣英</span>
+                <span>主任医师 教授 硕士生导师</span>
+                <div class="address">河北医科大学第二医院</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+        
+    },
+    methods: {
+        
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.teacter-intro-container {
+    margin: px2rem(30px) px2rem(15px) 0px;
+    .basic-title {
+        font-size: px2rem(18px);
+        line-height: px2rem(18px);
+        color: #373839;
+        font-weight: 700;
+    }
+    .leader-info {
+        display: flex;
+        flex-direction: row;
+        margin-top: px2rem(16px);
+        padding-bottom: px2rem(16px);
+        img {
+            display: inline-block;
+            width: px2rem(44px);
+            height: px2rem(44px);
+            border-radius: 50%;
+        }
+        .leader-text {
+            margin-left: px2rem(16px);
+            span {
+                font-size: px2rem(16px);
+                color: #676869;
+            }
+            span:first-child {
+                font-size: px2rem(16px);
+                color: #373839;
+                font-weight: 700;
+            }
+            .address {
+                margin-top: px2rem(5px);
+                font-size: px2rem(13px);
+                color: #979899;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file

src/views/merge-detail.vue

@@ -26,18 +26,23 @@
       <CmeStep></CmeStep>
       <!-- 简介和目录 -->
       <div class="intro-catalogue-container">
-        <div class="title">
-          <span class="focus">简介</span>
-          <span>目录</span>
+        <div id="content-title" class="title" :class="{'fixed-title': fixedFlag}">
+          <span :class="{'focus': tabFlag}" @click="jumpIntro">简介</span>
+          <span :class="{'focus': !tabFlag}" @click="jumpCatalogue">目录</span>
         </div>
-        <div class="intro-content">
+        <div id="intro-content" class="intro-content">
           <BasicInfo></BasicInfo>
           <LearnKnow></LearnKnow>
           <CommonSpliteLine></CommonSpliteLine>
           <ItemIntro></ItemIntro>
           <ItemLeader></ItemLeader>
+          <TeacterIntro></TeacterIntro>
         </div>
-        <div class="catalogue-content">
+        <CommonSpliteLine></CommonSpliteLine>
+        <div id="catalogue-content" class="catalogue-content">
+          <div class="catalogue-title">目录</div>
+          <div class="catalogue-title">目录</div>
+          <div class="catalogue-title">目录</div>
           <CellListDetail  
           v-if="visibleFlag == 1" 
           :projectComponent="projectComponentDTOS" 
@@ -74,6 +79,7 @@ import BasicInfo from "@/components/cme/basic-info";
 import LearnKnow from "@/components/cme/learn-know";
 import ItemIntro from "@/components/cme/item-intro";
 import ItemLeader from "@/components/cme/item-leader";
+import TeacterIntro from "@/components/cme/teacter-intro";
 
 import { mapGetters, mapActions } from "vuex";
 import vueFilters from '@/utils/filter';
@@ -81,6 +87,8 @@ import vueFilters from '@/utils/filter';
 export default {
   data() {
     return {
+      tabFlag: true,
+      fixedFlag: false,
       from: "inner",
       isBlack: false,
       showLoading: false,
@@ -148,7 +156,8 @@ export default {
     BasicInfo,
     LearnKnow,
     ItemIntro,
-    ItemLeader
+    ItemLeader,
+    TeacterIntro
   },
   computed: {
     ...mapGetters(["userInfo"])
@@ -161,22 +170,13 @@ export default {
     this.moduleId = this.$route.query.moduleId;
     this.moduleName = this.$route.query.moduleName;
     this.courseRequire = this.$route.query.courseRequire;
-
-    // window.__refresh = function() {
-    //   console.log('created __refresh');
-    //   // _this.getContentList(_this.moduleId);
-    //   _this.getProjectParticularsV2();
-    // };
-
+    
     window.__getUserInfo64Comp = function(param) {
       // alert('__getUserInfo64Comp');
       // console.log('__getUserInfo64Comp');
       _this.token = param.userToken;
       _this.setUserInfo(param);
       _this.checkToken();
-      // _this.getContentList(_this.moduleId);
-      // _this.getComponentInfoById(_this.componentId);
-      _this.getCoopNoticeInfo()
       _this.getProjectParticularsV2();
     };
     _this.getUserInfo();
@@ -207,6 +207,26 @@ export default {
         __funcName: "__getUserInfo64Comp"
       });
     },
+    // 锚点到简介
+    jumpIntro() {
+      this.tabFlag = true;
+      this.fixedFlag = true;
+      const intro = document.getElementById('intro-content');
+      const h = intro.offsetTop - 120;
+      window.scrollTo(0, h);
+      this.isBlack = true;
+      this.bgColor = "#fff";
+    },
+    // 锚点到目录
+    jumpCatalogue() {
+      this.tabFlag = false;
+      this.fixedFlag = true;
+      const catalogue = document.getElementById('catalogue-content');
+      const h = catalogue.offsetTop;
+      window.scrollTo(0, h);
+      this.isBlack = true;
+      this.bgColor = "#fff";
+    },
     // 获取单个模块信息
     getComponentInfoById(componentId) {
       let _this = this;
@@ -347,9 +367,9 @@ export default {
     getProjectParticularsV2() {
       let _this = this;
       let param = {
-        token: _this.userInfo.userToken,
+        token: _this.userInfo.userToken || 'AAA613F74B7A4746AEE8354458FF4896',
         setEntry: true,
-        portalProjectId: _this.projectId,
+        portalProjectId: _this.projectId || 164,
       };
       _this.showLoading = true;
       this.NEW_GET("portal/portalApp/queryProjectParticularsV2", param).then(res => {
@@ -378,8 +398,9 @@ export default {
       });
     },
     scrollFun() {
-      let scrollTop =
-        document.body.scrollTop || document.documentElement.scrollTop;
+      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const catalogue = document.getElementById('catalogue-content');
+      const h = catalogue.offsetTop - 600;
       if (scrollTop > 20) {
         this.isBlack = true;
         this.bgColor = "#fff";
@@ -387,46 +408,27 @@ export default {
         this.isBlack = false;
         this.bgColor = "none";
       }
-    },
-    clickNotice() {
-      this.isShowNotice = false
-    },    
-    clickNoticeItem() {
-      this.isShowNotice = true
+      if(scrollTop > 300) {
+        this.fixedFlag = true;
+      }else {
+        this.fixedFlag = false;
+      }
+      if(scrollTop > h) {
+        this.tabFlag = false;
+      }else {
+        this.tabFlag = true;
+      }
     },
     
-    // 获取单个项目公告信息
-    getCoopNoticeInfo() {
-      let _this = this;
-      let param = {
-        projectId: _this.projectId,
-        token: _this.userInfo.userToken,
-        setEntry: true
-      };
-
-      this.GET("portal/portalApp/getNotice", param).then(res => {
-        if (res.code == "000000") {
-          let cData = res.data
-          // if(cData.noticeId) {
-          if(cData.noticeId) {
-            this.noticeData = cData;
-            this.isShowNoticeItem = true;
-            if(cData.readFlag == 2) {
-              this.isShowNotice = true;
-            }
-          }
-        }
-      });
-    },
   }
 };
 </script>
-<style lang="scss" >
+<style lang="scss" scoped>
 @import "../style/mixin";
 .page-container-merge {
   .nav-top .nav-title {
     height: px2rem(0px);
-    padding: px2rem(18px);
+    // padding: px2rem(18px);
   }
   .banner-img {
     display: inherit;
@@ -484,6 +486,23 @@ export default {
         left: px2rem(7px);
       }
     }
+    .title.fixed-title {
+      position: fixed;
+      left: 0;
+      top: px2rem(60px);
+      background: #fff;
+      width: 100%;
+      z-index: 999;
+    }
+    .catalogue-content {
+      padding: px2rem(30px) px2rem(15px) 0;
+      .catalogue-title {
+        font-size: px2rem(18px);
+        color: #373839;
+        font-weight: 700;
+        margin-bottom: px2rem(16px);
+      }
+    }
   }
 }
 </style>