完成所有课程展示的样式部分

src/components/courseTree/CourseTree.vue

@@ -0,0 +1,820 @@
+<template>
+    <div class="course_tree">
+        <div v-for="(courseItem, courseIndex) in courseList" :key="courseIndex">
+            <div v-if="courseItem.courseList" class="teacherList_name">
+                <div v-for="(tea, index) in courseItem.courseList" :key="index" class="names"
+                    :class="{ nactive: teaIndex == index }" @click="activeFunc(tea.courseId, index)">
+                    {{ tea.aliasName }}
+                </div>
+            </div>
+            <div class="item__title" @click="getMenuList(courseItem)">
+                <i :class="{
+                    'el-icon-caret-right': !courseItem.showList,
+                    'el-icon-caret-bottom': courseItem.showList,
+                }"></i>
+                {{ courseItem.courseName }}
+            </div>
+            <div v-if="courseItem.showList" style="padding-left:12px">
+                <div class="item" v-for="(menu, index) in courseItem.list" :key="index">
+                    <template v-if="menu.type == 1">
+                        <div class="item__title" @click="openModule(menu)">
+                            <i :class="{
+                                'el-icon-caret-right': !menu.showList,
+                                'el-icon-caret-bottom': menu.showList,
+                            }"></i>
+                            {{ menu.menuName }}
+                        </div>
+                        <div class="item__content">
+                            <div class="bank-chapter" v-if="menu.showList">
+                                <div class="bank-chapter__item" v-for="chapter in menu.list" :key="chapter.id">
+                                    <div v-if="chapter.type == 1" class="bank-chapter__item__text"
+                                        @click="openChapter(chapter)">
+                                        <i :class="{
+                                            'el-icon-caret-right':
+                                                !chapter.showList,
+                                            'el-icon-caret-bottom':
+                                                chapter.showList,
+                                        }"></i>{{ chapter.name }}
+                                    </div>
+
+                                    <div class="bank-section" v-if="
+                                        chapter.showList &&
+                                        chapter.type == 1
+                                    ">
+                                        <div class="bank-section__item" :class="{
+                                            active: isActive(section),
+                                        }" v-for="(
+                                              section, sectionIndex
+                                            ) in chapter.list" :key="sectionIndex" @click="getResource(section, 1)">
+                                            <template v-if="section.type != 2">
+                                                <template>
+                                                    <div class="note note--blue" v-if="
+                                                        section.sectionType == 1
+                                                    ">
+                                                        视频
+                                                    </div>
+                                                    <div class="note" v-if="
+                                                        section.sectionType == 2
+                                                    ">
+                                                        直播
+                                                    </div>
+                                                    <div class="note note--yellow" v-if="
+                                                        section.sectionType == 3
+                                                    ">
+                                                        回放
+                                                    </div>
+                                                    <div class="
+                                                    bank-section__item__text
+                                                  ">
+                                                        {{ section.name }}
+                                                        <div style="font-size: 12px" v-if="
+                                                            section.liveStartTime >
+                                                            nowTime
+                                                        ">
+                                                            <span>{{
+                                                                    $tools.timestampToTime(
+                                                                        section.liveStartTime,
+                                                                        (isDay = false)
+                                                                    )
+                                                            }}</span>-
+                                                            <span>{{
+                                                                    $tools.timestampToTime(
+                                                                        section.liveEndTime,
+                                                                        (isDay = false)
+                                                                    )
+                                                            }}</span>
+                                                        </div>
+                                                    </div>
+                                                </template>
+
+                                                <div class="lear-state" v-if="isActive(section)">
+                                                    <img src="../../assets/learing.gif" alt="" />
+                                                </div>
+                                                <template v-if="section.durationTime > 0">
+                                                    <div class="during">
+                                                        {{
+                                                                $tools.secondToDate(
+                                                                    section.durationTime
+                                                                )
+                                                        }}
+                                                    </div>
+                                                </template>
+                                                <template>
+                                                    <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                    </div>
+                                                    <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                            已学完
+                                                        </div>
+                                                    </template>
+                                                </template>
+                                                <template v-if="
+                                                    section.liveStartTime &&
+                                                    section.sectionType == 2
+                                                ">
+                                                    <div class="
+                                                    live-btn live-btn--blue
+                                                  " v-if="
+                                                      section.liveStartTime >
+                                                      nowTime
+                                                  ">
+                                                        待开播
+                                                    </div>
+                                                    <div class="
+                                                    live-btn live-btn--yellow
+                                                  " v-if="
+                                                      section.liveStartTime <=
+                                                      nowTime &&
+                                                      section.liveEndTime >
+                                                      nowTime
+                                                  ">
+                                                        直播中
+                                                    </div>
+                                                    <div class="live-btn" v-if="
+                                                        section.liveEndTime <
+                                                        nowTime
+                                                    ">
+                                                        已结束
+                                                    </div>
+                                                </template>
+
+                                                <template v-if="
+                                                    checkSection(
+                                                        section.sectionId,
+                                                        'sectionExam'
+                                                    )
+                                                ">
+                                                    <div class="exercises" @click.stop="
+                                                        handelPracticeOrRxam(
+                                                            section,
+                                                            2
+                                                        )
+                                                    ">
+                                                        习题
+                                                        <i class="
+                                                      el-icon-arrow-right
+                                                      icons
+                                                    "></i>
+                                                    </div>
+                                                </template>
+                                            </template>
+
+                                            <template v-if="section.type == 2">
+                                                <template>
+                                                    <div class="test-btn" v-if="section.doType == 1">
+                                                        练习
+                                                    </div>
+                                                    <div class="test-btn" v-if="section.doType != 1">
+                                                        考试
+                                                    </div>
+                                                </template>
+                                                <div class="bank-section__item__text">
+                                                    {{ section.name }}
+                                                </div>
+                                                <template>
+                                                    <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                    </div>
+                                                    <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                            合格
+                                                        </div>
+                                                        <div class="btn btn--red" v-if="section.learning == 0">
+                                                            不合格
+                                                        </div>
+                                                        <div class="btn btn--green" v-if="section.rebuild > 0">
+                                                            待重测
+                                                        </div>
+                                                    </template>
+                                                </template>
+                                            </template>
+                                        </div>
+                                    </div>
+                                    <div v-if="chapter.type == 2" class="bank-section__item"
+                                        @click="getResource(chapter, 3)">
+                                        <template>
+                                            <template>
+                                                <div class="test-btn" v-if="chapter.doType == 1">
+                                                    练习
+                                                </div>
+                                                <div class="test-btn" v-if="chapter.doType != 1">
+                                                    考试
+                                                </div>
+                                            </template>
+                                            <div class="bank-section__item__text">
+                                                {{ chapter.name }}
+                                            </div>
+                                            <template>
+                                                <div class="btn btn--green" v-if="chapter.learning == 1">
+                                                    合格
+                                                </div>
+                                                <div class="btn btn--red" v-if="chapter.learning == 0">
+                                                    不合格
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template v-if="menu.type == 2">
+                        <div class="item__content">
+                            <div class="bank-chapter">
+                                <div class="bank-chapter__item">
+                                    <div class="bank-chapter__item__text" @click="openChapter(menu)">
+                                        <i :class="{
+                                            'el-icon-caret-right':
+                                                !menu.showList,
+                                            'el-icon-caret-bottom':
+                                                menu.showList,
+                                        }"></i>{{ menu.menuName }}
+                                    </div>
+
+                                    <div class="bank-section" v-if="menu.showList">
+                                        <div class="bank-section__item" :class="{
+                                            active: isActive(section),
+                                        }" v-for="(
+                                              section, sectionIndex
+                                            ) in menu.list" :key="sectionIndex" @click="getResource(section, 1)">
+                                            <template v-if="section.type != 2">
+                                                <template>
+                                                    <div class="note note--blue" v-if="
+                                                        section.sectionType == 1
+                                                    ">
+                                                        视频
+                                                    </div>
+                                                    <div class="note" v-if="
+                                                        section.sectionType == 2
+                                                    ">
+                                                        直播
+                                                    </div>
+                                                    <div class="note note--yellow" v-if="
+                                                        section.sectionType == 3
+                                                    ">
+                                                        回放
+                                                    </div>
+                                                </template>
+                                                <div class="bank-section__item__text">
+                                                    {{ section.name }}
+                                                    <div style="font-size: 12px" v-if="
+                                                        section.liveStartTime >
+                                                        nowTime
+                                                    ">
+                                                        <span>{{
+                                                                $tools.timestampToTime(
+                                                                    section.liveStartTime,
+                                                                    (isDay = false)
+                                                                )
+                                                        }}</span>-
+                                                        <span>{{
+                                                                $tools.timestampToTime(
+                                                                    section.liveEndTime,
+                                                                    (isDay = false)
+                                                                )
+                                                        }}</span>
+                                                    </div>
+                                                </div>
+
+                                                <template v-if="section.durationTime > 0">
+                                                    <div class="during">
+                                                        {{
+                                                                $tools.secondToDate(
+                                                                    section.durationTime
+                                                                )
+                                                        }}
+                                                    </div>
+                                                </template>
+                                                <template>
+                                                    <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                    </div>
+                                                    <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                            已学完
+                                                        </div>
+                                                    </template>
+                                                </template>
+                                                <template v-if="
+                                                    section.liveStartTime &&
+                                                    section.sectionType == 2
+                                                ">
+                                                    <div class="
+                                                    live-btn live-btn--blue
+                                                  " v-if="
+                                                      section.liveStartTime >
+                                                      nowTime
+                                                  ">
+                                                        待开播
+                                                    </div>
+                                                    <div class="
+                                                    live-btn live-btn--yellow
+                                                  " v-if="
+                                                      section.liveStartTime <=
+                                                      nowTime &&
+                                                      section.liveEndTime >
+                                                      nowTime
+                                                  ">
+                                                        直播中
+                                                    </div>
+                                                    <div class="live-btn" v-if="
+                                                        section.liveEndTime <
+                                                        nowTime
+                                                    ">
+                                                        已结束
+                                                    </div>
+                                                </template>
+
+                                                <template v-if="
+                                                    checkSection(
+                                                        section.sectionId,
+                                                        'sectionExam'
+                                                    )
+                                                ">
+                                                    <div class="exercises" @click.stop="
+                                                        handelPracticeOrRxam(
+                                                            section,
+                                                            2
+                                                        )
+                                                    ">
+                                                        习题
+                                                        <i class="
+                                                      el-icon-arrow-right
+                                                      icons
+                                                    "></i>
+                                                    </div>
+                                                </template>
+                                            </template>
+
+                                            <template v-if="section.type == 2">
+                                                <template>
+                                                    <div class="test-btn" v-if="section.doType == 1">
+                                                        练习
+                                                    </div>
+                                                    <div class="test-btn" v-if="section.doType != 1">
+                                                        考试
+                                                    </div>
+                                                </template>
+                                                <div class="bank-section__item__text">
+                                                    {{ section.name }}
+                                                </div>
+                                                <template>
+                                                    <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                    </div>
+                                                    <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                            合格
+                                                        </div>
+                                                        <div class="btn btn--red" v-if="section.learning == 0">
+                                                            不合格
+                                                        </div>
+                                                        <div class="btn btn--green" v-if="section.rebuild > 0">
+                                                            待重测
+                                                        </div>
+                                                    </template>
+                                                </template>
+                                            </template>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template v-if="menu.type == 3">
+                        <div class="item__content">
+                            <div class="bank-section">
+                                <div class="bank-section__item" :class="{
+                                    active: isActive(menu),
+                                }" @click="getResource(menu, 1)">
+                                    <template>
+                                        <div class="note note--blue" v-if="menu.sectionType == 1">
+                                            视频
+                                        </div>
+                                        <div class="note" v-if="menu.sectionType == 2">
+                                            直播
+                                        </div>
+                                        <div class="note note--yellow" v-if="menu.sectionType == 3">
+                                            回放
+                                        </div>
+                                        <div class="bank-section__item__text">
+                                            {{ menu.name }}
+                                            <div style="font-size: 12px" v-if="
+                                                menu.liveStartTime > nowTime
+                                            ">
+                                                <span>{{
+                                                        $tools.timestampToTime(
+                                                            menu.liveStartTime,
+                                                            (isDay = false)
+                                                        )
+                                                }}</span>-
+                                                <span>{{
+                                                        $tools.timestampToTime(
+                                                            menu.liveEndTime,
+                                                            (isDay = false)
+                                                        )
+                                                }}</span>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <template v-if="menu.durationTime > 0">
+                                        <div class="during">
+                                            {{
+                                                    $tools.secondToDate(
+                                                        menu.durationTime
+                                                    )
+                                            }}
+                                        </div>
+                                    </template>
+                                    <template>
+                                        <div class="btn" v-if="menu.rebuild > 0">
+                                            待重修
+                                        </div>
+                                        <template v-else>
+                                            <div class="btn btn--green" v-if="menu.learning == 1">
+                                                已学完
+                                            </div>
+                                        </template>
+                                    </template>
+                                    <template v-if="
+                                        menu.liveStartTime &&
+                                        menu.sectionType == 2
+                                    ">
+                                        <div class="live-btn live-btn--blue" v-if="menu.liveStartTime > nowTime">
+                                            待开播
+                                        </div>
+                                        <div class="live-btn live-btn--yellow" v-if="
+                                            menu.liveStartTime <= nowTime &&
+                                            menu.liveEndTime > nowTime
+                                        ">
+                                            直播中
+                                        </div>
+                                        <div class="live-btn" v-if="menu.liveEndTime < nowTime">
+                                            已结束
+                                        </div>
+                                    </template>
+
+                                    <template v-if="
+                                        checkSection(
+                                            menu.menuId,
+                                            'sectionExamList'
+                                        )
+                                    ">
+                                        <div class="exercises" @click.stop="
+    handelPracticeOrRxam(menu, 3)
+                                        ">
+                                            习题
+                                            <i class="el-icon-arrow-right icons"></i>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        courseList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    data() {
+        return {
+            teaIndex: 0,
+            nowTime: 0,
+        }
+    },
+    mounted() {
+        this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
+    },
+    methods: {
+        activeFunc() {
+            this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
+        },
+        async getMenuList(course) {
+            let { showList, courseId, list } = course
+            course.showList = !showList
+            if (list.length) return;
+            this.$request
+                .reMenuList({ courseId, gradeId: this.gradeId })
+                .then(async (res) => {
+                    for (let i = 0; i < res.rows.length; i++) {
+                        let item = res.rows[i];
+                        item.id = item.menuId;
+                        item.name = item.menuName;
+                        item.menuType = item.type;
+                        item.showList = false;
+                        item.list = [];
+                        item.parent = this.menuList;
+                    }
+                    course.list = res.rows
+                })
+        },
+        openModule(module, status = false, isAuto = false) {
+            let { list, isRebuild, id, courseId, showList } = module;
+            module.showList = !showList;
+            console.log(module.showList)
+            if (list.length) return;
+            return this.$request
+                .reChapterList({
+                    moduleId: id,
+                    gradeId: this.gradeId,
+                    courseId: courseId,
+                    rebuild: isRebuild ? 1 : undefined,
+                })
+                .then((res) => {
+                    for (let i = 0; i < res.data.length; i++) {
+                        let item = res.data[i];
+                        item.id = item.chapterId;
+                        item.showList = false;
+                        item.list = [];
+                        item.parent = module;
+                        isRebuild ? (item.isRebuild = 1) : (item.menuType = 2);
+                    }
+                    module.list = res.data;
+                    if (isAuto) {
+                        return Promise.resolve(res.data);
+                    }
+                    if (isRebuild) return;
+                    if (status) {
+                        const FindIndexs = module.list.findIndex((item) => {
+                            return item.chapterId == this.sectionItem.chapterId;
+                        });
+                        if (FindIndexs != -1) {
+                            this.openChapter(module.list[FindIndexs]);
+                        } else {
+                            this.$message.warning("章列表定位失败");
+                        }
+                    } else {
+                        if (this.needOpen) {
+                            this.openChapter(module.list[0]);
+                        }
+                    }
+                });
+        },
+        openChapter(chapter) {
+            let { chapterId, menuId, list, moduleId, id, isRebuild, courseId, showList } = chapter;
+            chapter.showList = !showList;
+            // this.$request
+            //     .reSectionExamList({
+            //         chapterId: chapterId || menuId,
+            //         courseId: this.courseId,
+            //         gradeId: this.gradeId,
+            //     })
+            //     .then((res) => {
+            //         this.sectionExam = [...this.sectionExam, ...res.data];
+            //     });
+            if (list.length) {
+                return;
+            }
+            return this.$request
+                .reSectionList({
+                    chapterId: id,
+                    gradeId: this.gradeId,
+                    courseId: courseId,
+                    rebuild: isRebuild ? 1 : undefined,
+                    moduleId: moduleId || 0,
+                })
+                .then((res) => {
+                    chapter.canLearn = res.data.filter(item =>  item.type != 2).every(item => item.learning == 1)
+                    res.data.forEach((section) => {
+                        section.parent = chapter;
+                        // let { sectionId, moduleId, chapterId } = this.sectionItem
+                        // if (section.sectionId == sectionId && section.moduleId == moduleId && section.chapterId == chapterId) {
+                        //     this.sectionItem = section
+                        // }
+                    });
+                    chapter.list = res.data;
+                    if (this.needOpen) {
+                        this.needOpen = false;
+                    }
+                    return Promise.resolve(chapter.list);
+                });
+        },
+        isActive() { },
+        getResource() { },
+        checkSection() { }
+    },
+    computed: {
+        gradeId() {
+            return this.$route.query.gradeId
+        }
+    },
+    watch: {
+        courseList: {
+            handler(newVal, oldVal) {
+                // console.log(newVal, 'newVal')
+            },
+            deep: true,
+            immediate: true
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.course_tree {
+    height: 380px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .item {
+        &__title {
+            padding-left: 12px;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #fff;
+
+            .el-icon-caret-right,
+            .el-icon-caret-bottom {
+                color: #999;
+            }
+        }
+
+        &__content {
+            .bank-chapter {
+                &__item {
+                    color: #fff;
+                    font-size: 14px;
+
+                    &__text {
+                        padding: 8px 8px 8px 24px;
+                        cursor: pointer;
+                        flex: 1;
+
+                        .el-icon-caret-right,
+                        .el-icon-caret-bottom {
+                            color: #999;
+                        }
+                    }
+                }
+            }
+
+            .bank-section {
+                &__item {
+                    user-select: none;
+                    color: #fff;
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+
+                    .lear-state {
+                        height: 20px;
+                        padding-right: 8px;
+
+                        img {
+                            width: 20px;
+                            height: 20px;
+                            // margin-right: 4px;
+                        }
+                    }
+
+                    &.active {
+                        background: #132b4d;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: bold;
+                        color: #3f8dfd;
+                    }
+
+                    &__text {
+                        flex: 1;
+                        padding: 8px 8px 8px 12px;
+                        height: 40px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        cursor: pointer;
+
+                        .el-icon-caret-right,
+                        .el-icon-caret-bottom {
+                            color: #999;
+                        }
+                    }
+
+                    .test-btn {
+                        margin-left: 10px;
+                        width: 32px;
+                        height: 20px;
+                        background: #007aff;
+                        border-radius: 4px;
+                        line-height: 18px;
+                        color: #fff;
+                        text-align: center;
+                    }
+
+                    .note {
+                        margin-left: 10px;
+                        width: 32px;
+                        height: 20px;
+                        border: 1px solid #ff3b30;
+                        border-radius: 4px;
+                        line-height: 18px;
+                        color: #ff3b30;
+                        text-align: center;
+
+                        &--yellow {
+                            border-color: #ff9500;
+                            color: #ff9500;
+                        }
+
+                        &--blue {
+                            border-color: #3f8dfd;
+                            color: #3f8dfd;
+                        }
+                    }
+
+                    .during {
+                        color: #999;
+                        margin-right: 10px;
+                    }
+
+                    .btn {
+                        margin-right: 12px;
+                        width: 48px;
+                        height: 20px;
+                        border: 1px solid #ff3b30;
+                        background: #ff3b30;
+                        border-radius: 4px;
+                        line-height: 18px;
+                        color: #fff;
+                        text-align: center;
+
+                        &--green {
+                            border: 1px solid #34c759;
+                            background: #34c759;
+                        }
+                    }
+
+                    .live-btn {
+                        margin-left: 20px;
+                        width: 60px;
+                        height: 20px;
+                        border-radius: 4px;
+                        background: #eeeeee;
+                        line-height: 18px;
+                        color: #666666;
+                        text-align: center;
+
+                        &--yellow {
+                            background: #fff7eb;
+                            color: #ff9500;
+                        }
+
+                        &--blue {
+                            border-color: #ebf4ff;
+                            color: #007aff;
+                        }
+                    }
+
+                    .exercises {
+                        cursor: pointer;
+                        font-size: 14px;
+                        color: #498afe;
+                    }
+                }
+            }
+        }
+    }
+
+    .teacherList_name {
+        display: flex;
+        margin-left: 20px;
+        margin-top: 10px;
+
+        .names {
+            font-size: 13px;
+            color: #383838;
+            margin-right: 8px;
+            cursor: pointer;
+            background: #818181;
+            border-radius: 4px;
+            padding: 3px 6px;
+
+            &.nactive {
+                background: #cccccc;
+            }
+        }
+    }
+}
+</style>

src/pages/course-detail/index.vue

@@ -47,10 +47,492 @@
                           </div>
                           <!-- 章节目录 -->
                           <template v-if="tab.name == '1'">
-                            <div v-if="teacherList && teacherList.length > 0" class="teacherList_name">
+                            <Course-tree :courseList.sync="courseList" @getMenuList="getMenuList"></Course-tree>
+                            <!-- <div class="right-box__body">
+                              <div v-for="(courseItem, courseIndex) in courseList" :key="courseIndex">
+                                <div v-if="courseItem.courseList" class="teacherList_name">
+                                  <div v-for="(tea, index) in courseItem.courseList" :key="index" class="names"
+                                    :class="{ nactive: teaIndex == index }" @click="activeFunc(tea.courseId, index)">
+                                    {{ tea.aliasName }}
+                                  </div>
+                                </div>
+                                <div class="item__title" @click="getMenuList(courseItem.courseId)">
+                                  <i :class="{
+                                    'el-icon-caret-right': !courseItem.showList,
+                                    'el-icon-caret-bottom': courseItem.showList,
+                                  }"></i>
+                                  {{ courseItem.courseName }}
+                                </div>
+                                <div v-if="courseItem.showList" style="padding-left:12px">
+                                    <div class="item" v-for="(menu, index) in courseItem.list" :key="index">
+                                      <template v-if="menu.type == 1">
+                                        <div class="item__title" @click="openModule(menu)">
+                                          <i :class="{
+                                            'el-icon-caret-right': !menu.showList,
+                                            'el-icon-caret-bottom': menu.showList,
+                                          }"></i>
+                                          {{ menu.menuName }}
+                                        </div>
+                                        <div class="item__content">
+                                          <div class="bank-chapter" v-if="!menu.showList">
+                                            <div class="bank-chapter__item" v-for="( chapter, chapterIndex ) in menu.list" :key="chapter.id">
+                                              <div v-if="chapter.type == 1" class="bank-chapter__item__text"
+                                                @click.native="openChapter(chapter)">
+                                                <i :class="{
+                                                  'el-icon-caret-right':
+                                                    !chapter.showList,
+                                                  'el-icon-caret-bottom':
+                                                    chapter.showList,
+                                                }"></i>{{ chapter.name }}
+                                              </div>
+
+                                              <div class="bank-section" v-if="
+                                                chapter.showList &&
+                                                chapter.type == 1
+                                              ">
+                                                <div class="bank-section__item" :class="{
+                                                  active: isActive(section),
+                                                }" v-for="(
+                                              section, sectionIndex
+                                            ) in chapter.list" :key="sectionIndex" @click="getResource(section, 1)">
+                                                  <template v-if="section.type != 2">
+                                                    <template>
+                                                      <div class="note note--blue" v-if="
+                                                        section.sectionType == 1
+                                                      ">
+                                                        视频
+                                                      </div>
+                                                      <div class="note" v-if="
+                                                        section.sectionType == 2
+                                                      ">
+                                                        直播
+                                                      </div>
+                                                      <div class="note note--yellow" v-if="
+                                                        section.sectionType == 3
+                                                      ">
+                                                        回放
+                                                      </div>
+                                                      <div class="
+                                                    bank-section__item__text
+                                                  ">
+                                                        {{ section.name }}
+                                                        <div style="font-size: 12px" v-if="
+                                                          section.liveStartTime >
+                                                          nowTime
+                                                        ">
+                                                          <span>{{
+                                                              $tools.timestampToTime(
+                                                                section.liveStartTime,
+                                                                (isDay = false)
+                                                              )
+                                                          }}</span>-
+                                                          <span>{{
+                                                              $tools.timestampToTime(
+                                                                section.liveEndTime,
+                                                                (isDay = false)
+                                                              )
+                                                          }}</span>
+                                                        </div>
+                                                      </div>
+                                                    </template>
+
+                                                    <div class="lear-state" v-if="isActive(section)">
+                                                      <img src="../../assets/learing.gif" alt="" />
+                                                    </div>
+                                                    <template v-if="section.durationTime > 0">
+                                                      <div class="during">
+                                                        {{
+                                                            $tools.secondToDate(
+                                                              section.durationTime
+                                                            )
+                                                        }}
+                                                      </div>
+                                                    </template>
+                                                    <template>
+                                                      <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                      </div>
+                                                      <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                          已学完
+                                                        </div>
+                                                      </template>
+                                                    </template>
+                                                    <template v-if="
+                                                      section.liveStartTime &&
+                                                      section.sectionType == 2
+                                                    ">
+                                                      <div class="
+                                                    live-btn live-btn--blue
+                                                  " v-if="
+                                                    section.liveStartTime >
+                                                    nowTime
+                                                  ">
+                                                        待开播
+                                                      </div>
+                                                      <div class="
+                                                    live-btn live-btn--yellow
+                                                  " v-if="
+                                                    section.liveStartTime <=
+                                                    nowTime &&
+                                                    section.liveEndTime >
+                                                    nowTime
+                                                  ">
+                                                        直播中
+                                                      </div>
+                                                      <div class="live-btn" v-if="
+                                                        section.liveEndTime <
+                                                        nowTime
+                                                      ">
+                                                        已结束
+                                                      </div>
+                                                    </template>
+
+                                                    <template v-if="
+                                                      checkSection(
+                                                        section.sectionId,
+                                                        'sectionExam'
+                                                      )
+                                                    ">
+                                                      <div class="exercises" @click.stop="
+                                                        handelPracticeOrRxam(
+                                                          section,
+                                                          2
+                                                        )
+                                                      ">
+                                                        习题
+                                                        <i class="
+                                                      el-icon-arrow-right
+                                                      icons
+                                                    "></i>
+                                                      </div>
+                                                    </template>
+                                                  </template>
+
+                                                  <template v-if="section.type == 2">
+                                                    <template>
+                                                      <div class="test-btn" v-if="section.doType == 1">
+                                                        练习
+                                                      </div>
+                                                      <div class="test-btn" v-if="section.doType != 1">
+                                                        考试
+                                                      </div>
+                                                    </template>
+                                                    <div class="bank-section__item__text">
+                                                      {{ section.name }}
+                                                    </div>
+                                                    <template>
+                                                      <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                      </div>
+                                                      <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                          合格
+                                                        </div>
+                                                        <div class="btn btn--red" v-if="section.learning == 0">
+                                                          不合格
+                                                        </div>
+                                                        <div class="btn btn--green" v-if="section.rebuild > 0">
+                                                          待重测
+                                                        </div>
+                                                      </template>
+                                                    </template>
+                                                  </template>
+                                                </div>
+                                              </div>
+                                              <div v-if="chapter.type == 2" class="bank-section__item"
+                                                @click="getResource(chapter, 3)">
+                                                <template>
+                                                  <template>
+                                                    <div class="test-btn" v-if="chapter.doType == 1">
+                                                      练习
+                                                    </div>
+                                                    <div class="test-btn" v-if="chapter.doType != 1">
+                                                      考试
+                                                    </div>
+                                                  </template>
+                                                  <div class="bank-section__item__text">
+                                                    {{ chapter.name }}
+                                                  </div>
+                                                  <template>
+                                                    <div class="btn btn--green" v-if="chapter.learning == 1">
+                                                      合格
+                                                    </div>
+                                                    <div class="btn btn--red" v-if="chapter.learning == 0">
+                                                      不合格
+                                                    </div>
+                                                  </template>
+                                                </template>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </template>
+
+                                      <template v-if="menu.type == 2">
+                                        <div class="item__content">
+                                          <div class="bank-chapter">
+                                            <div class="bank-chapter__item">
+                                              <div class="bank-chapter__item__text" @click="openChapter(menu)">
+                                                <i :class="{
+                                                  'el-icon-caret-right':
+                                                    !menu.showList,
+                                                  'el-icon-caret-bottom':
+                                                    menu.showList,
+                                                }"></i>{{ menu.menuName }}
+                                              </div>
+
+                                              <div class="bank-section" v-if="menu.showList">
+                                                <div class="bank-section__item" :class="{
+                                                  active: isActive(section),
+                                                }" v-for="(
+                                              section, sectionIndex
+                                            ) in menu.list" :key="sectionIndex" @click="getResource(section, 1)">
+                                                  <template v-if="section.type != 2">
+                                                    <template>
+                                                      <div class="note note--blue" v-if="
+                                                        section.sectionType == 1
+                                                      ">
+                                                        视频
+                                                      </div>
+                                                      <div class="note" v-if="
+                                                        section.sectionType == 2
+                                                      ">
+                                                        直播
+                                                      </div>
+                                                      <div class="note note--yellow" v-if="
+                                                        section.sectionType == 3
+                                                      ">
+                                                        回放
+                                                      </div>
+                                                    </template>
+                                                    <div class="bank-section__item__text">
+                                                      {{ section.name }}
+                                                      <div style="font-size: 12px" v-if="
+                                                        section.liveStartTime >
+                                                        nowTime
+                                                      ">
+                                                        <span>{{
+                                                            $tools.timestampToTime(
+                                                              section.liveStartTime,
+                                                              (isDay = false)
+                                                            )
+                                                        }}</span>-
+                                                        <span>{{
+                                                            $tools.timestampToTime(
+                                                              section.liveEndTime,
+                                                              (isDay = false)
+                                                            )
+                                                        }}</span>
+                                                      </div>
+                                                    </div>
+
+                                                    <template v-if="section.durationTime > 0">
+                                                      <div class="during">
+                                                        {{
+                                                            $tools.secondToDate(
+                                                              section.durationTime
+                                                            )
+                                                        }}
+                                                      </div>
+                                                    </template>
+                                                    <template>
+                                                      <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                      </div>
+                                                      <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                          已学完
+                                                        </div>
+                                                      </template>
+                                                    </template>
+                                                    <template v-if="
+                                                      section.liveStartTime &&
+                                                      section.sectionType == 2
+                                                    ">
+                                                      <div class="
+                                                    live-btn live-btn--blue
+                                                  " v-if="
+                                                    section.liveStartTime >
+                                                    nowTime
+                                                  ">
+                                                        待开播
+                                                      </div>
+                                                      <div class="
+                                                    live-btn live-btn--yellow
+                                                  " v-if="
+                                                    section.liveStartTime <=
+                                                    nowTime &&
+                                                    section.liveEndTime >
+                                                    nowTime
+                                                  ">
+                                                        直播中
+                                                      </div>
+                                                      <div class="live-btn" v-if="
+                                                        section.liveEndTime <
+                                                        nowTime
+                                                      ">
+                                                        已结束
+                                                      </div>
+                                                    </template>
+
+                                                    <template v-if="
+                                                      checkSection(
+                                                        section.sectionId,
+                                                        'sectionExam'
+                                                      )
+                                                    ">
+                                                      <div class="exercises" @click.stop="
+                                                        handelPracticeOrRxam(
+                                                          section,
+                                                          2
+                                                        )
+                                                      ">
+                                                        习题
+                                                        <i class="
+                                                      el-icon-arrow-right
+                                                      icons
+                                                    "></i>
+                                                      </div>
+                                                    </template>
+                                                  </template>
+
+                                                  <template v-if="section.type == 2">
+                                                    <template>
+                                                      <div class="test-btn" v-if="section.doType == 1">
+                                                        练习
+                                                      </div>
+                                                      <div class="test-btn" v-if="section.doType != 1">
+                                                        考试
+                                                      </div>
+                                                    </template>
+                                                    <div class="bank-section__item__text">
+                                                      {{ section.name }}
+                                                    </div>
+                                                    <template>
+                                                      <div class="btn" v-if="section.rebuild > 0">
+                                                        待重修
+                                                      </div>
+                                                      <template v-else>
+                                                        <div class="btn btn--green" v-if="section.learning == 1">
+                                                          合格
+                                                        </div>
+                                                        <div class="btn btn--red" v-if="section.learning == 0">
+                                                          不合格
+                                                        </div>
+                                                        <div class="btn btn--green" v-if="section.rebuild > 0">
+                                                          待重测
+                                                        </div>
+                                                      </template>
+                                                    </template>
+                                                  </template>
+                                                </div>
+                                              </div>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </template>
+
+                                      <template v-if="menu.type == 3">
+                                        <div class="item__content">
+                                          <div class="bank-section">
+                                            <div class="bank-section__item" :class="{
+                                              active: isActive(menu),
+                                            }" @click="getResource(menu, 1)">
+                                              <template>
+                                                <div class="note note--blue" v-if="menu.sectionType == 1">
+                                                  视频
+                                                </div>
+                                                <div class="note" v-if="menu.sectionType == 2">
+                                                  直播
+                                                </div>
+                                                <div class="note note--yellow" v-if="menu.sectionType == 3">
+                                                  回放
+                                                </div>
+                                                <div class="bank-section__item__text">
+                                                  {{ menu.name }}
+                                                  <div style="font-size: 12px" v-if="
+                                                    menu.liveStartTime > nowTime
+                                                  ">
+                                                    <span>{{
+                                                        $tools.timestampToTime(
+                                                          menu.liveStartTime,
+                                                          (isDay = false)
+                                                        )
+                                                    }}</span>-
+                                                    <span>{{
+                                                        $tools.timestampToTime(
+                                                          menu.liveEndTime,
+                                                          (isDay = false)
+                                                        )
+                                                    }}</span>
+                                                  </div>
+                                                </div>
+                                              </template>
+
+                                              <template v-if="menu.durationTime > 0">
+                                                <div class="during">
+                                                  {{
+                                                      $tools.secondToDate(
+                                                        menu.durationTime
+                                                      )
+                                                  }}
+                                                </div>
+                                              </template>
+                                              <template>
+                                                <div class="btn" v-if="menu.rebuild > 0">
+                                                  待重修
+                                                </div>
+                                                <template v-else>
+                                                  <div class="btn btn--green" v-if="menu.learning == 1">
+                                                    已学完
+                                                  </div>
+                                                </template>
+                                              </template>
+                                              <template v-if="
+                                                menu.liveStartTime &&
+                                                menu.sectionType == 2
+                                              ">
+                                                <div class="live-btn live-btn--blue"
+                                                  v-if="menu.liveStartTime > nowTime">
+                                                  待开播
+                                                </div>
+                                                <div class="live-btn live-btn--yellow" v-if="
+                                                  menu.liveStartTime <= nowTime &&
+                                                  menu.liveEndTime > nowTime
+                                                ">
+                                                  直播中
+                                                </div>
+                                                <div class="live-btn" v-if="menu.liveEndTime < nowTime">
+                                                  已结束
+                                                </div>
+                                              </template>
+
+                                              <template v-if="
+                                                checkSection(
+                                                  menu.menuId,
+                                                  'sectionExamList'
+                                                )
+                                              ">
+                                                <div class="exercises" @click.stop="
+                                                  handelPracticeOrRxam(menu, 3)
+                                                ">
+                                                  习题
+                                                  <i class="el-icon-arrow-right icons"></i>
+                                                </div>
+                                              </template>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </template>
+                                    </div>
+                                  </div>
+                              </div>
+                            </div> -->
+                            <!-- <div v-if="teacherList && teacherList.length > 0" class="teacherList_name">
                               <div v-for="(tea, index) in teacherList" :key="index" class="names"
                                 :class="{ nactive: teaIndex == index }" @click="activeFunc(tea.courseId, index)">
