chenxiong 3 лет назад
Родитель
Сommit
add52db330

+ 28 - 0
src/apis/mock.js

@@ -0,0 +1,28 @@
+import request from '@/axios'
+export default {
+  mockApplyListApply(data) {
+		return request({
+			url: '/mock/apply/listApply',
+			method: 'get',
+			params: data
+		})
+	},
+	
+	userSubscribe(data) {
+		return request({
+			url: '/user/subscribe/'+data,
+			method: 'get',
+		})
+	},
+	
+	mockApplyListApplyBusiness(data) {
+		return request({
+			url: '/mock/apply/listApplyBusiness',
+			method: 'get',
+		})
+	},
+  
+  
+  
+  
+}

+ 15 - 4
src/apis/polvy.js

@@ -33,10 +33,21 @@ export default {
   },
   //获取保利威视频信息详细信息
   inquirepolyvvideo(data) {
-      return request({
-          url: `/polyv/video/` + data,
-          method: 'get',
-      })
+    return request({
+        url: `/polyv/video/` + data,
+        method: 'get',
+    })
   },
+
+  //获取保利威视频信息详细信息
+  polyvLivesign(data) {
+    return request({
+        url: `/polyv/live/sign`,
+        method: 'get',
+        params:data
+    })
+  },
+
+  
   
 }

BIN
src/assets/appoinsuccess.png


Разница между файлами не показана из-за своего большого размера
+ 842 - 0
src/assets/css/chatroom.css


BIN
src/assets/living.png


BIN
src/assets/play.png


BIN
src/assets/wait.png


+ 2 - 2
src/components/toolbar/index.vue

