|
|
@@ -1,221 +1,260 @@
|
|
|
<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" class="video"></div>
|
|
|
- <div v-show="vidzb" id="playerzb" class="video"></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> -->
|
|
|
+ <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" class="video"></div>
|
|
|
+ <div v-show="vidzb" id="playerzb" class="video"></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'">
|
|
|
+ <div class="mulu_body">
|
|
|
+ <div class="left-box">
|
|
|
+ <div
|
|
|
+ v-for="(courseItem, tindex) in goodsTeacher"
|
|
|
+ :key="tindex + 'one'"
|
|
|
+ >
|
|
|
+ <div class="left-box__body">
|
|
|
+ <template
|
|
|
+ v-for="(course, cindex) in courseItem.courseList"
|
|
|
+ >
|
|
|
+ <!-- v-for="(course, cindex) in s_courseList" -->
|
|
|
+ <div v-if="course.show == 1" :key="cindex + 'two'">
|
|
|
+ <div
|
|
|
+ class="course-list-item"
|
|
|
+ v-show="
|
|
|
+ course.subjectId === newActiveSubjectId ||
|
|
|
+ !newActiveSubjectId
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <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="tab.name == '1'">
|
|
|
- <div class="mulu_body">
|
|
|
- <div class="left-box">
|
|
|
- <div v-for="(courseItem, tindex) in goodsTeacher" :key="tindex + 'one'">
|
|
|
- <div class="left-box__body">
|
|
|
- <template v-for="(course, cindex) in courseItem.courseList">
|
|
|
- <!-- v-for="(course, cindex) in s_courseList" -->
|
|
|
- <div v-if="course.show == 1" :key="cindex + 'two'">
|
|
|
- <div
|
|
|
- class="course-list-item"
|
|
|
- v-show="course.subjectId === newActiveSubjectId || !newActiveSubjectId"
|
|
|
- >
|
|
|
- <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>
|
|
|
- <div v-if="courseItem.teaList && courseItem.teaList.length > 0" class="teacher_names">
|
|
|
- <div v-for="(tea, index) in courseItem.teaList" :key="index + 'three'" class="names"
|
|
|
- :class="{nactive: States[tindex] == index}"
|
|
|
- @click="switchTeacher(tea, index, tindex)">
|
|
|
- {{ tea.aliasName }}
|
|
|
- </div>
|
|
|
- </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>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ courseItem.teaList &&
|
|
|
+ courseItem.teaList.length > 0
|
|
|
+ "
|
|
|
+ class="teacher_names"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(tea, index) in courseItem.teaList"
|
|
|
+ :key="index + 'three'"
|
|
|
+ class="names"
|
|
|
+ :class="{
|
|
|
+ nactive: States[tindex] == index,
|
|
|
+ }"
|
|
|
+ @click="switchTeacher(tea, index, tindex)"
|
|
|
+ >
|
|
|
+ {{ tea.aliasName }}
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
|
|
|
- <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="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>
|
|
|
|
|
|
- <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 == 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>
|
|
|
|
|
|
- <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>
|
|
|
- </template>
|
|
|
+ <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>
|
|
|
- <div class="down_bottons">
|
|
|
- <!-- <div class="asks">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="down_bottons">
|
|
|
+ <!-- <div class="asks">
|
|
|
<div class="ask_manage" @click="toAskManage()">咨询管理</div>
|
|
|
<div class="apply_ask">
|
|
|
<div class="ask_titles">报名咨询</div>
|
|
|
@@ -226,725 +265,759 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <el-popover placement="top" width="202" trigger="hover">
|
|
|
- <div class="apply_ask">
|
|
|
- <div class="ask_titles">报名咨询</div>
|
|
|
- <div class="ask_time">{{ header.serviceTel.time }}</div>
|
|
|
- <div class="phones" v-for="(item, index) in getTel(header.serviceTel.tel)" :key="index">
|
|
|
- <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
|
|
|
- <span>{{ item }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div slot="reference">
|
|
|
- <div class="ask_manage" @click="toAskManage()">咨询管理</div>
|
|
|
- </div>
|
|
|
- </el-popover>
|
|
|
- <div class="ask_buy" @click="togoBuy()">立即购买</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-popover placement="top" width="202" trigger="hover">
|
|
|
+ <div class="apply_ask">
|
|
|
+ <div class="ask_titles">报名咨询</div>
|
|
|
+ <div class="ask_time">{{ header.serviceTel.time }}</div>
|
|
|
+ <div
|
|
|
+ class="phones"
|
|
|
+ v-for="(item, index) in getTel(header.serviceTel.tel)"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="icon_phone"
|
|
|
+ src="@/assets/topic/ask_phone.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="reference">
|
|
|
+ <div class="ask_manage" @click="toAskManage()">
|
|
|
+ 咨询管理
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <div class="ask_buy" @click="togoBuy()">立即购买</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="1" :type="3"></buy-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- </div> -->
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <buy-dialog
|
|
|
+ :buyModal.sync="buyModal"
|
|
|
+ :topicId="topicId"
|
|
|
+ :subjectType="1"
|
|
|
+ :type="3"
|
|
|
+ ></buy-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- </div> -->
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from "vuex"
|
|
|
-import buyDialog from './buyDialog.vue'
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import buyDialog from "./buyDialog.vue";
|
|
|
export default {
|
|
|
- name: 'boxs',
|
|
|
- components: { buyDialog },
|
|
|
- props: {
|
|
|
- goodsId: {
|
|
|
- type: [String, Number],
|
|
|
- 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: "章节目录",
|
|
|
},
|
|
|
- topicId: {
|
|
|
- type: [String, Number],
|
|
|
- default: ''
|
|
|
+ ],
|
|
|
+ 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,
|
|
|
+ goodsTeacher: [],
|
|
|
+ teaIndex: 0,
|
|
|
+ States: { 0: 0 },
|
|
|
+ newActiveSubjectId: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ async goodsId(newV, oldV) {
|
|
|
+ if (newV) {
|
|
|
+ await this.getGoodsDetail();
|
|
|
+ this.goodsCourseList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["header"]),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTel(tel) {
|
|
|
+ return tel ? tel.split(";") : [];
|
|
|
+ },
|
|
|
+ toAskManage() {
|
|
|
+ this.showAsk = !this.showAsk;
|
|
|
+ },
|
|
|
+ toChangeCou(item, index) {
|
|
|
+ this.newActiveSubjectId = item.subjectId;
|
|
|
+ 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"
|
|
|
+ );
|
|
|
}
|
|
|
+ });
|
|
|
},
|
|
|
- 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,
|
|
|
- goodsTeacher: [],
|
|
|
- teaIndex: 0,
|
|
|
- States: {0: 0},
|
|
|
- newActiveSubjectId: '',
|
|
|
+ //切换老师
|
|
|
+ switchTeacher(data, index, tindex) {
|
|
|
+ console.log(data, "data", index, tindex);
|
|
|
+ this.States[tindex] = index;
|
|
|
+ this.teaIndex = index;
|
|
|
+ this.goodsTeacher.forEach((item, index) => {
|
|
|
+ if (item.teaList && item.teaList.length > 0) {
|
|
|
+ let list = item.teaList.filter((x) => x.courseId == data.courseId);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ item.courseList.forEach((course, courseIndex) => {
|
|
|
+ if (course.courseId == data.courseId) {
|
|
|
+ this.$set(
|
|
|
+ this.goodsTeacher[index].courseList[courseIndex],
|
|
|
+ "show",
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.$set(
|
|
|
+ this.goodsTeacher[index].courseList[courseIndex],
|
|
|
+ "show",
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
+ });
|
|
|
},
|
|
|
- watch: {
|
|
|
- async goodsId(newV, oldV) {
|
|
|
- if (newV) {
|
|
|
- await this.getGoodsDetail()
|
|
|
- this.goodsCourseList()
|
|
|
+ /**
|
|
|
+ * 获取课程章节列表，/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.getCourseTeacher(res.rows);
|
|
|
+ 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);
|
|
|
+ this.subList.length &&
|
|
|
+ (this.newActiveSubjectId = this.subList[0].subjectId);
|
|
|
+
|
|
|
+ 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);
|
|
|
}
|
|
|
+ });
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters(["header"]),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getTel(tel) {
|
|
|
- return tel ? tel.split(";") : []
|
|
|
- },
|
|
|
- toAskManage() {
|
|
|
- this.showAsk = !this.showAsk
|
|
|
- },
|
|
|
- toChangeCou(item, index) {
|
|
|
- this.newActiveSubjectId = item.subjectId
|
|
|
- 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"
|
|
|
- );
|
|
|
+ getCourseTeacher(rows) {
|
|
|
+ //获取商品双师资模板
|
|
|
+ this.$request
|
|
|
+ .getGoodsCourseTeacher({
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ })
|
|
|
+ .then((res1) => {
|
|
|
+ console.log(res1, "res1");
|
|
|
+ if (res1.data && res1.data.length > 0) {
|
|
|
+ //课程老师模板
|
|
|
+ let teacherTel = res1.data;
|
|
|
+ //商品课程
|
|
|
+ let courses = 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);
|
|
|
});
|
|
|
- },
|
|
|
- //切换老师
|
|
|
- switchTeacher(data, index, tindex){
|
|
|
- console.log(data,'data', index,tindex);
|
|
|
- this.States[tindex] = index
|
|
|
- this.teaIndex = index
|
|
|
- this.goodsTeacher.forEach((item,index) => {
|
|
|
- if(item.teaList && item.teaList.length > 0){
|
|
|
- let list = item.teaList.filter(x => x.courseId == data.courseId)
|
|
|
- if(list && list.length > 0){
|
|
|
- item.courseList.forEach((course,courseIndex) => {
|
|
|
- if(course.courseId == data.courseId){
|
|
|
-
|
|
|
- this.$set(this.goodsTeacher[index].courseList[courseIndex],"show",1)
|
|
|
- }else{
|
|
|
- this.$set(this.goodsTeacher[index].courseList[courseIndex],"show",0)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取课程章节列表，/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.getCourseTeacher(res.rows)
|
|
|
- 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)
|
|
|
- this.subList.length && (this.newActiveSubjectId = this.subList[0].subjectId)
|
|
|
-
|
|
|
- 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);
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- getCourseTeacher(rows) {
|
|
|
- //获取商品双师资模板
|
|
|
- this.$request.getGoodsCourseTeacher({
|
|
|
- goodsId: this.goodsId
|
|
|
- }).then((res1) => {
|
|
|
- console.log(res1,'res1');
|
|
|
- if(res1.data && res1.data.length > 0){
|
|
|
- //课程老师模板
|
|
|
- let teacherTel = res1.data;
|
|
|
- //商品课程
|
|
|
- let courses = 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{
|
|
|
- //没有双师资模板
|
|
|
- rows.forEach((item) => {
|
|
|
- item.show = 1
|
|
|
- let data = {
|
|
|
- teaList:[],
|
|
|
- courseList: []
|
|
|
+ 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);
|
|
|
}
|
|
|
- data.courseList.push(item)
|
|
|
- this.goodsTeacher.push(data)
|
|
|
- })
|
|
|
-
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
- console.log(this.goodsTeacher,'this.goodsTeacher');
|
|
|
- },
|
|
|
- // 获取课程目录，/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;
|
|
|
- }
|
|
|
- }
|
|
|
+ this.goodsTeacher.forEach((item) => {
|
|
|
+ if (item.courseList && item.courseList.length > 0) {
|
|
|
+ item.courseList[0].show = 1;
|
|
|
}
|
|
|
- });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //没有双师资模板
|
|
|
+ rows.forEach((item) => {
|
|
|
+ item.show = 1;
|
|
|
+ let data = {
|
|
|
+ teaList: [],
|
|
|
+ courseList: [],
|
|
|
+ };
|
|
|
+ data.courseList.push(item);
|
|
|
+ this.goodsTeacher.push(data);
|
|
|
});
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击课程大目录
|
|
|
- */
|
|
|
- openCourse(course) {
|
|
|
- course.showList = !course.showList;
|
|
|
-
|
|
|
- if (!course.list.length) {
|
|
|
- this.getMenuList(course);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.goodsTeacher, "this.goodsTeacher");
|
|
|
+ },
|
|
|
+ // 获取课程目录，/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;
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取模块列表
|
|
|
- */
|
|
|
- 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击课程大目录
|
|
|
+ */
|
|
|
+ openCourse(course) {
|
|
|
+ course.showList = !course.showList;
|
|
|
|
|
|
- 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 (!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 (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);
|
|
|
+ if (item.type == 3) {
|
|
|
+ //判断是否试听
|
|
|
+ item.tryListen = false;
|
|
|
+ if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
|
|
|
+ item.tryListen = true;
|
|
|
}
|
|
|
- },
|
|
|
- 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;
|
|
|
+ } else {
|
|
|
+ item.list = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ item.list = res.rows;
|
|
|
|
|
|
- if (this.needOpen) {
|
|
|
- this.needOpen = false;
|
|
|
- this.openChapter(Module.list[0]);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 展开章卷
|
|
|
- */
|
|
|
- openChapter(chapter) {
|
|
|
- console.log('点开章卷')
|
|
|
- this.$set(chapter, "showList", !chapter.showList);
|
|
|
+ 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 (!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: 484,
|
|
|
- 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;
|
|
|
+ if (this.needOpen) {
|
|
|
+ this.needOpen = false;
|
|
|
+ this.openChapter(Module.list[0]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 展开章卷
|
|
|
+ */
|
|
|
+ openChapter(chapter) {
|
|
|
+ console.log("点开章卷");
|
|
|
+ this.$set(chapter, "showList", !chapter.showList);
|
|
|
|
|
|
- // this.$request.obtainpolyvvideosign(this.vid).then((res) => {
|
|
|
- this.player = polyvPlayer({
|
|
|
- wrap: "#player",
|
|
|
- // width: 700,
|
|
|
- height: 484,
|
|
|
- vid: this.vid,
|
|
|
- start: 0,
|
|
|
- end: auditionMinute,
|
|
|
- teaser_show: 0,
|
|
|
- // ts: res.data.ts,
|
|
|
- // sign: res.data.sign,
|
|
|
- playsafe: function (vid, next) {
|
|
|
- next();
|
|
|
- },
|
|
|
- });
|
|
|
+ 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: 484,
|
|
|
+ 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.player.on("s2j_onPlayOver", () => {
|
|
|
- this.$confirm("试看结束，购买课程可学习全部", "提示", {
|
|
|
- closeOnClickModal: false,
|
|
|
- showCancelButton: false,
|
|
|
- closeOnPressEscape: false,
|
|
|
- distinguishCancelAndClose: false,
|
|
|
- showClose: false,
|
|
|
- }).then((res) => {
|
|
|
- // this.videoModalShow = false;
|
|
|
- });
|
|
|
+ this.$request.obtainpolyvvideosign(this.vid).then((res) => {
|
|
|
+ this.player = polyvPlayer({
|
|
|
+ wrap: "#player",
|
|
|
+ // width: 700,
|
|
|
+ height: 484,
|
|
|
+ vid: this.vid,
|
|
|
+ start: 0,
|
|
|
+ end: auditionMinute,
|
|
|
+ teaser_show: 0,
|
|
|
+ ts: res.data.ts,
|
|
|
+ sign: res.data.sign,
|
|
|
+ playsafe: function (vid, next) {
|
|
|
+ self.$request.obtainpolyvvideopcsign(vid).then((res) => {
|
|
|
+ next(res.data);
|
|
|
});
|
|
|
- // });
|
|
|
- },
|
|
|
- /**
|
|
|
- * @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();
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ 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%;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ /deep/ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
|
|
|
- .label {
|
|
|
- color: #fff;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ .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;
|
|
|
- padding-top: 10px;
|
|
|
- .course-list-item {
|
|
|
- padding: 0px 16px 10px;
|
|
|
- border-radius: 10px;
|
|
|
+ width: 404px;
|
|
|
+ height: 401px;
|
|
|
+ background: #3f4449;
|
|
|
+ border-radius: 0px;
|
|
|
+ .left-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 10px;
|
|
|
+ .course-list-item {
|
|
|
+ padding: 0px 16px 10px;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ &__content {
|
|
|
+ .bank-chapter {
|
|
|
+ margin-left: 4px;
|
|
|
|
|
|
- &__item {
|
|
|
- padding-top: 10px;
|
|
|
- // padding-bottom: 10px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- &__text {
|
|
|
- cursor: pointer;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &__item {
|
|
|
+ padding-top: 10px;
|
|
|
+ // padding-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ &__text {
|
|
|
+ cursor: pointer;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .bank-section {
|
|
|
- margin-left: 40px;
|
|
|
+ .bank-section {
|
|
|
+ margin-left: 40px;
|
|
|
|
|
|
- &__item {
|
|
|
- padding-top: 10px;
|
|
|
- // padding-bottom: 10px;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- color: #3f8dfd;
|
|
|
- &__text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+ &__item {
|
|
|
+ padding-top: 10px;
|
|
|
+ // padding-bottom: 10px;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .course-list-item_title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
.down_bottons {
|
|
|
- width: 404px;
|
|
|
- height: 44px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ width: 404px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
-.ask_manage, .ask_buy {
|
|
|
- width: 202px;
|
|
|
- height: 44px;
|
|
|
- background: #1B2632;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 44px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
+.ask_manage,
|
|
|
+.ask_buy {
|
|
|
+ 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;
|
|
|
+ background: #3f8dfd;
|
|
|
}
|
|
|
|
|
|
.apply_ask {
|
|
|
- display: block;
|
|
|
- width: 173px;
|
|
|
- // height: 196px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 2px;
|
|
|
- padding: 20px;
|
|
|
- .ask_titles {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- .ask_time {
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- margin: 3px 0px 21px 0px;
|
|
|
+ display: block;
|
|
|
+ width: 173px;
|
|
|
+ // height: 196px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 20px;
|
|
|
+ .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;
|
|
|
}
|
|
|
- .phones {
|
|
|
- margin-bottom: 21px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .icon_phone {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- >span {
|
|
|
- font-size: 14px;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
+ > span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
// 老师名称样式
|
|
|
.teacher_names {
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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>
|
xiejiebiao