-                                {{ tea.aliasName }} 
+                                {{ tea.aliasName }}
                               </div>
                             </div>
                             <div class="right-box__body">
@@ -108,7 +590,7 @@
                                                     bank-section__item__text
                                                   ">
                                                   {{ section.name }}
-                                                  <div style="font-size: 12px" v-if=" 
+                                                  <div style="font-size: 12px" v-if="
                                                     section.liveStartTime >
                                                     nowTime
                                                   ">
@@ -517,7 +999,7 @@
                                   </div>
                                 </template>
                               </div>
-                            </div>
+                            </div> -->
                           </template>
                           <!-- 重修目录 -->
                           <template v-if="tab.name == '2'">
@@ -1666,8 +2148,8 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="
-          showInfoDetailModal = false;
-        $router.back(-1);
+  showInfoDetailModal = false;
+$router.back(-1);
         ">取 消</el-button>
         <el-button type="primary" :loading="uploading" @click="submit">确 定</el-button>
       </span>
@@ -1713,8 +2195,8 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="
-          showStampDetailModail = false;
-        $router.back(-1);
+  showStampDetailModail = false;
+$router.back(-1);
         ">取 消</el-button>
         <el-button type="primary" :loading="uploading" @click="stampSubmit">确 定</el-button>
       </span>
