saas_pc/src/pages/goodsTopic/components/catalogue.vue

<template>
    <!-- <div> -->
    <div class="container">
        <div class="con_header">
            <div v-for="(item, index) in subList" :key="index" class="con_item"
                :class="{nactive: subIndex == index}" @click="toChangeCou(item, index)">{{ item.subjectName }}</div>
        </div>
        <div class="course_info">
            <div
                class="video_box"
                :style="{ backgroundImage: `url(${$tools.splitImgHost(goodsDetail.coverUrl,false)})`,}"
                >
                <div v-show="vid" id="player"></div>
                <div v-show="vidzb" id="playerzb"></div>
            </div>
            <div class="right-box">
                <div class="right-box__header">
                    <div class="tabs">
                        <el-tabs v-model="courseTabIndex">
                            <el-tab-pane
                                :name="tab.name"
                                v-for="(tab, index) in menuTab"
                                :key="index"
                            >
                                <div slot="label">
                                    <span class="label">{{ tab.label }}</span>
                                </div>
                                <!-- 章节目录 -->
                                <template v-if="tab.name == '1'">
                                    <!-- <catalogue :goodsId='goodsId'></catalogue> -->
                                    <div class="mulu_body">
                                        <div class="left-box">
                                            <div class="left-box__body">
                                                <div
                                                class="course-list-item"
                                                v-for="(course, index) in s_courseList"
                                                :key="index"
                                                >
                                                <div
                                                    class="course-list-item_title"
                                                    @click="openCourse(course)"
                                                >
                                                    <i
                                                    :class="{
                                                        'el-icon-caret-right': !course.showList,
                                                        'el-icon-caret-bottom': course.showList,
                                                    }"
                                                    ></i>
                                                    {{ course.courseName }}
                                                </div>
                                                <template v-if="course.showList">
                                                    <div
                                                    class="item"
                                                    v-for="(item, index) in course.list"
                                                    :key="index"
                                                    >
                                                    <template v-if="item.type == 1">
                                                        <div
                                                        class="item__title"
                                                        @click="openModule(item)"
                                                        >
                                                        <i
                                                            :class="{
                                                            'el-icon-caret-right': !item.showList,
                                                            'el-icon-caret-bottom': item.showList,
                                                            }"
                                                        ></i>
                                                        {{ item.name }}
                                                        </div>
                                                        <div class="item__content">
                                                        <div
                                                            class="bank-chapter"
                                                            v-if="item.showList"
                                                        >
                                                            <div
                                                            class="bank-chapter__item"
                                                            v-for="(
                                                                chapter, chapterIndex
                                                            ) in item.list"
                                                            :key="chapterIndex"
                                                            >
                                                            <div
                                                                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"
                                                            >
                                                                <div
                                                                class="bank-section__item"
                                                                v-for="(
                                                                    section, sectionIndex
                                                                ) in chapter.list"
                                                                :key="sectionIndex"
                                                                >
                                                                <div
                                                                    class="bank-section__item__text"
                                                                >
                                                                    {{ section.name }}
                                                                </div>
                                                                <div
                                                                    v-if="section.tryListen"
                                                                    @click="
                                                                    toDo(section, item.courseId)
                                                                    "
                                                                    class="btn"
                                                                >
                                                                    试看
                                                                </div>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    </template>

                                                    <template v-if="item.type == 2">
                                                        <div class="item__content">
                                                        <div class="bank-chapter">
                                                            <div class="bank-chapter__item">
                                                            <div
                                                                class="bank-chapter__item__text"
                                                                @click="openChapter(item)"
                                                            >
                                                                <i
                                                                :class="{
                                                                    'el-icon-caret-right':
                                                                    !item.showList,
                                                                    'el-icon-caret-bottom':
                                                                    item.showList,
                                                                }"
                                                                ></i
                                                                >{{ item.name }}
                                                            </div>

                                                            <div
                                                                class="bank-section"
                                                                v-if="item.showList"
                                                            >
                                                                <div
                                                                class="bank-section__item"
                                                                v-for="(
                                                                    section, sectionIndex
                                                                ) in item.list"
                                                                :key="sectionIndex"
                                                                >
                                                                <div
                                                                    class="bank-section__item__text"
                                                                >
                                                                    {{ section.name }}
                                                                </div>
                                                                <div
                                                                    v-if="section.tryListen"
                                                                    @click="
                                                                    toDo(section, item.courseId)
                                                                    "
                                                                    class="btn"
                                                                >
                                                                    试看
                                                                </div>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    </template>

                                                    <template v-if="item.type == 3">
                                                        <div class="item__content">
                                                        <div class="bank-section">
                                                            <div class="bank-section__item">
                                                            <div class="bank-section__item__text">
                                                                {{ item.name }}
                                                            </div>
                                                            <div
                                                                v-if="item.tryListen"
                                                                @click="toDo(item, item.courseId)"
                                                                class="btn"
                                                            >
                                                                试看
                                                            </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    </template>
                                                    </div>
                                                </template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="down_bottons">
                                        <div class="ask_manage" @click="toAskManage()">咨询管理</div>
                                        <div class="ask_manage ask_buy" @click="togoBuy()">立即购买</div>
                                        <div v-if="showAsk" class="apply_ask">
                                            <div class="ask_titles">报名咨询</div>
                                            <div class="ask_time">周一至周日 9:00-18:00</div>
                                            <div class="phones">
                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
                                                <span>020-87085983</span>
                                            </div>
                                            <div class="phones">
                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
                                                <span>020-87085982</span>
                                            </div>
                                            <div class="phones">
                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
                                                <span>13631379636</span>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 弹窗 -->
        <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="1" :type="1"></buy-dialog>
    </div>
        
    <!-- </div> -->
