HM21St_Page_User/src/views/bookShelf/courseDetail.vue

<template>
  <div class="course-detail">
    <Header
      :headerBg="headerBg"
      :headerBorder="headerBorder"
      :userBg="userBg"
      :LoginNavIndex="LoginNavIndex"
    />
    <div class="navBar">
        <div class="navBar-left">
            <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>{{previousPage}}</a>
            <div class="border"></div>
            <p>{{data.navTitle}}</p>
        </div>
        <div class="navBar-right">
            <a @click="handleShare">
                <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
                <span>分享</span>
            </a>
            <a @click="handlelike">
                <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
                <span>收藏</span>
            </a>
        </div>
    </div>
    <div class="main">
        <h2>{{data.title}}</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.updateLessons}}课时/共{{data.totalLessons}}课时</span>
        </div>
        <div class="main-center">
            <h1>{{data.number+' '+data.lessonTitle}}</h1>
            <p class="teacher">主讲教师 {{data.teacher}}</p>
            <div class="audioline-box">
                <audio-line audioId='course-detail-audio' :mp3="data.lessonCatalog[0].src"></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="data.lessonInfo" v-if="infoIndex===0"></div>
                <resources-list :data="data.resourcesList" v-if="infoIndex===1"></resources-list>
            </div>
            <lesson-catalog :data="data.lessonCatalog" class="main-bottom-right"></lesson-catalog>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import LessonCatalog from "./components/LessonCatalog.vue"
import AudioLine from "@/components/common/AudioLine.vue"
import ResourcesList from "./components/ResourcesList.vue"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, LessonCatalog, AudioLine, ResourcesList},
  props: [],
  data() {
    //这里存放数据
    return {
        config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
        LoginNavIndex: 0,
        userBg: 'rgba(0, 0, 0, 0.24)',
        headerBorder: '#5C5C5C',
        headerBg: '#1F1F1F',
        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分钟',
                    src:'https://nnpe.utschool.cn/CSFileServer/URL/001/DC2B5164FB8F2351BB51C31CB8CD273020230627093140OIRIMXKQJRYGI0HYQ4JSOMTH1H4QNI1JSOOPCWWB_00103-20211214-17-EDNENNKW.mp3'
                },
                {
                    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'
                }
            ]
        },
        infoIndex: 0 // 课节信息tabs
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 分享
    handleShare(){

    },
    // 收藏
    handlelike(){

    },
    // 切换infotabs
    handleChangeInfo(value){
        this.infoIndex = value
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(this.config){
        let arr = this.config.split('&&&')
        this.LoginNavIndex = arr[0] * 1
        this.userBg = arr[1] ? arr[1] : 'rgba(0, 0, 0, 0.24)'
        this.headerBorder = arr[2] ? arr[2] : '#5C5C5C'
        this.headerBg = arr[3] ? arr[3] : '#1F1F1F'
    }
  },
  //生命周期 - 挂载完成（可以访问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>