录播音频课审核

src/components/AudioLine.vue

@@ -0,0 +1,434 @@
+<template>
+  <div :class="['Audio']">
+    <div class="audioLine" :class="[]">
+      <div
+        class="play"
+        :class="[
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+        ]"
+        @click="PlayAudio"
+      >
+        <i class="el-icon-loading" v-if="audio.loading"></i>
+        <a class="active" v-if="audio.playing&&!audio.loading"><svg-icon icon-class="pause" className="icon-svg"></svg-icon></a>
+        <a v-if="!audio.playing&&!audio.loading"><svg-icon icon-class="play" className="icon-svg"></svg-icon></a>
+      </div>
+      <span class="time-box"
+        ><template v-if="audio.playing">-</template
+        >{{
+        audio.maxTime
+            ? realFormatSecond(audio.maxTime - audio.currentTime)
+            : ""
+        }}</span
+      >
+      <el-slider
+        v-model="playValue"
+        :style="{ width: sliderWidth + 'px', height: '2px' }"
+        :format-tooltip="formatProcessToolTip"
+        @change="changeCurrentTime"
+      />
+      <el-dropdown
+        trigger="hover"
+        placement="top"
+        szie="mini"
+        @command="handleSpeed"
+      >
+        <span class="el-dropdown-link">
+            <span style="color: #2F3742; cursor: pointer; width: 35px; display:block; text-align: center;">{{playbackRateValue}}</span>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="i" v-for="i in 5" :key="i" 
+                >{{ i * 0.5 }}</el-dropdown-item
+            >
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-dropdown trigger="click" placement="top" szie="mini">
+        <span class="el-dropdown-link">
+            <svg-icon icon-class="voice" className="icon-voice"></svg-icon>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+            <el-slider
+                v-model="sound"
+                @input="changeSound"
+                vertical
+                height="100px"
+            >
+            </el-slider>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <svg-icon icon-class="repeat" :class="['icon-repeat',isRepeat?'active':'']" @click="changeRepeat"></svg-icon>
+    </div>
+    <audio
+      :id="audioId"
+      :ref="audioId"
+      :src="mp3"
+      preload="metadata"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      @canplaythrough="oncanplaythrough"
+    />
+  </div>
+</template>
+
+<script>
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》from ‘《组件路径》';
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: [
+    "mp3",
+    "width",
+    "audioId",
+    "getCurTime"
+  ],
+  data() {
+    // 这里存放数据
+    return {
+      playValue: 0,
+      audio: {
+        // 该字段是音频是否处于播放状态的属性
+        playing: false,
+        // 音频当前播放时长
+        currentTime: 0,
+        // 音频最大播放时长
+        maxTime: 0,
+        isPlaying: false,
+        loading: false,
+        playbackRate: 1,
+        volume: 100
+      },
+      audioAllTime: null, // 展示总时间
+      duioCurrentTime: null, // 剩余时间
+      count: 0,
+      loading: null,
+      isClick: false,
+      playbackRateValue: '1x',
+      sound: 100,
+      isRepeat: false
+    };
+  },
+  // 计算属性 类似于data概念
+  computed: {
+    sliderWidth() {
+      let width = 0;
+      if (this.width) {
+        width = this.width;
+      } else {
+        width = 839;
+      }
+      return width;
+    },
+  },
+  // 监控data中数据变化
+  watch: {
+    stopAudio: {
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+          _this.$refs[_this.audioId].pause();
+          _this.audio.playing = false;
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+        if (val) this.$emit("handleChangeStopAudio");
+      },
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    let audioId = _this.audioId;
+    _this.$refs[audioId].addEventListener("loadstart", function () {});
+    _this.$refs[audioId].addEventListener("play", function () {
+      _this.audio.playing = true;
+      _this.audio.isPlaying = true;
+      _this.audio.loading = false;
+    });
+    _this.$refs[audioId].addEventListener("pause", function () {
+      _this.audio.playing = false;
+      _this.$emit("handleListenRead", false);
+    });
+    _this.$refs[audioId].addEventListener("ended", function () {
+      _this.audio.playing = false;
+      _this.audio.isPlaying = false;
+      _this.$emit("handleListenRead", false);
+      _this.isClick = false;
+    });
+
+    this.$nextTick(() => {
+      document
+        .getElementsByClassName("el-slider__button-wrapper")[0]
+        .addEventListener("mousedown", function () {
+          _this.$refs[audioId].pause();
+          _this.audio.playing = false;
+        });
+    });
+  },
+  // 生命周期-挂载之前
+  beforeMount() {},
+  // 生命周期-更新之后
+  updated() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+  // 方法集合
+  methods: {
+    PlayAudio() {
+      let audioId = this.audioId;
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        if (item.src == this.mp3) {
+            if (item.id !== audioId) {
+                item.pause();
+            }
+            } else {
+            item.pause();
+        }
+      });
+      let video = document.getElementsByTagName("video");
+      video.forEach((vItem) => {
+        vItem.pause();
+      });
+      if (this.audio.playing) {
+        this.$refs[audioId].pause();
+        this.audio.playing = false;
+        this.$emit("handleListenRead", false);
+        this.isClick = false;
+      } else {
+        if (this.count == 0) {
+          this.audio.loading = true;
+          this.count++;
+        }
+        this.$refs[audioId].play();
+        this.$emit("handleChangeStopAudio");
+        this.$emit("handleListenRead", true);
+        this.isClick = true;
+      }
+    },
+    oncanplaythrough() {
+      let _this = this;
+      // setTimeout(() => {
+      _this.audio.loading = false;
+
+      // }, 10000);
+    },
+    // 点击 拖拽播放音频
+    changeCurrentTime(value) {
+      let audioId = this.audioId;
+      this.$refs[audioId].play();
+      this.audio.playing = true;
+      this.$refs[audioId].currentTime = parseInt(
+        (value / 100) * this.audio.maxTime
+      );
+    },
+    mousedown() {
+      let audioId = this.audioId;
+      this.$refs[audioId].pause();
+      this.audio.playing = false;
+    },
+    // 进度条格式化toolTip
+    formatProcessToolTip(index) {
+      index = parseInt((this.audio.maxTime / 100) * index);
+      return this.realFormatSecond(index);
+    },
+    // 音频加载完之后
+    onLoadedmetadata(res) {
+      console.log(res.target.duration);
+      this.audio.maxTime = parseInt(res.target.duration);
+      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
+    },
+    // 当音频当前时间改变后，进度条也要改变
+    onTimeupdate(res) {
+      let audioId = this.audioId;
+      this.audio.currentTime = res.target.currentTime;
+      if(this.getCurTime){
+        this.getCurTime(res.target.currentTime);
+      }
+      if(this.isRepeat){
+        if(this.audio.currentTime>=this.audio.maxTime || this.audio.currentTime<=0){
+            this.onTimeupdateTime(0,true)
+        }
+      }
+      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
+    },
+    onTimeupdateTime(res, playFlag) {
+      if (!res&&res!=0) return;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
+      this.playValue = (res / this.audio.maxTime) * 100;
+      if (playFlag) {
+        let audio = document.getElementsByTagName("audio");
+        audio.forEach((item) => {
+            if (item.id !== audioId) {
+                item.pause();
+            }
+        });
+        this.$refs[audioId].play();
+      }
+    },
+    // 将整数转换成 时：分：秒的格式
+    realFormatSecond(value) {
+      let theTime = parseInt(value); // 秒
+      let theTime1 = 0; // 分
+      let theTime2 = 0; // 小时
+      if (theTime > 60) {
+        theTime1 = parseInt(theTime / 60);
+        theTime = parseInt(theTime % 60);
+        if (theTime1 > 60) {
+          theTime2 = parseInt(theTime1 / 60);
+          theTime1 = parseInt(theTime1 % 60);
+        }
+      }
+      let result = String(parseInt(theTime));
+      if (result < 10) {
+        result = "0" + result;
+      }
+      if (theTime1 > 0) {
+        result = String(parseInt(theTime1)) + ":" + result;
+        if (theTime1 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        result = "00:" + result;
+      }
+      if (theTime2 > 0) {
+        result = String(parseInt(theTime2)) + ":" + result;
+        if (theTime2 < 10) {
+          result = "0" + result;
+        }
+      } else {
+        // result = "00:" + result;
+      }
+      return result;
+    },
+    // 倍速按钮
+    handleSpeed(val) {
+      let audio = this.$refs[this.audioId];
+      audio.playbackRate = val * 0.5;
+      this.playbackRateValue = val * 0.5 + 'x'
+    },
+    // 改变音量
+    changeSound(val) {
+      let audio = this.$refs[this.audioId];
+      audio.volume = val / 100;
+    },
+    changeRepeat() {
+      let _this = this;
+      _this.isRepeat = !_this.isRepeat;
+    },
+  },
+  // 生命周期-创建之前
+  beforeCreated() {},
+  // 生命周期-更新之前
+  beforUpdate() {},
+  // 生命周期-销毁之前
+  beforeDestory() {},
+  // 生命周期-销毁完成
+  destoryed() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.Audio {
+  width: 100%;
+  .audioLine {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    .play {
+      cursor: pointer;
+      a{
+        width: 32px;
+        height: 32px;
+        display: block;
+        text-align: center;
+        background: #EEF3FF;
+        border-radius: 4px;
+        // &:hover,&.active{
+        //     background: #EEF3FF;
+        //     border-radius: 4px;
+        // }
+      }
+      .el-icon-loading,.icon-svg{
+        color: #175DFF;
+        width: 24px;
+        height: 24px;
+        margin-top: 4px;
+      }
+    }
+
+    .time-box {
+      font-size: 16px;
+      line-height: 24px;
+      color:#2F3742;
+      margin-right: 10px;
+      min-width: 66px;
+      text-align: right;
+    }
+  }
+  .icon-voice,.icon-repeat{
+    width: 24px;
+    height: 24px;
+    color: #175DFF;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .icon-repeat{
+    margin: 0 8px;
+    color: #D0D3D9;
+    &.active{
+        color: #175DFF;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.Audio {
+  .el-slider{
+    height: 20px !important;
+    margin-right: 8px;
+  }
+  .el-slider__bar {
+    height: 20px;
+    background: #175DFF;
+    border-radius: 20px;
+  }
+  .el-slider__button {
+    background: #175DFF;
+    border: none;
+  }
+  .el-slider__button-wrapper {
+    width: 25px;
+  }
+  .el-slider__button-wrapper {
+    position: relative;
+    z-index: 0;
+  }
+  .el-slider__button {
+    width: 16px;
+    height: 16px;
+    top: 17px;
+    position: absolute;
+    opacity: 0;
+  }
+  .el-slider__runway {
+    margin: 0;
+    padding: 0;
+    background: #e5e5e5;
+    border-radius: 20px;
+    height: 20px;
+  }
+  .el-slider {
+    position: relative;
+  }
+  .el-dropdown{
+    margin: 0 8px;
+  }
+}
+</style>

src/icons/svg/headset.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8.15383C1.5 4.49103 4.3983 1.5 8 1.5C11.6017 1.5 14.5 4.49103 14.5 8.15383V9.33071L14.5 9.33398V14.0007C14.5 14.2768 14.2762 14.5007 14 14.5007H12.6667C11.6542 14.5007 10.8333 13.6798 10.8333 12.6673V10.6673C10.8333 9.65481 11.6542 8.83398 12.6667 8.83398H13.5V8.15383C13.5 5.0193 11.0257 2.5 8 2.5C4.9743 2.5 2.5 5.0193 2.5 8.15383V8.83398H3.33333C4.34584 8.83398 5.16667 9.65481 5.16667 10.6673V12.6673C5.16667 13.6798 4.34584 14.5007 3.33333 14.5007H2C1.72386 14.5007 1.5 14.2768 1.5 14.0007V10V9.33398V8.15383ZM2.5 9.83398L2.5 10L2.5 13.5007H3.33333C3.79356 13.5007 4.16667 13.1275 4.16667 12.6673V10.6673C4.16667 10.2071 3.79356 9.83398 3.33333 9.83398H2.5ZM13.5 10V9.83398H12.6667C12.2065 9.83398 11.8333 10.2071 11.8333 10.6673V12.6673C11.8333 13.1275 12.2065 13.5007 12.6667 13.5007H13.5V10.0033L13.5 10Z" fill="currentColor"/>
+</svg>

src/icons/svg/repeat.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5306 2.96967C19.2377 2.67678 18.7628 2.67678 18.4699 2.96967C18.177 3.26256 18.177 3.73744 18.4699 4.03033L20.1896 5.75H8C4.28578 5.75 1.25 8.75901 1.25 12.5C1.25 16.2565 4.28735 19.25 8 19.25H15C17.466 19.25 19.6632 18.0974 21.0814 16.3045C21.6312 15.6095 22.0648 14.8172 22.3521 13.9574C22.484 13.5627 22.585 13.1538 22.6522 12.7338C22.7177 12.3248 22.4392 11.9401 22.0302 11.8747C21.6212 11.8092 21.2365 12.0877 21.1711 12.4967C21.1169 12.8351 21.0355 13.1644 20.9293 13.4821C20.6982 14.1741 20.3489 14.8128 19.9049 15.374C18.759 16.8227 16.988 17.75 15 17.75H8C5.10962 17.75 2.75 15.422 2.75 12.5C2.75 9.59119 5.11046 7.25 8 7.25H20.1896L18.4699 8.96967C18.177 9.26256 18.177 9.73744 18.4699 10.0303C18.7628 10.3232 19.2377 10.3232 19.5306 10.0303L22.5306 7.03033C22.8235 6.73744 22.8235 6.26256 22.5306 5.96967L19.5306 2.96967ZM12.2872 8.80691C12.1988 8.77024 12.1018 8.75 12.0001 8.75C11.8984 8.75 11.8015 8.77024 11.713 8.80691C11.6246 8.84351 11.5417 8.89776 11.4698 8.96967L9.21979 11.2197C8.9269 11.5126 8.9269 11.9874 9.21979 12.2803C9.51268 12.5732 9.98756 12.5732 10.2805 12.2803L11.2501 11.3107V15.5C11.2501 15.9142 11.5859 16.25 12.0001 16.25C12.4143 16.25 12.7501 15.9142 12.7501 15.5V9.5C12.7501 9.30806 12.6769 9.11612 12.5305 8.96967C12.4585 8.89776 12.3757 8.84351 12.2872 8.80691Z" fill="currentColor"/>
+</svg>

src/views/content_manage/course_manage/CheckLBCourse.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="check-course">
-    <div class="navBar" v-if="info">
+  <div class="check-course" v-if="info">
+    <div class="navBar">
         <div class="navBar-left">
             <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>课程详情</a>
             <div class="border"></div>
@@ -11,7 +11,12 @@
             <el-button @click="handleCheck('false')" type="danger" size="small" plain>驳回</el-button>
         </div>
     </div>
-    <h1 style="padding: 300px 0; text-align:center">还没有详情接口，有接口后补充页面信息</h1>
+    <template v-if="type==='0'">
+        <video-detail :lessonCatalog="lessonCatalog" :data="info"></video-detail>
+    </template>
+    <template v-if="type==='1'">
+        <course-detail :lessonCatalog="lessonCatalog" :data="info" type='audio'></course-detail>
+    </template>
   </div>
 </template>
 
@@ -19,10 +24,12 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/ajax";
+import VideoDetail from "./videoDetail.vue"
+import CourseDetail from "./courseDetail.vue"
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: {VideoDetail,CourseDetail},
   props: {},
   filters:{
     
@@ -32,6 +39,8 @@ export default {
     return {
         info: null,
         id: this.$route.query.id?this.$route.query.id:'',
+        type: this.$route.query.type?this.$route.query.type:'',
+        lessonCatalog: []
     }
   },
   //计算属性 类似于data概念
@@ -65,6 +74,27 @@ export default {
         .then((res) => {
             if(res.status===1){
                 this.info = res.lb_course
+                this.lessonCatalog = res.cs_item_list
+                this.lessonCatalog.forEach(item => {
+                    if(item.file_media_duration){
+                        if(item.file_media_duration<60){
+                            item.timeCn = '1分钟'
+                        }else if(item.file_media_duration<600){
+                            item.timeCn = Math.ceil(item.file_media_duration/60)+'分钟'
+                        }else{
+                            let first = Math.ceil(item.file_media_duration/60).toString().substring(0,Math.ceil(item.file_media_duration/60).toString().length-1)*1
+                            let last = Math.ceil(item.file_media_duration/60).toString().substring(Math.ceil(item.file_media_duration/60).toString().length-1)*1
+                            if(last<5){
+                                item.timeCn = first+'0分钟'
+                            }else{
+                                item.timeCn = (first+1)+'0分钟'
+                            }
+                            
+                        }
+                    }else{
+                        item.timeCn = '-'
+                    }
+                });
             }
         })
         .catch(() => {

src/views/content_manage/course_manage/RecordedCourse.vue

@@ -397,7 +397,8 @@ export default {
         this.$router.push({
             path: '/checkCourse',
             query: {
-                id: row.id
+                id: row.id,
+                type: row.type
             }
         })
         // let Mname = "/CourseServer/Manager/LBCourseManager/AuditLBCourse";

src/views/content_manage/course_manage/components/LessonCatalog.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="course-info" v-loading="loading">
+    <div class="course-info-top">
+        <p><span class="title">课节目录</span></p>
+        <div><a :class="[sort==='ASCE'?'active':'']" @click="handleChangeSort('ASCE')">正序</a><div class="border"></div><a :class="[sort==='DESC'?'active':'']" @click="handleChangeSort('DESC')">倒序</a></div>
+    </div>
+    <ul class="catalog">
+        <li v-for="(item,index) in list" :key="index" :class="[isBuy||index<2?'buy':'',playNumber===index?'active':'']" @click="handleChangeCourse(index)">
+            <span class="number">{{sort==='ASCE'?(index+1):(list.length-index) + '.'}}</span>
+            <div class="center">
+                <b class="title">{{item.name}}</b>
+                <span class="teacher">{{'主讲教师 '+item.teacher_name}}</span>
+                <span class="time-length">{{item.timeCn}}</span>
+            </div>
+            <i class="el-icon-caret-right" v-if="playNumber===index"></i>
+            <!-- <i class="el-icon-lock" v-if="!(isBuy||index<2)"></i> -->
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { getLogin } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { },
+  props: ["data", "isBuy","LoginNavIndex","userBg","headerBorder","headerBg"],
+  data() {
+    //这里存放数据
+    return {
+        sort: 'ASCE', // 排序
+        playNumber: 0, // 播放索引
+        list: this.data,
+        loading: false
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {
+
+  },
+  //方法集合
+  methods: {
+    // 切换排序
+    handleChangeSort(value){
+        this.sort = value
+        this.getInfos()
+    },
+    // 切换课程
+    handleChangeCourse(index){
+        this.playNumber = index
+        this.$emit("getInfo",index)
+    },
+    // 获取课程信息
+    getInfos(){
+        this.loading = true
+        let MethodName = "/CourseServer/Manager/LBCourseManager/GetLBCourseInfo";
+        let data = {
+            id: this.$route.query.id?this.$route.query.id:'',
+            is_contain_cs_item:'true',
+            cs_item_sort_mode: this.sort
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                this.playNumber = this.list.length-this.playNumber-1
+                this.list = res.cs_item_list
+                this.list.forEach(item => {
+                    if(item.file_media_duration){
+                        if(item.file_media_duration<60){
+                            item.timeCn = '1分钟'
+                        }else if(item.file_media_duration<600){
+                            item.timeCn = Math.ceil(item.file_media_duration/60)+'分钟'
+                        }else{
+                            let first = Math.ceil(item.file_media_duration/60).toString().substring(0,Math.ceil(item.file_media_duration/60).toString().length-1)*1
+                            let last = Math.ceil(item.file_media_duration/60).toString().substring(Math.ceil(item.file_media_duration/60).toString().length-1)*1
+                            if(last<5){
+                                item.timeCn = first+'0分钟'
+                            }else{
+                                item.timeCn = (first+1)+'0分钟'
+                            }
+                            
+                        }
+                    }else{
+                        item.timeCn = '-'
+                    }
+                });
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+ul{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.course-info{
+    &-top{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #F2F3F5;
+        padding-bottom: 8px;
+        >p{
+            margin: 0;
+            font-size: 16px;
+            line-height: 24px;
+            .title{
+                font-weight: 500;
+                color: #1F2C5C;
+                margin-right: 16px;
+            }
+            .length{
+                color: #929CA8;
+            }
+        }
+        >div{
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            color: #929CA8;
+            display: flex;
+            align-items: center;
+            .active{
+                color: #3459D2;
+            }
+            .border{
+                width: 1px;
+                height: 12px;
+                background: #929CA8;
+                margin: 3px 12px 0;
+            }
+        }
+    }
+    .catalog{
+        max-height: 540px;
+        overflow-y: auto;
+        &::-webkit-scrollbar{
+            display:none;
+        }
+        li{
+            margin-top: 8px;
+            background: #F7F8FA;
+            border-radius: 8px;
+            border: 1px solid #F7F8FA;
+            display: flex;
+            padding: 16px;
+            &.buy{
+                cursor: pointer;
+            }
+            &.active{
+                border-color: #0081F1;
+                background: #E7F3FF;
+                .center{
+                    .title{
+                        color: #0081F1;
+                    }
+                    .teacher,.time-length{
+                        color: rgba(0, 0, 0, 0.32);
+                    }
+                }
+            }
+            .el-icon-caret-right{
+                color: #0081F1;
+            }
+            .el-icon-lock{
+                color: #929CA8;
+            }
+            .el-icon-lock,.el-icon-caret-right{
+                margin-top: 4px;
+            }
+            .number{
+                width: 27px;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+                color: #2F3742;
+            }
+            .center{
+                flex: 1;
+                overflow: hidden;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 24px;
+                .title{
+                    display: block;
+                    color: #2F3742;
+                }
+                .teacher,.time-length{
+                    color: #929CA8;
+                    margin-right: 8px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/content_manage/course_manage/components/ResourcesList.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="resource-list">
+    <a class="package-download"><svg-icon icon-class="download" class="icon-download"></svg-icon>打包下载</a>
+    <ul class="resource-box">
+        <li :class="['item-'+type]" v-for="(item,index) in list" :key="index" :title="item.name">
+            <svg-icon :icon-class="item.type" class="icon-logo"></svg-icon>
+            <span>{{item.name}}</span>
+            <svg-icon icon-class="download" class="icon-download" @click="handleDownloadPic(item)"></svg-icon>
+        </li>
+    </ul>
+  </div>
+  
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { getLogin } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { },
+  props: ["data","type"],
+  data() {
+    //这里存放数据
+    return {
+        list: []
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {
+
+  },
+  //方法集合
+  methods: {
+    handleList(){
+        let list = JSON.parse(JSON.stringify(this.data))
+        list.forEach(item=>{
+            let index = item.file_name.lastIndexOf('.');
+            item.name = item.file_name
+            let type = item.file_name.substring(index + 1).toLowerCase()
+            item.type = this.handleJudgeType(type)
+            item.file_id = item.file_id
+        })
+        this.list = list
+    },
+    // 判断文件类型
+    handleJudgeType(type){
+        let finalType = ''
+        if(type==='wav'){
+            finalType = 'mp3'
+        }else if(type==='png'||type==='jpg'||type==='jpeg'){
+            finalType = 'jpg'
+        }else if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'){
+            finalType = 'mp4'
+        }else if(type==='rar'||type==='jar'||type==='arj'||type==='z'||type==='jar'){
+            finalType = 'zip'
+        }else if(type==='docx'){
+            finalType = 'doc'
+        }else if(type==='xls'){
+            finalType = 'xlsx'
+        }else if(type==='pptx'){
+            finalType = 'ppt'
+        }else{
+            finalType = type
+        }
+        return finalType
+    },
+    // 下载图片
+    handleDownloadPic(item){
+        // getLogin('/FileServer/GetFileInfo', {
+        //     file_id: item.file_id
+        // })
+        // .then((res) => {
+        //     if(res.status===1){
+        //         Axios({
+        //             method: 'get',
+        //             url: res.file_url,
+        //             responseType: 'blob'
+        //         }).then((res)=>{
+        //             let bloburl = window.URL.createObjectURL(res.data)
+        //             let link = document.createElement(a)
+        //             document.body.appendChild(link)
+        //             link.style.display = 'none'
+        //             link.href = bloburl
+        //             link.download = item.file_name
+        //             link.click()
+        //             document.body.removeChild(link)
+        //             window.URL.revokeObjectURL(bloburl)
+        //         })
+        //     }
+        // })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.handleList()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+ul{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.resource-list{
+    background: #F7F8FA;
+    border: 1px solid #F2F3F5;
+    border-radius: 4px;
+    padding: 40px;
+    margin-top: 16px;
+    li{
+        width: 358px;
+        background: #FFFFFF;
+        border-radius: 2px;
+        padding: 7px 12px;
+        margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        &.item-audio{
+            width: 230px;
+        }
+        .svg-icon{
+            width: 16px;
+            height: 16px;
+            color: #4E5969;
+        }
+        .icon-download{
+            cursor: pointer;
+            &:hover{
+                color: #165DFF;
+            }
+        }
+        span{
+            flex: 1;
+            margin: 0 16px;
+            color: #1D2129;
+            font-size: 14px;
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+.resource-box{
+    display: flex;
+    flex-flow: wrap;
+    justify-content: space-between;
+    margin-top: 24px;
+}
+.package-download{
+    font-size: 14px;
+    color: #000;
+    line-height: 22px; 
+    .svg-icon{
+        margin-right: 8px;
+    }
+}
+</style>

src/views/content_manage/course_manage/courseDetail.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="course-detail" v-if="info" v-loading="loading">
+    <div class="main">
+        <h2>{{data.name}}</h2>
+        <div class="main-top">
+            <svg-icon icon-class="headset" className="icon-headset"></svg-icon>
+            <span class="playsNumber">{{data.playsNumber}}</span>
+            <span class="progress">已更新{{data.cs_item_count_valid}}课时/共{{data.cs_item_count}}课时</span>
+        </div>
+        <div class="main-center">
+            <h1>{{(lessonIndex+1)+'. '+info.lb_course_cs_item.name}}</h1>
+            <p class="teacher">主讲教师 {{info.lb_course_cs_item.teacher_name}}</p>
+            <div class="audioline-box" v-if="info.lb_course_cs_item.file_url">
+                <audio-line audioId='course-detail-audio' :mp3="info.lb_course_cs_item.file_url"></audio-line>
+            </div>
+        </div>
+        <div class="main-bottom">
+            <div class="main-bottom-left">
+                <div class="tabs-box">
+                    <a class="info-btn" :class="[infoIndex===0?'active':'']" @click="handleChangeInfo(0)">课节信息</a>
+                    <a class="info-btn" :class="[infoIndex===1?'active':'']" @click="handleChangeInfo(1)">课节资源</a>
+                </div>
+                <div class="info-detail" v-html="info.lb_course_cs_item.intro" v-if="infoIndex===0"></div>
+                <resources-list :data="info.resource_file_list" :type='type' v-if="infoIndex===1"></resources-list>
+            </div>
+            <lesson-catalog :data="lessonCatalog" class="main-bottom-right" @getInfo="getInfo"></lesson-catalog>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import LessonCatalog from "./components/LessonCatalog.vue"
+import AudioLine from "@/components/AudioLine.vue"
+import ResourcesList from "./components/ResourcesList.vue"
+import { getLogin } from "@/api/ajax";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { LessonCatalog, AudioLine, ResourcesList},
+  props: ["lessonCatalog", "data", "type"],
+  data() {
+    //这里存放数据
+    return {
+        infoIndex: 0, // 课节信息tabs
+        info: null,
+        id: this.$route.query.id?this.$route.query.id:'',
+        lessonIndex: 0, // 课节索引
+        loading: false
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换infotabs
+    handleChangeInfo(value){
+        this.infoIndex = value
+    },
+    // 获取课节信息
+    getInfo(index){
+        this.loading = true
+        let MethodName = "/CourseServer/Manager/LBCourseManager/GetLBCourseCSItemInfo";
+        let data = {
+            id: index?this.lessonCatalog[index].id:this.lessonCatalog[this.lessonIndex].id
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            if(res.status===1){
+                this.info = res
+                this.lessonIndex = index?index:this.lessonIndex
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if(this.lessonCatalog.length>0){
+        this.getInfo()
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.course-detail {
+  background: #fff;
+  min-height: 100%;
+  .main{
+    width: 1200px;
+    margin: 0 auto;
+    padding: 105px 0;
+    h2{
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 28px;
+        color: #2F3742;
+        margin: 0 0 10px 0;
+    }
+    &-top{
+        margin-bottom: 24px;
+        color: #929CA8;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        .playsNumber{
+            margin: 0 24px 0 4px;
+        }
+    }
+    &-center{
+        background: #F7F8FA;
+        border-radius: 8px;
+        padding: 24px;
+        h1{
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 32px;
+            color: #1F2C5C;
+            margin: 0;
+        }
+        .teacher{
+            margin: 16px 0;
+            color: #929CA8;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .audioline-box{
+            border: 1px solid #EBEBEB;
+            border-radius: 30px;
+            background: #FFFFFF;
+            height: 64px;
+            display: flex;
+            align-items: center;
+            padding: 16px 24px;
+        }
+    }
+    &-bottom{
+        margin-top: 23px;
+        display: flex;
+        &-left{
+            width: 808px;
+            margin-right: 33px;
+            padding-bottom: 48px;
+            .tabs-box{
+                display: flex;
+                width: 100%;
+            }
+            .info-btn{
+                background: #fff;
+                border-radius: 16px;
+                width: 88px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+                color: #4E5969;
+                margin-right: 16px;
+                &:hover{
+                    background: #F2F3F5;
+                }
+                &.active{
+                    color: #165DFF;
+                    background: #F2F3F5;
+                }
+            }
+            .info-detail{
+                background: #F7F8FA;
+                border: 1px solid #F2F3F5;
+                border-radius: 4px;
+                padding: 40px;
+                margin-top: 16px;
+                height: 100%;
+            }
+        }
+        &-right{
+            width: 355px;
+        }
+    }
+  }
+}
+</style>

src/views/content_manage/course_manage/videoDetail.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="video-detail">
+    <div class="main">
+        <div class="main-left">
+            <div class="video" id="video-box"></div>
+            <div class="mian-left-center">
+                <div class="mian-left-center-left">
+                    <h2>{{data.title}}</h2>
+                    <div class="main-top">
+                        <svg-icon icon-class="facetime" className="icon-headset"></svg-icon>
+                        <span class="playsNumber">{{data.playsNumber}}</span>
+                        <span class="progress">已更新{{data.updateLessons}}课时/共{{data.totalLessons}}课时</span>
+                    </div>
+                </div>
+                <div class="navBar-right">
+                    <a @click="handlelike">
+                        <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
+                        <span>收藏</span>
+                    </a>
+                    <a @click="handleShare">
+                        <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
+                        <span>分享</span>
+                    </a>
+                </div>
+            </div>
+            
+        </div>
+        <lesson-catalog :data="data.lessonCatalog" class="main-right"></lesson-catalog>
+    </div>
+    <div class="main-bottom">
+        <div class="tabs-box">
+            <a class="info-btn" :class="[infoIndex===0?'active':'']" @click="handleChangeInfo(0)">课节信息</a>
+            <a class="info-btn" :class="[infoIndex===1?'active':'']" @click="handleChangeInfo(1)">课节资源</a>
+        </div>
+        <div class="info-detail" v-html="data.lessonInfo" v-if="infoIndex===0"></div>
+        <resources-list :data="data.resourcesList" v-if="infoIndex===1"></resources-list>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import LessonCatalog from "./components/LessonCatalog.vue"
+import ResourcesList from "./components/ResourcesList.vue"
+import Player from 'xgplayer';
+import 'xgplayer/dist/index.min.css';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { LessonCatalog, ResourcesList},
+  props: [],
+  data() {
+    //这里存放数据
+    return {
+        previousPage: '课程详情',
+        data:{
+            navTitle:'2023 新高一阅读暑期训练营',
+            title:'2023 新高一英语素养暑期训练营（基础级）',
+            playsNumber: '3.2万',
+            updateLessons: '56',
+            totalLessons: '120',
+            number: '1.',
+            lessonTitle: '第一讲 英语阅读核心素养',
+            teacher: '王琦',
+            lessonInfo: '课节信息介绍',
+            lessonCatalog: [
+                {
+                    number:'1',
+                    title:'课程介绍',
+                    teacher:'王琦',
+                    length:'8分钟'
+                },
+                {
+                    number:'2',
+                    title:'基本阅读技能',
+                    teacher:'王琦',
+                    length:'10分钟'
+                },
+                {
+                    number:'3',
+                    title:'高级阅读技能',
+                    teacher:'王琦',
+                    length:'10分钟'
+                },
+                {
+                    number:'4',
+                    title:'主题语境·人与自然',
+                    teacher:'王琦',
+                    length:'10分钟'
+                },
+                {
+                    number:'5',
+                    title:'课程主题语境·人与自我介绍',
+                    teacher:'王琦',
+                    length:'14分钟'
+                },
+                {
+                    number:'6',
+                    title:'主题语境·人与自我',
+                    teacher:'王琦',
+                    length:'10分钟'
+                },
+                {
+                    number:'7',
+                    title:'主题语境·人与自我',
+                    teacher:'王琦',
+                    length:'10分钟'
+                }
+            ],
+            resourcesList: [
+                {
+                    type: 'txt',
+                    name: 'employeelist.txt'
+                },
+                {
+                    type: 'mp3',
+                    name: 'employeelist.mp3'
+                },
+                {
+                    type: 'jpg',
+                    name: 'employeelist.jpg'
+                },
+                {
+                    type: 'mp4',
+                    name: 'employeelist.mp4'
+                },
+                {
+                    type: 'zip',
+                    name: 'employeelist.zip'
+                },
+                {
+                    type: 'pdf',
+                    name: 'employeelist.pdf'
+                },
+                {
+                    type: 'doc',
+                    name: 'employeelist.doc'
+                },
+                {
+                    type: 'xlsx',
+                    name: 'employeelist.xlsx'
+                },
+                {
+                    type: 'ppt',
+                    name: 'employeelist.ppt'
+                },
+                {
+                    type: 'ppt',
+                    name: 'employeelist.ppt'
+                }
+            ]
+        },
+        player: null,
+        infoIndex: 0 // 课节信息tabs
+    }
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 分享
+    handleShare(){
+
+    },
+    // 收藏
+    handlelike(){
+
+    },
+    // 切换infotabs
+    handleChangeInfo(value){
+        this.infoIndex = value
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.player = new Player({
+        id: 'video-box',
+        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
+        height: '100%',
+        width: '100%',
+        cssFullscreen: false,
+        poster: '', // 封面图
+    });
+  },
+  //生命周期-创建之前
+  beforeCreated() { },
+  //生命周期-挂载之前
+  beforeMount() { },
+  //生命周期-更新之前
+  beforUpdate() { },
+  //生命周期-更新之后
+  updated() { },
+  //生命周期-销毁之前
+  beforeDestory() { },
+  //生命周期-销毁完成
+  destoryed() { },
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() { }
+}
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.video-detail {
+  background: #fff;
+  min-height: 100%;
+  .main{
+    width: 1200px;
+    margin: 0 auto;
+    padding: 100px 0 20px 0;
+    display: flex;
+    &-left{
+        width: 859px;
+        margin-right: 24px;
+        .video{
+            width: 100%;
+            height: 488px !important;
+        }
+        .navBar-right{
+            display: flex;
+            a{
+                padding: 4px 8px;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 20px;
+                color: rgba(0, 0, 0, 0.88);
+                display: flex;
+                align-items: center;
+                margin-left: 10px;
+            }
+            .svg-icon{
+                width: 16px;
+                height: 16px;
+                margin-right: 8px;
+                &.icon-like{
+                    color: rgba(0, 0, 0, 0.56);
+                }
+            }
+        }
+    }
+    h2{
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 28px;
+        color: #2F3742;
+        margin: 0 0 10px 0;
+    }
+    &-top{
+        color: #929CA8;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        .playsNumber{
+            margin: 0 24px 0 4px;
+        }
+    }
+    &-center{
+        background: #F7F8FA;
+        border-radius: 8px;
+        padding: 24px;
+        h1{
+            font-weight: 600;
+            font-size: 24px;
+            line-height: 32px;
+            color: #1F2C5C;
+            margin: 0;
+        }
+        .teacher{
+            margin: 16px 0;
+            color: #929CA8;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .audioline-box{
+            border: 1px solid #EBEBEB;
+            border-radius: 30px;
+            background: #FFFFFF;
+            height: 64px;
+        }
+    }
+    &-right{
+        width: 317px;
+        .catalog{
+            max-height: 608px;
+        }
+    }
+  }
+  .main-bottom{
+    width: 1200px;
+    margin: 0 auto;
+    padding-bottom: 28px;
+    .tabs-box{
+        display: flex;
+        width: 100%;
+    }
+    .info-btn{
+        background: #fff;
+        border-radius: 16px;
+        width: 88px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        color: #4E5969;
+        margin-right: 16px;
+        &:hover{
+            background: #F2F3F5;
+        }
+        &.active{
+            color: #165DFF;
+            background: #F2F3F5;
+        }
+    }
+    .info-detail{
+        background: #F7F8FA;
+        border: 1px solid #F2F3F5;
+        border-radius: 4px;
+        padding: 40px;
+        margin-top: 16px;
+        height: 100%;
+    }
+  }
+  .danmu-box{
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    p{
+        margin: 0;
+        font-size: 14px;
+        line-height: 22px;
+        color: #929CA8;
+    }
+    .icon-danmu{
+        cursor: pointer;
+        margin: 0 16px;
+        &.active{
+            color: #165DFF;
+        }
+    }
+    .el-input{
+        flex: 1;
+    }
+    a{
+        padding: 5px 16px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #FFFFFF;
+        border: 1px solid #165DFF;
+        background: #165DFF;
+        border-radius: 0px 2px 2px 0px;
+
+    }
+  }
+  .mian-left-center{
+    border-top: 1px solid #F2F3F5;
+    border-bottom: 1px solid #F2F3F5;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    &-left{
+        width: 679px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.video-detail{
+    .catalog{
+        max-height: 608px !important;
+    } 
+    .danmu-box{
+        .el-input{
+            input{
+                height: 34px;
+                line-height: 34px;
+                background: #F2F3F5;
+                border-radius: 2px 0 0 2px;
+            }
+        }
+    }
+}
+.xgplayer .xgplayer-progress-btn{
+    background: none;
+    border: none;
+    box-shadow: none;
+}
+.xgplayer .xg-options-list li:hover, .xgplayer .xg-options-list li.selected{
+    color: #0081F1;
+}
+</style>