</template>

<script>
import buyDialog from './buyDialog.vue'
export default {
    name: 'boxs',
    components: { buyDialog },
    props: {
        goodsId: {
            type: [String, Number],
            default: ''
        },
        topicId: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            vid: "",
            vidzb: "",
            player: "",
            playerzb: "",
            activeId: "", //当前选中ID
            vodPlayerJs: "https://player.polyv.net/script/player.js",
            playerJs:
                "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
            uidzb: "egsxlptzdq",
            menuTab: [
                {
                    name: "1",
                    label: "章节目录",
                }
            ],
            courseTabIndex: "1",
            param: {
                pageNum: 1,
                pageSize: 100,
                total: 0,
            },
            needOpen: true, //是否需要一进来展开第一章节
            menuIndex: [], //需要展开的章节索引值
            courseList: [],
            s_courseList: [],
            goodsAuditionConfigIdList: [],
            listenConfigList: [],
            courserIndex: 0,
            goodsDetail: {},
            goodsExamConfig: [],
            subList: [],
            subIndex: 0,
            playCourseId: 0, // 播放课程id
            showAsk: false,
            buyModal: false,
        }
    },
    watch: {
        async goodsId(newV, oldV) {
            if (newV) {
                console.log('监听', this.topicId)
                await this.getGoodsDetail()
                this.goodsCourseList()
            }
        }
    },
    methods: {
        toAskManage() {
            this.showAsk = !this.showAsk
        },
        toChangeCou(item, index) {
            this.subIndex = index
            this.s_courseList = this.courseList.filter(e => e.subjectId == item.subjectId)
        },
        togoBuy() {
            this.buyModal = true
        },
        /**
         * 获取商品详情
         */
        getGoodsDetail() {
            this.$request.commonGoodsDetail(this.goodsId).then((res) => {
                if (res.data.pcDetailHtml) {
                res.data.pcDetailHtml =
                    res.data.pcDetailHtml &&
                    res.data.pcDetailHtml.replace(
                    /<img/gi,
                    '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
                    );
                }
                this.goodsDetail = res.data
                this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig)

                if (this.goodsDetail.goodsAuditionConfig) {
                    this.listenConfigList = JSON.parse(this.goodsDetail.goodsAuditionConfig);
                    for (var itemChild of this.listenConfigList) {
                        this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
                    }
                    console.log(
                        this.goodsAuditionConfigIdList,
                        "this.goodsAuditionConfigIdList"
                    );
                }
            });
        },
        /**
         * 获取课程章节列表，/app/common/goods/course/list/' + data,
         */
        goodsCourseList() {
            this.$request.goodsCourseList(this.goodsId).then(async (res) => {
                if (res.code == 200) {
                    res.rows.forEach((item) => {
                        item.showList = false
                        item.list = []
                    })
                    this.courseList = res.rows || []
                    // 筛选科目名称
                    let ids = []
                    const newArr = []
                    this.courseList.forEach(item => {
                        if (ids.indexOf(item.subjectId) == -1) {
                            ids.push(item.subjectId)
                            newArr.push(item)
                        }
                    })
					this.subList = [...newArr]
                    this.subList = this.subList.filter(item => item.subjectName)
                    console.log('this.subList', this.subList)
                    
                    if (this.needOpen) {
                        for (let i = 0; i < this.courseList.length; i++) {
                            let menuIndexOrFalse = await this.getCourseMenus(
                                this.courseList[i]
                            )
                            // console.log('111menuIndexOrFalse', menuIndexOrFalse)
                            if (menuIndexOrFalse !== false) {
                                this.menuIndex = [i, menuIndexOrFalse]
                                this.openCourse(this.courseList[i])
                                break
                            }
                        }
                        this.s_courseList = this.courseList.filter(item => item.subjectId == this.subList[0].subjectId)
                    }
                    console.log('s_courseList', this.s_courseList);
                }
                
            })
        },
        // 获取课程目录，/app/common/course/menuList
        getCourseMenus(item) {
            return new Promise((resolve) => {
                this.$request.menuList({ courseId: item.courseId }).then((res) => {
                if (res.code == 200) {
                    for (let i = 0; i < res.rows.length; i++) {
                        // 1模块 2章 3节	
                        if (res.rows[i].type == 1 || res.rows[i].type == 2) {
                            resolve(i);
                            break;
                        }
                    }
                }
                });
            });
        },
        /**
         * 点击课程大目录
         */
        openCourse(course) {
            course.showList = !course.showList;

            if (!course.list.length) {
                this.getMenuList(course);
            }
        },
        /**
         * 获取模块列表
         */
        getMenuList(item) {
            this.$request.menuList({ courseId: item.courseId }).then((res) => {
                for (let i = 0; i < res.rows.length; i++) {
                    let item = res.rows[i];
                    item.showList = false;
                    item.id = item.menuId;
                    item.name = item.menuName;

                    if (item.type == 3) {
                        //判断是否试听
                        item.tryListen = false;
                        if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
                            item.tryListen = true;
                        }
                    } else {
                        item.list = [];
                    }
                }
                item.list = res.rows;

                if (this.needOpen) {
                    if (item.list[this.menuIndex[1]].type == 1) {
                        this.openModule(item.list[this.menuIndex[1]]);
                    } else if (item.list[this.menuIndex[1]].type == 2) {
                        this.needOpen = false;
                        this.openChapter(item.list[this.menuIndex[1]]);
                    }
                }
            });
        },
        /**
         * 展开模块卷
         */
        openModule(Module) {
            console.log('点击模块卷')
            this.$set(Module, "showList", !Module.showList);
            if (!Module.list.length) {
                this.getChapterList(Module);
            }
        },
        getChapterList(Module) {
            this.$request.chapterList(Module.id).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.menuType = 2;
                }
                Module.list = res.data;

                if (this.needOpen) {
                    this.needOpen = false;
                    this.openChapter(Module.list[0]);
                }
            });
        },
        /**
         * 展开章卷
         */
        openChapter(chapter) {
            console.log('点开章卷')
            this.$set(chapter, "showList", !chapter.showList);

            if (!chapter.list.length) {
                this.getSectionList(chapter);
            }
        },
        getSectionList(chapter) {
            this.$request.sectionList(chapter.id).then((res) => {
                for (let i = 0; i < res.data.length; i++) {
                    let item = res.data[i];
                    item.id = item.sectionId;
                    item.menuType = 3;
                    //判断是否试听
                    item.tryListen = false;
                    if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
                        item.tryListen = true;
                    }
                }
                chapter.list = res.data;
            });
        },
        /**
         * 试看
         */
        toDo(section, courseId) {
            console.log('section, courseId', section, courseId)
            this.playCourseId = courseId
            console.log(this.playCourseId, "playCourseId")
            this.initVideo(section)
        },
        async initVideo(option) {
            await this.clears();
            console.log('option:',option);
            this.sectionItem = option;
            if (option.sectionType === 2) {
                this.vidzb = option.liveUrl;
                this.loadPlayerScriptzb(this.loadPlayerzb);
            } else {
                this.vid = option.recordingUrl;
                this.loadPlayerScript(this.loadPlayer);
            }
        },
        /**
         * @param {String} 关闭视频窗口-销毁实例
         */
        clears() {
            return new Promise((resolve, reject) => {
                this.vid = "";
                this.vidzb = "";
                if (this.player) {
                    this.player.destroy();
                }
                if (this.playerzb) {
                    this.playerzb.destroy();
                }
                resolve();
            });
        },
        loadPlayerzb() {
            const polyvLivePlayer = window.polyvLivePlayer;
            this.playerzb = polyvLivePlayer({
                wrap: "#playerzb",
                width: 700,
                height: 528,
                uid: this.uidzb,
                vid: this.vidzb,
            });
        },
        loadPlayer() {
            const polyvPlayer = window.polyvPlayer;
            let auditionMinute = this.listenConfigList.find((item) => {
                if (item.sectionId == (this.sectionItem.sectionId || this.sectionItem.menuId) && item.courseId == this.playCourseId) {
                    return true;
                }
            }).auditionMinute;

            // this.$request.obtainpolyvvideosign(this.vid).then((res) => {
            this.player = polyvPlayer({
                wrap: "#player",
                width: 700,
                height: 528,
                vid: this.vid,
                start: 0,
                end: auditionMinute,
                teaser_show: 0,
                // ts: res.data.ts,
                // sign: res.data.sign,
                playsafe: function (vid, next) {
                    next();
                },
            });

            this.player.on("s2j_onPlayOver", () => {
                this.$confirm("试看结束，购买课程可学习全部", "提示", {
                    closeOnClickModal: false,
                    showCancelButton: false,
                    closeOnPressEscape: false,
                    distinguishCancelAndClose: false,
                    showClose: false,
                }).then((res) => {
                    // this.videoModalShow = false;
                });
            });
            // });
        },
        /**
         * @param {String} 直播预览
         */
        loadPlayerScriptzb(callback) {
            if (!window.polyvLivePlayer) {
                const myScript = document.createElement("script");
                myScript.setAttribute("src", this.playerJs);
                myScript.onload = callback;
                document.body.appendChild(myScript);
            } else {
                callback();
            }
        },
        loadPlayerScript(callback) {
            if (!window.polyvPlayer) {
                const myScript = document.createElement("script");
                myScript.setAttribute("src", this.vodPlayerJs);
                myScript.onload = callback;
                document.body.appendChild(myScript);
            } else {
                callback();
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}
.con_header {
    width: 1113px;
    height: 44px;
    background: #3F4449;
    display: flex;
    @media screen and (max-width: 1370px){
        width: 900px;
    }
    .con_item {
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
        cursor: pointer;
        &.nactive {
            background: #3F8DFD;
        }
    }
}
.course_info {
    display: flex;
    align-items: center;
    justify-items: center;
}
.video_box {
    width: 709px;
    height: 484px;
    background-size: 100% 100%;
    @media screen and (max-width: 1370px){
        width: 497px;
    }
    .video {
        width: 100%;
        height: 100%;
    }
}
.right-box {
    width: 404px;
    height: 484px;
    background: #3f4449;
    border-radius: 0px;
    &__header {
        .tabs {
            /deep/.el-tabs__nav-wrap::after {
                background-color: #999;
            }

            /deep/ .el-tabs__header {
                margin: 0;
            }

            .label {
                color: #fff;
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
            }
            
        }
    }
}
.mulu_body {
    width: 404px;
    height: 401px;
    background: #3f4449;
    border-radius: 0px;
    .left-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .course-list-item {
            padding: 16px;
            border-radius: 10px;

            .item {
                overflow: hidden;
                margin-top: 12px;
                &__title {
                    padding: 10px 0;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #fff;
                }

                &__content {
                    .bank-chapter {
                        margin-left: 4px;

                        &__item {
                            padding-top: 10px;
                            padding-bottom: 10px;
                            // border-bottom: 1px solid #eeeeee;
                            font-size: 14px;
                            color: #fff;
                            &__text {
                                cursor: pointer;
                                flex: 1;
                            }
                        }
                    }

                    .bank-section {
                        margin-left: 40px;

                        &__item {
                            padding-top: 10px;
                            padding-bottom: 10px;
                            // border-bottom: 1px solid #eeeeee;
                            font-size: 14px;
                            display: flex;
                            color: #3f8dfd;
                            &__text {
                                flex: 1;
                            }

                            .btn {
                                margin-right: 20px;
                                width: 40px;
                                height: 24px;
                                border: 1px solid #ff3b30;
                                border-radius: 8px;
                                line-height: 22px;
                                color: #ff3b30;
                                text-align: center;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        .course-list-item_title {
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
        }
    }
}
.down_bottons {
    width: 404px;
    height: 44px;
    display: flex;
    position: relative;
    top: 0px;
    left: 0px;
    .ask_manage {
        width: 202px;
        height: 44px;
        background: #1B2632;
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
    }
    .ask_buy {
        background: #3F8DFD;
    }
    .apply_ask {
        width: 173px;
        height: 196px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
        padding: 20px;
        position: absolute;
        top: -213px;
        left: 17px;
        .ask_titles {
            font-size: 14px;
            font-weight: bold;
            color: #222222;
        }
        .ask_time {
            font-size: 12px;
            color: #999999;
            margin: 3px 0px 21px 0px;
        }
        .phones {
            margin-bottom: 21px;
            display: flex;
            align-items: center;
            .icon_phone {
                width: 16px;
                height: 16px;
                margin-right: 12px;
            }
            >span {
                font-size: 14px;
                color: #222222;
            }
        }
        &::after {
            content: '';
            width: 0;
            height: 0;
            border-top: 14px solid #fff;
            border-right: 12px solid transparent;
            border-left: 12px solid transparent;
            position: absolute;
            bottom: -10px;
            left: 72px;
        }
    }
}
</style>