Merge branch 'master' of http://121.4.203.192:9000/mingxue/front

src/components/MxVideo/index.vue

@@ -138,6 +138,7 @@ export default {
       if (this.recordCommitted) return // 已提交
       if (!this.recordPercent) return // 无效数据
       if (this.recordPercent < 2) return // <3%播放太短，也不记，防止过度触发提交
+      if(!this.aliIdType) return
       saveWatchRecord(
         id,
         this.recordDuration,

src/views/questioncenter/operationVideo.vue

@@ -1,6 +1,34 @@
 <template>
-  <div class="app-container">
-
+  <div class="app-container back">
+    <el-container>
+      <el-aside width="284px" style="height: 100vh;">
+        <div class="aside_header">
+          <span>CONTACT</span>
+          <span>章节目录</span>
+        </div>
+        <div class="aside_content">
+          <el-tree ref="treeBox" :data="tree" :props="defaultProps" :default-expanded-keys="expandId" node-key="id"
+                   :default-checked-keys="childrenId" :highlight-current="true" @node-click="treeNodeClick"
+          >
+            <p class="custom-tree-node" :title="node.label" slot-scope="{node, data}">
+              <span class="text-ellipsis" :title="node.label">{{ node.label }}</span>
+            </p>
+          </el-tree>
+        </div>
+      </el-aside>
+      <el-main style="background: #fff">
+        <div class="video_wrap">
+          <div class="videoplay" >
+            <div class="video"v-if="aliId">
+              <mx-video :aliIdType="aliIdType" :src="aliId"></mx-video>
+            </div>
+            <div v-else>
+              暂无视频
+            </div>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
   </div>
 </template>
 
@@ -10,25 +38,137 @@
 import MxCondition from '@/components/MxCondition/mx-condition'
 import { getOperationManual } from '@/api/webApi/webVideo'
 
-
 export default {
   components: { MxCondition },
   data() {
     return {
-
+      tree: [],
+      aliIdType: '',
+      aliId: "", // 默认的视频aliId
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      expandId: [],
+      childrenId: [],
+      checkNode: [],
+      nameType:''
     }
   },
   created() {
+    const subPaths = this.$route.path.split("/");
+    const lastSubPath = subPaths[subPaths.length - 1]
+    const nameType = lastSubPath.split("_")[lastSubPath.split("_").length - 1]
+    this.nameType= nameType
     this.getOperationManual()
   },
   methods: {
-    getOperationManual(){
+    getOperationManual() {
       getOperationManual({
-        nameType:1
+        nameType: this.nameType
       }).then(res => {
-        conole.log(res)
+        this.tree = res.data
+         this.aliId = res.data[0].children[0].aliId // 默认的视频aliId
+        this.expandId.push(res.data[0].id)
+        this.childrenId.push(res.data[0].children[0].id)
+        this.$nextTick(function() {
+          this.$refs.treeBox.setCurrentKey(this.childrenId[0])
+          this.checkNode = this.$refs.treeBox.getCheckedNodes()
+        })
       })
+    },
+    treeNodeClick(item) {
+      console.log(item)
+      if (item.hasOwnProperty("children") && item.children.length) {
+        return;
+      }
+      console.log(item)
+      this.checkNode = item;
+      this.aliId = item.aliId;
     }
-  },
- }
+  }
+}
 </script>
+<style scoped>
+.back{
+  padding: 20px;
+  min-height: 100vh;
+  background: #f7f7f7;
+}
+.aside_header {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 24px 16px 0 16px;
+  margin-bottom: 16px;
+}
+
+.el-aside {
+  background: white;
+  padding: 0;
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.aside_header span {
+  margin-top: 5px;
+  width: 84px;
+  height: 22px;
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 22px;
+}
+
+.aside_header span:first-child {
+  width: 173px;
+  height: 27px;
+  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
+  opacity: 0.5;
+}
+
+
+.video_wrap video {
+  width: 100%;
+  height: 566px;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
+  background-color: rgb(238, 241, 245);
+}
+</style>
+<style lang="scss" scoped>
+ ::v-deep .el-tree-node__content {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  height: 32px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #343434;
+  line-height: 20px;
+}
+
+
+
+ ::v-deep .el-tree-node__expand-icon.expanded {
+  content: "";
+}
+
+ ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 6px;
+  /* position: absolute; */
+  right: 16px;
+}
+
+ ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  color: #47c6a2;
+}
+</style>