@@ -1772,9 +2254,8 @@ import ToolBar from "@/components/toolbar/index";
 import GoodsItem from "@/components/goodsItem/index";
 import * as imageConversion from "image-conversion";
 import { mapGetters, mapMutations, mapActions } from "vuex";
-import * as baseUrls from "@/axios.js";
 import pdf from "vue-pdf";
-import print from "print-js";
+import CourseTree from "@/components/courseTree/CourseTree.vue"
 export default {
   name: "CourseDetail",
   components: {
@@ -1783,6 +2264,7 @@ export default {
     ToolBar,
     pdf,
     GoodsItem,
+    CourseTree
   },
   data() {
     return {
@@ -3963,16 +4445,15 @@ export default {
         this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
         this.courseDetail(); //课程详情
         this.getAnswerList(); //答疑列表
-        // this.courseList.length == 1 &&
-        this.getMenuList(); //学习目录
+        // this.getMenuList(this.courseId); //学习目录
         this.getReMenuList(); //获取重修目录
         this.getNoteList(); //获取节笔记
         //更新老师信息
-        this.goodsTeacher.forEach((item) => {
-          if (item.courseList.some((x) => x.courseId == this.courseId)) {
-            this.teacherList = item.teaList;
-          }
-        });
+        // this.goodsTeacher.forEach((item) => {
+        //   if (item.courseList.some((x) => x.courseId == this.courseId)) {
+        //     this.teacherList = item.teaList;
+        //   }
+        // });
         resolve();
       });
     },
@@ -4005,6 +4486,9 @@ export default {
         // }
         self.detail = res.data;
       });
+    },
+    openCourse() {
+
     },
     openModule(menuItem, status = false, isAuto = false) {
       menuItem.showList = !menuItem.showList;
@@ -4049,6 +4533,7 @@ export default {
     },
     openChapter(chapter) {
       chapter.showList = !chapter.showList;
+      console.log(chapter.showList, this.courseList)
       //获取节试卷列表
       let { chapterId, menuId, list, moduleId, id, isRebuild, courseId } = chapter;
       this.$request
@@ -5631,11 +6116,14 @@ export default {
     /**
      * 展开列表
      */
-    getMenuList() {
+    getMenuList(courseId) {
+      console.log(courseId, 66)
       let self = this;
-      // /course/menuList
+      let index = this.courseList.findIndex(e => e.courseId == courseId)
+      let course = this.courseList[index]
+      course.showList = !course.showList;
       this.$request
-        .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
+        .reMenuList({ courseId, gradeId: this.gradeId })
         .then(async (res) => {
           for (let i = 0; i < res.rows.length; i++) {
             let item = res.rows[i];
@@ -5646,6 +6134,9 @@ export default {
             item.list = [];
             item.parent = this.menuList;
           }
+          course.list = res.rows
+          this.$set(this.courseList, index, course)
+          return
           self.menuList = res.rows;
           if (
             (this.sectionItem.recordingUrl || this.sectionItem.liveUrl) &&
@@ -5962,88 +6453,40 @@ export default {
           self.answerList = data1.reverse();
         });
     },
+    //获取商品双师资模板
+    getDoubleTeacherList(rows) {
+      rows.forEach(e => {
+        e.list = []
+        e.showList = false
+      })
+      return this.$request
+        .courseTeacherList({
+          goodsId: this.goodsId,
+        })
+        .then(({ data }) => {
+
+          data.forEach(ele => {
+            rows.forEach((e, i) => {
+              let index = ele.courseIds.indexOf(e.courseId)
+              if (index == 0) {
+                e.courseList = ele.courseList
+              }
+              if (index > 0) {
+                delete rows[i]
+              }
+            })
+          })
+          return Promise.resolve(rows.filter(e => e))
+        });
+    },
     courseCourseList() {
       return new Promise((resolve) => {
         this.$request.courseCourseList({ goodsId: this.goodsId, gradeId: this.gradeId }).then(async (res) => {
-          //获取商品双师资模板
-          this.$request
-            .courseTeacherList({
-              goodsId: this.goodsId,
-            })
-            .then((res1) => {
-              console.log(res1,666)
-              if (res1.data && res1.data.length > 0) {
-                //课程老师模板
-                let teacherTel = res1.data;
-                //商品课程
-                let courses = res.rows;
-                teacherTel.forEach((tea) => {
-                  let dataList = [];
-                  let teacherList = [];
-                  courses.forEach((item) => {
-                    let data = tea.courseList.filter(
-                      (x) => x.courseId == item.courseId
-                    );
-                    if (data && data.length > 0) {
-                      dataList.push(item);
-                      teacherList = tea.courseList;
-                    }
-                  });
-                  let result = {
-                    teaList: teacherList,
-                    courseList: dataList,
-                  };
-                  this.goodsTeacher.push(result);
-                });
-                if (this.goodsTeacher && this.goodsTeacher.length > 0) {
-                  let courseIds = [];
-                  this.goodsTeacher.forEach((item) => {
-                    item.courseList.forEach((course) => {
-                      courseIds.push(course.courseId);
-                    });
-                  });
-                  if (courseIds.length > 0) {
-                    courses.forEach((item) => {
-                      if (!courseIds.includes(item.courseId)) {
-                        let data = {
-                          teaList: [],
-                          courseList: [],
-                        };
-                        data.courseList.push(item);
-                        this.goodsTeacher.push(data);
-                      }
-                    });
-                  }
-                  this.goodsTeacher.forEach((item) => {
-                    if (item.courseList && item.courseList.length > 0) {
-                      item.courseList[0].show = 1;
-                    }
-                  });
-                }
-              } else {
-                //没有双师资模板
-                res.rows.forEach((item) => {
-                  item.show = 1;
-                  let data = {
-                    teaList: [],
-                    courseList: [],
-                  };
-                  data.courseList.push(item);
-                  this.goodsTeacher.push(data);
-                });
-              }
-              this.goodsTeacher.forEach((item) => {
-                if (item.courseList.some((x) => x.courseId == this.courseId)) {
-                  this.teacherList = item.teaList;
-                }
-              });
-            });
-          this.courseList.push(...res.rows);
+          this.courseList = await this.getDoubleTeacherList(res.rows)
           if (!this.courseId) {
             this.courseId = this.courseList[0].courseId;
           }
           await this.courseChange();
-
           resolve();
         });
       });