@@ -148,7 +148,7 @@ export default {
       font-size: 24px;
       height: 24px;
       display: block;
-      margin: 0 auto;
+      margin: 0 auto 5px;
     }
 
     .text {
@@ -158,7 +158,7 @@ export default {
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #999999;
-      line-height: 24px;
+      line-height: 16px;
     }
 
     .blue {

+ 2603 - 0
src/pages/goods-detail/live-detail.vue

@@ -0,0 +1,2603 @@
+<template>
+  <div class="goods-detail">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <div class="container">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item :to="{ path: '/index' }"
+                >首页</el-breadcrumb-item
+              >
+              <el-breadcrumb-item>商品详情</el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+        </div>
+        <div class="section__body">
+          <div class="container">
+            <div class="goods-info">
+              <div class="goods-info__header">
+                <div class="img">
+                  <img
+                    :src="$tools.splitImgHost(goodsDetail.coverUrl, true)"
+                    alt=""
+                  />
+                </div>
+                <div class="text">
+                  <div class="title">
+                    {{ goodsDetail.goodsName }}
+                  </div>
+                  <div class="desc">
+                    {{ courseList.length }} 课程
+                    {{ goodsDetail.classHours }}学时
+                  </div>
+                  <div class="price">
+                    ¥{{ goodsDetail.standPrice | toFixed }}
+                  </div>
+                  <div class="btns">
+                    <el-button
+                      type="primary"
+                      round
+                      class="buynow"
+                      @click="buyNow()"
+                      >立即购买</el-button
+                    >
+                    <el-button
+                      type="primary"
+                      round
+                      plain
+                      class="add"
+                      @click="addCart()"
+                      >加入购物车</el-button
+                    >
+                  </div>
+                </div>
+              </div>
+              <div class="goods-info__body">
+                <el-tabs v-model="activeName">
+                  <el-tab-pane label="课程详情" name="1">
+                    <div class="detail" v-html="goodsDetail.pcDetailHtml"></div>
+                  </el-tab-pane>
+                  <el-tab-pane label="章节目录" name="2">
+                    <div slot="label" style="position: relative">
+                      <span class="label">章节目录</span>
+                      <span v-if="listenConfigList.length" class="view-note"
+                        >试看</span
+                      >
+                    </div>
+                    <div class="goods-menu clearfix">
+                      <div class="left-box">
+                        <div class="left-box__body">
+                          <div
+                            class="course-list-item"
+                            v-for="(course, index) in 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 class="right-box">
+                        <div class="title" v-if="recommendList.goodsList">
+                          推荐课程
+                          <a class="more" @click="comeMoreList">更多></a>
+                        </div>
+                        <ul class="list" v-if="recommendList.goodsList">
+                          <li
+                            class="course-item"
+                            v-for="(itemy, index) in compyRecommend(
+                              recommendList.goodsList
+                            )"
+                            :key="index"
+                          >
+                            <GoodsItem :item="itemy"></GoodsItem>
+                            <!-- <div
+                              class="course-item__img"
+                              :style="`background-image:url(${$tools.splitImgHost(
+                                itemy.coverUrl,
+                                true
+                              )})`"
+                              @click="toGoodsDetail(itemy)"
+                            >
+                              <div class="note" v-if="itemy.year">
+                                {{ itemy.year }}
+                              </div>
+                            </div>
+                            <div class="course-item__title">
+                              {{ itemy.goodsName }}
+                            </div>
+                            <div class="course-item__desc">
+                              <div class="price">¥{{ itemy.standPrice }}</div>
+                              <a
+                                class="add"
+                                @click="addCart(true, itemy.goodsId)"
+                                >加购物车</a
+                              >
+                            </div> -->
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </el-tab-pane>
+                  <el-tab-pane label="学员须知" name="3">
+                    <div
+                      v-html="
+                        goodsDetail.buyNote &&
+                        goodsDetail.buyNote.replace(/\n|\r\n/g, '<br>')
+                      "
+                    ></div>
+                  </el-tab-pane>
+                  <el-tab-pane
+                    label="赠送题卷"
+                    name="4"
+                    v-if="freeMenuList.length > 0"
+                  >
+                    <div class="goods-menu clearfix">
+                      <div class="left-box">
+                        <div class="left-box__body">
+                          <div
+                            class="course-list-item"
+                            v-for="(course, index) in freeMenuList"
+                            :key="index"
+                          >
+                            <div class="item__content">
+                              <div class="bank-section">
+                                <div class="bank-section__item">
+                                  <div class="bank-section__item__text">
+                                    {{ course.freeExamName }}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="right-box">
+                        <div class="title" v-if="recommendList.goodsList">
+                          推荐课程
+                          <a class="more" @click="comeMoreList">更多></a>
+                        </div>
+                        <ul class="list" v-if="recommendList.goodsList">
+                          <li
+                            class="course-item"
+                            v-for="(itemy, index) in compyRecommend(
+                              recommendList.goodsList
+                            )"
+                            :key="index"
+                          >
+                            <GoodsItem :item="itemy"></GoodsItem>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="section__footer"
+          v-if="
+            recommendList.goodsList &&
+            recommendList.goodsList.length &&
+            (activeName == 1 || activeName == 3)
+          "
+        >
+          <div class="recommend">
+            <div class="recommend__header">
+              <div class="title">相关推荐</div>
+            </div>
+            <div class="recommend__body">
+              <ul class="list clearfix">
+                <li
+                  class="recommend-item"
+                  v-for="(itemy, index) in compyRecommend(
+                    recommendList.goodsList
+                  )"
+                  :key="index"
+                >
+                  <GoodsItem :item="itemy"></GoodsItem>
+                </li>
+              </ul>
+            </div>
+
+            <div class="recommend__footer">
+              <div class="btn" @click="comeMoreList">查看更多</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <el-dialog
+      width="800px"
+      class="video-modal"
+      :visible.sync="videoModalShow"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="video-modal__content">
+        <a class="video-modal__close" @click="videoModalShow = false">X</a>
+
+        <div class="video-modal__header">课程试看</div>
+        <div class="video-modal__body">
+          <div class="video">
+            <div class="video__title">{{ sectionItem.name }}</div>
+            <div class="video__wrap">
+              <div v-show="vid" id="player"></div>
+              <div v-show="vidzb" id="playerzb"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      width="800px"
+      class="select-class"
+      :visible.sync="selectClassModal"
+    >
+      <div class="select-class__content">
+        <div
+          class="selection"
+          v-if="
+            goodsDetail.templateType == 'class' && goodsDetail.goodsType == 1
+          "
+        >
+          <el-select
+            class="select"
+            v-model="gradeId"
+            placeholder="请选择班级"
+            size="small"
+            @click.native="selectClick(goodsDetail, 'class')"
+          >
+            <el-option
+              v-for="item in gradeList"
+              :key="item.gradeId"
+              :disabled="
+                item.studentNum > 0 && item.studentNum == item.studentUpper
+              "
+              :label="
+                item.classEndTime
+                  ? `${item.className} 有效期至:${$tools.timestampToTime(
+                      item.classEndTime
+                    )},本班还剩${$tools.GetRTime(
+                      item.classEndTime
+                    )}天将结束学习`
+                  : `${item.className}`
+              "
+              :value="item.gradeId"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div
+          class="selection"
+          v-if="
+            goodsDetail.templateType == 'apply' && goodsDetail.goodsType == 1
+          "
+        >
+          <el-select
+            v-model="educationId"
+            placeholder="请选择考期"
+            size="small"
+            @click.native="selectClick(goodsDetail, 'exam')"
+          >
+            <el-option
+              v-for="item in examineList"
+              :key="item.educationId"
+              :label="item.examineName"
+              :value="item.educationId"
+            >
+            </el-option>
+          </el-select>
+          <el-cascader
+            size="small"
+            :props="props"
+            ref="cascader"
+            :options="provinceList"
+            v-model="examArea"
+            @change="areaChange(goodsDetail)"
+            clearable
+            placeholder="请选择报考地区"
+          ></el-cascader>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="pay">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "GoodsDetail",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+    GoodsItem,
+  },
+  data() {
+    return {
+      questionList: [],
+      goodsExamConfig: [],
+      goodsDetail: {
+        standPrice: 0,
+      },
+      courseList: [],
+      goodsId: "",
+      checked: false,
+      textarea: "",
+      selectClassModal: false,
+      videoModalShow: false,
+      activeName: "1",
+      questionModalData: {
+        activeName: "0",
+        num: 0, //试做题数
+        current: 0,
+      },
+      judge: ["错误", "正确"],
+      ast: [
+        "A",
+        "B",
+        "C",
+        "D",
+        "E",
+        "F",
+        "G",
+        "H",
+        "I",
+        "J",
+        "K",
+        "L",
+        "M",
+        "N",
+        "O",
+        "P",
+        "Q",
+        "R",
+        "S",
+        "T",
+        "U",
+        "V",
+        "W",
+        "X",
+        "Y",
+        "Z",
+      ],
+      goodsAuditionConfigIdList: [], //试听列表
+      listenConfigList: [],
+      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",
+      gradeList: [],
+      gradeId: "",
+      examineList: [],
+      examArea: [],
+      educationId: "",
+      props: {
+        lazy: true,
+        lazyLoad: this.lazyLoad,
+      },
+      applyAreas: [],
+      provinceList: [],
+      sectionItem: {},
+      playCourseId: 0,
+      recommendList: {}, //推荐课程
+      needOpen: true, //是否需要一进来展开第一章节
+      menuIndex: [], //需要展开的章节索引值
+      freeMenuList: [], //赠送题卷列表
+    };
+  },
+  mounted() {
+    this.goodsId = this.$route.params.goodsId;
+    this.getGoodsDetail();
+    this.goodsCourseList();
+    this.appCommonGoodsCourseModuleFreeExamList();
+    if (this.$tools.isLogin()) {
+      this.getProvinceList();
+    }
+  },
+  computed: {
+    compyRecommend: function () {
+      return function (array) {
+        let ary = [];
+        if (array) {
+          for (let i = 0; i < array.length; i++) {
+            if (i >= 5) {
+              break;
+            } else {
+              ary.push(array[i]);
+            }
+          }
+        }
+        return ary;
+      };
+    },
+  },
+  methods: {
+    ...mapMutations(["setCurrentRouter", "getCartCount"]),
+    appCommonGoodsCourseModuleFreeExamList() {
+      this.$request
+        .appCommonGoodsCourseModuleFreeExamList(this.goodsId)
+        .then((res) => {
+          if (res.data.length) {
+            this.freeMenuList = res.data;
+          }
+        });
+    },
+    toGoodsDetail(item) {
+      this.$router.push({
+        path: "/course-detail/" + item.goodsId,
+      });
+      location.reload();
+    },
+    /**
+     * 查看更多
+     */
+    comeMoreList() {
+      this.$router.push({
+        path: "/course-list",
+        query: {
+          educationId: this.goodsDetail.educationTypeId,
+          projectId: this.goodsDetail.projectId,
+          businessId: this.goodsDetail.businessId,
+        },
+      });
+    },
+    /**
+     * 点击课程大目录
+     */
+    openCourse(course) {
+      course.showList = !course.showList;
+
+      if (!course.list.length) {
+        this.getMenuList(course);
+      }
+    },
+    /**
+     * 
+     获取推荐列表
+     */
+    getRecommend() {
+      this.$request
+        .appCommonActivityRecommendList({
+          businessId: this.goodsDetail.businessId,
+          type: 1,
+        })
+        .then((res) => {
+          if (res.rows.length) {
+            this.recommendList = res.rows[0];
+          }
+        });
+    },
+    /**
+     * 获取模块列表
+     */
+    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]]);
+          }
+        }
+      });
+    },
+    /**
+     * @param {Object}
+     * 单选点击确认
+     */
+    radioSelect(question, questionIndex, optionsId) {
+      if (this.questionList[questionIndex].ques) return;
+      this.$set(this.questionList[questionIndex], "ques", optionsId);
+    },
+
+    /**
+     * @param {Object}
+     * 案例单选点击
+     */
+    radioSelectChild(questionIndex, jsonIndex, optionsId) {
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
+    },
+    /**
+     * 多选点击确认
+     */
+    checkboxSubmit(question, questionIndex) {
+      if (this.questionList[questionIndex].ques) return;
+      let arr = [];
+      this.questionList[questionIndex].jsonStr.forEach((item) => {
+        if (item.checked) {
+          arr.push(item.optionsId);
+        }
+      });
+      if (!arr.length) {
+        this.$message({
+          type: "warning",
+          message: "请选择答案",
+        });
+        return;
+      }
+      this.$set(this.questionList[questionIndex], "ques", arr);
+    },
+    /**
+     * @param {Object}
+     * 案例多选确认
+     */
+    checkboxSubmitChild(questionIndex, ansIndex) {
+      if (this.questionList[questionIndex].ques[ansIndex]) return;
+      let arr = [];
+      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
+        (item) => {
+          if (item.checked) {
+            arr.push(item.optionsId);
+          }
+        }
+      );
+
+      if (!arr.length) {
+        this.$message({
+          type: "warning",
+          message: "请选择答案",
+        });
+        return;
+      }
+
+      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
+    },
+    /**
+     * 判断点击确认
+     */
+    judgeSelect(question, questionIndex, index) {
+      if (question.ques) return;
+      this.$set(this.questionList[questionIndex], "ques", index + "");
+    },
+    judgeSelectChild(questionIndex, jsonIndex, index) {
+      console.log(this.questionList[questionIndex].ques[jsonIndex]);
+      if (this.questionList[questionIndex].ques[jsonIndex]) return;
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
+    },
+
+    /**
+     * 上传图片
+     */
+    uploadImg(e, question, questionIndex) {
+      var file = e.target.files[0];
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.warn("图片不得大于2000kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (
+        type[0] != "jpg" &&
+        type[0] != "png" &&
+        type[0] != "jpeg" &&
+        type[0] != "gif"
+      ) {
+        this.$message.error("上传格式需为:.jpg/.png/.jpeg/gif");
+        e.target.value = "";
+        return;
+      }
+
+      this.$upload.upload(file, 0).then((res) => {
+        question.ansText.imageList.push(res);
+      });
+    },
+
+    /**
+     * 案例上传图片
+     */
+    uploadImgChild(e, questionIndex, jsonIndex) {
+      var file = e.target.files[0];
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.warn("图片不得大于2000kb");
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (
+        type[0] != "jpg" &&
+        type[0] != "png" &&
+        type[0] != "jpeg" &&
+        type[0] != "gif"
+      ) {
+        this.$message.error("上传格式需为:.jpg/.png/.jpeg/gif");
+        e.target.value = "";
+        return;
+      }
+
+      this.$upload.upload(file, 0).then((res) => {
+        this.questionList[questionIndex].jsonStr[
+          jsonIndex
+        ].ansText.imageList.push(res);
+      });
+    },
+    isOver(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 4) {
+          //案例题
+          let isOver = item.jsonStr.every((jsonItem, indexs) => {
+            if (
+              jsonItem.type == 1 ||
+              jsonItem.type == 2 ||
+              jsonItem.type == 3
+            ) {
+              if (item.ques[indexs]) {
+                return true;
+              } else {
+                return false;
+              }
+            } else if (jsonItem.type == 5) {
+              if (
+                item.ques[indexs] &&
+                (item.ques[indexs].text || item.ques[indexs].imageList.length)
+              ) {
+                console.log("chil");
+                return true;
+              } else {
+                return false;
+              }
+            }
+          });
+
+          if (isOver) {
+            return true;
+          } else {
+            return false;
+          }
+        } else if (item.type == 5) {
+          //简答题
+          //每一项都相等
+          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
+            return true;
+          }
+          //判断
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    ansSubmit(question, questionIndex) {
+      if (!question.ansText.text && !question.ansText.imageList.length) {
+        this.$message({
+          type: "warning",
+          message: "请输入内容或上传图片",
+        });
+        return;
+      }
+
+      question.ques.imageList = question.ansText.imageList;
+      question.ques.text = question.ansText.text;
+
+      console.log(question.ques);
+    },
+    ansSubmitChild(question, questionIndex, jsonIndex) {
+      if (
+        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
+        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
+          .length
+      ) {
+        this.$message({
+          type: "warning",
+          message: "请输入内容或上传图片",
+        });
+        return;
+      }
+
+      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
+        imageList:
+          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
+            .imageList || [],
+        text:
+          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
+          "",
+      });
+    },
+    /**
+     * 试看
+     */
+    toDo(section, courseId) {
+      this.videoModalShow = true;
+      this.section;
+      this.playCourseId = courseId;
+      console.log(this.playCourseId, "playCourseId");
+      this.initVideo(section);
+    },
+
+    async initVideo(option) {
+      await this.clears();
+      console.log(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);
+      }
+    },
+    loadPlayerzb() {
+      const polyvLivePlayer = window.polyvLivePlayer;
+      this.playerzb = polyvLivePlayer({
+        wrap: "#playerzb",
+        width: 800,
+        height: 450,
+        uid: this.uidzb,
+        vid: this.vidzb,
+      });
+    },
+    loadPlayer() {
+      var self = this;
+      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;
+
+      // self.$request.obtainpolyvvideosign(self.vid).then((res) => {
+      self.player = polyvPlayer({
+        wrap: "#player",
+        width: 800,
+        height: 450,
+        vid: self.vid,
+        start: 0,
+        end: auditionMinute,
+        teaser_show: 0,
+        // ts: res.data.ts,
+        // sign: res.data.sign,
+        playsafe: function (vid, next) {
+          next();
+        },
+      });
+
+      self.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();
+      }
+    },
+    /**
+     * @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();
+      });
+    },
+    changeIndex(index) {
+      if (index <= this.questionModalData.num - 1) {
+        this.questionModalData.current = index;
+      } else {
+        this.$message({
+          type: "warning",
+          message: "试做题目已经结束~",
+        });
+      }
+    },
+    nextQuestion() {
+      if (this.questionModalData.current >= this.questionModalData.num - 1) {
+        this.$message({
+          type: "warning",
+          message: "试做题目已经结束~",
+        });
+        return;
+      } else {
+        this.questionModalData.current++;
+      }
+    },
+    prevQuestion() {
+      if (this.questionModalData.current == 0) {
+        return;
+      } else {
+        this.questionModalData.current--;
+      }
+    },
+    isRight(item, index) {
+      //单选
+      if (this.questionList[index].ques) {
+        if (item.type == 1) {
+          console.log(
+            this.questionList[index].ques == this.questionList[index].ans
+          );
+          return this.questionList[index].ques == this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques == this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    isWrong(item, index) {
+      if (this.questionList[index].ques) {
+        //单选
+        if (item.type == 1) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+          //多选
+        } else if (item.type == 2) {
+          //每一项都相等
+          return this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+          //判断
+        } else if (item.type == 3) {
+          return this.questionList[index].ques != this.questionList[index].ans;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    isPart(item, index) {
+      if (this.questionList[index].ques) {
+        if (item.type == 2) {
+          let isWrong = this.questionList[index].ques.some((item, i) => {
+            return this.questionList[index].ans.indexOf(item) == -1;
+          });
+
+          let isRight = this.questionList[index].ans.every((item, i) => {
+            return item == this.questionList[index].ques[i];
+          });
+
+          if (!isRight && !isWrong) {
+            return true;
+          }
+        }
+      } else {
+        return false;
+      }
+    },
+    right(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 ||
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) != -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    wrong(bankIndex, ansIndex, option) {
+      if (
+        this.questionList[bankIndex].ques[ansIndex] &&
+        this.questionList[bankIndex].ans[ansIndex]
+      ) {
+        if (
+          this.questionList[bankIndex].ques[ansIndex].indexOf(
+            option.optionsId
+          ) != -1 &&
+          this.questionList[bankIndex].ans[ansIndex].indexOf(
+            option.optionsId
+          ) == -1
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+
+    /**
+     * 获取已经回答的题目数
+     * hasSpecail (是否包含简答和案例)
+     */
+    questionOverNum(hasSpecail) {
+      let count = 0;
+      this.questionList.forEach((item) => {
+        if (item.type == 1 || item.type == 2 || item.type == 3) {
+          if (item.ques) {
+            count++;
+          }
+        } else if (item.type == 4) {
+          //案例题
+          if (hasSpecail) {
+            let isOver = item.jsonStr.every((jsonItem, index) => {
+              if (
+                jsonItem.type == 1 ||
+                jsonItem.type == 2 ||
+                jsonItem.type == 3
+              ) {
+                if (item.ques[index]) {
+                  return true;
+                } else {
+                  return false;
+                }
+              } else if (jsonItem.type == 5) {
+                if (
+                  item.ques[index] &&
+                  (item.ques[index].text || item.ques[index].imageList.length)
+                ) {
+                  return true;
+                } else {
+                  return false;
+                }
+              }
+            });
+
+            if (isOver) {
+              count++;
+              console.log(item, 444);
+            }
+          }
+        } else if (item.type == 5) {
+          //简答题
+          if (hasSpecail) {
+            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
+              console.log(5, item);
+              count++;
+            }
+          }
+        }
+      });
+
+      return count;
+    },
+    /**
+     * 展开模块卷
+     */
+    openModule(Module) {
+      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) {
+      this.$set(chapter, "showList", !chapter.showList);
+
+      if (!chapter.list.length) {
+        this.getSectionList(chapter);
+      }
+    },
+
+    lazyLoad(node, resolve) {
+      const { level } = node;
+      console.log(node);
+      if (level == 0) {
+      } else if (level == 1) {
+        this.$request.getCityList({ parentId: node.value }).then((res) => {
+          const nodes = res.rows.map((item) => ({
+            value: item.areaId,
+            label: `${item.areaName}`,
+            leaf: level >= 1,
+          }));
+          resolve(nodes);
+        });
+      }
+    },
+
+    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;
+      });
+    },
+    selectClick(goodsDetail, type) {
+      if (type == "class") {
+        //选择班级
+        if (!this.gradeList.length) {
+          this.$request
+            .goodsGradeList({ goodsId: goodsDetail.goodsId })
+            .then((res) => {
+              this.gradeList = res.rows;
+              if (this.gradeList.length == 0) {
+                let item = {
+                  className: "系统分班",
+                  gradeId: 0,
+                };
+                this.gradeList.push(item);
+              } else {
+                let isGradeFull = this.gradeList.every(
+                  (item) =>
+                    item.studentNum > 0 && item.studentNum == item.studentUpper
+                );
+                //所有班级都满了
+                if (isGradeFull) {
+                  let item = {
+                    className: "系统分班",
+                    gradeId: 0,
+                  };
+                  this.gradeList.unshift(item);
+                }
+              }
+            });
+        }
+      } else if (type == "apply") {
+        //选择考试地点
+      } else if (type == "exam") {
+        //选择考期
+        this.$request
+          .getExamineList({ projectId: goodsDetail.projectId })
+          .then((res) => {
+            this.examineList = res.rows;
+          });
+      }
+    },
+    /**
+     * 获取所有省份
+     */
+    getProvinceList() {
+      this.$request.getProvinceList().then((res) => {
+        this.provinceList = res.rows.map((item) => ({
+          value: item.areaId,
+          label: `${item.areaName}`,
+          leaf: false,
+        }));
+      });
+    },
+    areaChange() {
+      let node = this.$refs["cascader"].getCheckedNodes()[0]; //选中的根节点
+      console.log(node);
+      this.applyAreas = {
+        areaName: node.parent.label,
+        areaId: node.parent.value,
+        cityId: node.value,
+        cityName: node.label,
+      };
+    },
+    buyNow() {
+      if (this.$tools.isLogin()) {
+        if (this.goodsDetail.templateType) {
+          this.selectClassModal = true;
+        } else {
+          let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
+          selectGoodsList.forEach((item) => {
+            if (item.goodsType == 1) {
+              if (item.templateType == "class") {
+                let goodsInputData = {
+                  type: "class",
+                  gradeId: this.gradeId,
+                  gradeJson: JSON.stringify(
+                    this.gradeList.find(
+                      (grade) => grade.gradeId == this.gradeId
+                    )
+                  ),
+                };
+                item.goodsInputData = goodsInputData;
+              }
+              if (item.templateType == "apply") {
+                let goodsInputData = {
+                  type: "apply",
+                  applyAreasJson: JSON.stringify(this.applyAreas),
+                  examDateJson: JSON.stringify(
+                    this.examineList.find(
+                      (exam) => exam.educationId == this.educationId
+                    )
+                  ),
+                };
+                item.goodsInputData = goodsInputData;
+              }
+            }
+          });
+
+          localStorage.setItem(
+            "checkGoodsList",
+            JSON.stringify(selectGoodsList)
+          );
+
+          this.$router.push({
+            path: "/payment",
+          });
+        }
+      } else {
+        this.setCurrentRouter(this.$route);
+        this.$router.push({
+          path: "/login",
+        });
+        return;
+      }
+    },
+    pay() {
+      if (
+        this.goodsDetail.templateType == "class" &&
+        this.goodsDetail.goodsType == 1
+      ) {
+        if (!this.gradeId && this.gradeId !== 0) {
+          this.$message({
+            message: "请选择班级",
+            type: "warning",
+          });
+          return;
+        }
+      }
+
+      if (
+        this.goodsDetail.templateType == "apply" &&
+        this.goodsDetail.goodsType == 1
+      ) {
+        // if (!item.applyAreas.areaName) {
+        // 	uni.showModal({
+        // 		title: '提示',
+        // 		content: '请选择报考地区',
+        // 		showCancel: false
+        // 	});
+        // 	return false;
+        // }
+        if (!this.educationId) {
+          this.$message({
+            message: "请选择考期",
+            type: "warning",
+          });
+          return false;
+        }
+      }
+
+      let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
+      selectGoodsList.forEach((item) => {
+        if (item.goodsType == 1) {
+          if (item.templateType == "class") {
+            let goodsInputData = {
+              type: "class",
+              gradeId: this.gradeId,
+              gradeJson: JSON.stringify(
+                this.gradeList.find((grade) => grade.gradeId == this.gradeId)
+              ),
+            };
+            item.goodsInputData = goodsInputData;
+          }
+          if (item.templateType == "apply") {
+            let goodsInputData = {
+              type: "apply",
+              applyAreasJson: JSON.stringify(this.applyAreas),
+              examDateJson: JSON.stringify(
+                this.examineList.find(
+                  (exam) => exam.educationId == this.educationId
+                )
+              ),
+            };
+            item.goodsInputData = goodsInputData;
+          }
+        }
+      });
+
+      localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));
+
+      this.$router.push({
+        path: "/payment",
+      });
+    },
+    addCart(status, goodsId) {
+      if (!this.$tools.isLogin()) {
+        this.setCurrentRouter(this.$route);
+        this.$router.push({
+          path: "/login",
+        });
+        return;
+      }
+      this.$request
+        .addCart({ goodsId: status ? goodsId : this.goodsId })
+        .then((res) => {
+          this.getCartCount();
+          this.$message({
+            message: "加入购物车成功",
+            type: "success",
+          });
+        })
+        .catch((err) => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning",
+            });
+          }
+        });
+    },
+    /**
+     * 获取商品详情
+     */
+    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);
+
+        // this.courseBusiness();
+        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"
+          );
+        }
+        this.getRecommend();
+      });
+    },
+    /**
+     * 是否是试做
+     */
+    isTest(id) {
+      return this.goodsExamConfig.find((item) => item.examId == id);
+    },
+    /**
+     * 获取课程章节列表
+     */
+    goodsCourseList() {
+      this.$request.goodsCourseList(this.goodsId).then(async (res) => {
+        res.rows.forEach((item) => {
+          item.showList = false;
+          item.list = [];
+        });
+        this.courseList = res.rows;
+
+        if (this.needOpen) {
+          for (let i = 0; i < this.courseList.length; i++) {
+            let menuIndexOrFalse = await this.getCourseMenus(
+              this.courseList[i]
+            );
+
+            if (menuIndexOrFalse !== false) {
+              this.menuIndex = [i, menuIndexOrFalse];
+              this.openCourse(this.courseList[i]);
+              break;
+            }
+          }
+        }
+      });
+    },
+
+    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++) {
+              if (res.rows[i].type == 1 || res.rows[i].type == 2) {
+                resolve(i);
+                break;
+              }
+            }
+          }
+        });
+      });
+    },
+    collect() {
+      this.$message({
+        message: "试做题目,不支持收藏~",
+        type: "warning",
+      });
+      return;
+    },
+    examSubmit() {
+      this.$confirm("当前为试用做题不可交卷,购买题卷后方可交卷", "提示", {
+        confirmButtonText: "继续作答",
+        cancelButtonText: "返回详情",
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        distinguishCancelAndClose: false,
+        showClose: false,
+      })
+        .then((_) => {})
+        .catch((_) => {
+          this.questionModalShow = false;
+        });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.goods-detail {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      .goods-info {
+        &__header {
+          width: 100%;
+          height: 288px;
+          background: #f5f7fa;
+          border-radius: 10px;
+          padding: 20px;
+          display: flex;
+
+          .img {
+            width: 442px;
+            height: 248px;
+            border-radius: 10px;
+            overflow: hidden;
+
+            img {
+              max-width: 100%;
+              max-height: 100%;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .text {
+            flex: 1;
+            margin-left: 24px;
+            .title {
+              font-size: 18px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              line-height: 24px;
+            }
+
+            .desc {
+              padding: 1px 5px;
+              display: inline-block;
+              border: 1px solid #333333;
+              border-radius: 4px;
+              font-size: 12px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #333333;
+            }
+
+            .price {
+              margin-top: 10px;
+              font-size: 24px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #ff2d55;
+              line-height: 24px;
+            }
+
+            .btns {
+              margin-top: 124px;
+              display: flex;
+
+              .buynow {
+                margin-right: 16px;
+                width: 160px;
+                height: 40px;
+                padding: 0;
+                border-radius: 20px;
+                text-align: center;
+                line-height: 40px;
+              }
+
+              .add {
+                padding: 0;
+                width: 128px;
+                height: 40px;
+                border-radius: 20px;
+                text-align: center;
+                line-height: 40px;
+              }
+            }
+          }
+        }
+
+        &__body {
+          /deep/ .el-tabs__item {
+            padding: 0 20px !important;
+            height: 80px;
+            line-height: 80px;
+            font-size: 18px;
+          }
+
+          .label {
+            font-size: 18px;
+          }
+
+          .view-note {
+            width: 40px;
+            height: 24px;
+            background: #ff3b30;
+            border-radius: 4px 4px 0px 4px;
+            border: 1px solid #ff3b30;
+            text-align: center;
+            line-height: 22px;
+            color: #fff;
+            position: absolute;
+            right: -10px;
+            top: 5px;
+          }
+
+          .detail {
+            img {
+              max-width: 100% !important;
+            }
+          }
+
+          .goods-img {
+            width: 100%;
+          }
+
+          .goods-menu {
+            margin-top: 15px;
+            .left-box {
+              width: 948px;
+              float: left;
+
+              &__body {
+                .course-list-item {
+                  margin-top: 24px;
+                  padding: 16px;
+                  background: #f5f7fa;
+                  border-radius: 10px;
+                  &__title {
+                    font-size: 18px;
+                    color: #333;
+                    font-weight: bold;
+                    cursor: pointer;
+                  }
+
+                  .item {
+                    overflow: hidden;
+                    background: #fff;
+                    margin-top: 12px;
+                    &__title {
+                      padding: 10px 0;
+                      cursor: pointer;
+                      font-size: 16px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #333333;
+
+                      .note {
+                        display: inline-block;
+                        margin-left: 20px;
+                        width: 40px;
+                        height: 24px;
+                        border: 1px solid #ff3b30;
+                        border-radius: 8px;
+                        line-height: 22px;
+                        color: #ff3b30;
+                        text-align: center;
+                      }
+                    }
+
+                    &__content {
+                      background: #fff;
+
+                      .bank-chapter {
+                        margin-left: 4px;
+
+                        &__item {
+                          padding-top: 20px;
+                          padding-bottom: 20px;
+                          border-bottom: 1px solid #eeeeee;
+                          font-size: 16px;
+
+                          &__text {
+                            cursor: pointer;
+                            flex: 1;
+                          }
+                        }
+                      }
+
+                      .bank-section {
+                        margin-left: 40px;
+
+                        &__item {
+                          padding-top: 20px;
+                          padding-bottom: 20px;
+                          border-bottom: 1px solid #eeeeee;
+                          font-size: 16px;
+                          display: flex;
+
+                          &__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;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            .right-box {
+              width: 255px;
+              float: right;
+              .title {
+                margin-left: 10px;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
+                position: relative;
+
+                .more {
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  position: absolute;
+                  right: 10px;
+                  top: 0;
+                }
+              }
+
+              .list {
+                .course-item {
+                  // margin: 110px 9px 0;
+                  // width: 300px;
+                  // height: 178px;
+                  // background: #ffffff;
+                  // box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
+                  // border-radius: 10px;
+                  // position: relative;
+                  // background: #fff;
+                  // padding-top: 100px;
+
+                  // &__img {
+                  //   width: 280px;
+                  //   height: 178px;
+                  //   background: #ffffff;
+                  //   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
+                  //   border-radius: 10px;
+                  //   position: absolute;
+                  //   left: 10px;
+                  //   top: -78px;
+                  //   background: rgba(122, 136, 246, 1);
+                  //   overflow: hidden;
+                  //   background: no-repeat center center;
+                  //   background-size: 280px 178px;
+                  //   .note {
+                  //     width: 80px;
+                  //     height: 24px;
+                  //     background: #d94404;
+                  //     box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
+                  //     border-radius: 10px 0px 20px 0px;
+                  //     text-align: center;
+                  //     line-height: 24px;
+                  //     color: #fff;
+                  //   }
+                  // }
+
+                  // &__title {
+                  //   margin: 0 8px;
+                  //   font-size: 14px;
+                  //   font-family: Microsoft YaHei;
+                  //   font-weight: 400;
+                  //   color: #333333;
+                  //   line-height: 24px;
+                  // }
+
+                  // &__desc {
+                  //   height: 32px;
+                  //   position: absolute;
+                  //   left: 0;
+                  //   right: 0;
+                  //   bottom: 0;
+                  //   margin-left: 8px;
+                  //   display: flex;
+                  //   justify-content: space-between;
+
+                  //   .price {
+                  //     font-size: 18px;
+                  //     font-family: Microsoft YaHei;
+                  //     font-weight: bold;
+                  //     color: #ff2d55;
+                  //     line-height: 32px;
+                  //   }
+
+                  //   .add {
+                  //     display: block;
+                  //     width: 118px;
+                  //     height: 32px;
+                  //     line-height: 30px;
+                  //     background: #f2f4f7;
+                  //     border-radius: 10px 0px 10px 0px;
+                  //     font-size: 16px;
+                  //     color: #3f8dfd;
+                  //     text-align: center;
+
+                  //     &:hover {
+                  //       background: #3f8dfd;
+                  //       color: #f2f4f7;
+                  //     }
+                  //   }
+                  // }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      .recommend {
+        padding-top: 40px;
+
+        &__header {
+          display: flex;
+          align-items: center;
+
+          .title {
+            font-size: 24px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            color: #333333;
+            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
+          }
+        }
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .recommend-item {
+              float: left;
+              // margin: 100px 9px 0;
+              // width: 300px;
+              // height: 178px;
+              // background: #ffffff;
+              // box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
+              // border-radius: 10px;
+              // position: relative;
+              // background: #fff;
+              // padding-top: 100px;
+
+              // &__img {
+              //   width: 280px;
+              //   height: 178px;
+              //   background: #ffffff;
+              //   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
+              //   border-radius: 10px;
+              //   position: absolute;
+              //   left: 10px;
+              //   top: -78px;
+              //   background: rgba(122, 136, 246, 1);
+              //   overflow: hidden;
+              //   background: no-repeat center center;
+              //   background-size: 280px 178px;
+              //   .note {
+              //     width: 80px;
+              //     height: 24px;
+              //     background: #d94404;
+              //     box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
+              //     border-radius: 10px 0px 20px 0px;
+              //     text-align: center;
+              //     line-height: 24px;
+              //     color: #fff;
+              //   }
+              // }
+
+              // &__title {
+              //   margin: 0 8px;
+              //   font-size: 14px;
+              //   font-family: Microsoft YaHei;
+              //   font-weight: 400;
+              //   color: #333333;
+              //   line-height: 24px;
+              // }
+
+              // &__desc {
+              //   height: 32px;
+              //   position: absolute;
+              //   left: 0;
+              //   right: 0;
+              //   bottom: 0;
+              //   margin-left: 8px;
+              //   display: flex;
+              //   justify-content: space-between;
+
+              //   .price {
+              //     font-size: 18px;
+              //     font-family: Microsoft YaHei;
+              //     font-weight: bold;
+              //     color: #ff2d55;
+              //     line-height: 32px;
+              //   }
+
+              //   .add {
+              //     display: block;
+              //     width: 118px;
+              //     height: 32px;
+              //     line-height: 30px;
+              //     background: #f2f4f7;
+              //     border-radius: 10px 0px 10px 0px;
+              //     font-size: 16px;
+              //     color: #3f8dfd;
+              //     text-align: center;
+
+              //     &:hover {
+              //       background: #3f8dfd;
+              //       color: #f2f4f7;
+              //     }
+              //   }
+              // }
+            }
+          }
+        }
+
+        &__footer {
+          overflow: hidden;
+          .btn {
+            cursor: pointer;
+            width: 146px;
+            height: 40px;
+            background: #e3eaf7;
+            border-radius: 8px;
+            margin: 20px auto 40px;
+            color: #3f8dfd;
+            text-align: center;
+            line-height: 40px;
+
+            &:hover {
+              color: #fff;
+              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
+              background: #3f8dfd;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .question-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__content {
+      width: 800px;
+      height: 530px;
+      position: relative;
+      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 8px;
+
+      .left-box {
+        float: left;
+        width: 500px;
+        border-right: 1px solid #eee;
+
+        &__header {
+          height: 40px;
+          padding-left: 12px;
+          border-bottom: 1px solid #eeeeee;
+          display: flex;
+          align-items: center;
+
+          .progress {
+            width: 200px;
+          }
+
+          .text {
+            margin-left: 15px;
+            font-size: 16px;
+            span {
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #3f8dfd;
+              line-height: 24px;
+            }
+          }
+        }
+
+        &__body {
+          height: 450px;
+          border-bottom: 1px solid #eee;
+
+          .question {
+            padding: 12px 0 0 12px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+
+            &__title {
+              padding-left: 12px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #333333;
+              line-height: 24px;
+            }
+
+            &__desc {
+              padding-left: 12px;
+              margin-top: 20px;
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #666666;
+              line-height: 24px;
+            }
+
+            &__content {
+              flex: 1;
+              overflow-y: scroll;
+
+              &::-webkit-scrollbar {
+                width: 6px;
+              }
+              &::-webkit-scrollbar-track {
+                background-color: #fff;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+              &::-webkit-scrollbar-thumb {
+                background-color: #eeeeee;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+
+              /deep/ .el-tabs__item {
+                padding: 0 20px !important;
+                height: 40px;
+                line-height: 40px;
+              }
+
+              .question__content {
+                height: auto;
+                overflow: auto;
+              }
+
+              .question-list {
+                padding: 24px 0 0 24px;
+                .checkbox,
+                .radio {
+                  cursor: pointer;
+                  margin-right: 24px;
+                  padding: 0 24px;
+                  display: flex;
+                  align-items: center;
+                  margin-top: 2px;
+                  min-height: 40px;
+                  padding-top: 10px;
+                  padding-bottom: 10px;
+                  background: #f5f9ff;
+                  border-radius: 8px;
+                  box-sizing: border-box;
+
+                  &.right {
+                    background: #37c65b;
+                  }
+                  &.wrong {
+                    background: #ff3a30;
+                  }
+                }
+                &.textarea {
+                  margin-right: 12px;
+
+                  .upload {
+                    margin-top: 10px;
+
+                    &__imgs {
+                      margin-right: 10px;
+                      width: 80px;
+                      height: 80px;
+                      background: #ffffff;
+                      border: 1px solid #eeeeee;
+                      border-radius: 4px;
+                      position: relative;
+                      display: flex;
+                      float: left;
+                      align-items: center;
+                      justify-content: center;
+
+                      img {
+                        max-width: 100%;
+                        max-height: 100%;
+                      }
+                    }
+                    &__btn {
+                      margin-right: 10px;
+                      width: 80px;
+                      height: 80px;
+                      background: #ffffff;
+                      border: 1px solid #eeeeee;
+                      border-radius: 4px;
+                      position: relative;
+                      display: flex;
+                      float: left;
+                      align-items: center;
+                      justify-content: center;
+                      flex-direction: column;
+
+                      .icon {
+                        font-size: 20px;
+                        color: #3f8dfd;
+                      }
+
+                      p {
+                        font-size: 12px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #999999;
+                        line-height: 24px;
+                      }
+
+                      input {
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                        opacity: 0;
+                      }
+                    }
+                  }
+                }
+
+                /deep/ .el-checkbox {
+                  white-space: pre-wrap;
+                }
+              }
+
+              .answer-list {
+                height: 40px;
+                border-top: 1px solid #eee;
+                border-bottom: 1px solid #eee;
+                margin-top: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 24px;
+
+                &__left {
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #333333;
+                  line-height: 24px;
+                }
+
+                &__right {
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #333333;
+                  line-height: 24px;
+                }
+              }
+
+              .explain-list {
+                padding: 12px 24px;
+
+                &__header {
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: bold;
+                  color: #666666;
+                  line-height: 24px;
+                }
+
+                &__body {
+                  margin-top: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #666666;
+                  line-height: 24px;
+                }
+
+                .upload {
+                  margin-top: 10px;
+
+                  &__imgs {
+                    margin-right: 10px;
+                    width: 80px;
+                    height: 80px;
+                    background: #ffffff;
+                    border: 1px solid #eeeeee;
+                    border-radius: 4px;
+                    position: relative;
+                    display: flex;
+                    float: left;
+                    align-items: center;
+                    justify-content: center;
+
+                    img {
+                      max-width: 100%;
+                      max-height: 100%;
+                    }
+                  }
+                }
+              }
+            }
+
+            &__btns {
+              position: relative;
+              height: 32px;
+              .submit {
+                cursor: pointer;
+                margin: 0 auto;
+                width: 140px;
+                height: 32px;
+                background: #3f8dfd;
+                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+                border-radius: 16px;
+                text-align: center;
+                line-height: 32px;
+                color: #fff;
+                font-size: 16px;
+              }
+
+              .collect {
+                cursor: pointer;
+                position: absolute;
+                right: 0;
+                top: 5px;
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #3f8dfd;
+                line-height: 24px;
+              }
+            }
+          }
+        }
+
+        &__footer {
+          height: 40px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          .btn {
+            cursor: pointer;
+            width: 140px;
+            height: 32px;
+            background: #ffffff;
+            border: 1px solid #3f8dfd;
+            border-radius: 16px;
+            line-height: 32px;
+            text-align: center;
+            color: #3f8dfd;
+          }
+        }
+      }
+
+      .right-box {
+        float: right;
+        width: 300px;
+
+        &__header {
+          height: 40px;
+          line-height: 40px;
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #333333;
+          text-align: center;
+          border-bottom: 1px solid #eeeeee;
+        }
+
+        &__body {
+          height: 450px;
+          border-bottom: 1px solid #eee;
+
+          .card {
+            &__note {
+              display: flex;
+              height: 40px;
+              align-items: center;
+              border-bottom: 1px solid #eee;
+
+              .item {
+                display: flex;
+                align-items: center;
+                margin-left: 10px;
+
+                .box {
+                  margin-right: 5px;
+                  width: 16px;
+                  height: 16px;
+                  border-radius: 4px;
+
+                  &.white {
+                    background: #ffffff;
+                    border: 1px solid #eeeeee;
+                  }
+
+                  &.green {
+                    background: #37c65b;
+                  }
+
+                  &.red {
+                    background: #ff3a30;
+                  }
+
+                  &.blue {
+                    background: #3f8dfd;
+                  }
+                }
+              }
+            }
+
+            &__content {
+              height: 410px;
+              overflow-y: scroll;
+
+              &::-webkit-scrollbar {
+                width: 6px;
+              }
+              &::-webkit-scrollbar-track {
+                background-color: #fff;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+              &::-webkit-scrollbar-thumb {
+                background-color: #eeeeee;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+              .list {
+                display: flex;
+                flex-wrap: wrap;
+
+                .item {
+                  width: 40px;
+                  height: 40px;
+                  border-radius: 10px;
+                  text-align: center;
+                  line-height: 40px;
+                  margin-left: 16px;
+                  margin-top: 16px;
+                  cursor: pointer;
+
+                  &.white {
+                    line-height: 38px;
+                    color: #333333;
+                    background: #ffffff;
+                    border: 1px solid #eeeeee;
+                  }
+
+                  &.green {
+                    color: #fff;
+                    background: #37c65b;
+                  }
+
+                  &.red {
+                    color: #fff;
+                    background: #ff3a30;
+                  }
+
+                  &.blue {
+                    border: 1rpx solid #eeeeee;
+                    color: #fff;
+                    background: #3f8dfd;
+                  }
+
+                  &.disabled {
+                    cursor: not-allowed;
+                    line-height: 38px;
+                    color: #eeeeee;
+                    background: #ffffff;
+                    border: 1px solid #eeeeee;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        &__footer {
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .submit {
+            cursor: pointer;
+            width: 140px;
+            height: 32px;
+            background: #3f8dfd;
+            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
+            border-radius: 16px;
+            line-height: 32px;
+            text-align: center;
+            color: #fff;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .video-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      color: #ff3b30;
+      padding-left: 24px;
+    }
+
+    &__body {
+      width: 100%;
+      position: relative;
+      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 8px;
+      .video {
+        &__title {
+          padding-left: 24px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+        }
+
+        &__wrap {
+          height: 450px;
+          video {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .select-class {
+    &__content {
+      .selection {
+        .el-select {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

+ 7068 - 0
src/pages/live-detail/index.vue

@@ -0,0 +1,7068 @@
+<template>
+  <div class="course-detail">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <div class="container">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item :to="{ path: '/index' }"
+                >首页</el-breadcrumb-item
+              >
+              <el-breadcrumb-item>课程详情</el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+        </div>
+        <div class="section__body">
+          <div class="container">
+            <div class="course-info">
+              <div class="course-info__header clearfix">
+                <div
+                  class="left-box"
+                  :style="{
+                    backgroundImage: `url(${$tools.splitImgHost(
+                      goodsData.coverUrl,
+                      true
+                    )})`,
+                  }"
+                >
+                  <div v-show="vid" id="player"></div>
+                  <div v-show="vidzb" id="playerzb"></div>
+                  <div class="recordStyle" v-if="showRecordStatus">
+                    您上次看到{{
+                      $tools.secondToTime(recordObj.videoCurrentTime)
+                    }},正在自动续播<span
+                      style="
+                        display: inline-block;
+                        width: 50px;
+                        text-align: center;
+                      "
+                      >|</span
+                    >
+                    <span class="btn_sty" @click="backLI">从头播放</span>
+                  </div>
+                </div>
+                <div class="right-box">
+                  <div class="right-box__header">
+                    <div class="title">
+                      <el-select
+                        class="select"
+                        v-model="courseId"
+                        @change="courseChange"
+                      >
+                        <el-option
+                          :label="item.courseName"
+                          :value="item.courseId"
+                          v-for="(item, index) in courseList"
+                          :key="index"
+                        ></el-option>
+                      </el-select>
+                    </div>
+                    <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="right-box__body">
+                              <div
+                                class="item"
+                                v-for="(menu, index) in menuList"
+                                :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="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"
+                                            :class="{
+                                              active: isActive(section),
+                                            }"
+                                            v-for="(
+                                              section, sectionIndex
+                                            ) in chapter.list"
+                                            :key="sectionIndex"
+                                            @click="getResource(section)"
+                                          >
+                                            <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="zoom: 0.7"
+                                                    v-if="
+                                                      section.liveStartTime >
+                                                      nowTime
+                                                    "
+                                                  >
+                                                    <span>{{
+                                                      $tools.timestampToTime(
+                                                        section.liveStartTime,
+                                                        (isDay = false)
+                                                      )
+                                                    }}</span
+                                                    >-
+                                                    <span>{{
+                                                      $tools.timestampToTime(
+                                                        section.liveEndTime,
+                                                        (isDay = false)
+                                                      )
+                                                    }}</span>
+                                                  </div>
+                                                </div>
+                                              </template>
+
+                                              <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 != 3
+                                                "
+                                              >
+                                                <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>
+
+                                            <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 == 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)"
+                                          >
+                                            <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="zoom: 0.7"
+                                                  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 != 3
+                                                "
+                                              >
+                                                <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>
+
+                                            <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)"
+                                      >
+                                        <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="zoom: 0.7"
+                                              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 != 3
+                                          "
+                                        >
+                                          <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>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </template>
+                              </div>
+                            </div>
+                          </template>
+                          <template v-if="tab.name == '2'">
+                            <div class="right-box__body">
+                              <div
+                                class="item"
+                                v-for="(menu, index) in reMenuList"
+                                :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="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"
+                                            :class="{
+                                              active: isActive(section),
+                                            }"
+                                            v-for="(
+                                              section, sectionIndex
+                                            ) in chapter.list"
+                                            :key="sectionIndex"
+                                            @click="getResource(section)"
+                                          >
+                                            <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="zoom: 0.7"
+                                                    v-if="
+                                                      section.liveStartTime >
+                                                      nowTime
+                                                    "
+                                                  >
+                                                    <span>{{
+                                                      $tools.timestampToTime(
+                                                        section.liveStartTime,
+                                                        (isDay = false)
+                                                      )
+                                                    }}</span
+                                                    >-
+                                                    <span>{{
+                                                      $tools.timestampToTime(
+                                                        section.liveEndTime,
+                                                        (isDay = false)
+                                                      )
+                                                    }}</span>
+                                                  </div>
+                                                </div>
+                                              </template>
+
+                                              <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 != 3
+                                                "
+                                              >
+                                                <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>
+
+                                            <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 == 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)"
+                                          >
+                                            <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="zoom: 0.7"
+                                                  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 != 3
+                                                "
+                                              >
+                                                <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>
+
+                                            <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)"
+                                      >
+                                        <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="zoom: 0.7"
+                                              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 != 3
+                                          "
+                                        >
+                                          <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>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </template>
+                              </div>
+                            </div>
+                          </template>
+                        </el-tab-pane>
+                      </el-tabs>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="course-info__body">
+                <el-tabs v-model="activeName">
+                  <el-tab-pane
+                    v-for="(item, index) in tabList"
+                    :key="index"
+                    :name="item.name"
+                    :label="item.label"
+                  >
+                    <template v-if="item.label == '学员须知'">
+                      <div class="course-menu clearfix">
+                        <div class="left-box">
+                          <div class="left-box__body">
+                            <div
+                              class="buy-note"
+                              v-html="
+                                goodsData.buyNote &&
+                                goodsData.buyNote.replace(/\n|\r\n/g, '<br>')
+                              "
+                            ></div>
+                          </div>
+                        </div>
+                        <div class="right-box">
+                          <div class="title">
+                            推荐课程
+                            <a class="more" @click="go('/course-list')"
+                              >更多></a
+                            >
+                          </div>
+                          <ul class="list">
+                            <li
+                              class="course-item"
+                              v-for="(itemy, index) in compyRecommend(
+                                recommendList.goodsList
+                              )"
+                              :key="index"
+                            >
+                              <GoodsItem :item="itemy"></GoodsItem>
+                              <!-- <div
+                                class="course-item__img"
+                                :style="`background-image:url(${$tools.splitImgHost(
+                                  itemy.coverUrl,
+                                  true
+                                )})`"
+                                @click="toGoodsDetail(itemy)"
+                              >
+                                <div class="note" v-if="itemy.year">
+                                  {{ itemy.year }}
+                                </div>
+                              </div>
+                              <div class="course-item__title">
+                                {{ itemy.goodsName }}
+                              </div>
+                              <div class="course-item__desc">
+                                <div class="price">
+                                  ¥{{ itemy.standPrice }}
+                                </div>
+                                <a
+                                  class="add"
+                                  @click.stop="addCart(true, itemy.goodsId)"
+                                  >加购物车</a
+                                >
+                              </div> -->
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-if="item.label == '课程答疑'">
+                      <div class="answer-question">
+                        <div class="answer-question__header clearfix">
+                          <div class="textarea-wrap">
+                            <el-input
+                              class="textarea"
+                              v-model="textarea"
+                              rows="3"
+                              type="textarea"
+                              placeholder=""
+                            ></el-input>
+                          </div>
+                          <el-button
+                            type="primary"
+                            class="submit"
+                            @click="addAnswer"
+                            >提出疑问</el-button
+                          >
+                        </div>
+                        <div class="answer-question__body">
+                          <div class="question-list">
+                            <div
+                              v-if="answerList.length == 0"
+                              style="text-align: center"
+                            >
+                              暂无记录
+                            </div>
+                            <div
+                              class="question-list__item"
+                              v-for="(item, index) in answerList"
+                              :key="index"
+                            >
+                              <div class="question-list__item__avatar">
+                                <img
+                                  v-if="item.assignRealname"
+                                  :src="$tools.splitImgHost(item.assignAvatar)"
+                                  alt=""
+                                />
+                                <img
+                                  v-else
+                                  :src="$tools.splitImgHost(item.avatar)"
+                                  alt=""
+                                />
+                              </div>
+                              <div class="question-list__item__content">
+                                <div class="nickname">
+                                  {{ item.realname }}
+                                </div>
+                                <div class="desc">
+                                  {{ item.answerText }}
+                                </div>
+                                <div class="time">
+                                  {{
+                                    $tools.timestampToTime(
+                                      item.createTime,
+                                      false
+                                    )
+                                  }}
+
+                                  <div
+                                    class="del"
+                                    v-if="item.userId !== userInfo.userId"
+                                    @click="answerBack(item)"
+                                  >
+                                    <el-button type="text">回复</el-button>
+                                  </div>
+                                  <div
+                                    class="del"
+                                    @click="del(item)"
+                                    v-if="item.userId === userInfo.userId"
+                                  >
+                                    删除
+                                  </div>
+                                </div>
+                                <div
+                                  class="reply-list"
+                                  v-if="
+                                    item.newArraysAnswerList &&
+                                    item.newArraysAnswerList.length
+                                  "
+                                >
+                                  <div
+                                    class="reply-list__item"
+                                    v-for="(
+                                      items, indexs
+                                    ) in item.newArraysAnswerList"
+                                    :key="indexs"
+                                  >
+                                    <div class="reply-list__item__avatar">
+                                      <img
+                                        :src="$tools.splitImgHost(items.avatar)"
+                                        alt=""
+                                      />
+                                    </div>
+                                    <div class="reply-list__item__content">
+                                      <div class="nickname">
+                                        {{ items.realname }}
+                                      </div>
+                                      <div class="desc">
+                                        回复
+                                        <span
+                                          style="
+                                            margin: 0px 4px;
+                                            color: #409eff;
+                                          "
+                                          >@{{ items.assignRealname }}</span
+                                        >
+                                        {{ items.answerText }}
+                                      </div>
+                                      <div class="time">
+                                        {{
+                                          $tools.timestampToTime(
+                                            items.createTime,
+                                            false
+                                          )
+                                        }}
+                                        <div
+                                          class="del"
+                                          @click="del(items)"
+                                          v-if="
+                                            items.userId === userInfo.userId
+                                          "
+                                        >
+                                          删除
+                                        </div>
+                                        <div
+                                          class="reply"
+                                          v-if="
+                                            items.userId !== userInfo.userId
+                                          "
+                                          @click="answerBack(items)"
+                                        >
+                                          回复
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-if="item.label == '笔记讲义'">
+                      <div class="lecture-notes">
+                        <div class="lecture-notes__content clearfix">
+                          <div class="left-box">
+                            <div
+                              class="textarea clearfix"
+                              v-if="!(isPlayRebuild > 0) && !vidzb"
+                            >
+                              <el-input
+                                resize="none"
+                                rows="3"
+                                v-model="textareaNote"
+                                type="textarea"
+                                placeholder="觉得重要的就记下来吧~"
+                              ></el-input>
+                              <el-button
+                                type="primary"
+                                class="submit"
+                                @click="noteSubmit"
+                              >
+                                提交笔记
+                              </el-button>
+                            </div>
+
+                            <div class="note-list">
+                              <div
+                                v-if="noteList.length == 0"
+                                style="text-align: center"
+                              >
+                                暂无笔记
+                              </div>
+
+                              <div
+                                class="note-list__content"
+                                v-for="(item, index) in noteList"
+                                :key="index"
+                              >
+                                <div class="note-list__content__title">
+                                  {{ $tools.timestampToTime(item.dateNote) }}
+                                </div>
+                                <div
+                                  class="note-list__item"
+                                  v-for="(note, index) in item.userNotes"
+                                  :key="index"
+                                >
+                                  <i
+                                    class="el-icon-video-play"
+                                    @click="noteClick(note)"
+                                  ></i>
+                                  <div class="note-list__item__content">
+                                    <div class="title" @click="noteClick(note)">
+                                      {{ $tools.secondToDate(note.noteSecond) }}
+                                    </div>
+                                    <div class="desc">
+                                      {{ note.sectionName }}
+                                    </div>
+                                    <div class="time">{{ note.noteText }}</div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="pagination">
+                              <el-pagination
+                                background
+                                layout="prev, pager, next"
+                                :total="noteTotal"
+                                :page-size="noteParams.pageSize"
+                              >
+                              </el-pagination>
+                            </div>
+                          </div>
+                          <div class="right-box" v-if="courseHandoutsData">
+                            <div class="lecture-list">
+                              <div class="lecture-list__header">
+                                讲义
+
+                                <div
+                                  class="slide-btn"
+                                  @click="lectureShow = !lectureShow"
+                                >
+                                  收起
+                                </div>
+                              </div>
+                              <div
+                                class="lecture-list__body"
+                                v-if="lectureShow"
+                              >
+                                <div class="list">
+                                  <div class="list__item">
+                                    <div class="title">
+                                      {{ courseHandoutsData.handoutsName }}
+                                    </div>
+                                    <div class="btns">
+                                      <div
+                                        class="btn"
+                                        @click="
+                                          previvew(
+                                            $tools.splitImgHost(
+                                              courseHandoutsData.handoutsUrl
+                                            )
+                                          )
+                                        "
+                                      >
+                                        预览
+                                      </div>
+                                      <div
+                                        v-if="
+                                          courseHandoutsData.canDownload == 1
+                                            ? true
+                                            : false
+                                        "
+                                        class="btn"
+                                        @click="
+                                          printView(
+                                            $tools.splitImgHost(
+                                              courseHandoutsData.handoutsUrl
+                                            )
+                                          )
+                                        "
+                                      >
+                                        打印
+                                      </div>
+                                      <div
+                                        v-if="
+                                          courseHandoutsData.canDownload == 1
+                                            ? true
+                                            : false
+                                        "
+                                        class="btn"
+                                        @click="
+                                          download(
+                                            $tools.splitImgHost(
+                                              courseHandoutsData.handoutsUrl
+                                            ),
+                                            courseHandoutsData.urlName
+                                          )
+                                        "
+                                      >
+                                        下载
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="lecture-list__footer" v-if="showPdf">
+                              <div class="lecture-scan">
+                                <div class="lecture-scan__header">
+                                  {{ courseHandoutsData.urlName }}
+                                </div>
+                                <div class="lecture-scan__body">
+                                  <pdf
+                                    class="iframe"
+                                    :src="
+                                      $tools.splitImgHost(
+                                        courseHandoutsData.handoutsUrl
+                                      )
+                                    "
+                                    v-for="i in numPages"
+                                    :key="i"
+                                    :page="i"
+                                    ref="pdf"
+                                  ></pdf>
+                                  <iframe
+                                    id="printIframe"
+                                    :src="
+                                      $tools.splitImgHost(
+                                        courseHandoutsData.handoutsUrl
+                                      )
+                                    "
+                                    frameborder="0"
+                                    style="display: none"
+                                  ></iframe>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <el-dialog
+      width="800px"
+      class="take-photo"
+      :visible.sync="takePhotoModal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="take-photo__content">
+        <!-- <div class="take-photo__close" @click="takePhotoModal = false">X</div> -->
+        <div class="take-photo__header">人脸验证</div>
+        <div class="take-photo__body clearfix">
+          <div class="left-box">
+            <div class="title">重要提示:</div>
+            <div class="content">
+              <p>1、请保证摄像头正对自己,避免头像偏左或者偏右。</p>
+              <p>
+                2、请保证拍照环境光线充足(照片太暗或曝光会降低验证通过率)。
+              </p>
+              <p>
+                3、请保证整个头像在人脸识别区域内,脸部无遮挡装饰物(佩戴眼镜会降低通过率)。
+              </p>
+              <p>
+                4、如果下面视频中出现黑屏,摄像头可能被其他进程占用,请关闭其他调用摄像头的程序,重新刷新当前页面重新拍照识别。
+              </p>
+            </div>
+          </div>
+          <div class="right-box">
+            <img v-show="!isTaking" :src="faceUrl" alt="" />
+            <video v-show="isTaking" id="video" :src="stream"></video>
+          </div>
+        </div>
+        <div class="take-photo__footer">
+          <el-button
+            type="primary"
+            v-if="isTaking"
+            class="take"
+            @click="onPhoto"
+            >拍照</el-button
+          >
+          <el-button
+            type="primary"
+            v-if="!isTaking"
+            class="take"
+            :loading="loading"
+            @click="reTake"
+            >重拍</el-button
+          >
+          <el-button
+            type="primary"
+            v-if="!isTaking"
+            :loading="loading"
+            class="take"
+            @click="takeOk"
+            >确认</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      width="996px"
+      height="600px"
+      class="info"
+      :visible.sync="showInfoDetailModal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      title="资料填写"
+    >
+      <div class="info__content">
+        <el-form
+          :model="infoForm"
+          ref="infoForm"
+          :rules="rules"
+          :error-type="errorType"
+        >
+          <template v-for="(item, index) in listData">
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'name'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :disabled="true"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.name"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'idcard'"
+              :label="item.fieldName"
+              :required="item.required"
+              :disabled="true"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.idcard"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'telphone'"
+              :disabled="true"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.telphone"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'school'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.school"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'work_unit'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.work_unit"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'unit_contact'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.unit_contact"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'unit_tel'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.unit_tel"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'apply_post'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.apply_post"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.fieldKey == 'major'"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-input
+                v-model="infoForm.major"
+                :placeholder="`请输入${item.fieldName}`"
+              />
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.inputType == 2"
+              :label="item.fieldName"
+              label-width="120px"
+              :required="item.required"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-select v-model="infoForm[item.fieldKey]" placeholder="">
+                <el-option
+                  v-for="(option, optionIndex) in getarrays(item.fieldKey)"
+                  :key="optionIndex"
+                  :label="option"
+                  :value="optionIndex + ''"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="item.inputType == 5"
+              :label="item.fieldName"
+              label-width="120px"
+              :required="item.required"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-date-picker
+                v-model="infoForm[item.fieldKey]"
+                align="right"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item
+              :key="index"
+              v-if="
+                item.inputType == 3 &&
+                item.fieldKey !== 'commitment_electr_signature'
+              "
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              label-position="top"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-upload
+                action=""
+                :max-size="2097152"
+                accept="image/jpeg, image/jpg, image/png"
+                :show-file-list="false"
+                list-type="picture"
+                :auto-upload="false"
+                :ref="
+                  item.fieldKey === 'recent_photos'
+                    ? 'recent_photos'
+                    : item.fieldKey === 'idcard_face_photo'
+                    ? 'idcard_face_photo'
+                    : item.fieldKey === 'idcard_national_photo'
+                    ? 'idcard_national_photo'
+                    : ''
+                "
+                :on-change="
+                  item.fieldKey === 'recent_photos'
+                    ? changePhotoListHeader1
+                    : item.fieldKey === 'idcard_face_photo'
+                    ? changePhotoListHeader2
+                    : item.fieldKey === 'idcard_national_photo'
+                    ? changePhotoListHeader3
+                    : ''
+                "
+                :file-list="
+                  item.fieldKey === 'recent_photos'
+                    ? fileList1
+                    : item.fieldKey === 'idcard_face_photo'
+                    ? fileList2
+                    : item.fieldKey === 'idcard_national_photo'
+                    ? fileList3
+                    : ''
+                "
+              >
+                <div class="upload-box">
+                  <div
+                    :style="
+                      item.fieldKey === 'recent_photos'
+                        ? 'width: 120px; height: 169px;background:url(' +
+                          require('@/assets/info_1.png') +
+                          ') no-repeat center;background-size:cover;position:relative;'
+                        : item.fieldKey === 'idcard_face_photo'
+                        ? 'width: 120px; height: 82px;background:url(' +
+                          require('@/assets/info_2.png') +
+                          ') no-repeat center;background-size:cover;position:relative;'
+                        : item.fieldKey === 'idcard_national_photo'
+                        ? 'width: 120px; height: 82px;background:url(' +
+                          require('@/assets/info_3.png') +
+                          ') no-repeat center;background-size:cover;position:relative;'
+                        : ''
+                    "
+                  >
+                    <i
+                      @click="deleteImg(item)"
+                      class="el-icon-error"
+                      v-if="
+                        item.fieldKey === 'recent_photos'
+                          ? fileList1[0]
+                          : item.fieldKey === 'idcard_face_photo'
+                          ? fileList2[0]
+                          : item.fieldKey === 'idcard_national_photo'
+                          ? fileList3[0]
+                          : ''
+                      "
+                    ></i>
+                    <el-image
+                      style="width: 100%; height: 100%"
+                      :src="
+                        item.fieldKey === 'recent_photos'
+                          ? $tools.splitImgHost(fileList1[0].url)
+                          : item.fieldKey === 'idcard_face_photo'
+                          ? $tools.splitImgHost(fileList2[0].url)
+                          : item.fieldKey === 'idcard_national_photo'
+                          ? $tools.splitImgHost(fileList3[0].url)
+                          : ''
+                      "
+                      v-if="
+                        item.fieldKey === 'recent_photos'
+                          ? fileList1[0]
+                          : item.fieldKey === 'idcard_face_photo'
+                          ? fileList2[0]
+                          : item.fieldKey === 'idcard_national_photo'
+                          ? fileList3[0]
+                          : ''
+                      "
+                      :preview-src-list="
+                        item.fieldKey === 'recent_photos'
+                          ? [$tools.splitImgHost(fileList1[0].url)]
+                          : item.fieldKey === 'idcard_face_photo'
+                          ? [$tools.splitImgHost(fileList2[0].url)]
+                          : item.fieldKey === 'idcard_national_photo'
+                          ? [$tools.splitImgHost(fileList3[0].url)]
+                          : ''
+                      "
+                    >
+                    </el-image>
+                  </div>
+
+                  <div>
+                    <span
+                      v-if="item.fieldKey === 'recent_photos'"
+                      style="color: #999999"
+                      >竖向证件照 文件大小≤2M</span
+                    >
+                    <span
+                      v-if="
+                        item.fieldKey === 'idcard_face_photo' ||
+                        item.fieldKey === 'idcard_national_photo'
+                      "
+                      style="color: #999999"
+                    >
+                      文件大小≤2M
+                    </span>
+                  </div>
+                </div>
+
+                <div style="display: inline-block" slot="trigger">
+                  <el-button type="primary" size="small" round
+                    >浏览文件</el-button
+                  >
+                </div>
+              </el-upload>
+            </el-form-item>
+            <div
+              :key="index"
+              v-if="
+                item.inputType == 3 &&
+                item.fieldKey === 'commitment_electr_signature'
+              "
+            >
+              <el-form-item
+                v-if="
+                  item.inputType == 3 &&
+                  item.fieldKey === 'commitment_electr_signature'
+                "
+                label="承诺书"
+                :required="item.required"
+                label-width="120px"
+                label-position="top"
+              >
+                <div style="line-height: 40px; text-indent: 2em">
+                  <span>
+                    本人自愿做出如下承诺:本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
+                    全部内容并知晓和理解,本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定,本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求,如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
+                  </span>
+                  <div style="line-height: 40px; text-indent: 2em">
+                    <span>特此承诺!</span>
+                  </div>
+                </div>
+              </el-form-item>
+              <el-form-item
+                v-if="
+                  item.inputType == 3 &&
+                  item.fieldKey === 'commitment_electr_signature'
+                "
+                label="签名板"
+                :required="item.required"
+                label-width="120px"
+                label-position="top"
+                :prop="item.required ? item.fieldKey : ''"
+              >
+                <div class="dis_stys">
+                  <span style="color: #999999">请在下方签名区进行签名</span>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="retDraw"
+                    mode=""
+                    >清空</el-button
+                  >
+                </div>
+                <div class="handCenter">
+                  <vue-esign
+                    v-if="!infoForm[item.fieldKey]"
+                    ref="esign"
+                    :width="600"
+                    :height="300"
+                    :isCrop="false"
+                    :lineWidth="5"
+                    :lineColor="'#333'"
+                  />
+                  <div
+                    v-else
+                    style="width: 100%; height: 100%; position: relative"
+                  >
+                    <img
+                      style="width: 100%; height: 100%"
+                      :src="$tools.splitImgHost(infoForm[item.fieldKey])"
+                      mode=""
+                    />
+                  </div>
+                </div>
+              </el-form-item>
+            </div>
+            <el-form-item
+              :key="index"
+              v-if="item.inputType == 4"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              label-position="top"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-button
+                type="primary"
+                size="small"
+                round
+                @click="downloadStamp(item)"
+                >下载模板</el-button
+              >
+              <el-upload
+                action=""
+                :max-size="2097152"
+                accept="image/jpeg, image/jpg, image/png"
+                :show-file-list="false"
+                list-type="picture"
+                :auto-upload="false"
+                ref="stamp"
+                :on-change="changePhotoListStamp"
+                :file-list="fileListStamp"
+              >
+                <div style="display: inline-block; vertical-align: top">
+                  <div
+                    :style="
+                      'width: 120px; height: 120px;background:url(' +
+                      require('@/assets/info_4.png') +
+                      ') no-repeat center;background-size:cover;position:relative;'
+                    "
+                  >
+                    <el-image
+                      style="width: 100%; height: 100%"
+                      :src="$tools.splitImgHost(fileListStamp[0].url)"
+                      v-if="fileListStamp[0]"
+                      :preview-src-list="[
+                        $tools.splitImgHost(fileListStamp[0].url),
+                      ]"
+                    >
+                    </el-image>
+                  </div>
+
+                  <div>
+                    <span style="color: #999999">文件大小≤2M</span>
+                  </div>
+                </div>
+
+                <div style="display: inline-block" slot="trigger">
+                  <el-button type="primary" size="small" round
+                    >浏览文件</el-button
+                  >
+                </div>
+              </el-upload>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="
+            showInfoDetailModal = false;
+            $router.back(-1);
+          "
+          >取 消</el-button
+        >
+        <el-button type="primary" :loading="uploading" @click="submit"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+
+    <el-dialog
+      width="996px"
+      height="600px"
+      class="info"
+      :visible.sync="showStampDetailModail"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      title="资料填写"
+    >
+      <div class="info__content">
+        <el-form
+          :model="stampForm"
+          ref="stampForm"
+          :rules="stampRules"
+          :error-type="errorType"
+        >
+          <template v-for="(item, index) in listDataStamp">
+            <el-form-item
+              :key="index"
+              v-if="item.inputType == 4"
+              :label="item.fieldName"
+              :required="item.required"
+              label-width="120px"
+              label-position="top"
+              :prop="item.required ? item.fieldKey : ''"
+            >
+              <el-button
+                type="primary"
+                size="small"
+                round
+                @click="downloadStamp(item)"
+                >下载模板</el-button
+              >
+              <el-upload
+                action=""
+                :max-size="2097152"
+                accept="image/jpeg, image/jpg, image/png"
+                :show-file-list="false"
+                list-type="picture"
+                :auto-upload="false"
+                ref="stamp"
+                :on-change="changePhotoListStamp"
+                :file-list="fileListStamp"
+              >
+                <div style="display: inline-block; vertical-align: top">
+                  <div
+                    :style="
+                      'width: 120px; height: 120px;background:url(' +
+                      require('@/assets/info_4.png') +
+                      ') no-repeat center;background-size:cover;position:relative;'
+                    "
+                  >
+                    <el-image
+                      style="width: 100%; height: 100%"
+                      :src="$tools.splitImgHost(fileListStamp[0].url)"
+                      v-if="fileListStamp[0]"
+                      :preview-src-list="[
+                        $tools.splitImgHost(fileListStamp[0].url),
+                      ]"
+                    >
+                    </el-image>
+                  </div>
+
+                  <div>
+                    <span style="color: #999999">文件大小≤2M</span>
+                  </div>
+                </div>
+
+                <div style="display: inline-block" slot="trigger">
+                  <el-button type="primary" size="small" round
+                    >浏览文件</el-button
+                  >
+                </div>
+              </el-upload>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="
+            showStampDetailModail = false;
+            $router.back(-1);
+          "
+          >取 消</el-button
+        >
+        <el-button type="primary" :loading="uploading" @click="stampSubmit"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+
+    <div id="printTable"></div>
+    <!-- <ToolBar></ToolBar> -->
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
+
+import { mapGetters, mapMutations } from "vuex";
+import * as baseUrls from "@/axios.js";
+import pdf from "vue-pdf";
+import print from "print-js";
+export default {
+  name: "CourseDetail",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+    pdf,
+    GoodsItem,
+  },
+  data() {
+    return {
+      liveDuration: 0,
+      numPages: 0,
+      showPdf: false,
+      // 总页数
+      pdfPages: 10,
+      // 当前页数
+      pageNum: 1,
+      // 加载进度
+      loadedRatio: 10,
+      // 页面加载完成
+      curPageNum: 0,
+      // 放大系数 默认百分百
+      scale: 100,
+      // 旋转角度 ‘90’的倍数才有效
+      pageRotate: 0,
+      // 单击内部链接时触发 (目前我没有遇到使用场景)
+      page: 0,
+      bgColor: "#ccc",
+      answerTimer: null,
+      recordObj: {},
+      showInfoDetailModal: false,
+      showStampDetailModail: false,
+      isTaking: true, //是否正在拍照
+      photoConfig: false,
+      stream: null,
+      photoNum: 0,
+      playSectionId: 0,
+      photoIndex: 0, //当前位于拍照的区间下标 从0开始
+      photoHistoryList: [], //已拍照历史的下标点
+      moduleId: 0,
+      chapterId: 0,
+      menuTab: [],
+      lectureShow: true,
+      textarea: "",
+      textareaNote: "",
+      takePhotoModal: false,
+      activeName: "1",
+      courseId: "",
+      courseTabIndex: "1",
+      goodsId: "",
+      gradeId: "",
+      livingTimer: null,
+      sectionItem: {},
+      gradeDetail: {},
+      autoplay: false,
+      isAllowSeek: "on",
+      playbackRate: false,
+      goodsPlayConfig: null,
+      playTime: 0, //页面播放时长,不含暂停
+      param: {
+        pageNum: 1,
+        pageSize: 100,
+        total: 0,
+      },
+      postTimer: null, //提交视频观看记录定时器
+      lockTimer: null,
+      courseList: [],
+      businessData: {},
+      courseHandoutsData: "",
+      menuList: [],
+      goodsData: {},
+      tabList: [],
+      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",
+      menuList: [],
+      reMenuList: [],
+      answerList: [{ newArraysAnswerList: [] }],
+      noteList: [],
+      photoList: [],
+      noteTotal: 0,
+      duration: 0,
+      answerTimer: null,
+      noteParams: {
+        pageNum: 1,
+        // pageSize: 4,
+      },
+      ossAvatarUrl: "", //照片地址
+      nowTime: 0,
+      faceUrl: "",
+      loading: null,
+      listData: [],
+      listDataStamp: [],
+      remark: "",
+      remarkStatus: false,
+      remarkStamp: "",
+      remarkStatusStamp: false,
+      errorType: ["message"],
+      stampForm: {
+        commitment_seal: "",
+      },
+      infoForm: {
+        name: "",
+        sex: "",
+        idcard: "",
+        telphone: "",
+        education: "",
+        school: "",
+        graduation_time: "",
+        work_unit: "",
+        unit_contact: "",
+        unit_tel: "",
+        apply_post: "",
+        major: "",
+        working_years: "",
+        recent_photos: "",
+        idcard_face_photo: "",
+        idcard_national_photo: "",
+        commitment_electr_signature: "",
+        commitment_seal: "",
+      },
+      recommendList: [],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: ["change", "blur"],
+          },
+        ],
+        sex: [
+          {
+            required: true,
+            message: "请选择性别",
+            trigger: "change",
+          },
+        ],
+        idcard: [
+          {
+            required: true,
+            message: "请输入身份证号",
+            trigger: ["change", "blur"],
+          },
+          {
+            validator: (rule, value, callback) => {
+              let IDRe18 =
+                /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+              let IDre15 =
+                /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
+
+              if (!IDRe18.test(value) && !IDre15.test(value)) {
+                return callback(new Error("请输入格式正确的身份证号"));
+              } else {
+                return callback();
+              }
+            },
+            message: "请输入格式正确的身份证号",
+            trigger: ["change", "blur"],
+          },
+        ],
+        telphone: [
+          {
+            required: true,
+            message: "请输入手机号码",
+            trigger: ["change", "blur"],
+          },
+          {
+            validator: (rule, value, callback) => {
+              var reg_tel =
+                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+              if (reg_tel.test(value)) {
+                return callback();
+              } else {
+                return callback(new Error("手机号码不正确"));
+              }
+            },
+            trigger: ["change", "blur"],
+          },
+        ],
+        education: [
+          {
+            required: true,
+            message: "请选择学历",
+            trigger: "change",
+          },
+        ],
+        school: [
+          {
+            required: true,
+            message: "请输入毕业院校",
+            trigger: ["change", "blur"],
+          },
+        ],
+        graduation_time: [
+          {
+            required: true,
+            message: "请选择毕业时间",
+            trigger: "change",
+          },
+        ],
+        work_unit: [
+          {
+            required: true,
+            message: "请输入工作单位",
+            trigger: ["change", "blur"],
+          },
+        ],
+        unit_contact: [
+          {
+            required: true,
+            message: "请输入单位联系人",
+            trigger: ["change", "blur"],
+          },
+        ],
+        unit_tel: [
+          {
+            required: true,
+            message: "请输入单位联系电话",
+            trigger: ["change", "blur"],
+          },
+          {
+            validator: (rule, value, callback) => {
+              var reg_tel =
+                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+              var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
+              var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
+              if (
+                reg_tel.test(value) ||
+                vartest.test(value) ||
+                vartest1.test(value)
+              ) {
+                return callback();
+              } else {
+                return callback(new Error("单位联系电话不正确"));
+              }
+            },
+            trigger: ["change", "blur"],
+          },
+        ],
+        apply_post: [
+          {
+            required: true,
+            message: "请输入报名岗位",
+            trigger: ["change", "blur"],
+          },
+        ],
+        major: [
+          {
+            required: true,
+            message: "请输入所学专业",
+            trigger: ["change", "blur"],
+          },
+        ],
+        working_years: [
+          {
+            required: true,
+            message: "请选择工作年限",
+            trigger: "change",
+          },
+        ],
+        recent_photos: [
+          {
+            required: true,
+            message: "请上传个人近照",
+            trigger: ["change", "blur"],
+          },
+        ],
+        idcard_face_photo: [
+          {
+            required: true,
+            message: "请上传身份证人像面",
+            trigger: ["change", "blur"],
+          },
+        ],
+        idcard_national_photo: [
+          {
+            required: true,
+            message: "请上传身份证国徽面",
+            trigger: ["change", "blur"],
+          },
+        ],
+        commitment_electr_signature: [
+          {
+            required: true,
+            message: "请签写承诺书电子签",
+            trigger: ["change", "blur"],
+          },
+        ],
+        commitment_seal: [
+          {
+            required: true,
+            message: "请上传承诺书盖章",
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+
+      stampRules: {
+        commitment_seal: [
+          {
+            required: true,
+            message: "请上传承诺书盖章",
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+
+      fileList1: [], //个人近照
+      fileList2: [], //人像
+      fileList3: [], //国徽
+      fileListStamp: [], //印章
+      dictObj: null,
+      isRequired: false,
+      uploading: false,
+      veryIdCard: "",
+      veryIdName: "",
+      isPlayRebuild: false,
+      showRecordStatus: false,
+      hasStart: false,
+      needOpen: true, //是否需要展开第一章节
+      menuIndex: [],
+      clickLock: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+
+    compyRecommend: function () {
+      return function (array) {
+        let ary = [];
+        if (array) {
+          for (let i = 0; i < array.length; i++) {
+            if (i >= 5) {
+              break;
+            } else {
+              ary.push(array[i]);
+            }
+          }
+        }
+        return ary;
+      };
+    },
+  },
+  mounted() {
+    this.courseId = +this.$route.query.courseId || "";
+    this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
+    this.goodsId = this.$route.params.goodsId;
+    this.orderGoodsId = this.$route.query.orderGoodsId;
+    this.gradeId = this.$route.query.gradeId;
+    this.sectionItem = this.$route.query;
+
+    if (this.$route.query.rebuild) {
+      this.courseTabIndex = "2";
+    }
+
+    this.dictList();
+
+    // this.userConfirmInfoDetail().then((res) => {
+    this.getbaseprofiletplists().then(async (res) => {
+      // let allMenuList = await this.studyRecordMenuAllList();
+      // let nowTime = Number(new Date().getTime() / 1000).toFixed(0);
+      // let liveMenu = allMenuList.filter((item) => {
+      //   //获取直播中的视频
+      //   if (
+      //     item.type == 3 &&
+      //     item.liveStartTime <= nowTime &&
+      //     item.liveEndTime > nowTime
+      //   ) {
+      //     return true;
+      //   } else {
+      //     return false;
+      //   }
+      // });
+      // let earlyTime = 0;
+
+      // if (liveMenu && liveMenu.length) {
+      //   earlyTime = liveMenu[0].liveStartTime;
+      // }
+
+      this.courseCourseList();
+      if (this.sectionItem.recordingUrl) {
+        let noteSecond = this.$route.query.noteSecond;
+        if (noteSecond > 0) {
+          let item = {
+            sectionId: this.$route.query.sectionId,
+            recordingUrl: this.$route.query.recordingUrl,
+            noteSecond: noteSecond,
+            studyDuration: noteSecond,
+            moduleId: this.$route.query.moduleId,
+            chapterId: this.$route.query.chapterId,
+          };
+
+          this.playSectionId = this.$route.query.sectionId;
+          setTimeout(() => {
+            this.noteClick(item);
+          }, 1000);
+        }
+      }
+      // let noteSecond = this.$route.query.noteSecond;
+      // if (noteSecond > 0) {
+      //   let item = {
+      //     sectionId: this.$route.query.sectionId,
+      //     recordingUrl: this.$route.query.recordingUrl,
+      //     noteSecond: noteSecond,
+      //     studyDuration: noteSecond,
+      //     moduleId: this.$route.query.moduleId,
+      //     chapterId: this.$route.query.chapterId,
+      //   };
+
+      //   this.sectionItem = item;
+      //   this.playSectionId = this.$route.query.sectionId;
+      //   setTimeout(() => {
+      //     this.noteClick(item);
+      //   }, 1000);
+      // }
+    });
+    // });
+  },
+  beforeDestroy() {
+    try {
+      this.$msgbox.close();
+    } catch (err) {}
+    if (this.playSectionId && this.hasStart) {
+      this.postStudyRecord();
+    }
+    // if (this.lockTimer) {
+    //   clearInterval(this.lockTimer);
+    //   this.$request
+    //     .lockDelLock({
+    //       action: "jxjy",
+    //     })
+    //     .then((res) => {});
+    // }
+    this.clears();
+    clearInterval(this.answerTimer);
+    clearInterval(this.postTimer);
+    clearInterval(this.livingTimer);
+  },
+  methods: {
+    ...mapMutations(["getCartCount"]),
+    /**
+     * 
+     获取推荐列表
+     */
+    getRecommend() {
+      this.$request
+        .appCommonActivityRecommendList({
+          businessId: this.goodsData.businessId,
+          type: 1,
+        })
+        .then((res) => {
+          if (res.rows.length) {
+            this.recommendList = res.rows[0];
+          }
+        });
+    },
+    addCart(status, goodsId) {
+      this.$request
+        .addCart({ goodsId: status ? goodsId : this.goodsId })
+        .then((res) => {
+          this.getCartCount();
+          this.$message({
+            message: "加入购物车成功",
+            type: "success",
+          });
+        })
+        .catch((err) => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning",
+            });
+          }
+        });
+    },
+    toGoodsDetail(item) {
+      this.$router.push({
+        path: "/course-detail/" + item.goodsId,
+      });
+    },
+    async takeOk() {
+      this.loading = true;
+      let compareFaceData = await this.faceRecognition();
+
+      if (compareFaceData >= 80) {
+        const waitYS = await this.imageInfos();
+        this.postCoursePhotoRecord()
+          .then((res) => {
+            this.photoHistoryList.push(this.photoIndex);
+            this.postStudyRecord(); //提交记录
+            //恢复播放
+
+            this.$message({
+              type: "success",
+              message: "拍照成功",
+            });
+            this.takePhotoModal = false;
+            this.isTaking = false;
+            this.loading = false;
+            var polyvPlayerContext = this.player;
+            if (polyvPlayerContext) {
+              polyvPlayerContext.j2s_resumeVideo();
+            }
+            var polyvPlayerContext = this.playerzb;
+            if (polyvPlayerContext) {
+              polyvPlayerContext.j2s_resumeVideo();
+            }
+          })
+          .catch((err) => {
+            this.loading = false;
+            console.log(err, "err");
+            this.$message({
+              type: "warning",
+              message: "上传接口报错,请重新拍照上传",
+            });
+            this.reTake();
+          });
+      } else {
+        this.$message({
+          type: "warning",
+          message: "人脸匹配不通过,请重新拍照上传",
+        });
+
+        setTimeout(() => {
+          this.loading = false;
+          this.reTake();
+        }, 2000);
+        return;
+      }
+    },
+
+    changePhotoListStamp(params, fileList) {
+      const file = params.raw;
+      const fileType = file.type;
+      const isImage = fileType.indexOf("image") != -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      // 这里常规检验,看项目需求而定
+      if (!isImage) {
+        this.$message.error("只能上传图片格式png、jpg、gif!");
+        return;
+      }
+      if (!isLt2M) {
+        this.$message.error("只能上传图片大小小于2M");
+        return;
+      }
+      if (fileList.length == 1) {
+        fileList.splice(0, 1);
+      }
+      this.$refs.stamp[0].clearFiles();
+      this.$upload
+        .upload(file, 0)
+        .then((res) => {
+          this.$set(this.stampForm, "commitment_seal", res);
+          this.fileListStamp = [
+            {
+              name: res,
+              url: res,
+            },
+          ];
+          this.$refs.stamp[0].clearFiles();
+          console.log(res);
+        })
+        .catch((err) => {
+          this.$refs.stamp[0].clearFiles();
+        });
+    },
+
+    // 页面加载成功  当前页数
+    pageLoaded(e) {
+      this.$emit("current", e);
+      this.curPageNum = e;
+    },
+
+    changePhotoListHeader1(params, fileList) {
+      console.log(params);
+      const file = params.raw;
+      const fileType = file.type;
+      const isImage = fileType.indexOf("image") != -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      // 这里常规检验,看项目需求而定
+      if (!isImage) {
+        this.$message.error("只能上传图片格式png、jpg、gif!");
+        return;
+      }
+      if (!isLt2M) {
+        this.$message.error("只能上传图片大小小于2M");
+        return;
+      }
+      if (fileList.length == 1) {
+        fileList.splice(0, 1);
+      }
+      this.$refs.recent_photos[0].clearFiles();
+      this.$upload
+        .upload(file, 0)
+        .then((res) => {
+          this.$set(this.infoForm, "recent_photos", res);
+          this.fileList1 = [
+            {
+              name: res,
+              url: res,
+            },
+          ];
+          this.$refs.recent_photos[0].clearFiles();
+          console.log(res);
+        })
+        .catch((err) => {
+          this.$refs.recent_photos[0].clearFiles();
+        });
+    },
+
+    async changePhotoListHeader2(params, fileList) {
+      const file = params.raw;
+      const fileType = file.type;
+      const isImage = fileType.indexOf("image") != -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      // 这里常规检验,看项目需求而定
+      if (!isImage) {
+        this.$message.error("只能上传图片格式png、jpg、gif!");
+        return;
+      }
+      if (!isLt2M) {
+        this.$message.error("只能上传图片大小小于2M");
+        return;
+      }
+
+      if (fileList.length == 1) {
+        fileList.splice(0, 1);
+      }
+
+      let res = await this.faceCertificationIDCardOCR(1, file);
+
+      console.log(res.data.IdImgPath, "res.data.IdImgPath");
+
+      if (res.code == 500) {
+        this.$message.warning("请上传正确清晰的身份证人像面照片");
+        return;
+      }
+
+      this.$refs.idcard_face_photo[0].clearFiles();
+      this.$set(this.infoForm, "idcard_face_photo", res.data.IdImgPath);
+      this.fileList2 = [
+        {
+          name: res.data.IdImgPath,
+          url: res.data.IdImgPath,
+        },
+      ];
+      // this.$upload
+      //   .upload(file, 0)
+      //   .then((res) => {
+      //     console.log(res, "res");
+      //     this.$set(this.infoForm, "idcard_face_photo", res);
+      //     this.fileList2 = [
+      //       {
+      //         name: res,
+      //         url: res,
+      //       },
+      //     ];
+      //     this.$refs.idcard_face_photo[0].clearFiles();
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     this.$refs.idcard_face_photo[0].clearFiles();
+      //   });
+    },
+
+    async changePhotoListHeader3(params, fileList) {
+      const file = params.raw;
+      const fileType = file.type;
+      const isImage = fileType.indexOf("image") != -1;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      // 这里常规检验,看项目需求而定
+      if (!isImage) {
+        this.$message.error("只能上传图片格式png、jpg、gif!");
+        return;
+      }
+      if (!isLt2M) {
+        this.$message.error("只能上传图片大小小于2M");
+        return;
+      }
+
+      if (fileList.length == 1) {
+        fileList.splice(0, 1);
+      }
+
+      let res = await this.faceCertificationIDCardOCR(2, file);
+      if (res.code == 500) {
+        this.$message.warning("请上传正确清晰的身份证国徽面照片");
+        return;
+      }
+      this.$refs.idcard_national_photo[0].clearFiles();
+      this.$set(this.infoForm, "idcard_national_photo", res.data.IdImgPath);
+      this.fileList3 = [
+        {
+          name: res.data.IdImgPath,
+          url: res.data.IdImgPath,
+        },
+      ];
+      // this.$upload
+      //   .upload(file, 0)
+      //   .then((res) => {
+      //     this.$set(this.infoForm, "idcard_national_photo", res);
+      //     this.fileList3 = [
+      //       {
+      //         name: res,
+      //         url: res,
+      //       },
+      //     ];
+      //     this.$refs.idcard_national_photo[0].clearFiles();
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     this.$refs.idcard_national_photo[0].clearFiles();
+      //   });
+    },
+
+    faceCertificationIDCardOCR(cardSide, file) {
+      return new Promise((resolve) => {
+        var reader = new FileReader();
+        // 将文件加载进入
+        reader.readAsDataURL(file);
+        reader.onload = (e) => {
+          // 转换完成输出该文件base64编码
+          let base64 = e.target.result;
+
+          this.$request
+            .faceCertificationIDCardOCR({
+              cardSide: cardSide, //1人像  2 国徽
+              cardImageBase64: base64,
+              gradeId: this.gradeId,
+            })
+            .then((res) => {
+              resolve(res);
+            })
+            .catch((err) => {
+              resolve(err);
+            });
+        };
+      });
+    },
+
+    async submit() {
+      if (this.uploading) {
+        return;
+      }
+      this.uploading = true;
+
+      var ast = this.listData.some((item) => {
+        return item.fieldKey === "commitment_electr_signature";
+      });
+      if (ast) {
+        await this.subCanvas();
+      }
+
+      this.resultForm();
+    },
+
+    stampSubmit() {
+      if (this.uploading) {
+        return;
+      }
+      this.uploading = true;
+      this.stampResultForm();
+    },
+    backLI() {
+      this.player.j2s_seekVideo(0);
+      this.showRecordStatus = false;
+    },
+    //验证表单
+    stampResultForm() {
+      for (let i = 0; i < this.listDataStamp.length; i++) {
+        if (
+          this.listDataStamp[i].fieldKey === "commitment_seal" &&
+          !this.listDataStamp[i].required
+        ) {
+          this.submitApi();
+          return;
+        }
+      }
+      this.$refs.stampForm.validate((valid) => {
+        if (valid) {
+          this.submitApiStamp();
+        } else {
+          this.uploading = false;
+        }
+      });
+    },
+
+    async submitApiStamp() {
+      var data = JSON.parse(JSON.stringify(this.stampForm));
+      if (data["commitment_seal"]) {
+        data.commitment_seal = await this.$upload.upload(
+          data.commitment_seal,
+          0
+        );
+      }
+      this.optionChanges(data);
+    },
+
+    optionChanges(data) {
+      var self = this;
+      var objs = {};
+      for (let k in data) {
+        objs[k] = {
+          fieldKey: k,
+          value: data[k],
+          fieldName: (function () {
+            for (let i = 0; i < self.listDataStamp.length; i++) {
+              if (self.listDataStamp[i].fieldKey == k) {
+                return self.listDataStamp[i].fieldName;
+              }
+            }
+          })(),
+          status: self.remarkStatusStamp ? 1 : 0,
+        };
+      }
+      var datas = {
+        orderGoodsId: this.orderGoodsId,
+        goodsId: self.goodsId,
+        keyValue: JSON.stringify(objs),
+      };
+      if (self.remarkStatus) {
+        datas.id = self.id;
+        self.$request.editbaseprofileStamp(datas).then((res) => {
+          this.uploading = false;
+          this.showStampDetailModail = false;
+          this.$message.success("提交成功");
+        });
+      } else {
+        self.$request.addbaseprofileStamp(datas).then((res) => {
+          this.uploading = false;
+          this.showStampDetailModail = false;
+          this.$message.success("提交成功");
+        });
+      }
+    },
+
+    resultForm() {
+      console.log(1);
+      if (this.isRequired) {
+        this.submitApi();
+      } else {
+        console.log(1);
+        this.$refs.infoForm.validate((valid) => {
+          console.log(1);
+          if (valid) {
+            this.submitApi();
+          } else {
+            this.uploading = false;
+          }
+        });
+        // if (int === 1) {
+        //   this.errorType = ["toast"];
+        // } else {
+        //   this.errorType = ["message"];
+        // }
+      }
+    },
+
+    async submitApi() {
+      console.log(this.infoForm, "999");
+      var data = JSON.parse(JSON.stringify(this.infoForm));
+      if (data["sex"]) {
+        data.sex = this.dictObj["sys_user_sex"][Number(data.sex)];
+      }
+      if (data["education"]) {
+        data.education = this.dictObj["edu_level"][Number(data.education)];
+      }
+      if (data["working_years"]) {
+        data.working_years =
+          this.dictObj["working_years"][Number(data.working_years)];
+      }
+      if (data["recent_photos"]) {
+        data.recent_photos = await this.$upload.upload(data.recent_photos, 0);
+      }
+      if (data["idcard_face_photo"]) {
+        data.idcard_face_photo = await this.$upload.upload(
+          data.idcard_face_photo,
+          0
+        );
+      }
+      if (data["idcard_national_photo"]) {
+        data.idcard_national_photo = await this.$upload.upload(
+          data.idcard_national_photo,
+          0
+        );
+      }
+      if (data["commitment_electr_signature"]) {
+        data.commitment_electr_signature = await this.$upload.upload(
+          data.commitment_electr_signature,
+          0
+        );
+      }
+
+      this.uploadDatas(data);
+    },
+
+    async downloadStamp(item) {
+      let self = this;
+
+      var ast = this.listData.some((item) => {
+        return item.fieldKey === "commitment_electr_signature";
+      });
+      if (ast) {
+        await this.subCanvas();
+      }
+
+      let data = JSON.parse(JSON.stringify(this.infoForm));
+      if (data["sex"]) {
+        data.sex = this.dictObj["sys_user_sex"][Number(data.sex)];
+      }
+      if (data["education"]) {
+        data.education = this.dictObj["edu_level"][Number(data.education)];
+      }
+      if (data["working_years"]) {
+        data.working_years =
+          this.dictObj["working_years"][Number(data.working_years)];
+      }
+
+      console.log(data, "data");
+
+      if (this.remarkStatus) {
+        var arsty = {};
+        for (let k in data) {
+          for (let j in self.copyData) {
+            if (k === j) {
+              if (self.copyData[j].value === data[k]) {
+                arsty[k] = {
+                  fieldKey: k,
+                  value: data[k],
+                  fieldName: (function () {
+                    for (let i = 0; i < self.listData.length; i++) {
+                      if (self.listData[i].fieldKey == k) {
+                        return self.listData[i].fieldName;
+                      }
+                    }
+                  })(),
+                  status: 0,
+                };
+              } else {
+                arsty[k] = {
+                  fieldKey: k,
+                  value: data[k],
+                  fieldName: (function () {
+                    for (let i = 0; i < self.listData.length; i++) {
+                      if (self.listData[i].fieldKey == k) {
+                        return self.listData[i].fieldName;
+                      }
+                    }
+                  })(),
+                  status: 1,
+                };
+              }
+            }
+          }
+        }
+      } else {
+        var arsty = {};
+        for (let k in data) {
+          arsty[k] = {
+            fieldKey: k,
+            value: data[k],
+            fieldName: (function () {
+              for (let i = 0; i < self.listData.length; i++) {
+                if (self.listData[i].fieldKey == k) {
+                  return self.listData[i].fieldName;
+                }
+              }
+            })(),
+            status: 0,
+          };
+        }
+      }
+
+      console.log(arsty, "arsty");
+
+      this.$request
+        .baseProfileStampV2AddWord({
+          goodsId: this.goodsId,
+          keyValue: JSON.stringify(arsty),
+        })
+        .then((res) => {
+          let url = this.$tools.splitImgHost(res.msg);
+          let name = res.msg.substring(res.msg.lastIndexOf("/") + 1);
+          let image = new Image();
+          // 解决跨域 Canvas 污染问题,
+          image.setAttribute("crossorigin", "anonymous");
+          image.onload = function () {
+            var canvas = document.createElement("canvas");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            var context = canvas.getContext("2d");
+            context.drawImage(image, 0, 0, image.width, image.height);
+            var base64 = canvas.toDataURL("image/jpg"); //将图片格式转为base64
+            var a = document.createElement("a"); // 生成一个a元素
+            var event = new MouseEvent("click"); // 创建一个单击事件
+            a.download = name; // 设置图片名称
+            console.log(base64);
+            a.href = base64; // 将生成的URL设置为a.href属性
+            a.dispatchEvent(event); // 触发a的单击事件
+          };
+          image.src = url + "?time=" + Date.now(); //注意,这里是灵魂,否则依旧会产生跨域问题
+        });
+    },
+
+    convertBase64UrlToBlob(urlData) {
+      var localData = urlData; //dataUrl为base64位
+      let base = atob(localData.substring(localData.indexOf(",") + 1)); // base是将base64编码解码,去掉data:image/png;base64部分
+      let length = base.length;
+      let url = new Uint8Array(length);
+      while (length--) {
+        url[length] = base.charCodeAt(length);
+      }
+      let file = new File([url], "a.jpg", {
+        type: "image/jpg",
+      });
+      //最后将file,通过ajax请求做为参数传给服务器就可以了
+      return file;
+    },
+
+    async uploadDatas(data) {
+      if (this.infoForm.recent_photos && this.infoForm.idcard_face_photo) {
+        let base = await this.$tools.imageToBase64(
+          this.$tools.splitImgHost(this.infoForm.idcard_face_photo)
+        );
+        console.log(base);
+        console.log(this.$tools.splitImgHost(this.infoForm.idcard_face_photo));
+        let resData = await this.$request.faceCertificationIDCardOCR({
+          cardSide: 1, //1人像  2 国徽
+          cardImageBase64: base,
+          gradeId: this.gradeId,
+        });
+
+        if (!resData.data) {
+          this.$message.warning("身份证人像面照片异常,请重新上传");
+          this.uploading = false;
+          return;
+        }
+        this.veryIdCard = resData.data.IdNum;
+        this.veryIdName = resData.data.IdName;
+
+        // if (this.infoForm.idcard) {
+        //   if (this.infoForm.idcard != this.veryIdCard) {
+        //     this.$message.warning(
+        //       "输入的身份证号和身份证人像面照片身份证号不匹配"
+        //     );
+        //     this.uploading = false;
+        //     return;
+        //   }
+        // }
+
+        let base64 = await this.$tools.imageToBase64(
+          this.$tools.splitImgHost(this.infoForm.recent_photos)
+        );
+
+        let newData = {
+          urlA: this.infoForm.idcard_face_photo,
+          oneInchPhotos: base64,
+        };
+
+        this.$request
+          .faceCertificationIdCardCompareFace(newData)
+          .then((res1) => {
+            if (res1.data >= 70) {
+              var self = this;
+              if (self.remarkStatus) {
+                var arsty = {};
+                for (let k in data) {
+                  for (let j in self.copyData) {
+                    if (k === j) {
+                      if (self.copyData[j].value === data[k]) {
+                        arsty[k] = {
+                          fieldKey: k,
+                          value: data[k],
+                          fieldName: (function () {
+                            for (let i = 0; i < self.listData.length; i++) {
+                              if (self.listData[i].fieldKey == k) {
+                                return self.listData[i].fieldName;
+                              }
+                            }
+                          })(),
+                          status: 0,
+                        };
+                      } else {
+                        arsty[k] = {
+                          fieldKey: k,
+                          value: data[k],
+                          fieldName: (function () {
+                            for (let i = 0; i < self.listData.length; i++) {
+                              if (self.listData[i].fieldKey == k) {
+                                return self.listData[i].fieldName;
+                              }
+                            }
+                          })(),
+                          status: 1,
+                        };
+                      }
+                    }
+                  }
+                }
+                var datas = {
+                  id: this.id,
+                  goodsId: this.goodsId,
+                  orderGoodsId: this.orderGoodsId,
+                  keyValue: JSON.stringify(arsty),
+                };
+                this.$request
+                  .editbaseprofiletp(datas)
+                  .then((res) => {
+                    this.uploading = false;
+                    this.courseCourseList();
+                    this.$message.success("提交成功");
+                    this.showInfoDetailModal = false;
+                  })
+                  .catch((err) => {
+                    this.$message.warning(err.msg);
+                    this.uploading = false;
+                  });
+              } else {
+                var objs = {};
+                for (let k in data) {
+                  objs[k] = {
+                    fieldKey: k,
+                    value: data[k],
+                    fieldName: (function () {
+                      for (let i = 0; i < self.listData.length; i++) {
+                        if (self.listData[i].fieldKey == k) {
+                          return self.listData[i].fieldName;
+                        }
+                      }
+                    })(),
+                    status: 0,
+                  };
+                }
+                var datas = {
+                  goodsId: this.goodsId,
+                  profileTpId: this.goodsId,
+                  orderGoodsId: this.orderGoodsId,
+                  keyValue: JSON.stringify(objs),
+                };
+                this.$request
+                  .addbaseprofiletp(datas)
+                  .then((res) => {
+                    this.uploading = false;
+                    this.courseCourseList();
+                    this.$message.success("提交成功");
+                    this.showInfoDetailModal = false;
+                  })
+                  .catch((err) => {
+                    this.$message.warning(err.msg);
+                    this.uploading = false;
+                  });
+              }
+            } else {
+              this.uploading = false;
+              this.$message.warning("个人近照和身份证人像面照片不匹配");
+            }
+          })
+          .catch((err) => {
+            this.uploading = false;
+            this.$message.warning(err.msg);
+          });
+
+        return;
+      }
+
+      var self = this;
+      if (self.remarkStatus) {
+        var arsty = {};
+        for (let k in data) {
+          for (let j in self.copyData) {
+            if (k === j) {
+              if (self.copyData[j].value === data[k]) {
+                arsty[k] = {
+                  fieldKey: k,
+                  value: data[k],
+                  fieldName: (function () {
+                    for (let i = 0; i < self.listData.length; i++) {
+                      if (self.listData[i].fieldKey == k) {
+                        return self.listData[i].fieldName;
+                      }
+                    }
+                  })(),
+                  status: 0,
+                };
+              } else {
+                arsty[k] = {
+                  fieldKey: k,
+                  value: data[k],
+                  fieldName: (function () {
+                    for (let i = 0; i < self.listData.length; i++) {
+                      if (self.listData[i].fieldKey == k) {
+                        return self.listData[i].fieldName;
+                      }
+                    }
+                  })(),
+                  status: 1,
+                };
+              }
+            }
+          }
+        }
+        var datas = {
+          id: this.id,
+          goodsId: this.goodsId,
+          orderGoodsId: this.orderGoodsId,
+          keyValue: JSON.stringify(arsty),
+        };
+        this.$request
+          .editbaseprofiletp(datas)
+          .then((res) => {
+            this.uploading = false;
+            this.courseCourseList();
+            this.$message.success("提交成功");
+            this.showInfoDetailModal = false;
+          })
+          .catch((err) => {
+            this.$message.warning(err.msg);
+            this.uploading = false;
+          });
+      } else {
+        var objs = {};
+        for (let k in data) {
+          objs[k] = {
+            fieldKey: k,
+            value: data[k],
+            fieldName: (function () {
+              for (let i = 0; i < self.listData.length; i++) {
+                if (self.listData[i].fieldKey == k) {
+                  return self.listData[i].fieldName;
+                }
+              }
+            })(),
+            status: 0,
+          };
+        }
+        var datas = {
+          goodsId: this.goodsId,
+          profileTpId: this.goodsId,
+          orderGoodsId: this.orderGoodsId,
+          keyValue: JSON.stringify(objs),
+        };
+        this.$request
+          .addbaseprofiletp(datas)
+          .then((res) => {
+            this.uploading = false;
+            this.courseCourseList();
+            this.$message.success("提交成功");
+            this.showInfoDetailModal = false;
+          })
+          .catch((err) => {
+            this.$message.warning(err.msg);
+            this.uploading = false;
+          });
+      }
+    },
+
+    subCanvas() {
+      return new Promise((resolve, reject) => {
+        var self = this;
+        if (self.infoForm.commitment_electr_signature) {
+          resolve();
+          return;
+        }
+        this.$refs.esign[0]
+          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+          .then(async (res) => {
+            let url = await this.$upload.upload(
+              this.convertBase64UrlToBlob(res),
+              0
+            );
+            this.$set(this.infoForm, "commitment_electr_signature", url);
+            resolve();
+          })
+          .catch((err) => {
+            console.log(err, "err");
+            // 画布没有签字时会执行这里提示一下
+            // this.uploading = false;
+            // this.$message({
+            //   type: "warning",
+            //   message: "请签名后再生成签字图片",
+            // });
+            resolve();
+          });
+      });
+    },
+
+    imageInfos() {
+      var self = this;
+      return new Promise(async (resolve, reject) => {
+        const waitUpload = await self.uploadFile(self.faceUrl, 0);
+        resolve(waitUpload);
+      });
+    },
+
+    getarrays(key) {
+      if (key === "sex") {
+        return this.dictObj["sys_user_sex"];
+      }
+      if (key === "education") {
+        return this.dictObj["edu_level"];
+      }
+      if (key === "working_years") {
+        return this.dictObj["working_years"];
+      }
+    },
+
+    dictList() {
+      this.$request.dictList().then((res) => {
+        if (res.code === 200) {
+          let newList = {};
+          let list = res.data;
+          for (let i = 0; i < list.length; i++) {
+            let item = list[i];
+            if (newList.hasOwnProperty(item.dictType)) {
+              newList[item.dictType].push(item.dictLabel);
+            } else {
+              newList[item.dictType] = [item.dictLabel];
+            }
+          }
+          this.dictObj = newList;
+        }
+      });
+    },
+
+    getbaseprofiletplists() {
+      return new Promise((resolve) => {
+        let self = this;
+        this.$request
+          .getbaseprofiletplists({
+            goodsId: this.goodsId,
+            orderGoodsId: this.orderGoodsId || "",
+          })
+          .then((res) => {
+            if (res.code === 200 && res.rows.length) {
+              console.log(1);
+              if (res.rows[0].keyValue) {
+                console.log(2);
+                self.$request
+                  .getbaseprofiletpId(self.goodsId)
+                  .then((baseRes) => {
+                    if (baseRes.code === 200) {
+                      console.log(3);
+                      if (baseRes.data) {
+                        console.log(4);
+                        self.$request
+                          .getbaseprofiletpgetInfo({
+                            goodsId: self.goodsId,
+                            orderGoodsId: self.orderGoodsId,
+                          })
+                          .then((result) => {
+                            console.log(result, "result");
+                            if (result.code === 200) {
+                              if (
+                                !result.data ||
+                                (result.data.status === 3 &&
+                                  result.data.changeStatus === 1)
+                              ) {
+                                console.log(5);
+                                if (!result.data) {
+                                  console.log(6);
+                                  self.needProfileModal = true;
+
+                                  this.$confirm(`请填写资料`, "提示", {
+                                    confirmButtonText: "确定",
+                                    cancelButtonText: "返回",
+                                    closeOnClickModal: false,
+                                    closeOnPressEscape: false,
+                                    distinguishCancelAndClose: false,
+                                    showClose: false,
+                                  })
+                                    .then((_) => {
+                                      this.showInfoDetailModal = true;
+                                      this.getInfo();
+                                    })
+                                    .catch((_) => {
+                                      this.$router.back(-1);
+                                    });
+                                } else {
+                                  this.$confirm(
+                                    `资料审核不通过,请前往重新填写`,
+                                    "提示",
+                                    {
+                                      confirmButtonText: "确定",
+                                      cancelButtonText: "返回",
+                                      closeOnClickModal: false,
+                                      closeOnPressEscape: false,
+                                      distinguishCancelAndClose: false,
+                                      showClose: false,
+                                    }
+                                  )
+                                    .then((_) => {
+                                      this.showInfoDetailModal = true;
+                                      this.getInfo();
+                                    })
+                                    .catch((_) => {
+                                      this.$router.back(-1);
+                                    });
+                                }
+                              } else if (
+                                result.data.status === 1 &&
+                                JSON.parse(res.rows[0].keyValue2)[0]
+                              ) {
+                                console.log(8);
+                                self.$request
+                                  .getbaseprofileStampgetInfo({
+                                    goodsId: self.goodsId,
+                                    orderGoodsId: self.orderGoodsId,
+                                  })
+                                  .then((k) => {
+                                    if (k.code === 200) {
+                                      if (
+                                        !k.data ||
+                                        (k.data.status === 3 &&
+                                          k.data.changeStatus === 1)
+                                      ) {
+                                        if (!k.data) {
+                                          console.log(9);
+                                          this.$confirm(
+                                            `请前往填写盖章资料`,
+                                            "提示",
+                                            {
+                                              confirmButtonText: "确定",
+                                              cancelButtonText: "返回",
+                                              closeOnClickModal: false,
+                                              closeOnPressEscape: false,
+                                              distinguishCancelAndClose: false,
+                                              showClose: false,
+                                            }
+                                          )
+                                            .then((_) => {
+                                              this.showStampDetailModail = true;
+                                              this.getInfoStamp();
+                                            })
+                                            .catch((_) => {
+                                              this.$router.back(-1);
+                                            });
+                                        } else {
+                                          console.log(10);
+                                          self.needProfileModal = true;
+                                          this.$confirm(
+                                            `资料盖章审核不通过,请前往重新填写`,
+                                            "提示",
+                                            {
+                                              confirmButtonText: "确定",
+                                              cancelButtonText: "返回",
+                                              closeOnClickModal: false,
+                                              closeOnPressEscape: false,
+                                              distinguishCancelAndClose: false,
+                                              showClose: false,
+                                            }
+                                          )
+                                            .then((_) => {
+                                              this.showStampDetailModail = true;
+                                              this.getInfoStamp();
+                                            })
+                                            .catch((_) => {
+                                              this.$router.back(-1);
+                                            });
+                                        }
+                                      } else {
+                                        resolve();
+                                      }
+                                    }
+                                  });
+                              } else {
+                                resolve();
+                              }
+                            }
+                          });
+                      } else {
+                        resolve();
+                      }
+                    }
+                  });
+              } else {
+                resolve();
+              }
+            } else {
+              resolve();
+            }
+          });
+        if (this.gradeId > 0) {
+          //提交完资料返回判断是否已开班
+
+          this.getGradeInfo();
+        }
+      });
+    },
+
+    getInfoStamp() {
+      var self = this;
+      this.$request.getbaseprofiletpId(this.goodsId).then((res) => {
+        var ast = JSON.parse(res.data.keyValue2);
+        self.listDataStamp = ast;
+        self.$request
+          .getbaseprofileStampgetInfo({
+            goodsId: self.goodsId,
+            orderGoodsId: self.orderGoodsId,
+          })
+          .then((result) => {
+            if (result.data && result.data.status === 3) {
+              self.remarkStamp = result.data.text;
+              self.remarkStatusStamp = true;
+              self.id = result.data.id;
+            } else if (
+              result.data &&
+              (result.data.status === 1 || result.data.status === 2)
+            ) {
+              // uni.showModal({
+              //   showCancel: false,
+              //   content:
+              //     result.data.status === 1
+              //       ? "该商品审核资料已通过,不可重复提交资料"
+              //       : result.data.status === 2
+              //       ? "该商品审核资料处于待审核状态,不可重复提交资料"
+              //       : "请联系管理员",
+              //   success: function (k) {
+              //     if (k.confirm) {
+              //       uni.navigateBack();
+              //     }
+              //   },
+              // });
+            }
+          })
+          .catch((err) => {});
+      });
+    },
+
+    getGradeInfo() {
+      let self = this;
+      this.$request.goodsGradeInfo(this.gradeId).then((res) => {
+        if (res.code == 200) {
+          self.gradeDetail = res.data;
+          if (self.needProfileModal) {
+            return;
+          }
+          if (self.gradeDetail.learningStatus == 2) {
+            this.$confirm(
+              `当前课程正在申请中,正式开班后方可进行学习,请耐心等候!`,
+              "提示",
+              {
+                confirmButtonText: "确定",
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                showCancelButton: false,
+                distinguishCancelAndClose: false,
+                showClose: false,
+              }
+            )
+              .then((_) => {
+                this.$router.back(-1);
+              })
+              .catch((_) => {});
+          }
+          if (
+            self.gradeDetail.learningStatus == 3 &&
+            Number(self.gradeDetail.learningTimeStart) >
+              Number(new Date() / 1000)
+          ) {
+            this.$confirm(
+              `当前课程正在申请中,正式开班后方可进行学习,请耐心等候!`,
+              "提示",
+              {
+                confirmButtonText: "返回",
+                closeOnClickModal: false,
+                closeOnPressEscape: false,
+                showCancelButton: false,
+                distinguishCancelAndClose: false,
+                showClose: false,
+              }
+            )
+              .then((_) => {
+                this.$router.back(-1);
+              })
+              .catch((_) => {});
+          }
+        }
+      });
+      this.$store.state.allowLoading = true;
+    },
+
+    deleteImg(item) {
+      if (item.fieldKey == "recent_photos") {
+        this.fileList1 = [];
+        this.infoForm["recent_photos"] = "";
+      } else if (item.fieldKey == "idcard_face_photo") {
+        this.fileList2 = [];
+        this.infoForm["idcard_face_photo"] = "";
+      } else if (item.fieldKey == "idcard_national_photo") {
+        this.fileList3 = [];
+        this.infoForm["idcard_national_photo"] = "";
+      }
+    },
+
+    /**
+     *  getbaseprofiletpgetInfo接口返回值result.data.data不存在的话说明是第一次填写资料
+     */
+    getInfo() {
+      var self = this;
+      this.$request.getbaseprofiletpId(this.goodsId).then((res) => {
+        console.log(res, "res");
+        var listData = JSON.parse(res.data.keyValue);
+        var ast = JSON.parse(res.data.keyValue2);
+        self.listData = [...listData, ...ast];
+
+        console.log(self.listData, "self.listData");
+
+        self.listData.forEach((item) => {
+          if (item.fieldKey == "idcard") {
+            this.infoForm.idcard = this.userInfo.idCard;
+          }
+          if (item.fieldKey == "telphone") {
+            this.infoForm.telphone = this.userInfo.telphone;
+          }
+
+          if (item.fieldKey == "name") {
+            this.infoForm.name = this.userInfo.realname || "";
+          }
+        });
+        self.isRequired = self.listData.every((ims) => {
+          return ims.required === false;
+        });
+        this.$nextTick(() => {
+          this.agreementModal = true;
+        });
+        self.$request
+          .getbaseprofiletpgetInfo({
+            goodsId: this.goodsId,
+            orderGoodsId: this.orderGoodsId,
+          })
+          .then((result) => {
+            if (result.code === 200) {
+              if (!result.data) {
+                self.$request
+                  .getbaseprofiletplistProfile({
+                    pageNum: 1,
+                    pageSize: 1,
+                    status: 1,
+                  })
+                  .then((kit) => {
+                    if (kit.rows.length) {
+                      var ajson = JSON.parse(kit.rows[0].keyValue);
+                      self.listData.forEach((zyitem, zyindex) => {
+                        for (let k in ajson) {
+                          if (zyitem.fieldKey == k && ajson[k].value) {
+                            if (k === "sex") {
+                              const sexIndex =
+                                self.dictObj["sys_user_sex"].indexOf(
+                                  ajson[k].value
+                                ) + "";
+                              self.$set(self.infoForm, k, sexIndex);
+                            } else if (k === "education") {
+                              const sexIndex =
+                                self.dictObj["edu_level"].indexOf(
+                                  ajson[k].value
+                                ) + "";
+                              self.$set(self.infoForm, k, sexIndex);
+                            } else if (k === "working_years") {
+                              const sexIndex =
+                                self.dictObj["working_years"].indexOf(
+                                  ajson[k].value
+                                ) + "";
+                              self.$set(self.infoForm, k, sexIndex);
+                            } else if (k === "recent_photos") {
+                              self.$set(self.infoForm, k, ajson[k].value);
+                              if (ajson[k].value) {
+                                self.fileList1 = [
+                                  {
+                                    url: ajson[k].value,
+                                  },
+                                ];
+                              }
+                            } else if (k === "idcard_face_photo") {
+                              self.$set(self.infoForm, k, ajson[k].value);
+                              if (ajson[k].value) {
+                                self.fileList2 = [
+                                  {
+                                    url: ajson[k].value,
+                                  },
+                                ];
+                              }
+                            } else if (k === "idcard_national_photo") {
+                              self.$set(self.infoForm, k, ajson[k].value);
+                              if (ajson[k].value) {
+                                self.fileList3 = [
+                                  {
+                                    url: ajson[k].value,
+                                  },
+                                ];
+                              }
+                            } else {
+                              if (k === "name") {
+                                self.$set(
+                                  self.infoForm,
+                                  k,
+                                  this.$store.state.userInfo.realname
+                                );
+                              } else if (k === "idcard") {
+                                self.$set(
+                                  self.infoForm,
+                                  k,
+                                  this.$store.state.userInfo.idCard
+                                );
+                              } else if (k === "telphone") {
+                                self.$set(
+                                  self.infoForm,
+                                  k,
+                                  this.$store.state.userInfo.telphone
+                                );
+                              } else if (k !== "commitment_electr_signature") {
+                                self.$set(self.infoForm, k, ajson[k].value);
+                              }
+                            }
+                          }
+                        }
+                      });
+                    }
+                  });
+              }
+              if (result.data && result.data.status === 3) {
+                self.remark = result.data.text;
+                self.remarkStatus = true;
+                self.id = result.data.id;
+                var arrays = JSON.parse(result.data.keyValue);
+                self.copyData = JSON.parse(JSON.stringify(arrays));
+                for (let k in arrays) {
+                  if (k === "sex") {
+                    if (arrays[k].value) {
+                      const sexIndex =
+                        self.dictObj["sys_user_sex"].indexOf(arrays[k].value) +
+                        "";
+                      self.$set(self.infoForm, k, sexIndex);
+                    }
+                  } else if (k === "education") {
+                    if (arrays[k].value) {
+                      const sexIndex =
+                        self.dictObj["edu_level"].indexOf(arrays[k].value) + "";
+                      self.$set(self.infoForm, k, sexIndex);
+                    }
+                  } else if (k === "working_years") {
+                    if (arrays[k].value) {
+                      const sexIndex =
+                        self.dictObj["working_years"].indexOf(arrays[k].value) +
+                        "";
+                      self.$set(self.infoForm, k, sexIndex);
+                    }
+                  } else if (k === "recent_photos") {
+                    self.$set(self.infoForm, k, arrays[k].value);
+                    if (arrays[k].value) {
+                      self.fileList1 = [{ url: arrays[k].value }];
+                    }
+                  } else if (k === "idcard_face_photo") {
+                    self.$set(self.infoForm, k, arrays[k].value);
+                    if (arrays[k].value) {
+                      self.fileList2 = [{ url: arrays[k].value }];
+                    }
+                  } else if (k === "idcard_national_photo") {
+                    self.$set(self.infoForm, k, arrays[k].value);
+                    if (arrays[k].value) {
+                      self.fileList3 = [{ url: arrays[k].value }];
+                    }
+                  } else {
+                    self.$set(self.infoForm, k, arrays[k].value);
+                  }
+                }
+              } else if (
+                result.data &&
+                (result.data.status === 1 || result.data.status === 2)
+              ) {
+                this.$confirm(
+                  result.data.status === 1
+                    ? "该商品审核资料已通过,不可重复提交资料"
+                    : result.data.status === 2
+                    ? "该商品审核资料处于待审核状态,不可重复提交资料"
+                    : "请联系管理员",
+                  "提示",
+                  {
+                    confirmButtonText: "返回",
+                    closeOnClickModal: false,
+                    closeOnPressEscape: false,
+                    showCancelButton: false,
+                    distinguishCancelAndClose: false,
+                    showClose: false,
+                  }
+                )
+                  .then((_) => {
+                    this.$router.back(-1);
+                  })
+                  .catch((_) => {});
+              }
+            }
+          });
+      });
+    },
+    returnName(key) {
+      if (key === "sex") {
+        if (this.infoForm[key]) {
+          return this.dictObj["sys_user_sex"][Number(this.infoForm[key])];
+        } else {
+          return "请选择性别";
+        }
+      }
+      if (key === "education") {
+        if (this.infoForm[key]) {
+          return this.dictObj["edu_level"][Number(this.infoForm[key])];
+        } else {
+          return "请选择学历";
+        }
+      }
+      if (key === "working_years") {
+        if (this.infoForm[key]) {
+          return this.dictObj["working_years"][Number(this.infoForm[key])];
+        } else {
+          return "请选择工作年限";
+        }
+      }
+    },
+    retDraw() {
+      this.$set(this.infoForm, "commitment_electr_signature", "");
+      this.$nextTick(() => {
+        this.$refs.esign[0].reset();
+      });
+    },
+    uploadFile(options, int) {
+      var self = this;
+      return new Promise((resolve, reject) => {
+        var data = {
+          imageStatus: int,
+          gradeId: this.gradeId,
+          orderGoodsId: this.orderGoodsId,
+        };
+        self.$request
+          .getPolicy(data)
+          .then((res) => {
+            var ossToken = res.data.resultContent;
+            if (ossToken.host == null || ossToken.host == undefined) {
+              this.$message({
+                type: "warning",
+                message: "上传路径报错" + JSON.stringify(res.data),
+              });
+              return;
+            }
+
+            let data = this.$tools.convertBase64UrlToBlob(this.faceUrl);
+
+            this.$upload
+              .upload(data, 0)
+              .then((res) => {
+                this.ossAvatarUrl = res;
+                resolve(res);
+              })
+              .catch((err) => {
+                this.$message({
+                  type: "warning",
+                  message: "上传接口报错,请重新拍照上传",
+                });
+                this.reTake();
+              });
+          })
+          .catch((err) => {
+            this.$message({
+              type: "warning",
+              message: "签名错误" + JSON.stringify(err),
+            });
+            return;
+          });
+      });
+    },
+
+    faceRecognition() {
+      return new Promise((resolve) => {
+        this.$request
+          .faceCertificationCompareFace({
+            imageA: this.faceUrl,
+            orderGoodsId: this.orderGoodsId,
+            gradeId: this.gradeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          })
+          .catch((err) => {
+            this.loading = false;
+            this.$message({
+              type: "warning",
+              message: err.msg,
+            });
+          });
+      });
+    },
+    /**
+     * 点击重拍
+     */
+    reTake() {
+      this.faceUrl = "";
+      this.isTaking = true;
+      this.getUserMedia({
+        video: {
+          width: 400,
+          height: 300,
+        },
+      });
+    },
+    // 点击拍照按钮
+    onPhoto() {
+      // if (this.isIE) {
+      //   window.webcam.capture();
+      // } else {
+      const canvas = document.createElement("canvas");
+      canvas.width = 400;
+      canvas.height = 300;
+      const context = canvas.getContext("2d");
+      const video = document.getElementById("video");
+      context.drawImage(video, 0, 0, 400, 300);
+      this.faceUrl = canvas.toDataURL("image/png");
+      this.isTaking = false;
+      // }
+    },
+    getUserMedia(constraints, success, error) {
+      if (window.navigator.mediaDevices.getUserMedia) {
+        // 最新的标准API
+        window.navigator.mediaDevices
+          .getUserMedia(constraints)
+          .then(success)
+          .catch(error);
+      } else if (window.navigator.webkitGetUserMedia) {
+        // webkit核心浏览器
+        window.navigator.webkitGetUserMedia(constraints, success, error);
+      } else if (window.navigator.mozGetUserMedia) {
+        // firfox浏览器
+        window.navigator.mozGetUserMedia(constraints, success, error);
+      } else if (window.navigator.getUserMedia) {
+        // 旧版API
+        window.navigator.getUserMedia(constraints, success, error);
+      }
+    },
+
+    photographSuccess(stream) {
+      // 兼容webkit核心浏览器
+
+      this.isTaking = true;
+      this.takePhotoModal = true;
+
+      this.$nextTick(() => {
+        const video = document.getElementById("video");
+        // 将视频流设置为video元素的源
+        console.dir(video);
+        video.srcObject = stream;
+        this.mediaStreamTrack =
+          typeof stream.stop === "function" ? stream : stream.getTracks()[0];
+        video.play();
+      });
+    },
+    photographError(err) {
+      this.$confirm(
+        "课程学习需要开启摄像头进行拍照,经检测您的设备无摄像头可使用,请检测环境是否支持。",
+        "提示",
+        {
+          showConfirmButton: false,
+          closeOnClickModal: false,
+          showCancelButton: false,
+          closeOnPressEscape: false,
+          distinguishCancelAndClose: false,
+          showClose: false,
+        }
+      );
+    },
+    /**
+     * 切换科目
+     */
+    courseChange() {
+      this.noteParams = {
+        pageNum: 1,
+        // pageSize: 4,
+      };
+      this.duration = 0;
+      this.playSectionId = 0;
+      this.vid = "";
+      if (this.player) {
+        this.player.destroy();
+      }
+      this.player = "";
+      if (this.playerzb) {
+        this.playerzb.destroy();
+      }
+      this.playerzb = "";
+      this.vidzb = "";
+      this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
+      this.courseDetail(); //课程详情
+      this.getGoodsDetail(); //商品详情
+      this.getAnswerList(); //答疑列表
+      this.answerTimer = setInterval(() => {
+        this.getAnswerList();
+      }, 5000);
+      this.getMenuList(); //学习目录
+      this.getReMenuList(); //获取重修目录
+      this.getNoteList(); //获取节笔记
+    },
+    courseDetail() {
+      let self = this;
+      this.$request.courseDetail(this.courseId).then((res) => {
+        // if (res.data.educationName == "继续教育") {
+        //   this.$request
+        //     .lockLockAction({
+        //       action: "jxjy",
+        //     })
+        //     .then((res) => {});
+        //   this.lockTimer = setInterval(() => {
+        //     this.$request
+        //       .lockLockAction({
+        //         action: "jxjy",
+        //       })
+        //       .then((res) => {});
+        //   }, 10000);
+        // }
+        self.detail = res.data;
+      });
+    },
+    openModule(menuItem) {
+      //重修目录点击
+      console.log(menuItem.list);
+      menuItem.showList = !menuItem.showList;
+
+      if (!menuItem.list.length) {
+        if (menuItem.isRebuild) {
+          this.getReChapterList(menuItem.id, menuItem.courseId, menuItem);
+        } else {
+          this.getBuyChapterList(menuItem.id, menuItem.courseId, menuItem);
+        }
+      }
+    },
+    getReChapterList(moduleId, courseId, menuItem) {
+      this.$request
+        .reChapterList({
+          moduleId: moduleId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+          rebuild: 1,
+        })
+        .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 = menuItem;
+            item.isRebuild = 1;
+          }
+          menuItem.list = res.data;
+        });
+    },
+
+    getBuyChapterList(moduleId, courseId, menuItem) {
+      this.$request
+        .reChapterList({
+          moduleId: moduleId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+        })
+        .then((res) => {
+          for (let i = 0; i < res.data.length; i++) {
+            let item = res.data[i];
+            item.id = item.chapterId;
+            item.menuType = 2;
+            item.showList = false;
+            item.list = [];
+            item.parent = menuItem;
+          }
+          menuItem.list = res.data;
+
+          if (this.needOpen) {
+            // this.needOpen = false;
+            this.openChapter(menuItem.list[0]);
+          }
+        });
+    },
+    openChapter(chapter) {
+      console.log(chapter, "chapter");
+      chapter.showList = !chapter.showList;
+      if (!chapter.list.length) {
+        if (chapter.isRebuild) {
+          this.getReSectionList(
+            chapter.id,
+            chapter.courseId,
+            chapter.moduleId || 0,
+            chapter
+          );
+        } else {
+          this.getBuySectionList(
+            chapter.id,
+            chapter.courseId,
+            chapter.moduleId || 0,
+            chapter
+          );
+        }
+      }
+    },
+    getReSectionList(chapterId, courseId, moduleId, chapter) {
+      this.$request
+        .reSectionList({
+          chapterId: chapterId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+          rebuild: 1,
+          moduleId: moduleId,
+        })
+        .then((res) => {
+          let newArr = res.data.filter((item) => {
+            return item.type != 2;
+          });
+          chapter.canLearn = newArr.every((item) => {
+            if (item.learning == 1) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          res.data.forEach((section) => {
+            section.parent = chapter;
+          });
+          chapter.list = res.data;
+        });
+    },
+
+    getBuySectionList(chapterId, courseId, moduleId = 0, chapter) {
+      this.$request
+        .reSectionList({
+          chapterId: chapterId,
+          gradeId: this.gradeId,
+          courseId: courseId,
+          moduleId: moduleId,
+        })
+        .then((res) => {
+          let newArr = res.data.filter((item) => {
+            return item.type != 2;
+          });
+          chapter.canLearn = newArr.every((item) => {
+            if (item.learning == 1) {
+              return true;
+            } else {
+              return false;
+            }
+          });
+
+          res.data.forEach((section) => {
+            section.parent = chapter;
+          });
+          chapter.list = res.data;
+
+          if (this.needOpen) {
+            this.needOpen = false;
+            if (chapter.list && !this.sectionItem.recordingUrl) {
+              this.getResource(chapter.list[0]);
+            }
+          }
+        });
+    },
+    getGoodsDetail() {
+      let self = this;
+      this.$request.goodsDetail(this.goodsId).then((res) => {
+        self.goodsData = res.data;
+        self.gradeId = self.goodsData.gradeId;
+        if (this.goodsData.buyNote) {
+          this.tabList = [
+            { name: "1", label: "学员须知" },
+            { name: "2", label: "课程答疑" },
+            { name: "3", label: "笔记讲义" },
+          ];
+          console.log(res, "res111");
+          this.getRecommend();
+        } else {
+          this.tabList = [
+            { name: "1", label: "课程答疑" },
+            { name: "2", label: "笔记讲义" },
+          ];
+        }
+        this.courseBusiness();
+        this.courseHandouts();
+        if (self.goodsData.goodsPlayConfig) {
+          self.goodsPlayConfig = JSON.parse(self.goodsData.goodsPlayConfig);
+          if (self.goodsPlayConfig.autoPlay > 0) {
+            self.autoplay = true;
+          }
+          if (self.goodsPlayConfig.drag > 0) {
+            self.isAllowSeek = "off";
+          }
+          if (self.goodsPlayConfig.speed > 0) {
+            self.playbackRate = true;
+          }
+        }
+        if (self.goodsData.goodsPhotographConfig) {
+          self.goodsPhotographConfig = JSON.parse(
+            self.goodsData.goodsPhotographConfig
+          );
+          if (self.goodsPhotographConfig.photoNum > 0) {
+            self.photoNum = self.goodsPhotographConfig.photoNum;
+          }
+        }
+      });
+    },
+    /**
+     * 点击节
+     */
+    async getResource(section) {
+      //逻辑
+
+      if (section.type == 2) {
+        //试卷
+        console.log("试卷");
+        console.log(section);
+        let learnNum = await this.goodsTodayStudySectionNum();
+        let hasLearn = await this.gradeCheckGoodsStudy(section.typeId);
+
+        if (this.goodsData.sectionMaxNum > 0) {
+          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+            this.$message({
+              type: "warning",
+              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+            });
+            return;
+          }
+        }
+
+        if (this.businessData.goodsLearningOrder == 1) {
+          if (section.parent.canLearn) {
+            let num = await this.bankRecordDoNum(section);
+            //有次数限制
+            if (section.answerNum - num > 0 && section.answerNum > 0) {
+              // this.$set(this.list[index],'doNum',(item.doNum+1))
+              this.$router.push({
+                path: "/course-exam/" + this.goodsId,
+                query: {
+                  courseId: this.courseId,
+                  gradeId: this.gradeId,
+                  moduleId: section.moduleId || 0,
+                  examId: section.typeId,
+                  chapterId: section.chapterId || 0,
+                  orderGoodsId: this.orderGoodsId,
+                },
+              });
+
+              //没有答题次数限制
+            } else if (section.answerNum == 0) {
+              this.$router.push({
+                path: "/course-exam/" + this.goodsId,
+                query: {
+                  courseId: this.courseId,
+                  gradeId: this.gradeId,
+                  moduleId: section.moduleId || 0,
+                  examId: section.typeId,
+                  chapterId: section.chapterId || 0,
+                  orderGoodsId: this.orderGoodsId,
+                },
+              });
+            } else {
+              this.$message({
+                type: "warning",
+                message: "该试卷只能答题" + section.answerNum + "次",
+              });
+
+              return;
+            }
+          } else {
+            this.$message({
+              type: "warning",
+              message: "请按顺序学完视频课程再进行练习和测试",
+            });
+          }
+        } else if (
+          this.businessData.goodsLearningOrder == 2 &&
+          !section.rebuild
+        ) {
+          let rows = await this.studyRecordMenuAllList();
+          let isStop = false;
+          let newRows = [];
+          for (let i = 0; i < rows.length; i++) {
+            let moduleTrue = rows[i].moduleId == section.moduleId;
+            let chapterTrue = rows[i].chapterId == section.chapterId;
+            if (moduleTrue && chapterTrue) {
+              isStop = true;
+              if (rows[i].sectionType != 2) {
+                //忽略直播
+                newRows.push(rows[i]);
+              }
+            } else {
+              if (!isStop) {
+                if (rows[i].sectionType != 2) {
+                  //忽略直播
+                  newRows.push(rows[i]);
+                }
+              } else {
+                break;
+              }
+            }
+          }
+          console.log(newRows);
+          let isAllLearn = newRows.every((item) => {
+            return item.studyStatus == 1;
+          });
+
+          if (isAllLearn) {
+            //之前的都学完了
+
+            // if(canLearn) { //视频的上一节学完
+
+            let num = await this.bankRecordDoNum(section.typeId);
+            //有次数限制
+            if (section.answerNum - num > 0 && section.answerNum > 0) {
+              console.log(this.list[index]);
+              this.$router.push({
+                path: "/course-exam/" + this.goodsId,
+                query: {
+                  courseId: this.courseId,
+                  gradeId: this.gradeId,
+                  moduleId: section.moduleId || 0,
+                  examId: section.typeId,
+                  chapterId: section.chapterId || 0,
+                  orderGoodsId: this.orderGoodsId,
+                },
+              });
+              //没有答题次数限制
+            } else if (section.answerNum == 0) {
+              this.$router.push({
+                path: "/course-exam/" + this.goodsId,
+                query: {
+                  courseId: this.courseId,
+                  gradeId: this.gradeId,
+                  moduleId: section.moduleId || 0,
+                  examId: section.typeId,
+                  chapterId: section.chapterId || 0,
+                  orderGoodsId: this.orderGoodsId,
+                },
+              });
+            } else {
+              this.$message({
+                type: "warning",
+                message: "该试卷只能答题" + section.answerNum + "次",
+              });
+
+              return;
+            }
+          } else {
+            this.$message({
+              type: "warning",
+              message: "请学完视频课程再进行练习和测试",
+            });
+          }
+        } else {
+          let num = await this.bankRecordDoNum(section.typeId);
+          //有次数限制
+          if (section.answerNum - section.doNum > 0 && section.answerNum > 0) {
+            // this.$set(this.list[index],'doNum',(item.doNum+1))
+            this.$router.push({
+              path: "/course-exam/" + this.goodsId,
+              query: {
+                courseId: this.courseId,
+                gradeId: this.gradeId,
+                moduleId: section.moduleId || 0,
+                examId: section.typeId,
+                chapterId: section.chapterId || 0,
+                orderGoodsId: this.orderGoodsId,
+              },
+            });
+
+            //没有答题次数限制
+          } else if (section.answerNum == 0) {
+            this.$router.push({
+              path: "/course-exam/" + this.goodsId,
+              query: {
+                courseId: this.courseId,
+                gradeId: this.gradeId,
+                moduleId: section.moduleId || 0,
+                examId: section.typeId,
+                chapterId: section.chapterId || 0,
+                orderGoodsId: this.orderGoodsId,
+              },
+            });
+          } else {
+            this.$message({
+              type: "warning",
+              message: "该试卷只能答题" + section.answerNum + "次",
+            });
+
+            return;
+          }
+        }
+        return;
+      }
+
+      if (section.type != 2) {
+        if (this.clickLock) {
+          return;
+        }
+        this.clickLock = true;
+        if (
+          this.playSectionId &&
+          (this.playSectionId == section.sectionId ||
+            this.playSectionId == section.menuId) &&
+          this.moduleId == (section.moduleId || 0) &&
+          this.chapterId == (section.chapterId || 0)
+        ) {
+          //切换为同一频道不作为
+          this.clickLock = false;
+          return;
+        }
+
+        if (this.businessData.goodsLearningOrder == 2 && !section.isRebuild) {
+          //要按从头到尾顺序学习, 且不是重修课程
+
+          let rows = await this.studyRecordMenuAllList();
+          if (!this.hasPreItem(rows, section)) {
+            //判断是否有上一节
+            let newRows = [];
+            for (let i = 0; i < rows.length; i++) {
+              let moduleTrue =
+                rows[i].moduleId == section.moduleId || rows[i].moduleId == 0;
+              let chapterTrue =
+                rows[i].chapterId == section.chapterId ||
+                rows[i].chapterId == 0;
+              let sectionTrue =
+                rows[i].sectionId == section.sectionId ||
+                rows[i].sectionId == section.menuId;
+              if (moduleTrue && chapterTrue && sectionTrue) {
+                break;
+              } else {
+                if (rows[i].sectionType != 2) {
+                  newRows.push(rows[i]);
+                }
+              }
+            }
+
+            let isAllLearn = newRows.every((item) => {
+              return item.studyStatus == 1;
+            });
+
+            if (isAllLearn) {
+              this.initVideo(section);
+            } else {
+              this.clickLock = false;
+              this.$message({
+                type: "warning",
+                message: "请按顺序学习视频课程",
+              });
+            }
+          } else {
+            //第一章第一节
+            this.initVideo(section);
+          }
+        } else {
+          this.initVideo(section);
+        }
+      }
+    },
+
+    bankRecordDoNum(section) {
+      return new Promise((resolve) => {
+        this.$request
+          .bankRecordDoNum({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+            chapterId: section.chapterId,
+            courseId: this.courseId,
+            moduleId: 0,
+            examId: section.typeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    /**
+     * 是否有上一章节
+     */
+    hasPreItem(rows, option) {
+      let moduleId = option.moduleId;
+      let chapterId = option.chapterId;
+      let sectionId = option.sectionId;
+      let index = 0;
+
+      for (let i = 0; i < rows.length; i++) {
+        if (
+          rows[i].moduleId == moduleId &&
+          rows[i].chapterId == chapterId &&
+          rows[i].sectionId == sectionId
+        ) {
+          index = i;
+          break;
+        }
+      }
+
+      if (index == 0) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    async initVideo(option) {
+      if (option.sectionType == 1 || option.sectionType == 3) {
+        //录播
+
+        let learnNum = await this.goodsTodayStudySectionNum(option);
+        let hasLearn = await this.gradeCheckGoodsStudy(option);
+        console.log(hasLearn, "hasLearn");
+        console.log(learnNum, "learnNum");
+        console.log(
+          this.goodsData.sectionMaxNum,
+          "this.goodsData.sectionMaxNum"
+        );
+        if (this.goodsData.sectionMaxNum > 0) {
+          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+            this.clickLock = false;
+            this.$message({
+              type: "warning",
+              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+            });
+            return;
+          }
+        }
+        if (!option.recordingUrl) {
+          this.clickLock = false;
+          this.$message({
+            type: "warning",
+            message: `暂无播放地址数据`,
+          });
+          return;
+        }
+
+        if (this.playSectionId > 0) {
+          //切换视频
+          // let oldSectionId = this.playSectionId;
+          // uni.$emit("changeSection", oldSectionId);
+        }
+
+        this.playVideo(option);
+      }
+      if (option.sectionType == 2) {
+        //直播
+
+        let learnNum = await this.goodsTodayStudySectionNum(option);
+        let hasLearn = await this.gradeCheckGoodsStudy(option);
+
+        if (this.goodsData.sectionMaxNum > 0) {
+          if (learnNum >= this.goodsData.sectionMaxNum && !hasLearn) {
+            this.clickLock = false;
+            this.$message({
+              type: "warning",
+              message: `每天最多学习${this.goodsData.sectionMaxNum}节`,
+            });
+            return;
+          }
+        }
+        if (!option.liveUrl) {
+          this.clickLock = false;
+          this.$message({
+            type: "warning",
+            message: `暂无直播地址数据`,
+          });
+        }
+
+        this.playVideo(option);
+      }
+
+      return;
+    },
+    /**
+     * 判断是否是当前播放的节
+     */
+    isActive(section) {
+      let moduleId = section.moduleId || 0;
+      let chapterId = section.chapterId || 0;
+      let sectionId = section.sectionId || section.menuId;
+      if (
+        moduleId == this.moduleId &&
+        chapterId == this.chapterId &&
+        sectionId == this.playSectionId
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
+    async playVideo(option) {
+      if (option.sectionType == 1 || option.sectionType == 3) {
+        //录播
+
+        //设置播放的节ID
+
+        //提交保存观看历史
+        if (this.playSectionId) {
+          this.postStudyRecord(0, this.playSectionId);
+        }
+
+        this.player &&
+          this.player.HTML5.video.removeEventListener(
+            "timeupdate",
+            this.timeEvent
+          );
+        //播放视频
+        this.showRecordStatus = false; //隐藏播放记录提示
+        this.sectionItem = option;
+        console.log(option, "option");
+        this.isPlayRebuild = option.rebuild;
+        this.moduleId = option.moduleId || 0;
+        this.chapterId = option.chapterId || 0;
+        this.playSectionId = option.sectionId || option.menuId;
+        // console.log(this.moduleId, this.chapterId, this.playSectionId);
+        await this.getPhotoLastRecord();
+        this.recordObj = await this.getRecordLast();
+        this.getNoteList();
+        await this.clears();
+
+        this.vid = option.recordingUrl;
+        this.loadPlayerScript(this.loadPlayer);
+        setTimeout(() => {
+          this.clickLock = false;
+        }, 3000);
+        // uni.$emit("levelId", this.levelId);
+        // uni.$emit("getSection", this.menuItem);
+        // uni.$emit("isRebuild", this.isRebuild);
+      }
+      if (option.sectionType == 2) {
+        //直播
+
+        //提交保存观看历史
+        if (this.playSectionId) {
+          this.postStudyRecord(0, this.playSectionId);
+        }
+
+        this.player &&
+          this.player.HTML5.video.removeEventListener(
+            "timeupdate",
+            this.timeEvent
+          );
+        //播放视频
+        this.showRecordStatus = false; //隐藏播放记录提示
+        this.sectionItem = option;
+        console.log(option, "option");
+        this.isPlayRebuild = option.rebuild;
+        this.moduleId = option.moduleId || 0;
+        this.chapterId = option.chapterId || 0;
+        this.playSectionId = option.sectionId || option.menuId;
+        // console.log(this.moduleId, this.chapterId, this.playSectionId);
+        await this.getPhotoLastRecord();
+        this.recordObj = await this.getRecordLast();
+        this.getNoteList();
+        //设置播放的节ID
+        await this.clears();
+        this.vidzb = option.liveUrl;
+        this.loadPlayerScriptzb(this.loadPlayerzb);
+        setTimeout(() => {
+          this.clickLock = false;
+        }, 3000);
+        // uni.$emit("levelId", this.levelId);
+        // uni.$emit("getChannel", this.menuItem);
+        // uni.$emit("isRebuild", this.isRebuild);
+        // console.log(this.menuItem, "menuItem");
+      }
+    },
+
+    gradeCheckGoodsStudy(option) {
+      return new Promise((resolve) => {
+        this.$request
+          .gradeCheckGoodsStudy({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+            moduleId: option.moduleId || 0,
+            chapterId: option.chapterId || 0,
+            sectionId: option.sectionId || option.menuId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    goodsTodayStudySectionNum(option) {
+      return new Promise((resolve) => {
+        this.$request
+          .goodsTodayStudySectionNum({
+            goodsId: this.goodsId,
+            gradeId: this.gradeId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+
+    studyRecordMenuAllList() {
+      return new Promise((resolve) => {
+        this.$request
+          .studyRecordMenuAllList({
+            courseId: this.courseId,
+            gradeId: this.gradeId,
+            goodsId: this.goodsId,
+          })
+          .then((res) => {
+            resolve(res.data);
+          });
+      });
+    },
+    loadPlayerzb() {
+      var self = this;
+      const polyvLivePlayer = window.polyvLivePlayer;
+      this.playerzb = polyvLivePlayer({
+        wrap: "#playerzb",
+        width: 810,
+        height: 455,
+        showLine: "off",
+        uid: this.uidzb,
+        vid: this.vidzb,
+      });
+
+      this.playerzb.on("s2j_onStartPlay", () => {
+        console.log("s2j_onStartPlay");
+        this.hasStart = true;
+        this.livingTimer = setInterval(self.timeEventLiving, 1000);
+      });
+
+      this.playerzb.on("s2j_onOver", () => {
+        console.log("s2j_onOver");
+        clearInterval(this.livingTimer);
+        this.hasStart = false;
+        this.$message({
+          type: "success",
+          message: "播放完毕",
+        });
+        this.postStudyRecord(1);
+      });
+    },
+    loadPlayer() {
+      var self = this;
+      const polyvPlayer = window.polyvPlayer;
+      console.log(polyvPlayer);
+      self.$request.obtainpolyvvideosign(self.vid).then((res) => {
+        console.log(res, "res2");
+        self.player = polyvPlayer({
+          wrap: "#player",
+          width: 810,
+          showLine: "off",
+          height: 455,
+          ban_history_time: "on",
+          vid: self.vid,
+          autoplay: this.autoplay,
+          ban_seek: this.isAllowSeek,
+          speed: this.playbackRate,
+          teaser_show: 1,
+          tail_show: 1,
+          hideSwitchPlayer: true,
+          watchStartTime: this.recordObj.videoCurrentTime,
+          ts: res.data.ts,
+          sign: res.data.sign,
+          // adMatter: [
+          //   {
+          //     // 广告参数详细配置
+          //     location: 1, //广告位置: 1 片头广告,2 暂停广告,3 片尾广告,4 弹窗广告
+          //     adtype: 2, //广告资源类型: 1 图片广告,2 视频广告,3 swf广告(flash播放器生效)
+          //     matterurl: "https://www.runoob.com/try/demo_source/movie.mp4", //广告资源URL
+          //     timesize: 5, //广告时长,单位:秒
+          //     skipenabled: false, //是否显示跳过按钮
+          //   },
+          //   {
+          //     // 广告参数详细配置
+          //     location: 3, //广告位置: 1 片头广告,2 暂停广告,3 片尾广告,4 弹窗广告
+          //     adtype: 2, //广告资源类型: 1 图片广告,2 视频广告,3 swf广告(flash播放器生效)
+          //     matterurl: "https://www.runoob.com/try/demo_source/movie.mp4", //广告资源URL
+          //     timesize: 5, //广告时长,单位:秒
+          //     skipenabled: false, //是否显示跳过按钮
+          //   },
+          // ],
+          playsafe: function (vid, next) {
+            next();
+          },
+        });
+
+        this.player.HTML5.video.addEventListener("timeupdate", self.timeEvent);
+        this.player.on("s2j_onPlayStart", () => {
+          //开始播放每5秒提交一次观看时间
+          this.hasStart = true;
+          clearInterval(this.postTimer);
+          this.postTimer = setInterval(() => {
+            this.postStudyRecord(0);
+          }, 5000);
+          if (this.recordObj.videoCurrentTime) {
+            this.showRecordStatus = true;
+            setTimeout(() => {
+              this.showRecordStatus = false;
+            }, 5000);
+          } else {
+            //新视频直接提交一条观看记录
+            // this.postStudyRecord(0);
+            this.showRecordStatus = false;
+          }
+        });
+
+        this.player.on("s2j_onPlayOver", () => {
+          this.hasStart = false;
+          clearInterval(this.postTimer);
+          this.$message({
+            type: "success",
+            message: "播放完毕",
+          });
+          this.postStudyRecord(1);
+        });
+      });
+    },
+
+    timeEventLiving() {
+      var polyvPlayerContext = this.playerzb;
+      if (polyvPlayerContext) {
+        this.liveDuration = this.liveDuration + 1; //每隔1秒
+        console.log(this.liveDuration);
+        if (this.liveDuration == 2) {
+          //直播第2秒拍照
+          if (
+            this.goodsPhotographConfig &&
+            this.goodsPhotographConfig.livephotograph == 1 &&
+            this.sectionItem.learning != 1 &&
+            this.photoHistoryList.length == 0
+          ) {
+            //开启直播拍照
+
+            polyvPlayerContext.j2s_pauseVideo();
+            this.openPhoto();
+          } else {
+            this.postStudyRecord();
+          }
+        }
+      }
+    },
+
+    timeEvent() {
+      let self = this;
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        this.playTime = polyvPlayerContext.j2s_getCurrentTime(); //播放时刻
+        //	console.log(this.playTime,789,this.photoHistoryList)
+        //判断是否需要拍照
+        if (this.photoNum > 0) {
+          this.configPhoto();
+          let photoTime = 0; //获取拍照秒数
+          for (let i = 0; i < this.photoList.length; i++) {
+            photoTime = Number(this.photoList[i]); //获取拍照秒数
+            if (photoTime < this.playTime && photoTime > this.playTime - 8) {
+              //3秒区间内才触发拍照,避免拉动滚动条
+              if (
+                this.photoHistoryList.indexOf(i) < 0 &&
+                this.sectionItem.learning != 1
+              ) {
+                //不存在拍照历史,没有重修过,没有学过,则拍照
+                //启动拍照
+                //暂停
+
+                polyvPlayerContext.j2s_pauseVideo();
+                this.photoIndex = i;
+                this.openPhoto();
+              } else {
+              }
+            }
+          }
+        }
+      }
+    },
+
+    getPhotoLastRecord() {
+      return new Promise((resolve) => {
+        let self = this;
+        let data = {
+          sectionId: parseInt(self.playSectionId),
+          goodsId: parseInt(self.goodsId),
+          courseId: parseInt(self.courseId),
+          gradeId: parseInt(self.gradeId),
+          chapterId: parseInt(self.chapterId),
+          moduleId: parseInt(self.moduleId),
+        };
+        this.$request.getPhotoLastRecord(data).then((res) => {
+          //清空历史数据
+          self.photoHistoryList = [];
+          this.photoIndex = 0;
+          self.photoList = [];
+          for (let i = 0; i < res.data.length; i++) {
+            //-2存储随机拍照数组
+            if (res.data[i].photoIndex == -2) {
+              self.photoList = res.data[i].timeInterval.split(",");
+            } else {
+              self.photoHistoryList.push(res.data[i].photoIndex);
+            }
+          }
+
+          resolve();
+        });
+      });
+    },
+
+    //拍照
+    openPhoto() {
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        if (this.isFullScreen()) {
+          this.exitFullscreen();
+        }
+      }
+
+      var polyvPlayerContext = this.playerzb;
+      if (polyvPlayerContext) {
+        if (this.isFullScreen()) {
+          this.exitFullscreen();
+        }
+      }
+
+      this.$nextTick(() => {
+        if (
+          (window.navigator.mediaDevices &&
+            window.navigator.mediaDevices.getUserMedia) ||
+          window.navigator.getUserMedia ||
+          window.navigator.webkitGetUserMedia ||
+          window.navigator.mozGetUserMedia
+        ) {
+          console.log(this.getUserMedia, "getUserMedia");
+          // 调用用户媒体设备, 访问摄像头
+          this.getUserMedia(
+            {
+              video: {
+                width: 400,
+                height: 300,
+              },
+            },
+            this.photographSuccess,
+            this.photographError
+          );
+        } else {
+          this.photographError();
+        }
+      });
+    },
+
+    /**
+     * 退出全屏
+     */
+    exitFullscreen() {
+      try {
+        var de = document;
+        console.log(de);
+        if (de.exitFullscreen) {
+          de.exitFullscreen();
+        } else if (de.mozCancelFullScreen) {
+          de.mozCancelFullScreen();
+        } else if (de.webkitCancelFullScreen) {
+          de.webkitCancelFullScreen();
+        }
+      } catch (err) {}
+    },
+
+    fullele() {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement ||
+        document.mozFullScreenElement ||
+        null
+      );
+    },
+
+    //判断是否全屏
+    isFullScreen() {
+      return !!(document.webkitIsFullScreen || this.fullele());
+    },
+
+    //配置随机拍照时间
+    configPhoto() {
+      var polyvPlayerContext = this.player;
+      let totalVideoTime = polyvPlayerContext.j2s_getDuration();
+      let duration = polyvPlayerContext.j2s_getCurrentTime();
+      let photoNum = this.photoNum;
+      if (!this.photoConfig) {
+        this.photoConfig = true;
+        //没有历史拍照间隔数据
+        if (this.photoList.length == 0) {
+          if (totalVideoTime >= 900) {
+            //大于15分钟
+            if (photoNum == 1) {
+              //开头拍1张
+              this.photoList.push(1);
+            } else if (photoNum == 3) {
+              //拍3张
+              this.photoList.push(0); //开头拍一张
+              let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
+              let centerMinTime = centerTime - 300; //前后5分钟
+              let centerMaxTime = centerTime + 300;
+              let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
+              this.photoList.push(centerTakeTime); //中间拍一张
+              let endMaxTime = totalVideoTime - 60;
+              let endMinTime = totalVideoTime - 300;
+              let endTakeTime = this.randomNum(endMinTime, endMaxTime);
+              this.photoList.push(endTakeTime); //最后拍一张
+            }
+          } else {
+            //小于15分钟,只拍前后各一张
+            if (photoNum == 1) {
+              //开头拍1张
+              this.photoList.push(1);
+            } else if (photoNum == 3) {
+              //拍2张
+              if (totalVideoTime <= 300) {
+                //小于5分钟
+                this.photoList.push(1); //开头拍一张
+                let endTakeTime = this.randomNum(10, totalVideoTime); //中间随机取一张
+                this.photoList.push(endTakeTime);
+              } else {
+                this.photoList.push(1); //开头拍一张
+                let endMaxTime = totalVideoTime - 60;
+                let endMinTime = totalVideoTime - 300;
+                let endTakeTime = this.randomNum(endMinTime, endMaxTime);
+                this.photoList.push(endTakeTime); //最后1-5分钟拍一张
+              }
+            }
+          }
+          console.log(this.photoList, "随机拍照时间数组11", photoNum);
+          this.postCoursePhotoRecord(true); //提交随机拍照时间数组
+        }
+        console.log(this.photoList, "随机拍照时间数组");
+        //兼容已有观看历史
+        for (let i = 0; i < this.photoList.length - 1; i++) {
+          if (
+            this.photoList[i] < duration &&
+            this.photoList[i + 1] > duration
+          ) {
+            this.photoIndex = i + 1;
+            //				console.log("我的修改了photoIndex")
+            break;
+          }
+          if (duration > this.photoList[this.photoList.length - 1]) {
+            this.photoIndex = this.photoList.length - 1; //取最后一个下标
+            //				console.log("我的修改了photoIndex")
+            break;
+          }
+        }
+      }
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+    //postTime 只提交随机时间
+    postCoursePhotoRecord(postTime = false) {
+      return new Promise((resolve, reject) => {
+        let currentTime = 0;
+        var polyvPlayerContext = this.player;
+        if (polyvPlayerContext) {
+          currentTime = polyvPlayerContext.j2s_getCurrentTime();
+        }
+        let self = this;
+        let photoIndex = self.photoIndex;
+        let data = {
+          photo: self.ossAvatarUrl,
+          sectionId: parseInt(self.playSectionId),
+          goodsId: parseInt(self.goodsId),
+          courseId: parseInt(self.courseId),
+          photoTime: parseInt(currentTime > 0 ? currentTime : 0),
+          gradeId: parseInt(self.gradeId),
+          photoIndex: postTime ? -2 : parseInt(photoIndex), //从0算起,-2只提交随机时间
+          photoNum: parseInt(self.photoNum),
+          chapterId: parseInt(self.chapterId),
+          moduleId: parseInt(self.moduleId),
+          timeInterval: postTime ? self.photoList.join(",") : "",
+        };
+        console.log("提交接口", data);
+        this.$request
+          .coursePhotoRecord(data)
+          .then((res) => {
+            console.log(res, "res");
+            resolve();
+          })
+          .catch((err) => {
+            console.log(err, "err");
+            reject();
+          });
+      });
+    },
+    /**
+     * @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();
+      }
+    },
+    clears() {
+      return new Promise((resolve, reject) => {
+        this.vid = "";
+        this.vidzb = "";
+        if (this.player) {
+          this.player.destroy();
+        }
+        if (this.playerzb) {
+          this.playerzb.destroy();
+        }
+        resolve();
+      });
+    },
+
+    /**
+     * 提交观看记录
+     */
+    postStudyRecord(status = 0, sectionId = this.playSectionId) {
+      let currentTime = 0;
+      let PlayDuration = 0;
+      var polyvPlayerContext = this.player;
+      if (polyvPlayerContext) {
+        currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
+        PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
+      }
+      if (this.vidzb) {
+        currentTime = 2; //直播无法获取,无论开始结束都传2秒
+      }
+      let self = this;
+      console.log(this);
+      console.log(PlayDuration, "PlayDuration");
+      let data = {
+        photo: self.ossAvatarUrl,
+        sectionId: parseInt(this.playSectionId),
+        goodsId: parseInt(this.goodsId),
+        courseId: parseInt(this.courseId),
+        studyDuration: parseInt(PlayDuration > 0 ? PlayDuration : 0),
+        gradeId: parseInt(this.gradeId),
+        chapterId: parseInt(this.chapterId),
+        moduleId: parseInt(this.moduleId),
+        videoCurrentTime: parseInt(currentTime > 0 ? currentTime : 0),
+      };
+      if (status > 0) {
+        data.status = status;
+      }
+      this.$request
+        .studyRecord(data)
+        .then((res) => {
+          if (status > 0) {
+            //看完视频刷新父级列表
+            let rebuildObj = this.getSameObj(this.sectionItem);
+            this.refreshParentList(this.sectionItem, rebuildObj);
+          }
+
+          self.ossAvatarUrl = "";
+        })
+        .catch((err) => {
+          console.log(err);
+          this.$message({
+            type: "warning",
+            message: err.msg,
+          });
+        });
+    },
+
+    /**
+     * 获取重修列表中是否有相同对象
+     */
+    getSameObj(metaObj) {
+      let newObj = false;
+      if (this.reMenuList.length) {
+        console.log(this.reMenuList, "this.reMenuList");
+        this.reMenuList.forEach((menu) => {
+          if (menu.type == 3) {
+            let isSame = this.contrast(metaObj, menu);
+            if (isSame) {
+              newObj = isSame;
+            }
+          } else {
+            if (menu.list && menu.list.length) {
+              menu.list.forEach((menuItem) => {
+                if (menuItem.type == 1) {
+                  console.log(menuItem, metaObj);
+                  let isSame = this.contrast(metaObj, menuItem);
+                  if (isSame) {
+                    newObj = isSame;
+                  }
+                } else {
+                  if (menuItem.list && menuItem.list.length) {
+                    menuItem.list.forEach((menuChild) => {
+                      if (menuChild.type == 1) {
+                        let isSame = this.contrast(metaObj, menuChild);
+                        if (isSame) {
+                          newObj = isSame;
+                        }
+                      }
+                    });
+                  }
+                }
+              });
+            }
+          }
+        });
+
+        return newObj;
+      } else {
+        return false;
+      }
+    },
+
+    contrast(obj1, obj2) {
+      let moduleId1 = obj1.moduleId || 0;
+      let chapterId1 = obj1.chapterId || 0;
+      let sectionId1 = obj1.sectionId || obj1.menuId;
+      let moduleId2 = obj2.moduleId || 0;
+      let chapterId2 = obj2.chapterId || 0;
+      let sectionId2 = obj2.sectionId || obj2.menuId;
+      //转字符串后对比是否一致
+      return moduleId1 == moduleId2 &&
+        chapterId1 == chapterId2 &&
+        sectionId1 == sectionId2
+        ? obj2
+        : false;
+    },
+
+    /**
+     * 刷新父级列表
+     */
+    refreshParentList(sectionItem, rebuildObj) {
+      console.log(sectionItem, "sectionItem");
+      console.log(rebuildObj, "rebuildObj");
+      let self = this;
+      if (sectionItem.menuId) {
+        //最外层节有menuid
+        //普通章节目录
+        this.$request
+          .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
+          .then((res) => {
+            for (let i = 0; i < res.rows.length; i++) {
+              let item = res.rows[i];
+              if (item.type == 3) {
+                self.menuList[i].learning = item.learning;
+                self.menuList[i].rebuild = item.rebuild;
+              }
+            }
+          });
+
+        if (this.menuTab.length > 1) {
+          //有重修目录
+          this.$request
+            .reMenuList({
+              courseId: this.courseId,
+              gradeId: this.gradeId,
+              rebuild: 1,
+            })
+            .then((res) => {
+              if (res.rows.length > 0) {
+                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.isRebuild = 1;
+                }
+                self.reMenuList = self.reMenuList.filter((reMenu) => {
+                  //筛选剩下的选项
+                  return res.rows.find((row) => row.menuId == reMenu.menuId);
+                });
+              } else {
+                this.menuTab = [
+                  {
+                    name: "1",
+                    label: "章节目录",
+                  },
+                ];
+                this.courseTabIndex = "1";
+                self.reMenuList = [];
+              }
+            });
+        }
+      } else if (!sectionItem.moduleId) {
+        //第二层节没有moduleid
+        this.$request
+          .reSectionList({
+            chapterId: sectionItem.chapterId,
+            gradeId: this.gradeId,
+            courseId: this.courseId,
+            moduleId: 0,
+          })
+          .then((res) => {
+            let newArr = res.data.filter((item) => {
+              return item.type != 2;
+            });
+            sectionItem.parent.canLearn = newArr.every((item) => {
+              if (item.learning == 1) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            res.data.forEach((section) => {
+              section.isRebuild = 1;
+              section.parent = sectionItem.parent;
+            });
+
+            this.menuList.forEach((menu) => {
+              if (menu.menuId == sectionItem.chapterId) {
+                menu.list = res.data;
+              }
+            });
+          });
+
+        if (this.menuTab.length > 1 && rebuildObj) {
+          this.$request
+            .reSectionList({
+              chapterId: rebuildObj.chapterId,
+              gradeId: this.gradeId,
+              courseId: this.courseId,
+              moduleId: 0,
+              rebuild: 1,
+            })
+            .then((res) => {
+              let newArr = res.data.filter((item) => {
+                return item.type != 2;
+              });
+              rebuildObj.parent.canLearn = newArr.every((item) => {
+                if (item.learning == 1) {
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+
+              res.data.forEach((section) => {
+                section.parent = rebuildObj.parent;
+              });
+
+              this.reMenuList.forEach((menu) => {
+                if (menu.menuId == rebuildObj.chapterId) {
+                  menu.list = res.data;
+                }
+              });
+            });
+
+          this.$request
+            .reMenuList({
+              courseId: this.courseId,
+              gradeId: this.gradeId,
+              rebuild: 1,
+            })
+            .then((res) => {
+              if (res.rows.length > 0) {
+                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.isRebuild = 1;
+                }
+                self.reMenuList = self.reMenuList.filter((reMenu) => {
+                  //筛选剩下的选项
+                  return res.rows.find((row) => row.menuId == reMenu.menuId);
+                });
+              } else {
+                this.menuTab = [
+                  {
+                    name: "1",
+                    label: "章节目录",
+                  },
+                ];
+                this.courseTabIndex = "1";
+                self.reMenuList = [];
+              }
+            });
+        }
+      } else {
+        //第三层节有moduleid和chapterid都有
+        this.$request
+          .reSectionList({
+            chapterId: sectionItem.chapterId,
+            gradeId: this.gradeId,
+            courseId: this.courseId,
+            moduleId: sectionItem.moduleId,
+          })
+          .then((res) => {
+            let newArr = res.data.filter((item) => {
+              return item.type != 2;
+            });
+            sectionItem.parent.canLearn = newArr.every((item) => {
+              if (item.learning == 1) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+
+            res.data.forEach((section) => {
+              section.parent = sectionItem.parent;
+            });
+
+            this.menuList.forEach((menu) => {
+              if (menu.list && menu.list.length) {
+                menu.list.forEach((chapter) => {
+                  if (
+                    chapter.moduleId == sectionItem.moduleId &&
+                    chapter.chapterId == sectionItem.chapterId
+                  ) {
+                    console.log(res.data, "res.data");
+                    console.log(chapter.list, "chapter.list");
+                    chapter.list = res.data;
+                  }
+                });
+              }
+            });
+          });
+
+        if (this.menuTab.length > 1 && rebuildObj) {
+          this.$request
+            .reSectionList({
+              chapterId: rebuildObj.chapterId,
+              gradeId: this.gradeId,
+              courseId: this.courseId,
+              moduleId: rebuildObj.moduleId,
+              rebuild: 1,
+            })
+            .then((res) => {
+              let newArr = res.data.filter((item) => {
+                return item.type != 2;
+              });
+              rebuildObj.parent.canLearn = newArr.every((item) => {
+                if (item.learning == 1) {
+                  return true;
+                } else {
+                  return false;
+                }
+              });
+
+              res.data.forEach((section) => {
+                section.parent = rebuildObj.parent;
+              });
+
+              this.reMenuList.forEach((menu) => {
+                if (menu.list && menu.list.length) {
+                  menu.list.forEach((chapter) => {
+                    if (
+                      chapter.moduleId == rebuildObj.moduleId &&
+                      chapter.chapterId == rebuildObj.chapterId
+                    ) {
+                      chapter.list = res.data;
+                    }
+                  });
+                }
+              });
+            });
+
+          this.$request
+            .reMenuList({
+              courseId: this.courseId,
+              gradeId: this.gradeId,
+              rebuild: 1,
+            })
+            .then((res) => {
+              if (res.rows.length > 0) {
+                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.isRebuild = 1;
+                }
+                self.reMenuList = self.reMenuList.filter((reMenu) => {
+                  //筛选剩下的选项
+                  return res.rows.find((row) => row.menuId == reMenu.menuId);
+                });
+              } else {
+                this.menuTab = [
+                  {
+                    name: "1",
+                    label: "章节目录",
+                  },
+                ];
+                this.courseTabIndex = "1";
+                self.reMenuList = [];
+              }
+            });
+        }
+      }
+    },
+
+    getRecordLast() {
+      let self = this;
+      return new Promise((resolve) => {
+        let data = {
+          gradeId: Number(self.gradeId),
+          goodsId: Number(self.goodsId),
+          sectionId: Number(self.playSectionId),
+          courseId: Number(self.courseId),
+          chapterId: parseInt(self.chapterId),
+          moduleId: parseInt(self.moduleId),
+        };
+        self.$request.recordLast(data).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    /**
+     * 获取笔记列表
+     */
+    getNoteList() {
+      let self = this;
+      self.noteList = [];
+      let data = {
+        courseId: this.courseId,
+        gradeId: this.gradeId,
+        goodsId: this.goodsId,
+        pageNum: this.noteParams.pageNum,
+        pageSize: this.noteParams.pageSize,
+      };
+      if (this.playSectionId > 0) {
+        data.sectionId = this.playSectionId;
+      }
+      this.$request.noteList(data).then((res) => {
+        self.noteList = res.rows;
+        self.noteTotal = res.total;
+      });
+    },
+
+    noteClick(note) {
+      if (this.vid) {
+        //切换视频
+        if (this.vid == note.recordingUrl) {
+          var polyvPlayerContext = this.player;
+          if (polyvPlayerContext) {
+            polyvPlayerContext.j2s_seekVideo(note.noteSecond);
+          }
+        } else {
+          var polyvPlayerContext = this.player;
+          if (polyvPlayerContext) {
+            polyvPlayerContext.changeVid(note.recordingUrl);
+          }
+        }
+      } else {
+        var polyvPlayerContext = this.player;
+        console.log(polyvPlayerContext);
+        if (polyvPlayerContext) {
+          polyvPlayerContext.changeVid(note.recordingUrl);
+        } else {
+          this.vid = note.recordingUrl;
+          console.log(note.recordingUrl);
+          this.moduleId = note.moduleId;
+          this.chapterId = note.chapterId;
+          this.playSectionId = note.sectionId;
+          note.sectionType = 3;
+          this.loadPlayerScript(this.loadPlayer);
+        }
+      }
+      this.recordObj = { videoCurrentTime: note.noteSecond };
+    },
+
+    getMenuList() {
+      let self = this;
+      this.$request
+        .reMenuList({ courseId: this.courseId, gradeId: this.gradeId })
+        .then((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;
+          }
+          self.menuList = res.rows;
+          //展开第一个
+          if (this.needOpen) {
+            for (let i = 0; i < res.rows.length; i++) {
+              if (res.rows[i].type == 1) {
+                this.menuIndex = [i];
+                this.openModule(this.menuList[i]);
+                break;
+              } else if (res.rows[i].type == 2) {
+                this.menuIndex = [i];
+                // this.needOpen = false;
+                this.openChapter(this.menuList[i]);
+                break;
+              }
+            }
+
+            //第一个是节,直接播放
+            if (self.menuList.length) {
+              if (
+                self.menuList[0].type == 3 &&
+                !this.sectionItem.recordingUrl
+              ) {
+                this.getResource(self.menuList[0]);
+              }
+            }
+          }
+        });
+    },
+
+    getReMenuList() {
+      let self = this;
+      this.$request
+        .reMenuList({
+          courseId: this.courseId,
+          rebuild: 1,
+          gradeId: this.gradeId,
+        })
+        .then((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.reMenuList;
+            item.isRebuild = 1;
+          }
+          self.reMenuList = res.rows;
+          if (self.reMenuList.length > 0) {
+            this.menuTab = [
+              {
+                name: "1",
+                label: "章节目录",
+              },
+              {
+                name: "2",
+                label: "重修目录",
+              },
+            ];
+
+            if (this.courseTabIndex == "2") {
+              return;
+            }
+            this.courseTabIndex = "1";
+          } else {
+            this.menuTab = [
+              {
+                name: "1",
+                label: "章节目录",
+              },
+            ];
+            this.courseTabIndex = "1";
+          }
+        });
+    },
+
+    /**
+     * 获取讲义权限
+     */
+    courseHandouts() {
+      this.$request
+        .courseHandouts(this.goodsData.handoutsId)
+        .then((res) => {
+          this.courseHandoutsData = res.data;
+          const loadingTask = pdf.createLoadingTask(
+            this.$tools.splitImgHost(this.courseHandoutsData.handoutsUrl)
+          );
+          loadingTask.promise
+            .then((pdf) => {
+              this.numPages = pdf.numPages;
+            })
+            .catch((err) => {});
+        })
+        .catch((err) => {});
+    },
+
+    /**
+     * 获取培训项目详情
+     */
+    courseBusiness() {
+      this.$request.courseBusiness(this.goodsData.businessId).then((res) => {
+        this.businessData = res.data;
+      });
+    },
+    /**提出答疑 */
+    addAnswer() {
+      if (!this.textarea) {
+        this.$message.warning("请输入疑问内容");
+        return;
+      }
+      let data = {
+        courseId: this.courseId,
+        goodsId: this.goodsId,
+        orderGoodsId: this.orderGoodsId,
+        answerText: this.textarea,
+      };
+      this.$request.addAnswer(data).then((res) => {
+        this.textarea = "";
+        this.getAnswerList();
+      });
+    },
+    /**回复 */
+    answerBack(row) {
+      this.$prompt(`${row.realname}:${row.answerText}`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "输入不能为空",
+        inputValidator: (value) => {
+          let str = value.replace(/^ +| +$/g, "");
+          // 点击按钮时,对文本框里面的值进行验证
+          if (!str) {
+            return "输入不能为空";
+          }
+        },
+      })
+        .then(({ value }) => {
+          let data = {
+            assignUserId: row.userId,
+            assignAnswerId: row.answerId,
+            courseId: this.courseId,
+            goodsId: this.goodsId,
+            orderGoodsId: this.orderGoodsId,
+            answerText: value,
+            assignAnswerText: row.assignAnswerText,
+          };
+          this.$request.addAnswer(data).then((res) => {
+            this.getAnswerList();
+          });
+        })
+        .catch(() => {});
+    },
+    getAnswerList() {
+      let self = this;
+      this.$request
+        .answerList({ courseId: this.courseId, goodsId: this.goodsId })
+        .then((res) => {
+          let data1 = [];
+          let data2 = [];
+          let copydata2 = [];
+          res.rows.forEach((item) => {
+            if (!item.assignAnswerId) {
+              data1.push(item);
+            } else {
+              data2.push(item);
+              copydata2.push(item);
+            }
+          });
+          data2.forEach((item, index) => {
+            //回复层
+            data1.forEach((items) => {
+              //提问层
+              if (items.answerId === item.assignAnswerId) {
+                if (
+                  items.newArraysAnswerList &&
+                  items.newArraysAnswerList.length
+                ) {
+                  items.newArraysAnswerList.push(item);
+                } else {
+                  items.newArraysAnswerList = [item];
+                }
+                let indexInd = copydata2.findIndex((itemsxs) => {
+                  return itemsxs.answerId === item.answerId;
+                });
+                if (indexInd !== -1) {
+                  copydata2.splice(indexInd, 1);
+                }
+              }
+            });
+          });
+          copydata2.forEach((it) => {
+            for (let i = 0; i < data1.length; i++) {
+              let STATUS = null;
+              if (data1[i].newArraysAnswerList) {
+                STATUS = data1[i].newArraysAnswerList.some((items) => {
+                  return items.answerId === it.assignAnswerId;
+                });
+              }
+              if (STATUS) {
+                data1[i].newArraysAnswerList.push(it);
+                break;
+              }
+            }
+          });
+          self.answerList = data1.reverse();
+        });
+    },
+    courseCourseList() {
+      this.param.goodsId = this.goodsId;
+      this.param.gradeId = this.gradeId;
+      this.$request.courseCourseList(this.param).then((res) => {
+        this.courseList.push(...res.rows);
+        if (!this.courseId) {
+          this.courseId = this.courseList[0].courseId;
+        }
+        this.param.total = res.total;
+        this.courseChange();
+      });
+    },
+
+    download(url, fileName) {
+      let xhr = new XMLHttpRequest();
+      xhr.open("get", url, true);
+      xhr.setRequestHeader("Content-Type", `application/pdf`);
+      xhr.responseType = "blob";
+      let that = this;
+      xhr.onload = function () {
+        if (this.status == 200) {
+          //接受二进制文件流
+          var blob = this.response;
+          that.downloadExportFile(blob, fileName);
+        }
+      };
+      xhr.send();
+    },
+
+    downloadExportFile(blob, tagFileName) {
+      let downloadElement = document.createElement("a");
+      let href = "";
+      if (typeof blob == "string") {
+        downloadElement.target = "_blank";
+      } else {
+        href = window.URL.createObjectURL(blob); //创建下载的链接
+      }
+      downloadElement.href = href;
+      downloadElement.download = tagFileName;
+      //下载后文件名
+      document.body.appendChild(downloadElement);
+      downloadElement.click(); //点击下载
+      document.body.removeChild(downloadElement); //下载完成移除元素
+      if (typeof blob != "string") {
+        window.URL.revokeObjectURL(href); //释放掉blob对象
+      }
+    },
+
+    print() {
+      document.getElementById("printIframe").contentWindow.print();
+    },
+
+    previvew(url) {
+      this.showPdf = true;
+    },
+    noteSubmit() {
+      let self = this;
+      if (!(this.playSectionId > 0)) {
+        this.$message({
+          message: "目前无播放视频",
+          type: "warning",
+        });
+        return;
+      }
+      if (!this.textareaNote) {
+        this.$message({
+          message: "请输入内容",
+          type: "warning",
+        });
+        return;
+      }
+      if (!this.gradeId) {
+        this.$message({
+          message: "暂无班级数据",
+          type: "warning",
+        });
+        return;
+      }
+      var polyvPlayerContext = this.player;
+      let noteDate = this.$tools.getZeroTime();
+      let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+      console.log(noteSecond, "noteSecond");
+      if (!noteSecond) {
+        if (noteSecond == 0) {
+          //播放结束
+          noteSecond = polyvPlayerContext.j2s_getCurrentTime();
+        }
+        if (!noteSecond) {
+          this.$message({
+            message: "视频暂未开始",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      let data = {
+        gradeId: this.gradeId,
+        goodsId: this.goodsId,
+        sectionId: this.playSectionId,
+        courseId: this.courseId,
+        noteText: this.textareaNote,
+        noteDate: noteDate,
+        noteSecond: noteSecond,
+        moduleId: this.moduleId,
+        chapterId: this.chapterId,
+      };
+      this.$request.postNote(data).then((res) => {
+        this.$message({
+          message: "发布成功",
+          type: "success",
+        });
+        self.getNoteList();
+        this.textareaNote = "";
+      });
+    },
+
+    del(item) {
+      console.log(item);
+      let data = { answerId: item.answerId, status: -1 };
+      this.$request.delAnswer(data).then((res) => {
+        this.$message({
+          message: "删除成功",
+          type: "success",
+        });
+        this.getAnswerList();
+      });
+    },
+    /**
+     * 打印
+     */
+    printView(url) {
+      console.log("触发打印", url);
+      printJS({
+        printable: url,
+        type: "pdf",
+        header: null,
+        targetStyles: ["*"],
+        style: "@page {margin:0 10mm}",
+      });
+      // this.print(url);
+    },
+    // 打印方法
+    print(filePath) {
+      console.log("执行打印");
+      let iframe = document.createElement("iframe");
+      iframe.style.border = "0px";
+      iframe.style.position = "absolute";
+      iframe.style.width = "0px";
+      iframe.style.height = "0px";
+      iframe.style.right = "0px";
+      iframe.style.top = "0px";
+      iframe.setAttribute("src", filePath);
+      iframe.onload = () => {
+        iframe.contentWindow.print();
+        // setTimeout(() => {
+        //     document.body.removeChild(iframe);
+        // });
+      };
+      document.body.append(iframe);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.course-detail {
+  .section {
+    padding-bottom: 30px;
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      .course-info {
+        &__header {
+          .left-box {
+            width: 810px;
+            height: 455px;
+            float: left;
+            background-size: cover;
+            background-position: center center;
+            background-repeat: no-repeat;
+            position: relative;
+            .video {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .recordStyle {
+            position: absolute;
+            bottom: 90px;
+            padding: 6px 12px;
+            left: 8px;
+            background-color: rgba(0, 0, 0, 0.4);
+            color: #fff;
+            border-radius: 24px;
+            user-select: none;
+            .btn_sty {
+              cursor: pointer;
+            }
+          }
+
+          .right-box {
+            width: 462px;
+            height: 455px;
+            background: #060e1a;
+            border-radius: 0px;
+            float: right;
+
+            &__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;
+                }
+
+                .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 {
+                          height: 40px;
+                          line-height: 40px;
+                          padding-left: 24px;
+                          cursor: pointer;
+                          flex: 1;
+
+                          .el-icon-caret-right,
+                          .el-icon-caret-bottom {
+                            color: #999;
+                          }
+                        }
+                      }
+                    }
+
+                    .bank-section {
+                      &__item {
+                        color: #fff;
+                        font-size: 14px;
+                        display: flex;
+                        align-items: center;
+
+                        &.active {
+                          background: #132b4d;
+                          font-size: 14px;
+                          font-family: Microsoft YaHei;
+                          font-weight: bold;
+                          color: #3f8dfd;
+                        }
+
+                        &__text {
+                          padding-left: 12px;
+                          flex: 1;
+                          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;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+
+              .title {
+                height: 40px;
+                border-bottom: 1px solid #999;
+                color: #fff;
+
+                .select {
+                  width: 100%;
+                }
+
+                /deep/ .el-input__icon {
+                  width: 20px;
+                  height: 20px;
+                  border: 1px solid #fff;
+                  border-radius: 4px;
+                  margin-top: 10px;
+                  line-height: 20px;
+                }
+
+                /deep/ .el-input__inner {
+                  color: #fff;
+                  font-size: 16px;
+                  background: none;
+                  border: 0;
+                }
+              }
+            }
+
+            &__body {
+              height: 374px;
+              overflow-y: scroll;
+              &::-webkit-scrollbar {
+                width: 6px;
+              }
+              &::-webkit-scrollbar-track {
+                background-color: #060e1a;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+              &::-webkit-scrollbar-thumb {
+                background-color: #eeeeee;
+                -webkit-border-radius: 2em;
+                -moz-border-radius: 2em;
+                border-radius: 2em;
+              }
+            }
+          }
+        }
+
+        &__body {
+          /deep/ .el-tabs__item {
+            padding: 0 20px !important;
+            height: 80px;
+            line-height: 80px;
+          }
+
+          .course-img {
+            width: 100%;
+          }
+
+          .course-menu {
+            margin-top: 25px;
+            .left-box {
+              width: 948px;
+              float: left;
+
+              &__header {
+                padding-right: 50px;
+                position: relative;
+                .item {
+                  width: auto;
+                  margin-right: 24px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #333333;
+                  background: #eeeeee;
+                  border-radius: 8px;
+                  padding: 12px;
+                  position: relative;
+
+                  &.canlearn {
+                    background: #3f8dfd;
+                    color: #fff;
+                  }
+                }
+              }
+
+              &__body {
+                .buy-note {
+                  margin-right: 50px;
+                }
+                .item {
+                  margin-top: 24px;
+                  padding: 16px;
+                  background: #eee;
+                  border-radius: 10px;
+
+                  &__title {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #333333;
+
+                    .note {
+                      display: inline-block;
+                      margin-left: 20px;
+                      width: 40px;
+                      height: 24px;
+                      border: 1px solid #ff3b30;
+                      border-radius: 8px;
+                      line-height: 22px;
+                      color: #ff3b30;
+                      text-align: center;
+                    }
+                  }
+
+                  &__content {
+                    margin-top: 12px;
+                    background: #f5f7fa;
+                  }
+                }
+              }
+            }
+
+            .right-box {
+              width: 255px;
+              float: right;
+              .title {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
+                position: relative;
+
+                .more {
+                  font-size: 16px;
+                  font-family: Microsoft YaHei;
+                  font-weight: 400;
+                  color: #999999;
+                  position: absolute;
+                  right: 0;
+                }
+              }
+
+              .list {
+                .course-item {
+                }
+              }
+            }
+          }
+
+          .answer-question {
+            &__header {
+              border-bottom: 1px solid #eee;
+              .textarea-wrap {
+                background: #f9f9f9;
+                border: 1px solid #eeeeee;
+                border-radius: 8px;
+
+                .textarea {
+                  height: 100%;
+                }
+              }
+
+              .submit {
+                padding: 10px 20px;
+                border-radius: 20px;
+                text-align: center;
+                font-size: 16px;
+                margin: 10px 0;
+                float: right;
+              }
+            }
+
+            &__body {
+              .question-list {
+                &__item {
+                  padding: 20px 0;
+                  display: flex;
+
+                  &__avatar {
+                    width: 40px;
+                    height: 40px;
+                    display: table-cell;
+                    border-radius: 50%;
+                    text-align: center;
+
+                    img {
+                      display: inline-block;
+                      vertical-align: middle;
+                      max-width: 100%;
+                      max-height: 100%;
+                    }
+                  }
+
+                  &__content {
+                    flex: 1;
+                    border-bottom: 1px solid #ccc;
+                    margin-left: 10px;
+
+                    .nickname {
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: bold;
+                      color: #333333;
+                      line-height: 24px;
+                    }
+
+                    .desc {
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #666666;
+                      line-height: 24px;
+                    }
+
+                    .time {
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #999999;
+                      line-height: 24px;
+
+                      .replay {
+                        float: right;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #3f8dfd;
+                        line-height: 24px;
+                        margin-right: 20px;
+                      }
+
+                      .del {
+                        float: right;
+                        cursor: pointer;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #ff3b30;
+                        line-height: 24px;
+                        margin-right: 20px;
+                      }
+                    }
+
+                    .reply-list {
+                      margin: 20px 0;
+                      width: 100%;
+                      background: #f9f9f9;
+                      border-radius: 8px;
+                      padding: 0 0 0 20px;
+
+                      &__item {
+                        padding: 20px 0;
+                        display: flex;
+                        border-bottom: 1px solid #ccc;
+
+                        &:nth-last-of-type(1) {
+                          border: 0;
+                        }
+
+                        &__avatar {
+                          width: 40px;
+                          height: 40px;
+                          display: table-cell;
+                          border-radius: 50%;
+                          text-align: center;
+
+                          img {
+                            display: inline-block;
+                            vertical-align: middle;
+                            max-width: 100%;
+                            max-height: 100%;
+                          }
+                        }
+
+                        &__content {
+                          border-radius: 8px;
+                          flex: 1;
+                          margin-left: 10px;
+
+                          .nickname {
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: bold;
+                            color: #333333;
+                            line-height: 24px;
+                          }
+
+                          .desc {
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #666666;
+                            line-height: 24px;
+                          }
+
+                          .time {
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 24px;
+
+                            .reply {
+                              float: right;
+                              font-size: 14px;
+                              font-family: Microsoft YaHei;
+                              font-weight: 400;
+                              color: #3f8dfd;
+                              line-height: 24px;
+                              margin-right: 20px;
+                              cursor: pointer;
+                              user-select: none;
+                            }
+
+                            .del {
+                              cursor: pointer;
+                              margin-right: 20px;
+                              float: right;
+                              font-size: 14px;
+                              font-family: Microsoft YaHei;
+                              font-weight: 400;
+                              color: #ff3b30;
+                              line-height: 24px;
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .lecture-notes {
+            &__content {
+              .left-box {
+                float: left;
+                width: 462px;
+
+                .textarea {
+                  border-bottom: 1px solid #eee;
+                  .submit {
+                    float: right;
+                    width: 138px;
+                    padding: 10px 0;
+                    margin: 10px 0 25px 0;
+                    border-radius: 20px;
+                    text-align: center;
+                    font-size: 16px;
+                  }
+                }
+
+                .note-list {
+                  &__content {
+                    border-bottom: 1px solid #eee;
+                    &__title {
+                      width: 216px;
+                      height: 24px;
+                      background: #ccc;
+                      border-radius: 24px;
+                      font-size: 14px;
+                      color: #666666;
+                      text-align: center;
+                      line-height: 24px;
+                      margin: 20px 0;
+                    }
+                  }
+                  &__item {
+                    display: flex;
+                    padding: 15px;
+                    .el-icon-video-play {
+                      cursor: pointer;
+                      font-size: 20px;
+                      color: #3f8dfd;
+                    }
+
+                    &__content {
+                      flex: 1;
+                      margin-left: 10px;
+
+                      .title {
+                        cursor: pointer;
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: bold;
+                        color: #3f8dfd;
+                        line-height: 24px;
+                      }
+
+                      .desc {
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #666666;
+                        line-height: 24px;
+                      }
+
+                      .time {
+                        font-size: 14px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #999999;
+                        line-height: 24px;
+                      }
+                    }
+                  }
+                }
+
+                .pagination {
+                  margin-top: 30px;
+                  text-align: center;
+                }
+              }
+
+              .right-box {
+                width: 786px;
+                float: right;
+
+                .lecture-list {
+                  background: #f5f7fa;
+                  border-radius: 8px;
+                  &__header {
+                    padding: 0 16px;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 18px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #333333;
+
+                    .slide-btn {
+                      cursor: pointer;
+                      float: right;
+                      font-size: 14px;
+                      font-family: Microsoft YaHei;
+                      font-weight: 400;
+                      color: #999999;
+                    }
+                  }
+
+                  &__body {
+                    .list {
+                      &__item {
+                        border-top: 1px solid #fff;
+                        padding: 0 8px 0 16px;
+                        height: 56px;
+                        line-height: 55px;
+                        display: flex;
+                        align-items: center;
+                        .title {
+                          flex: 1;
+                          font-size: 16px;
+                          font-family: Microsoft YaHei;
+                          font-weight: 400;
+                          color: #333333;
+                        }
+
+                        .btns {
+                          .btn {
+                            cursor: pointer;
+                            display: inline-block;
+                            vertical-align: middle;
+                            width: 80px;
+                            height: 32px;
+                            background: #ffffff;
+                            border: 1px solid #3f8dfd;
+                            border-radius: 16px;
+                            text-align: center;
+                            line-height: 30px;
+                            color: #3f8dfd;
+                            margin: 0 8px;
+                          }
+                        }
+                      }
+                    }
+                  }
+
+                  &__footer {
+                    margin-top: 24px;
+                    .lecture-scan {
+                      background: #f5f7fa;
+                      border-radius: 8px;
+                      overflow: hidden;
+                      &__header {
+                        height: 40px;
+                        line-height: 40px;
+                        padding: 0 16px;
+                        font-size: 16px;
+                        font-family: Microsoft YaHei;
+                        font-weight: bold;
+                        color: #333333;
+                      }
+
+                      &__body {
+                        height: 800px;
+                        text-align: center;
+                        overflow-y: scroll;
+
+                        .iframe {
+                          width: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .take-photo {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__close {
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: -28px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      color: #eee;
+      border: 1px solid #eee;
+      border-radius: 50%;
+    }
+
+    &__header {
+      height: 40px;
+      border-bottom: 1px solid #eee;
+      line-height: 40px;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+      padding-left: 24px;
+    }
+
+    &__body {
+      height: 400px;
+      padding: 40px 24px;
+      .left-box {
+        width: 336px;
+        float: left;
+
+        .title {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #ff3b30;
+          line-height: 24px;
+        }
+
+        .content {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #333333;
+          line-height: 28px;
+          margin-top: 32px;
+        }
+      }
+
+      .right-box {
+        float: right;
+        width: 400px;
+        height: 300px;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    &__footer {
+      height: 90px;
+      border-top: 1px solid #eee;
+      text-align: center;
+      .take {
+        display: inline-block;
+        width: 200px;
+        height: 40px;
+        padding: 0;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        margin: 24px auto;
+      }
+    }
+  }
+
+  .info {
+    &__content {
+      height: 500px;
+      overflow-y: scroll;
+
+      .handCenter {
+        width: 600px;
+        height: 300px;
+        background: #ccc;
+      }
+
+      .upload-box {
+        display: inline-block;
+        vertical-align: top;
+
+        .el-icon-error {
+          cursor: pointer;
+          z-index: 99;
+          position: absolute;
+          left: 100%;
+          bottom: 100%;
+          font-size: 20px;
+          color: red;
+        }
+      }
+    }
+  }
+
+  .showconfirm {
+    &__content {
+      .text {
+        padding-bottom: 20px;
+        color: red;
+      }
+    }
+  }
+}
+</style>

+ 440 - 0
src/pages/live-list/index.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="payment">
+    <Header @search="search($event)"></Header>
+    <section class="section">
+      <div class="section__header">
+        <div class="container">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/index' }"
+              >首页</el-breadcrumb-item
+            >
+            <el-breadcrumb-item>题库</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+      <div class="section__body">
+        <div class="container">
+          <div class="course-classify">
+            <div class="course-classify__list">
+              <div class="left-item">教育类型:</div>
+              <div class="right-item">
+                <div class="list">
+                  <!-- <div
+                    class="item"
+                    :class="{ active: typeKey == '' }"
+                    @click="changeType('')"
+                  >
+                    全部
+                  </div> -->
+                  <div
+                    class="item"
+                    v-for="(item, index) in typeList"
+                    :key="index"
+                    :class="{ active: params.educationTypeId == item.id }"
+                    @click="changeType(item)"
+                  >
+                    {{ item.educationName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="course-classify__list" v-if="businessList.length > 0">
+              <div class="left-item">培训项目:</div>
+              <div class="right-item">
+                <div class="list">
+                  <!-- <div class="item active">全部</div> -->
+                  <div
+                    class="item"
+                    v-for="(item, index) in businessList"
+                    :key="index"
+                    :class="{ active: params.businessId == item.id }"
+                    @click="changeBusiness(item)"
+                  >
+                    {{ item.projectName }} - {{ item.businessName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="course-classify__list" v-if="subjectList.length > 0">
+              <div class="left-item">科目分类:</div>
+              <div class="right-item">
+                <div class="list">
+                  <div
+                    class="item"
+                    v-for="(item, index) in subjectList"
+                    :key="index"
+                    :class="{ active: params.subjectId == item.id }"
+                    @click="changeSubject(item)"
+                  >
+                    {{ item.subjectName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="section__footer">
+        <div class="container">
+          <div class="course-list">
+            <div class="course-list__header">
+              <div class="sort-list">
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(1)"
+                  :class="{ active: params.sortType == 1 ? true : false }"
+                >
+                  综合排序
+                </div>
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(2)"
+                  :class="{ active: params.sortType == 2 ? true : false }"
+                >
+                  低价优先
+                </div>
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(3)"
+                  :class="{ active: params.sortType == 3 ? true : false }"
+                >
+                  高价优先
+                </div>
+              </div>
+            </div>
+            <div class="course-list__body">
+              <ul class="list clearfix">
+                <li
+                  class="course-item"
+                  v-for="(item, index) in goodsList"
+                  :key="index"
+                >
+                  <GoodsItem :item="item"></GoodsItem>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="pagination">
+            <el-pagination
+              @current-change="currentChange"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :pager-count="5"
+              :page-size="params.pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "PaymentSuccess",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+    GoodsItem,
+  },
+  data() {
+    return {
+      projectId: "",
+      typeList: [],
+      businessList: [],
+      subjectList: [],
+      total: 0,
+      params: {
+        projectId: "",
+        educationTypeId: "",
+        businessId: "",
+        subjectId: "",
+        pageNum: 1,
+        pageSize: 15,
+        goodsStatus: 1,
+        goodsType: 2,
+        sortType: 1,
+        searchKey: "",
+      },
+      goodsList: [],
+    };
+  },
+  mounted() {
+    this.params.searchKey = this.$route.query.searchKey || "";
+    this.params.educationTypeId = this.$route.query.educationId || "";
+    this.params.projectId = this.$route.query.projectId || "";
+    this.params.businessId = this.$route.query.businessId || "";
+    if (this.params.businessId) {
+      this.getSubjectList();
+    }
+    this.getEducationTypeList();
+    // this.changeSubject();
+  },
+  methods: {
+    ...mapMutations(["getCartCount"]),
+    search(key) {
+      this.params.searchKey = key || "";
+      this.params.projectId = "";
+      this.params.educationTypeId = "";
+      this.params.businessId = "";
+      this.params.subjectId = "";
+      this.changeSubject();
+    },
+    changeSort(sortType) {
+      if (this.params.sortType == sortType) return;
+      this.params.sortType = sortType;
+      this.changeSubject();
+    },
+    currentChange(e) {
+      this.params.pageNum = e;
+      this.changeSubject();
+    },
+    goodsDetail(item) {
+      this.$router.push({
+        path: "/bank-detail/" + item.goodsId,
+        query: {
+          orderGoodsId: item.orderGoodsId,
+        },
+      });
+    },
+
+    addCart(item) {
+      this.$request
+        .addCart({ goodsId: item.goodsId })
+        .then((res) => {
+          this.getCartCount();
+          this.$message({
+            message: "加入购物车成功",
+            type: "success",
+          });
+        })
+        .catch((err) => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning",
+            });
+          }
+        });
+    },
+
+    changeType(item) {
+      if (this.params.educationTypeId == item.id) {
+        return;
+      }
+      this.params.educationTypeId = item.id;
+      this.params.businessId = "";
+      this.businessList = [];
+      this.params.subjectId = "";
+      this.subjectList = [];
+      this.params.pageNum = 1;
+      this.getBusinessList();
+      this.changeSubject();
+    },
+
+    changeSubject(item) {
+      if (item) {
+        if (this.params.subjectId != item.id) {
+          this.params.subjectId = item.id;
+          this.params.pageNum = 1;
+        }
+      }
+      this.$request.goodsList(this.params).then((res) => {
+        this.goodsList = res.rows;
+        this.total = res.total;
+      });
+    },
+
+    getSubjectList() {
+      this.$request
+        .subjectList({
+          businessId: this.params.businessId,
+          projectId: this.projectId,
+          educationId: this.params.educationTypeId,
+        })
+        .then((res) => {
+          this.subjectList = res.rows;
+          this.subjectList.unshift({ id: 0, subjectName: "全部" });
+          this.params.subjectId = 0;
+
+          this.changeSubject(this.subjectList[0]);
+        });
+    },
+
+    changeBusiness(item) {
+      if (this.params.subjectId == item.id) {
+        return;
+      }
+      this.params.businessId = item.id;
+      this.projectId = item.projectId;
+      this.params.subjectId = "";
+      this.subjectList = [];
+      this.params.pageNum = 1;
+      this.getSubjectList();
+    },
+
+    getBusinessList() {
+      this.$request
+        .businessList({ educationId: this.params.educationTypeId })
+        .then((res) => {
+          this.businessList = res.rows;
+          this.projectId = this.businessList[0].projectId;
+        });
+    },
+
+    getEducationTypeList() {
+      this.$request.educationTypeList().then((res) => {
+        this.typeList = res.rows;
+        if (!this.params.educationTypeId) {
+          this.params.educationTypeId = res.rows[0].id;
+          this.getBusinessList();
+        } else {
+          this.params.educationTypeId = res.rows[0].id;
+          this.getBusinessList();
+        }
+        this.changeSubject();
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.payment {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      background: #ebf2fc;
+      .course-classify {
+        overflow: hidden;
+
+        &__list {
+          display: flex;
+          margin: 6px 0;
+          align-items: flex-start;
+          .left-item {
+            margin-top: 10px;
+            padding: 8px 0;
+            width: 80px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+          }
+
+          .right-item {
+            flex: 1;
+            .list {
+              display: flex;
+              flex-wrap: wrap;
+              .item {
+                cursor: pointer;
+                border-radius: 8px;
+                margin: 10px;
+                padding: 8px 16px;
+                color: #666666;
+                font-size: 16px;
+                background: #f7f9fc;
+                color: #999;
+
+                &.active {
+                  color: #fff;
+                  background: #3f8dfd;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      .course-list {
+        &__header {
+          margin-top: 32px;
+          .sort-list {
+            display: flex;
+            align-items: center;
+            &__item {
+              cursor: pointer;
+              width: 96px;
+              height: 32px;
+              border-radius: 16px;
+              background: #ffffff;
+              border: 1px solid #bfbfbf;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 30px;
+              font-size: 16px;
+              margin-right: 20px;
+
+              &.active {
+                background: #ebf2fc;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .course-item {
+              float: left;
+            }
+          }
+        }
+
+        &__footer {
+          overflow: hidden;
+          .btn {
+            cursor: pointer;
+            width: 146px;
+            height: 40px;
+            background: #e3eaf7;
+            border-radius: 8px;
+            margin: 20px auto 40px;
+            color: #3f8dfd;
+            text-align: center;
+            line-height: 40px;
+
+            &:hover {
+              color: #fff;
+              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
+              background: #3f8dfd;
+            }
+          }
+        }
+      }
+
+      .pagination {
+        padding: 30px 0;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

+ 260 - 0
src/pages/living-room/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="living-room">
+    <Header></Header>
+    <div class="container">
+      <div ref="living" id="living" class="living">
+        <div
+          :style="
+            changeState
+              ? { left: 0, top: 0, width: 600 + 'px', height: 600 + 'px' }
+              : {}
+          "
+          id="ppt"
+          ref="ppt"
+          class="ppt"
+        ></div>
+        <div
+          :style="
+            changeState
+              ? {
+                  left: 600 + 'px',
+                  top: 0,
+                  width: 300 + 'px',
+                  height: 200 + 'px',
+                }
+              : {}
+          "
+          id="player"
+          ref="player"
+          class="player"
+        ></div>
+        <div ref="wrap" id="wrap"></div>
+        <div class="controller" ref="controller"></div>
+      </div>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapGetters, mapMutations } from "vuex";
+import "@/assets/css/chatroom.css";
+
+export default {
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {
+      playerJs: "https://player.polyv.net/livesdk/polyv-live.min.js",
+      chatroomJs: "https://player.polyv.net/jssdk/polyv-chatroom.min.js",
+      uidzb: "egsxlptzdq",
+      channelId: "",
+      appId: "",
+      sign: "",
+      timestamp: "",
+      mediaChannelKey: "",
+      changeState: false,
+      liveSdk: null,
+      token: "",
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  mounted() {
+    this.channelId = this.$route.params.channelId;
+    this.playVideo();
+  },
+  beforeDestroy() {},
+  methods: {
+    ...mapMutations(["getCartCount"]),
+
+    polyvLivesign() {
+      console.log(this.channelId);
+      this.$request
+        .polyvLivesign({
+          channelId: this.channelId,
+        })
+        .then((res) => {
+          this.sign = res.data.sign;
+          this.token = res.data.token;
+          this.mediaChannelKey = res.data.mediaChannelKey;
+          this.timestamp = res.data.timestamp;
+          this.appId = res.data.appId;
+
+          this.loadPlayerzb();
+        });
+    },
+
+    async playVideo() {
+      await this.loadPlayerScriptzb();
+      await this.loadChatroomScriptzb();
+      console.log(this.userInfo);
+      this.polyvLivesign();
+    },
+
+    loadPlayerzb() {
+      var chatroom = new PolyvChatRoom({
+        //实例聊天室SDK
+        roomId: this.channelId,
+        userId: this.userInfo.userAccount,
+        nick: this.userInfo.realname,
+        accountId: this.userInfo.userAccount,
+        pic:
+          this.$tools.splitImgHost(this.userInfo.avatar, true) ||
+          "http://livestatic.videocc.net/assets/wimages/missing_face.png",
+        container: "#wrap",
+        userType: "slice",
+        version: "2.0",
+        showUserList: false,
+        width: 300,
+        height: 400,
+        token: this.token,
+        mediaChannelKey: this.mediaChannelKey,
+        roomMessage: (data) => {
+          // data为聊天室socket消息,当有聊天室消息时会触发此方法
+          if (this.liveSdk && this.liveSdk.player) {
+            console.log(data.content);
+            this.liveSdk.player.sendBarrage(data.content);
+          }
+        },
+      });
+
+      var liveSdk = new PolyvLiveSdk({
+        //实例直播SDK
+        channelId: this.channelId,
+        appId: this.appId,
+        sign: this.sign,
+        timestamp: this.timestamp,
+        socket: chatroom.chat.socket, //传入聊天室的socket
+        user: {
+          userId: this.userInfo.userAccount,
+          userName: this.userInfo.realname,
+          pic:
+            this.$tools.splitImgHost(this.userInfo.avatar, true) ||
+            "http://livestatic.videocc.net/assets/wimages/missing_face.png",
+        },
+      });
+
+      this.liveSdk = liveSdk;
+
+      // 第四步:监听频道信息读取完成事件,初始化播放器
+      liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
+        liveSdk.setupPlayer({
+          pptEl: "#ppt",
+          el: "#player",
+          type: "auto",
+          switchPlayer: true,
+          controllerPosition: "ppt",
+          pptNavBottom: "180px",
+          controllerPosition: "player",
+          fixedController: true,
+          barrage: true,
+          defaultBarrageStatus: true,
+          controllerEl: this.$refs.controller,
+          fullscreenEl: this.$refs.ppt,
+          autoplay: true, // 设置自动播放
+        });
+
+        liveSdk.player.on("switchPlayer", () => {
+          this.changeState = !this.changeState;
+          if (this.changeState) {
+            liveSdk.player.setFullscreenEl(this.$refs.ppt);
+          } else {
+            liveSdk.player.setFullscreenEl(this.$refs.player);
+          }
+        });
+
+        liveSdk.player.on("switchMainScreen", (main) => {
+          console.log("切换主讲位置,当前主屏为", main); // 'player'|'ppt'
+        });
+      });
+    },
+    /**
+     * @param {String} 直播js加载
+     */
+    loadChatroomScriptzb() {
+      return new Promise((resolve) => {
+        if (!window.polyvLivePlayer) {
+          const myScript = document.createElement("script");
+          myScript.setAttribute("src", this.chatroomJs);
+          document.body.appendChild(myScript);
+          myScript.onload = resolve;
+        } else {
+          resolve();
+        }
+      });
+    },
+    /**
+     * @param {String} 聊天室js加载
+     */
+    loadPlayerScriptzb() {
+      return new Promise((resolve) => {
+        if (!window.polyvLivePlayer) {
+          const myScript = document.createElement("script");
+          myScript.setAttribute("src", this.playerJs);
+          document.body.appendChild(myScript);
+          myScript.onload = resolve;
+        } else {
+          resolve();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.living-room {
+  background: #eee;
+  .living {
+    position: relative;
+    width: 900px;
+    height: 600px;
+    margin: 0 auto;
+
+    #wrap {
+      position: absolute;
+      width: 300px;
+      height: 400px;
+      left: 600px;
+      top: 200px;
+
+      /deep/ .polyv-cr-head {
+        background: #ccc;
+      }
+    }
+
+    #ppt {
+      position: absolute;
+      left: 600px;
+      top: 0;
+      width: 300px;
+      height: 200px;
+    }
+
+    #player {
+      position: absolute;
+      width: 600px;
+      height: 600px;
+      left: 0;
+      top: 0;
+    }
+
+    .controller {
+      position: absolute;
+      width: 600px;
+      height: 48px;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+</style>

+ 113 - 0
src/pages/mock-countdown/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="mock-countdown">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/index' }"
+              >首页</el-breadcrumb-item
+            >
+            <el-breadcrumb-item :to="{ path: '/person-center/my-mock' }"
+              >我的模考</el-breadcrumb-item
+            >
+            <el-breadcrumb-item>模考</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+
+        <div class="title">距离管理开考还有</div>
+        <div class="countdown">
+          <div class="box">08</div>
+          <span class="pin">:</span>
+          <div class="box">56</div>
+        </div>
+
+        <el-button class="btn" type="primary">开始考试</el-button>
+      </div>
+    </section>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapGetters } from "vuex";
+export default {
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.mock-countdown {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+    .title {
+      margin-top: 80px;
+      text-align: center;
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    .countdown {
+      margin: 15px auto 0;
+      width: 663px;
+      height: 253px;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+      background: rgb(247, 249, 252);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .box {
+        margin: 0 70px;
+        width: 171px;
+        height: 151px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 96px;
+        color: #3f8dfd;
+        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+        background: #fff;
+        border-radius: 10px;
+      }
+
+      .pin {
+        font-size: 96px;
+        color: #3f8dfd;
+      }
+    }
+
+    .btn {
+      display: block;
+      margin: 40px auto 100px;
+      width: 300px;
+      height: 40px;
+      border-radius: 20px;
+      padding: 0;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+}
+</style>

+ 282 - 0
src/pages/mock-report/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="mock-countdown">
+    <Header></Header>
+    <section class="section">
+      <div class="container">
+        <div class="section__header">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/index' }"
+              >首页</el-breadcrumb-item
+            >
+            <el-breadcrumb-item :to="{ path: '/person-center/my-mock' }"
+              >我的模考</el-breadcrumb-item
+            >
+            <el-breadcrumb-item>模考</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+
+        <div class="section__body">
+          <div class="notice">
+            <div class="text">
+              模考讲解直播将在2022年4月20日20:00开始,开启模考讲解直播提醒,不错过每一个考点
+            </div>
+            <el-button type="primary" class="btn"
+              >开启模考讲解直播提醒</el-button
+            >
+          </div>
+
+          <div class="box-list clearfix">
+            <div class="item">
+              <div class="title">
+                正确率统计
+                <span class="note">(不含简答/案例题)</span>
+              </div>
+
+              <div class="desc">100%</div>
+
+              <div class="footer">
+                <div class="footer__item">
+                  <div class="num">1</div>
+                  <div class="text">正确题数</div>
+                </div>
+                <div class="footer__item">
+                  <div class="num num--yellow">1</div>
+                  <div class="text">少选题数</div>
+                </div>
+                <div class="footer__item">
+                  <div class="num num--red">1</div>
+                  <div class="text">错误题数</div>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">答题时长</div>
+              <div class="content">
+                <el-progress
+                  :stroke-width="10"
+                  color="#3F8DFD"
+                  type="circle"
+                  :width="160"
+                  :show-text="false"
+                  :percentage="25"
+                ></el-progress>
+                <div class="text">
+                  <div class="num">
+                    12<span class="small">分</span>50<span class="small"
+                      >秒</span
+                    >
+                  </div>
+                  <div class="note">总时间:180分</div>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                试卷得分
+                <span class="note">(不含简答/案例题)</span>
+              </div>
+              <div class="content">
+                <el-progress
+                  color="#32D74B"
+                  type="circle"
+                  :width="160"
+                  :show-text="false"
+                  :stroke-width="10"
+                  :percentage="25"
+                ></el-progress>
+                <div class="text">
+                  <div class="num num--green">50</div>
+                  <div class="note">得分</div>
+                </div>
+              </div>
+            </div>
+            <div class="item">
+              <div class="title">
+                试卷得分
+                <span class="note">(含简答/案例题)</span>
+              </div>
+              <div class="content">
+                <el-progress
+                  color="#32D74B"
+                  type="circle"
+                  :width="160"
+                  :show-text="false"
+                  :stroke-width="10"
+                  :percentage="25"
+                ></el-progress>
+                <div class="text">
+                  <div class="num num--green">50</div>
+                  <div class="note">得分</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import { mapGetters } from "vuex";
+export default {
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.mock-countdown {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      .notice {
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+        height: 72px;
+        background: #f7f9fc;
+
+        .text {
+          flex: 1;
+        }
+
+        .btn {
+          width: 200px;
+          height: 32px;
+          padding: 0;
+          text-align: center;
+          line-height: 32px;
+          border-radius: 16px;
+        }
+      }
+
+      .box-list {
+        width: 640px;
+        margin: 20px auto 100px;
+        .item {
+          margin: 8px 10px;
+          float: left;
+          width: 300px;
+          height: 240px;
+          background: #ffffff;
+          border: 1px solid #d9d9d9;
+          border-radius: 8px;
+          display: flex;
+          flex-direction: column;
+
+          .title {
+            padding: 16px;
+            font-size: 14px;
+            color: #333333;
+
+            .note {
+              color: #999;
+            }
+          }
+
+          .desc {
+            text-align: center;
+            font-size: 48px;
+            color: #333333;
+          }
+
+          .content {
+            position: relative;
+            margin: 10px auto 0;
+            width: 160px;
+            height: 160px;
+
+            .text {
+              position: absolute;
+              left: 50%;
+              top: 50%;
+              transform: translate3d(-50%, -50%, 0);
+              text-align: center;
+              .num {
+                width: 120px;
+                font-size: 32px;
+                color: #3f8dfd;
+                line-height: 24px;
+
+                &--green {
+                  color: rgb(50, 215, 75);
+                }
+              }
+
+              .note {
+                margin-top: 10px;
+                font-size: 14px;
+                color: #999999;
+              }
+            }
+          }
+
+          .footer {
+            margin-top: 16px;
+            flex: 1;
+            border-top: 1px solid #d9d9d9;
+            display: flex;
+
+            &__item {
+              text-align: center;
+              flex: 1;
+              border-right: 1px solid #d9d9d9;
+
+              &:nth-last-of-type(1) {
+                border: 0;
+              }
+
+              .num {
+                margin-top: 20px;
+                font-size: 36px;
+                font-weight: 400;
+                color: #32d74b;
+                text-align: center;
+
+                .small {
+                  font-size: 16px;
+                }
+
+                &--yellow {
+                  color: #ffc53d;
+                }
+
+                &--red {
+                  color: #f5222d;
+                }
+              }
+
+              .text {
+                margin-top: 10px;
+                font-size: 14px;
+                color: #666666;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 3 - 0
src/pages/person-center/index.vue

@@ -70,6 +70,9 @@
                 <router-link to="/person-center/my-examination">
                   <div class="item">我的考试</div>
                 </router-link>
+                <router-link to="/person-center/my-mock">
+                  <div class="item">我的模考</div>
+                </router-link>
                 <router-link to="/person-center/my-message">
                   <div class="item">我的消息</div>
                 </router-link>

+ 964 - 0
src/pages/person-center/my-mock/index.vue

@@ -0,0 +1,964 @@
+<template>
+  <div class="my-order">
+    <div class="my-order__header">
+      <el-tabs :value="activeName" @tab-click="tabChange">
+        <el-tab-pane
+          v-for="(tab, tabIndex) in list"
+          :key="tabIndex"
+          :name="tab.name"
+        >
+          <span slot="label" class="label">{{
+            tab.count ? `${tab.label}(${tab.count})` : `${tab.label}`
+          }}</span>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="my-order__body">
+      <template v-if="activeName == '1'">
+        <div class="mock-list">
+          <div class="mock-list__header">
+            <div class="tabs">
+              <div
+                class="tab"
+                :class="{ active: state == 0 }"
+                @click="stateChange(0)"
+              >
+                未考试
+              </div>
+              <div
+                class="tab"
+                :class="{ active: state == 1 }"
+                @click="stateChange(1)"
+              >
+                已结束
+              </div>
+            </div>
+          </div>
+          <div class="mock-list__body">
+            <div class="selects">
+              <div class="item clearfix">
+                <div class="text">考试时间</div>
+                <div class="select">
+                  <el-date-picker
+                    value-format="yyyy-MM-dd"
+                    v-model="date"
+                    type="daterange"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+              <div class="item clearfix">
+                <div class="text">考试标题</div>
+                <div class="select">
+                  <el-select placeholder="请选择" v-model="title">
+                    <el-option
+                      v-for="item in 5"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+
+            <div class="list">
+              <div class="mock-item" v-for="item in 4" :key="item">
+                <template v-if="state == 0">
+                  <div class="mock-item__header">
+                    <div class="title">2022年考前一建模拟考试</div>
+                    <div class="time">2022/4/15 9:30:00</div>
+                  </div>
+
+                  <div class="mock-item__body">
+                    <div class="content">
+                      <div class="item">
+                        <span class="item__left">项目:</span>
+                        <span class="item__right">一级建造师</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">专业:</span>
+                        <span class="item__right">市政专业</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">科目:</span>
+                        <span class="item__right">建设工程经济</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">考试时间:</span>
+                        <span class="item__right">
+                          2022年4月15日(周五)9:00-10:00
+                        </span>
+                      </div>
+                    </div>
+                    <div class="btn-wrap">
+                      <div class="btn-item" v-if="item % 2 == 0">
+                        <el-button class="btn" disabled type="primary"
+                          >去考试</el-button
+                        >
+
+                        <div class="text">考试未开始</div>
+                      </div>
+                      <div class="btn-item" v-else>
+                        <el-button
+                          class="btn"
+                          @click="go('/mock-countdown')"
+                          type="primary"
+                          >去考试</el-button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
+                <template v-if="state == 1">
+                  <div class="mock-item__header">
+                    <div class="title">2022年考前一建模拟考试</div>
+                    <div class="time">2022/4/15 9:30:00</div>
+                  </div>
+
+                  <div class="mock-item__body">
+                    <div class="content">
+                      <div class="item">
+                        <span class="item__left">项目:</span>
+                        <span class="item__right">一级建造师</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">专业:</span>
+                        <span class="item__right">市政专业</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">科目:</span>
+                        <span class="item__right">建设工程经济</span>
+                      </div>
+                      <div class="item">
+                        <span class="item__left">考试时间:</span>
+                        <span class="item__right">
+                          2022年4月15日(周五)9:00-10:00
+                        </span>
+                      </div>
+                    </div>
+                    <div class="btn-wrap btn-wrap--over">
+                      <template v-if="item % 2 == 0">
+                        <div class="btn-item">
+                          <el-button class="btn" plain type="primary"
+                            >错题解析</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" plain type="primary"
+                            >全部解析</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" plain type="primary"
+                            >重新刷题</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" plain type="primary"
+                            >查看报告</el-button
+                          >
+
+                          <div class="text">人工阅卷后显示完整报告</div>
+                        </div>
+                      </template>
+
+                      <template v-else>
+                        <div class="btn-item">
+                          <el-button class="btn" disabled plain type="primary"
+                            >错题解析</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" disabled plain type="primary"
+                            >全部解析</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" disabled plain type="primary"
+                            >重新刷题</el-button
+                          >
+                        </div>
+                        <div class="btn-item">
+                          <el-button class="btn" disabled plain type="primary"
+                            >查看报告</el-button
+                          >
+                        </div>
+                      </template>
+                    </div>
+                  </div>
+                  <div class="mock-item__footer">
+                    <div class="text">
+                      模考讲解直播时间:2022年4月28日 20:00-21:00
+                    </div>
+                    <el-button class="btn" type="primary" plain
+                      >去查看</el-button
+                    >
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <div class="pagination">
+              <el-pagination
+                @current-change="currentChange"
+                background
+                layout="prev, pager, next"
+                :total="total"
+                :pager-count="5"
+                :page-size="formData.pageSize"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeName == '2'">
+        <div class="mock-list">
+          <div class="mock-list__body">
+            <div class="selects">
+              <div class="item clearfix">
+                <div class="text">业务层次</div>
+                <div class="select">
+                  <el-select
+                    placeholder="请选择"
+                    clearable
+                    @change="businessChange"
+                    v-model="appointParam.businessId"
+                  >
+                    <el-option
+                      v-for="(item, index) in businesslist"
+                      :key="index"
+                      :label="item.businessName + item.projectName"
+                      :value="item.businessId"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+
+              <div class="item clearfix">
+                <div class="text">专业</div>
+                <div class="select">
+                  <el-select
+                    placeholder="请选择"
+                    @change="subjectChange"
+                    v-model="appointParam.subjectId"
+                  >
+                    <el-option
+                      v-for="(item, index) in sList"
+                      :key="index"
+                      :label="item.subjectName"
+                      :value="item.id"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div class="item clearfix">
+                <div class="text">考试时间</div>
+                <div class="select">
+                  <el-date-picker
+                    @change="mockApplyListApply"
+                    value-format="yyyy-MM-dd"
+                    v-model="appointParam.dateRange"
+                    type="daterange"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+            </div>
+
+            <div class="list">
+              <div
+                class="mock-item"
+                v-for="(item, mockIndex) in mockList"
+                :key="mockIndex"
+              >
+                <div class="mock-item__header">
+                  <div class="title">{{ item.applyName }}</div>
+                  <!-- <div class="time">{{$tools.timestampToTime(item.examTime)}}</div> -->
+                </div>
+
+                <div class="mock-item__body">
+                  <div class="content">
+                    <div class="item">
+                      <span class="item__left">项目:</span>
+                      <span class="item__right"
+                        >{{ item.businessName }} {{ item.projectName }}</span
+                      >
+                    </div>
+                    <div class="item">
+                      <span class="item__left">专业:</span>
+                      <span class="item__right">{{ item.subjectName }}</span>
+                    </div>
+                    <!-- <div class="item">
+                      <span class="item__left">科目:</span>
+                      <span class="item__right">建设工程经济</span>
+                    </div> -->
+                    <div class="item">
+                      <span class="item__left">考试时间:</span>
+                      <span class="item__right">
+                        {{ $tools.timestampToTime(item.examTime) }}
+                        {{ item.startTime }} - {{ item.endTime }}
+                      </span>
+                    </div>
+                  </div>
+                  <div class="btn-wrap">
+                    <div class="btn-item">
+                      <el-button class="btn" type="primary" plain
+                        >已预约</el-button
+                      >
+                    </div>
+                    <div class="btn-item">
+                      <el-button
+                        class="btn"
+                        type="primary"
+                        plain
+                        :disabled="!canApply(item)"
+                        @click="appoint(item)"
+                        >预约考试</el-button
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pagination">
+              <el-pagination
+                @current-change="currentChange"
+                background
+                layout="prev, pager, next"
+                :total="appointParam.total"
+                :pager-count="5"
+                :page-size="appointParam.pageSize"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeName == '3'">
+        <div class="mock-list">
+          <div class="mock-list__body">
+            <div class="selects">
+              <div class="item clearfix">
+                <div class="text">考试时间</div>
+                <div class="select">
+                  <el-date-picker
+                    value-format="yyyy-MM-dd"
+                    v-model="date"
+                    type="daterange"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+              <div class="item clearfix">
+                <div class="text">考试标题</div>
+                <div class="select">
+                  <el-select placeholder="请选择" v-model="title">
+                    <el-option
+                      v-for="item in 5"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+
+            <div class="live-list">
+              <div class="live-item" v-for="item in 5" :key="item">
+                <div class="live-item__header">
+                  <img src="@/assets/pic.png" alt="" class="img" />
+                  <div
+                    class="note"
+                    :class="{
+                      'note--blue': item == 1,
+                      'note--green': item == 2,
+                      'note--gray': item == 3,
+                    }"
+                  >
+                    <img v-if="item == 1" src="@/assets/play.png" alt="" />
+                    <img v-if="item == 2" src="@/assets/living.png" alt="" />
+                    <img v-if="item == 3" src="@/assets/wait.png" alt="" />
+                    直播中
+                  </div>
+                </div>
+                <div class="live-item__body">
+                  <div class="title">二建模考-法律讲解直播</div>
+                  <div class="desc">直播时间:2022/4/15 20:00-21:00</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pagination">
+              <el-pagination
+                @current-change="currentChange"
+                background
+                layout="prev, pager, next"
+                :total="total"
+                :pager-count="5"
+                :page-size="formData.pageSize"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <el-dialog :visible.sync="appointModal" width="462px" class="appoint-modal">
+      <div class="appoint-modal__content">
+        <img class="img" src="@/assets/appoinsuccess.png" alt="" />
+        <div class="title">预约成功</div>
+        <div class="content">
+          您预约的模拟考试,安排如下:
+          <div class="item">
+            <span class="item__left">模考场次:</span>
+            <span class="item__right">2022年考前一建模拟考试 </span>
+          </div>
+          <div class="item">
+            <span class="item__left">项目:</span>
+            <span class="item__right">一级建造师 </span>
+          </div>
+          <div class="item">
+            <span class="item__left">专业:</span>
+            <span class="item__right">市政专业 </span>
+          </div>
+          <div class="item">
+            <span class="item__left">科目:</span>
+            <span class="item__right">建设工程经济 </span>
+          </div>
+          <div class="item">
+            <span class="item__left">考试时间:</span>
+            <span class="item__right">2022年4月15日(周五)9:00-10:00 </span>
+          </div>
+          请准时参加考试哦~
+
+          <el-button class="btn" type="primary" @click="ok">我知道了</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+export default {
+  name: "MyOrder",
+  data() {
+    return {
+      appointModal: false,
+      appointParam: {
+        dateRange: "",
+        pageNum: 1,
+        pageSize: 10,
+        businessId: "",
+        subjectId: "",
+      },
+      total: 1,
+      title: 0,
+      orderList: [],
+      mockList: [],
+      sList: [],
+      businesslist: [],
+      activeName: "1",
+      formData: {
+        status: "0,1",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      date: "",
+      state: 0,
+      nowTime: 0,
+      list: [
+        {
+          label: "模拟考试",
+          count: 0,
+          name: "1",
+        },
+        {
+          label: "考试预约",
+          count: 0,
+          name: "2",
+        },
+        {
+          label: "讲解直播",
+          count: 0,
+          name: "3",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.nowTime = +this.$tools.timest();
+  },
+  methods: {
+    appoint() {},
+    canApply(item) {
+      let startTime = this.$tools.TimeTotimestamp(
+        this.$tools.timestampToTime(item.examTime) + " " + item.startTime
+      );
+      let endTime = this.$tools.TimeTotimestamp(
+        this.$tools.timestampToTime(item.examTime) + " " + item.endTime
+      );
+      if (this.nowTime >= startTime && this.nowTime <= endTime) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    async businessChange(e) {
+      let projectId = this.businesslist.find(
+        (item) => item.businessId == e
+      ).projectId;
+      await this.subjectList({
+        businessId: this.appointParam.businessId,
+        projectId: projectId,
+      });
+      this.mockApplyListApply();
+    },
+    subjectChange(e) {
+      this.mockApplyListApply();
+    },
+    ok() {
+      this.appointModal = false;
+      this.$confirm(`开考前10分钟提醒入场,不错过实战机会`, "开考提醒", {
+        confirmButtonText: "立即开启",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        distinguishCancelAndClose: false,
+        showClose: true,
+      })
+        .then((_) => {
+          console.log("开启");
+        })
+        .catch((_) => {});
+    },
+    mockApplyListApplyBusiness() {
+      return new Promise((resolve) => {
+        this.$request.mockApplyListApplyBusiness().then(async (res) => {
+          this.businesslist = res.rows;
+          this.appointParam.businessId = this.businesslist[0].businessId;
+          await this.subjectList({
+            businessId: res.rows[0].businessId,
+            projectId: res.rows[0].projectId,
+          });
+          resolve();
+        });
+      });
+    },
+    subjectList(data) {
+      return new Promise((resolve) => {
+        let self = this;
+        this.$request.subjectList(data).then((res) => {
+          if (res.code == 200) {
+            self.sList = res.rows;
+            let allItem = { id: "", subjectName: "全部" };
+            self.sList.unshift(allItem);
+            this.appointParam.subjectId = "";
+
+            resolve();
+          }
+        });
+      });
+    },
+    currentChange(e) {
+      this.formData.pageNum = e;
+    },
+    async tabChange(e) {
+      if (this.activeName == e.name) {
+        return;
+      }
+
+      this.formData.pageNum = 1;
+      this.activeName = e.name;
+
+      if (this.activeName == "2") {
+        await this.mockApplyListApplyBusiness();
+
+        this.mockApplyListApply();
+      }
+    },
+
+    mockApplyListApply() {
+      let appointParam = JSON.parse(JSON.stringify(this.appointParam));
+      if (appointParam.dateRange[0]) {
+        appointParam.endTime = this.$tools.TimeTotimestamp(
+          appointParam.dateRange[0]
+        );
+      }
+
+      if (appointParam.dateRange[1]) {
+        appointParam.startTime = this.$tools.TimeTotimestamp(
+          appointParam.dateRange[1]
+        );
+      }
+
+      console.log(appointParam);
+      this.$request.mockApplyListApply(appointParam).then((res) => {
+        this.mockList = res.rows;
+        this.appointParam.total = res.total;
+      });
+    },
+    stateChange(state) {
+      this.state = state;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.my-order {
+  &__header {
+    /deep/ .el-tabs__header {
+      margin-bottom: 0;
+    }
+    .label {
+      padding: 0 30px !important;
+    }
+  }
+  &__body {
+    .mock-list {
+      &__header {
+        .tabs {
+          padding: 14px 0;
+
+          .tab {
+            cursor: pointer;
+            display: inline-block;
+            padding: 0 50px;
+            position: relative;
+            color: #666666;
+
+            &.active {
+              color: #3f8dfd;
+            }
+          }
+        }
+      }
+
+      &__body {
+        .selects {
+          margin-top: 15px;
+          display: flex;
+          .item {
+            flex: 1;
+            padding: 0 10px;
+
+            .text {
+              margin-top: 10px;
+              float: left;
+              width: 60px;
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #666666;
+            }
+
+            .select {
+              margin-left: 60px;
+
+              .el-select,
+              .el-input {
+                width: 100%;
+              }
+            }
+          }
+        }
+
+        .list {
+          margin-top: 20px;
+          .mock-item {
+            margin-top: 20px;
+            border: 1px solid #eeeeee;
+            box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
+            border-radius: 8px;
+            &__header {
+              padding: 0 20px;
+              height: 48px;
+              display: flex;
+              align-items: center;
+
+              .title {
+                flex: 1;
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333333;
+              }
+
+              .time {
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #666666;
+              }
+            }
+
+            &__body {
+              border-top: 1px solid #eee;
+              display: flex;
+              .content {
+                height: 160px;
+                padding: 16px;
+                flex: 1;
+
+                .item {
+                  padding: 4px 0;
+                  &__left {
+                    width: 80px;
+                    display: inline-block;
+                    vertical-align: middle;
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333333;
+                  }
+
+                  &__right {
+                    vertical-align: middle;
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #666666;
+                  }
+                }
+              }
+
+              .btn-wrap {
+                border-left: 1px solid #eee;
+                width: 154px;
+                height: 160px;
+                display: flex;
+                padding-top: 60px;
+                justify-content: center;
+
+                &--over {
+                  width: 568px;
+                }
+
+                .btn-item {
+                  text-align: center;
+                }
+
+                .btn {
+                  width: 122px;
+                  height: 32px;
+                  padding: 0;
+                  line-height: 32px;
+                  border-radius: 16px;
+                  text-align: center;
+                  margin: 0 5px;
+                }
+
+                .text {
+                  text-align: center;
+                  color: #999999;
+
+                  &.red {
+                    color: #f5222d;
+                  }
+                }
+              }
+            }
+
+            &__footer {
+              border-top: 1px solid #eee;
+              height: 64px;
+              padding: 0 20px;
+              display: flex;
+              align-items: center;
+
+              .text {
+                font-size: 16px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #333333;
+                flex: 1;
+              }
+
+              .btn {
+                width: 122px;
+                height: 32px;
+                border-radius: 16px;
+                padding: 0;
+                line-height: 32px;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .live-list {
+      .live-item {
+        cursor: pointer;
+        float: left;
+        margin-top: 86px;
+        margin-right: 24px;
+        width: 240px;
+        height: 140px;
+        background: #ffffff;
+        box-shadow: 0px 3px 6px 0px rgba(213, 218, 224, 0.8);
+        border-radius: 10px;
+        position: relative;
+        padding: 62px 8px 0;
+        &__header {
+          position: absolute;
+          left: 8px;
+          top: -62px;
+          width: 224px;
+          height: 125px;
+          background: #333333;
+          border-radius: 8px;
+
+          .img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .note {
+            width: 80px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            background: #9254de;
+            border-radius: 8px 0px 8px 0px;
+            position: absolute;
+            left: 0;
+            top: 0;
+
+            img {
+              margin-right: 5px;
+            }
+
+            &--blue {
+              background: #3f8dfd;
+            }
+
+            &--green {
+              background: #36cfc9;
+            }
+
+            &--gray {
+              background: #999999;
+            }
+          }
+        }
+
+        &__body {
+          .title {
+            margin-top: 12px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+          }
+
+          .desc {
+            margin-top: 14px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #999999;
+          }
+        }
+      }
+    }
+
+    .no-data {
+      text-align: center;
+      padding: 50px 0;
+      color: #666;
+      font-size: 16px;
+    }
+
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
+    }
+  }
+
+  .appoint-modal {
+    /deep/ .el-dialog__header {
+      display: none;
+    }
+    /deep/ .el-dialog__body {
+      padding: 0;
+      overflow: unset;
+    }
+
+    &__content {
+      height: 452px;
+      position: relative;
+      padding-top: 120px;
+
+      .img {
+        width: 196px;
+        position: absolute;
+        left: 50%;
+        top: -54px;
+        margin-left: -98px;
+      }
+      .title {
+        text-align: center;
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .content {
+        padding: 24px;
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+        line-height: 24px;
+
+        .item {
+          line-height: 30px;
+          &__left {
+            font-size: 16px;
+            color: #333;
+          }
+
+          &__right {
+            font-size: 16px;
+            color: #666;
+          }
+        }
+
+        .btn {
+          display: block;
+          margin: 20px auto;
+          width: 200px;
+          height: 40px;
+          border-radius: 8px;
+          line-height: 40px;
+          padding: 0;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>

+ 2 - 0
src/request.js

@@ -10,12 +10,14 @@ import order from '@/apis/order' //订单模块
 import apply from '@/apis/apply' //考试模块
 import bank from '@/apis/bank' //题库模块
 import profileTp from '@/apis/profileTp'
+import mock from '@/apis/mock'
 
 
 
 
 // 导入对应模块------------------------
 export default {
+    ...mock,
     ...login,
     ...common,
     ...user,

+ 56 - 0
src/router/index.js

@@ -109,6 +109,19 @@ const router =  new Router({
         }
       }
     },
+    
+    {
+      path: '/live-list',
+      name: '直播列表',
+      component: resolve => require(['@/pages/live-list/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-题库-一建二建试题下载_考试科目题库_考题答案_历年试题_在线真题_水平测试_历年真题_在线题库',
+        content: {
+          keywords: '祥粤云学堂-模拟试题练习,试题答案,一级建造师试题查找,二级建造师试题练习,题目类型,考试书籍,考试图书,考试教材',
+          description: '祥粤云学堂-提供一二级建造师学习资料、教材教辅,一二级建造师考试专业培训辅导课程,免费试听,建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料'
+        }
+      }
+    },
     {
       path: '/course-detail/:goodsId',
       name: '课程详情',
@@ -145,6 +158,44 @@ const router =  new Router({
         }
       }
     },
+    {
+      path: '/living-room/:channelId',
+      name: '课程详情',
+      component: resolve => require(['@/pages/living-room/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-一二级建造师、工程师、建筑师视频课程、免费直播课',
+        content: {
+          keywords: '祥粤云学堂-一级建造师视频课件,二级建造师视频课件,建筑师工程师学习视频课程',
+          description: '祥粤云学堂-提供一二级建造师视频学习、免费直播公开课  ,免费试听,建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料。'
+        }
+      }
+    },
+    
+    {
+      path: '/mock-countdown',
+      name: '课程详情',
+      component: resolve => require(['@/pages/mock-countdown/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-一二级建造师、工程师、建筑师视频课程、免费直播课',
+        content: {
+          keywords: '祥粤云学堂-一级建造师视频课件,二级建造师视频课件,建筑师工程师学习视频课程',
+          description: '祥粤云学堂-提供一二级建造师视频学习、免费直播公开课  ,免费试听,建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料。'
+        }
+      }
+    },
+    
+    {
+      path: '/mock-report',
+      name: '课程详情',
+      component: resolve => require(['@/pages/mock-report/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-一二级建造师、工程师、建筑师视频课程、免费直播课',
+        content: {
+          keywords: '祥粤云学堂-一级建造师视频课件,二级建造师视频课件,建筑师工程师学习视频课程',
+          description: '祥粤云学堂-提供一二级建造师视频学习、免费直播公开课  ,免费试听,建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料。'
+        }
+      }
+    },
     {
       path: '/course-report',
       name: '试卷报告',
@@ -419,6 +470,11 @@ const router =  new Router({
           component: resolve => require(['@/pages/person-center/my-examination/index'],resolve),
           name: '我的考试'
         },
+        {
+          path: 'my-mock',
+          component: resolve => require(['@/pages/person-center/my-mock/index'],resolve),
+          name: '我的模考'
+        },
         {
           path: 'my-message',
           component: resolve => require(['@/pages/person-center/my-message/index'],resolve),

Некоторые файлы не были показаны из-за большого количества измененных файлов