bridging video module

.env.development

@@ -3,8 +3,8 @@ ENV = 'development'
 
 # 名学金榜学习系统/生产环境
 #VUE_APP_BASE_API = 'https://www.mingxuejinbang.com/prod-api'
-#VUE_APP_BASE_API = 'http://192.168.0.106:1024/prod-api'
-VUE_APP_BASE_API = 'https://front.mingxuejinbang.com/prod-api'
+VUE_APP_BASE_API = 'http://localhost:8080'
+#VUE_APP_BASE_API = 'https://front.mingxuejinbang.com/prod-api'
 
 VUE_APP_MOBILE = "https://h5.mingxuejinbang.com"
 

src/api/webApi/bridging-video.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 高考视频
+export function gkVideo(params) {
+  return request({
+    url: '/front/bridgingVideo/list',
+    method: 'get',
+    params: params
+  })
+}
+
+// 高考视频
+export function gkVideoNoToken(params) {
+  return request({
+    url: '/front/bridgingVideo/listNoToken',
+    method: 'get',
+    withoutToken: true,
+    params: params
+  })
+}
+
+//  保存点击数
+export function saveClicked(params) {
+  return request({
+    url: '/front/bridgingVideo/saveClicked',
+    method: 'get',
+    params: params
+  })
+}
+
+export function subTypes(params) {
+  return request({
+    url: '/front/bridgingVideo/subTypes',
+    method: 'get',
+    params: params
+  })
+}

src/views/career/plan/detail.vue

@@ -42,7 +42,7 @@
 
 <script>
 import { videoInfo, getVideoPlayAuth } from "@/api/webApi/webVideo";
-import aliplayer from "../../videocourse/compoent/aliplayer.vue";
+import aliplayer from "../../videocourse/components/aliplayer.vue";
 import transferMixin from '@/components/mx-transfer-mixin'
 
 export default {

src/views/videocourse/BridgingVideo.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-container v-loading="loading" style="min-height: 100vh">
+    <el-header class="bridging-header">
+      <el-steps :active="current" simple>
+        <el-step v-for="(t,idx) in subTypes" :key="t.value" :title="t.label" @click.native="changeStep(idx)"></el-step>
+      </el-steps>
+    </el-header>
+    <tree-video-layout :video-list="list" :default-props="treeProps"></tree-video-layout>
+  </el-container>
+</template>
+
+<script>
+
+import {gkVideo, subTypes} from "@/api/webApi/bridging-video";
+import TreeVideoLayout from "@/views/videocourse/components/TreeVideoLayout.vue";
+
+export default {
+  name: "BridgingVideo",
+  components: {TreeVideoLayout},
+  data() {
+    return {
+      loading: false,
+      type: '衔接课程',
+      subTypes: [],
+      current: 0,
+      list: [],
+      container: {},
+      treeProps: {
+        children: 'children',
+        label: 'title'
+      }
+    }
+  },
+  computed: {
+    currentSubType() {
+      return this.subTypes[this.current].value
+    }
+  },
+  mounted() {
+    this.getSubTypes()
+  },
+  methods: {
+    async getSubTypes() {
+      this.loading = true
+      try {
+        const res = await subTypes({type: this.type})
+        this.subTypes = res.rows
+        await this.getVideoList()
+      } finally {
+        this.loading = false
+      }
+    },
+    async changeStep(index) {
+      if (index != this.current) {
+        this.current = index
+        try {
+          await this.getVideoList()
+        } finally {
+          this.loading = false
+        }
+      }
+    },
+    async getVideoList() {
+      // using cache first
+      const cache = this.container[this.currentSubType]
+      if (cache) {
+        this.list = cache
+        return
+      }
+      // load the video list
+      this.loading = true
+      const res = await gkVideo({type: this.type, subType: this.currentSubType, pageNum: 1, pageSize: 100})
+      this.list = res.rows
+      this.container[this.currentSubType] = this.list
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.bridging-header {
+  padding: 0;
+
+  .el-steps--simple {
+    padding: 20px 30px;
+  }
+
+  .el-step.is-simple .el-step__head {
+    display: none;
+  }
+
+  .el-step.is-simple .el-step__title {
+    font-size: 16px;
+    word-break: keep-all;
+    cursor: pointer;
+  }
+}
+</style>

src/views/videocourse/VideoDetail.vue

@@ -8,7 +8,7 @@
         </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}">
+            <p class="custom-tree-node text-ellipsis" :title="node.label" slot-scope="{node, data}">
               <span :title="node.label">{{ node.label }}</span>
             </p>
           </el-tree>
@@ -44,15 +44,10 @@
 </template>
 
 <script>
-import aliplayer from "./compoent/aliplayer";
 import {
-  videoInfo,
-  getVideoPlayAuth
+  videoInfo
 } from "@/api/webApi/webVideo";
 export default {
-  components: {
-    aliplayer,
-  },
   data() {
     return {
       packId: "",
@@ -94,8 +89,7 @@ export default {
             delete item.chapter_id;
           }
           item.children.map((child, childIndex) => {
-            child.section_name = `${index + 1}-${childIndex + 1} ${child.section_name
-              } `;
+            child.section_name = `${index + 1}-${childIndex + 1} ${child.section_name} `;
           });
           return item;
         });

src/views/videocourse/components/TreeVideoLayout.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="tree-video-layout">
+    <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" node-key="id" :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="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">
+
+            </div>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TreeVideoLayout",
+  props: {
+    videoList: {
+      type: Array,
+      default: () => []
+    },
+    defaultProps: {
+      type: Object,
+      default: () => ({
+        children: "children",
+        label: "section_name"
+      })
+    }
+  },
+  data() {
+    return {
+      aliId: '',
+      aliIdType: '',
+      videoInfo: {}
+    }
+  },
+  watch: {
+    videoList: async function () {
+      await this.$nextTick()
+      const demo = this.videoList.first()
+      if (demo) {
+        this.$refs.treeBox.setCurrentNode(demo)
+        this.treeNodeClick(demo)
+      }
+    }
+  },
+  methods: {
+    treeNodeClick(data) {
+      if (data.hasOwnProperty("children")) {
+        return;
+      }
+      this.checkNode = data;
+      this.aliIdType = data.aliIdType;
+      this.aliId = data.aliId;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-video-layout {
+  padding: 0 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>
+.tree-video-layout ::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;
+}
+
+
+.tree-video-layout ::v-deep .el-tree-node__expand-icon.expanded {
+  content: "";
+}
+
+.tree-video-layout ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 6px;
+  /* position: absolute; */
+  right: 16px;
+}
+
+.tree-video-layout ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  color: #47c6a2;
+}
+</style>