src/views/videocourse/VideoDetail.vue

@@ -8,9 +8,6 @@
         </div>
         <div class="aside_content">
           <el-tree ref="treeBox" :data="videoList" :props="defaultProps" :default-expanded-keys="expandId" node-key="id" :default-checked-keys="childrenId" :highlight-current="true" @node-click="treeNodeClick">
-<!--             <span class="custom-tree-node" slot-scope="{ node, data }">-->
-<!--                <span class="text-ellipsis" :title="node.label">{{ node.label }}</span>-->
-<!--              </span>-->
             <p  class="custom-tree-node" :title="node.label" slot-scope="{node, data}">
               <span class="text-ellipsis" :title="node.label">{{ node.label }}</span>
             </p>
@@ -25,55 +22,21 @@
             </div>
           </div>
           <div class="text">
-            <span :class="infoActive == 1 ? 'info_active' : ''" @click="infoActive = 1">课程概要</span>
-            <!-- <span :class="infoActive == 2 ? 'info_active' : ''" @click="infoActive = 2">课时介绍</span> -->
-            <!-- <span :class="infoActive == 3 ? 'info_active' : ''" @click="infoActive = 3">主要讲师</span> -->
+            <span class="info_active">课程概要</span>
           </div>
         </div>
         <!-- 视频 信息 -->
         <div class="video_info">
           <!-- 课程概要 -->
-          <div class="summary" v-show="infoActive == 1">
+          <div class="summary">
             <div class="summary_tit">
               {{ videoInfo.title }}
             </div>
             <div class="vis_totle">
               <img src="@/assets/images/icon_eye.png" alt="" />
-              <span>1885人已观看</span>
+              <span>-人已观看</span>
             </div>
           </div>
-          <!-- 课时介绍 -->
-          <div class="introduce" v-show="infoActive == 2">
-            <div class="introduce_tit">散文阅读之显性内容</div>
-            <div class="introduce_con">
-              各龙地却意制心收北叫示系者受志术叫叫该名光前劳基外通任体给温律太术社维问住角金议计数原科压么广速会好真商太数再还话种受王样率人为很反现严号约正生。写越花机还件口原受术标心需场象设开族着半风角不代运斯党派看回量类林集天学山员连地准真王几联。走海号音节身外期先管新直验美信所千料状到南民状西又统达交通无因指再五条给商今计生线斯至流还类业法认。
-            </div>
-          </div>
-          <!-- 主要讲师 -->
-          <div class="teacher" v-show="infoActive == 3">
-            <el-col :span="5">
-              <div class="teacher_info">
-                <img src="@/assets/images/teacher_avatar.png" alt="" />
-                <span style="font-weight: 600; color: #343434; margin: 6px 0">Andre Long</span>
-                <span>哈佛大学精英讲师</span>
-              </div>
-            </el-col>
-            <el-col :span="14">
-              <div class="teacher_ach">
-                <div style="color: #ffa400; margin-bottom: 8px">教学成就</div>
-                <div class="teacher_ach_info">
-                  <div class="ach_item">“全球交科研先进个人”获得者</div>
-                  <div class="ach_item">“全球交科研先进个人”获得者</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                  <div class="ach_item">全球十大杰出精英讲师</div>
-                </div>
-              </div>
-            </el-col>
-          </div>
         </div>
       </el-main>
     </el-container>
@@ -92,7 +55,6 @@ export default {
   },
   data() {
     return {
-      infoActive: 1,
       packId: "",
       videoList: [],
       defaultProps: {
@@ -117,9 +79,6 @@ export default {
     this.getVideos();
   },
   methods: {
-    handle() {
-      console.log(111);
-    },
     getVideos() {
       videoInfo({
         packId: this.packId
@@ -277,46 +236,6 @@ export default {
   margin-right: 6px;
 }
 
-.introduce .introduce_tit {
-  height: 20px;
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 600;
-  color: #343434;
-  line-height: 20px;
-  margin-bottom: 12px;
-}
-
-.introduce_con {
-  height: 66px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #727272;
-  line-height: 22px;
-}
-
-.teacher_info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.teacher_ach_info {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.teacher_ach_info .ach_item {
-  margin-bottom: 4px;
-  flex: 50%;
-  height: 20px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #797979;
-  line-height: 20px;
-  font-size: 14px;
-}
 
 .el-tree {
   overflow: scroll;