HM21St_Page_Manager/src/views/content_manage/course_manage/courseDetail.vue

<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">{{play_total_count}}</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" :lessonCatalogEdsc="lessonCatalogEdsc" 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", "lessonCatalogEdsc", "play_total_count"],
  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||index===0?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===0?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>