front/src/views/videocourse/VideoDetail.vue

<template>
  <div class="video_detail_contianer">
    <el-container>
      <el-aside width="284px">
        <div class="aside_header">
          <span>CONTACT</span>
          <span>章节目录</span>
        </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">
            <p  class="custom-tree-node text-ellipsis" :title="node.label" slot-scope="{node, data}">
              <span :title="node.label">{{ node.label }}</span>
            </p>
          </el-tree>
        </div>
      </el-aside>
      <el-main>
        <div class="video_wrap">
          <div class="videoplay">
            <div class="video">
              <mx-video :aliIdType="aliIdType" :src="section_aliId"></mx-video>
            </div>
          </div>
          <div class="text">
            <span class="info_active">课程概要</span>
          </div>
        </div>
        <!-- 视频 信息 -->
        <div class="video_info">
          <!-- 课程概要 -->
          <div class="summary">
            <div class="summary_tit">
              {{ videoInfo.title }}
            </div>
            <div class="vis_totle">
              <img src="@/assets/images/icon_eye.png" alt="" />
              <span>-人已观看</span>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import aliplayer from "./compoent/aliplayer";
import {
  videoInfo,
  getVideoPlayAuth
} from "@/api/webApi/webVideo";
export default {
  components: {
    aliplayer,
  },
  data() {
    return {
      packId: "",
      videoList: [],
      defaultProps: {
        children: "children",
        label: "section_name",
      },
      aliIdType: '',
      section_aliId: "", // 默认的视频aliId
      expandId: [], // 默认展开的节点id
      childrenId: [], // 默认选中的节点id
      checkNode: {}, //选中的节点
      videoUrl: "",
      videoInfo: {},
    };
  },
  created() {
    this.packId = this.$route.query.packId;
    this.aliIdType = this.$route.query.aliIdType;
    this.section_aliId = this.$route.query.section_aliId;
    this.expandId.push(this.$route.query.chapter_id);
    this.childrenId.push(this.$route.query.childrenId);
    this.getVideos();
  },
  methods: {
    getVideos() {
      videoInfo({
        packId: this.packId
      }).then((res) => {
        console.log(res.rows);
        let arr = res.rows.map((item, index) => {
          if (item.chapter_name) {
            item.section_name = item.chapter_name;
            delete item.chapter_name;
          }
          if (item.chapter_id) {
            item.id = item.chapter_id;
            delete item.chapter_id;
          }
          item.children.map((child, childIndex) => {
            child.section_name = `${index + 1}-${childIndex + 1} ${child.section_name
              } `;
          });
          return item;
        });
        console.log(arr);
        this.videoList = res.rows;
        this.$nextTick(function () {
          this.$refs.treeBox.setCurrentKey(this.childrenId[0]);
          this.checkNode = this.$refs.treeBox.getCheckedNodes();
        });
      });
    },
    treeNodeClick(data) {
      if (data.hasOwnProperty("children")) {
        return;
      }
      this.checkNode = data;
      this.aliIdType = data.aliIdType;
      this.section_aliId = data.section_aliId;
    },
  },
};
</script>

<style scoped>
.video_detail_contianer {
  padding: 20px;
  min-height: 100vh;
  background: #f7f7f7;
}

.el-main {
  padding: 7px 8px;
  background: #fff;
}

.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 {
  border-bottom: 10px solid #f7f7f7;
}

.video_wrap video {
  width: 100%;
  height: 566px;
}

.text {
  padding-left: 32px;
}

.text span {
  cursor: pointer;
  width: 64px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #343434;
  margin-right: 16px;
  position: relative;
  padding: 32px 0 25px 0;
  display: inline-block;
}

.video_info {
  width: 100%;
  height: 172px;
  background: #ffffff;
  border-radius: 4px;
  padding-top: 28px;
  padding-left: 32px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
}

.info_active::after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #47c6a2 transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.video_info {
  border-top: 4px solid #47c6a2;
  border-radius: 4px 4px 0px 0px;
}

.summary_tit {
  margin-bottom: 16px;
}

.vis_totle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.vis_totle img {
  margin-right: 6px;
}


.el-tree {
  overflow: scroll;
  height: 600px;
  scroll-margin: 20px;
  overflow-x: hidden;
}

::-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>
.video_detail_contianer ::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;
}



.video_detail_contianer ::v-deep .el-tree-node__expand-icon.expanded {
  content: "";
}

.video_detail_contianer ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 6px;
  /* position: absolute; */
  right: 16px;
}

.video_detail_contianer ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #47c6a2;
}
</style>