saas_miniprogram/pages3/polyv/detail.vue

<template>
  <view class="polyv_detail">
    <uni-nav-bar
      left-icon="back"
      :statusBar="true"
      fixed="true"
      :title="detail.courseName || '课程详情'"
      @clickLeft="clickLeft"
    ></uni-nav-bar>
    <view id="top">
      <view class="video_box" v-if="!startStatus">
        <image
          :src="$method.splitImgHost(goodsData.coverUrl)"
          mode="widthFix"
          style="width: 100%; height: 421rpx"
        ></image>
      </view>
      <view v-else>
        <my-player
          ref="player"
          :playVid="playVID"
          :autoplay="autoplay"
          :allowSeek="isAllowSeek"
          :playbackRate="playbackRate"
          :videoCurrentTime="recordObj.videoCurrentTime || 0"
          @playing="playing"
          @pause="pause"
          @ended="ended"
          @loadedmetadata="loadedmetadata"
          @timeupdate="timeupdate"
          @playerError="playerError"
        ></my-player>
      </view>
      <view class="course_name">
        <view class="course_titles">
          <view class="video_t1" :class="{ one: !goodsData.buyNote }">{{
            detail.courseName
          }}</view>
          <view class="notice_wrap" v-if="goodsData.buyNote">
            <view class="video_t1_t" @click="studyNotice"> 学员须知 </view>
          </view>
          <view
            class="toggle_course"
            v-if="goodsTeacher.length > 1"
            @click="changeCourses()"
          >
            <image
              class="img"
              src="/pages3/static/imgs/toggle.png"
              mode="widthFix"
            ></image>
            <view class="toggle_name">切换课程</view>
            <!-- courseTotal -->
            <view class="numbers">共{{ goodsTeacher.length }}门</view>
          </view>
        </view>
      </view>
      <u-line color="#D6D6DB" />
      <view>
        <view>
          <u-tabs
            :item-width="itemWidth()"
            :list="list"
            font-size="32"
            bar-width="24"
            :current="current"
            @change="change"
            active-color="#007AFF"
          ></u-tabs>
        </view>
      </view>
      <u-line color="#D6D6DB" />
    </view>
    <view class="box" :class="{ first_ml: current == 0 }">
      <scroll-view class="box_in" scroll-y="true">
        <!--目录 -->
        <view v-show="current == 0">
          <view
            class="top__header"
            v-if="livingItem"
            @click="goLive(livingItem)"
          >
            <image
              class="img"
              src="/pages3/static/imgs/live.png"
              mode="widthFix"
            ></image>
            <view class="note">正在直播中</view>
            <view class="title">{{ livingItem.sectionName }}</view>
          </view>
          <course-tree
            v-if="sectionItem.id || sectionItem.sectionId"
            :orderGoodsId="orderGoodsId"
            :sectionMaxNum="goodsData.sectionMaxNum"
            :courseId="courseId"
            :learningOrder="orderNum"
            :goodsId="goodsId"
            :gradeId="gradeId"
            :isRebuild="false"
            :isBuy="true"
            :goodsType="1"
            :menuAllList="menuAllList"
            :sectionItem="sectionItem"
          ></course-tree>
        </view>
        <!--讲义 -->
        <view v-show="current == 1">
          <handouts-box
            :handoutsId="goodsData.handoutsId"
            v-if="goodsData.handoutsId"
          ></handouts-box>
        </view>
        <!--笔记 -->
        <view v-if="current == 2">
          <note-Box
            :isPlayRebuild="sectionItem.rebuild"
            :refPlv="refPlv"
            @jumpNote="jumpNote"
            :params="params()"
          ></note-Box>
        </view>
        <!--答疑 -->
        <view v-show="current == 3">
          <answer-box
            :userId="userInfo ? userInfo.userId : 0"
            :params="params(['orderGoodsId', 'goodsId', 'courseId', 'gradeId'])"
          ></answer-box>
        </view>
        <!--目录 -->
        <view v-show="current == 4">
          <view
            class="menuBox"
            v-for="(item, index) in reMenuList"
            :key="index"
          >
            <!--模块 -->
            <view v-if="item.type == 1"
              ><courseModule
                :orderGoodsId="orderGoodsId"
                :sectionMaxNum="goodsData.sectionMaxNum"
                :courseId="courseId"
                :learningOrder="orderNum"
                :goodsId="goodsId"
                :gradeId="gradeId"
                :isRebuild="true"
                :isBuy="true"
                :menuItem="item"
                :levelId="item.menuId"
                :goodsType="1"
                :menuAllList="menuAllList"
                :sectionItem="sectionItem"
              ></courseModule
            ></view>
            <!--章 -->
            <view v-if="item.type == 2">
              <courseChapter
                :orderGoodsId="orderGoodsId"
                :courseId="courseId"
                :learningOrder="orderNum"
                :sectionMaxNum="goodsData.sectionMaxNum"
                @playEnd="sectionPlayEnd($event, index)"
                :gradeId="gradeId"
                :goodsId="goodsId"
                :isRebuild="true"
                :isBuy="true"
                :menuItem="item"
                :levelId="'0-' + item.menuId"
                :goodsType="1"
                :menuAllList="menuAllList"
              ></courseChapter>
            </view>
            <!--节 -->
            <view v-if="item.type == 3">
              <courseSection
                :orderGoodsId="orderGoodsId"
                :courseId="courseId"
                :learningOrder="orderNum"
                :sectionMaxNum="goodsData.sectionMaxNum"
                @playEnd="sectionPlayEnd($event, index)"
                :gradeId="gradeId"
                :goodsId="goodsId"
                :isRebuild="true"
                :isBuy="true"
                :nextMenuItem="findMenuNextSection(index)"
                :menuItem="item"
                :levelId="'0-0-' + item.menuId"
                :goodsType="1"
                :testType="3"
                :menuAllList="menuAllList"
              ></courseSection>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-popup
      v-model="noticeShow"
      class="notice_modal"
      mode="center"
      border-radius="28"
      width="650rpx"
      height="622rpx"
      :mask-close-able="false"
      @close="closeNotice"
    >
      <view class="content">
        <view class="title">学员须知</view>
        <scroll-view scroll-y="true">
          <view
            class="text"
            v-html="
              goodsData.buyNote && goodsData.buyNote.replace(/\n|\r\n/g, '<br>')
            "
          >
          </view>
        </scroll-view>
        <view
          class="had_read"
          :class="{ gray: CountTo >= 0 }"
          @click="noticeConfirm()"
        >
          <text v-if="CountTo >= 0">请阅读学员须知，30s后可关闭</text>
          <text v-else>我已阅读学员须知</text>
          <text v-if="CountTo >= 0">{{ " " + CountTo + "s" }}</text>
        </view>
      </view>
    </u-popup>
    <!-- 倒计时提交 -->
    <u-popup
      v-model="noticeShow1"
      class="notice_modal"
      mode="center"
      border-radius="28"
      width="650rpx"
      height="262rpx"
      :mask-close-able="false"
    >
      <view class="content">
        <view class="title">提示</view>
        <view class="had_read">
          <text v-if="CountTo1 >= 0">视频学习时长不达标，请等待</text>
          <text v-if="CountTo1 >= 0">{{ " " + CountTo1 + "s" }}</text>
        </view>
      </view>
    </u-popup>
    <u-modal
      v-model="showMark"
      title="提示"
      @confirm="markConfirm"
      @cancel="toBack"
      confirm-text="复制学习网址"
      :show-cancel-button="true"
      cancel-text="关闭"
    >
      <view class="slot-content">
        <view>您的学习账号已经开通，请按照步骤操作，进行学习。</view>
        <view>1.复制学习地址:{{ markContent }}</view>
        <view>2.在【浏览器中】打开复制的学习网址</view>
        <view>3.打开学习网址后，选择【个人用户】进行登录</view>
        <view>(1)账号：您个人的身份证号码</view>
        <view>(2)密码：身份证号码，再加111111</view>
      </view>
    </u-modal>

    <!-- 切换课程弹窗 -->
    <u-popup
      v-model="toggleCourseShow"
      mode="bottom"
      border-radius="40"
      :mask-close-able="false"
    >
      <view class="popup_box">
        <view class="check_head">
          <view class="headers">
            <view class="grade">切换课程</view>
            <u-icon
              name="close"
              color="#9C9C9C"
              size="40"
              @click="closePop()"
            ></u-icon>
          </view>
          <view class="coruse_num">共{{ goodsTeacher.length }}门</view>
          <view class="menuSel">
            <scroll-view class="sub_sliper" scroll-x="true">
              <view
                v-for="(item, index) in subList"
                :key="index"
                style="margin-right: 50rpx; display: inline-block"
              >
                <view
                  class="r_t1"
                  :class="{ nactive: subIndex == index }"
                  @click="cMenu(item, index)"
                >
                  {{ item.subjectName }}
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="check_con">
          <scroll-view scroll-y="true" style="height: 700rpx">
            <view v-for="(courseItem, gTindex) in goodsTeacher" :key="gTindex">
              <view
                v-for="(item, index) in courseItem.courseList"
                :key="index"
                v-show="
                  item.subjectId === newActiveSubjectId || !newActiveSubjectId
                "
              >
                <view class="course_items" v-if="item.show && item.show == 1">
                  <view class="course_lefts">
                    <view class="course_title">
                      {{ item.courseName }}
                    </view>
                    <view
                      v-if="courseItem.teaList && courseItem.teaList.length > 0"
                      class="teacher_names"
                    >
                      <view
                        v-for="(tea, tindex) in courseItem.teaList"
                        :key="tindex"
                        class="names"
                        >{{ tea.aliasName }}</view
                      >
                    </view>
                    <view class="course_pros">
                      学习进度
                      <text>
                        {{ item.stuAllNum + item.recordNum }}/{{
                          item.secAllNum + item.examNum
                        }}</text
                      >
                    </view>
                  </view>
                  <view
                    class="course_rights"
                    @click="jump(item, gTindex, 'jump')"
                  >
                    <view class="cicles">
                      <u-icon
                        name="arrow-right"
                        color="#498AFE"
                        size="20"
                      ></u-icon>
                    </view>
                    <view class="intoStudy">进入学习</view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <!-- 摄像头 -->
    <Popup-camera :goodsId="goodsId" ref="camera"></Popup-camera>
  </view>
</template>

<script>
import plv from "../static/polyv-sdk/index";
import courseModule from "@/components/course/courseModule.vue";
import courseChapter from "@/components/course/courseChapter.vue";
import courseSection from "@/components/course/courseSection.vue";
import handoutsBox from "@/components/course/handoutsBox.vue";
import courseTree from "@/components/course/courseTree.vue";
import PopupCamera from "../../components/popup/camera.vue";
import myCompressImage from "@/common/compressPhoto.js";
import myPlayer from "@/components/myPlayer/polyvPlayer.vue";
import noteBox from "@/components/course/noteBox.vue";
import answerBox from "@/components/course/answerBox.vue";
import { mapGetters, mapMutations } from "vuex";
import { lockAction } from "../../utils/lock";
export default {
  components: {
    courseModule,
    courseChapter,
    courseSection,
    handoutsBox,
    myPlayer,
    noteBox,
    answerBox,
    courseTree,
    PopupCamera,
  },
  data() {
    return {
      markContent: "http://admin.zhujianpeixun.com/",
      showMark: false,
      hasStart: false,
      channelItem: null,
      lockTimer: null,
      orderGoodsId: 0,
      noticeShow: false,
      enableAutoRotation: true,
      seekTime: "",
      toastTimer: null,
      videoToastShow: false,
      showSet: false,
      startStatus: false,
      courseId: 0,
      menuList: [],
      current: 0,
      vid: "",
      goodsId: 0,
      goodsData: {},
      photoPopup: false,
      goodsPlayConfig: null,
      autoplay: false,
      isAllowSeek: "no",
      playbackRate: [1.0],
      timer: null,
      goodsPhotographConfig: null,
      intervalTimeList: [], // 间隔拍照时长
      intervalTimeIndex: 0, //当前处于哪个时间段拍照
      playTime: 0, //页面播放时长，不含暂停
      currentTime: 0,
      avatarUrl: "",
      ossAvatarUrl: "",
      studyDuration: 0, // 当前视频时长
      gradeId: 0,
      chapterId: 0,
      moduleId: 0,
      reMenuList: [],
      recordObj: {},
      isTaking: true, //是否正在拍照
      needSeek: false, //第一次播放是否需要跳转
      photoNum: 0,
      photoList: [], //拍照的时间点
      photoConfig: false, //是否配置好拍照次数
      photoIndex: 0, //当前位于拍照的区间下标 从0开始
      photoHistoryList: [], //已拍照历史的下标点
      sectionItem: {},
      showNotes: true,
      uploadLock: false, //上传图片
      isPlayRebuild: false, //是否正在播放重修视频needOpen
      isRebuild: false, //视频是否从重修目录点击
      clearTimer: null,
      livingItem: "",
      option: null,
      toggleCourseShow: false, // 切换课程弹窗
      courseList: [], // 课程列表
      subList: [],
      subIndex: 0,
      goodsTeacher: [],
      teacherList: [],
      teacherIndex: 0,
      newActiveSubjectId: "", //当前选中ID
      compareFaceData: 0, // 拍照匹配相似度
      prendreAutoCarme: false, // 是否发起授权相机
      studyTimer: null, // 学习记录定时器
      CountTo: 30, // 倒计时
      CountTo1: 0,
      handoutTipLength: 0,
      menuAllList: [],
      curPlayIndex: 0, // 正在播放的节的下标
      faceUrl: "",
      erJianErZao: false,
      jjShiGongYuan: false,
      pauseTime: 0,
      pauseTimer: null,
      barTimer: null,
      isReach: false,
      noticeShow1: false,
      refPlv: null,
    };
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "playSectionId",
      "playChannelId",
      "playVID",
      "config",
    ]),
    playSecIsLearn() {
      return this.sectionItem.learning != 1;
    },
    orderNum() {
      return 0;
      return this.goodsData.goodsLearningOrder;
    },
    list() {
      let list = [
        {
          name: "目录",
        },
        {
          name: "讲义",
        },
        {
          name: "笔记",
        },
        {
          name: "答疑",
        },
      ];
      if (this.reMenuList.length > 0) {
        list.push({ name: "重修目录" });
      }
      return list;
    },
    params: function () {
      return (keys = ["orderGoodsId", "goodsId", "courseId"]) => {
        let params = {};
        for (const key of keys) {
          params[key] = this[key];
        }
        return params;
      };
    },
    detail() {
      if (!this.courseId || !this.courseList.length) {
        return {};
      }
      return this.courseList.find((e) => e.courseId == this.courseId);
    },
  },
  watch: {
    showSet(n) {
      if (n) {
        if (polyvPlayerContext) {
          // #ifdef MP-WEIXIN
          polyvPlayerContext.pause();
          // #endif
          // #ifdef H5
          polyvPlayerContext.j2s_pauseVideo(); // 暂停播放视频
          // #endif
        }
      }
    },
    photoPopup(n) {
      if (n) {
        if (this.prendreAutoCarme) {
          this.photoPopup = false;
        }
        this.showSet && (this.photoPopup = false);
      }
    },
  },
  async onLoad(option) {
    if (option.isOther) {
      this.showMark = true;
      return;
    }
    this.option = option;
    let { skipPort, id, goodsId, orderGoodsId, gradeId, informId } = option;
    if (skipPort) {
      await this.$method.skipLogin(skipPort);
    }
    if (this.$method.isGoLogin()) {
      return;
    }
    this.orderGoodsId = Number(orderGoodsId) || "";
    this.isCanLearn();
    !this.userInfo && this.$api.refreshUserInfo();
    this.courseId = Number(id) || "";
    this.goodsId = Number(goodsId);
    this.gradeId = Number(gradeId);
    // 公众号模板消息的数据埋点
    informId && this.clickOfficial(informId);
    this.init();
    this.courseCourseList();
  },
  async onShow() {
    // this.closePhoto();
  },
  onUnload() {
    console.log("onUnloadonUnloadonUnloadonUnload");
    this.originUnload();
    this.clears();
    clearInterval(this.lockTimer);
  },
  onHide() {
    this.originUnload();
  },
  mounted() {},
  methods: {
    ...mapMutations(["updateChapterOpen", "updateLiveLast"]),
    init() {
      // #ifdef MP-WEIXIN
      this.isAllowSeek = "no";
      // #endif
      // #ifdef H5
      this.isAllowSeek = "on";
      // #endif
      // 锁
      lockAction();
      this.lockTimer = setInterval(lockAction, 10000);
    },
    // 七大员是否能进入学习
    async qCheckIsCanLearn() {
      let res = await this.$api.qCheckIsCanLearn(this.orderGoodsId);
      if (res.data.code !== 200) {
        uni.showModal({
          showCancel: false,
          title: "提示",
          content: res.data.msg,
          success: (resultst) => {
            uni.navigateBack();
          },
        });
        return Promise.reject();
      }
      let res1 = await this.$api.syncSevenPublicClass({
        orderGoodsId: this.orderGoodsId,
      });
      if (res1.data.code !== 200) {
        uni.showModal({
          showCancel: false,
          title: "提示",
          content: "无法进入学习！",
          success: (resultst) => {
            uni.navigateBack();
          },
        });
        return Promise.reject();
      }
    },
    // 新增微信公众号模板消息点击数据
    clickOfficial(informId) {
      this.$http({
        url: "/data/click",
        method: "post",
        data: { informId },
      });
    },
    // 点击课程目录
    cMenu(item, index) {
      this.subIndex = index;
      this.newActiveSubjectId = item.subjectId;
    },
    courseCourseList() {
      this.courseList = [];
      this.menuList = [];
      this.photoConfig = false;
      this.$api
        .courseCourseList({
          pageNum: 1,
          pageSize: 200,
          goodsId: this.goodsId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.courseList = res.data.rows;
            // 科目
            let allItem = [{ subjectId: 0, subjectName: "所有" }];
            let ids = [];
            const newArr = [];
            this.courseList.forEach((item) => {
              if (ids.indexOf(item.subjectId) == -1) {
                ids.push(item.subjectId);
                newArr.push(item);
              }
            });
            this.subList = [...allItem, ...newArr];
            if (res.data.total > 1) {
              this.getUserWatchLast();
            } else {
              this.originOnShow();
              this.originMounted();
            }
          }
        });
    },
    // 查询用户最后一次看的录播的信息
    getUserWatchLast() {
      this.$http({
        url: "/study/record/getUserWatchLast",
        method: "get",
        data: {
          orderGoodsId: this.orderGoodsId,
        },
      }).then((res) => {
        console.log("🚀 ~ file: detail.vue:859 ~ getUserWatchLast ~ res:", res);
        if (res.data.code == 200 && res.data.data) {
          this.courseId = res.data.data.courseId;
        }
        if (!this.courseId) {
          this.courseId = this.courseList[0].courseId;
        }
        this.originOnShow();
        this.originMounted();
        //获取商品双师资模板
        this.getCourseTeacher(this.courseList);
      });
    },
    getCourseTeacher(rows) {
      this.goodsTeacher = [];
      //获取商品双师资模板
      this.$api
        .courseTeacherList({
          goodsId: this.goodsId,
        })
        .then((res1) => {
          if (res1.data.data && res1.data.data.length > 0) {
            //课程老师模板
            let teacherTel = res1.data.data;
            //商品课程
            let courses = rows;
            teacherTel.forEach((tea) => {
              let dataList = [];
              let teacherList = [];
              courses.forEach((item) => {
                let data = tea.courseList.filter(
                  (x) => x.courseId == item.courseId
                );
                if (data && data.length > 0) {
                  dataList.push(item);
                  teacherList = tea.courseList;
                }
              });
              let result = {
                teaList: teacherList,
                courseList: dataList,
              };
              this.goodsTeacher.push(result);
            });
            if (this.goodsTeacher && this.goodsTeacher.length > 0) {
              let courseIds = [];
              this.goodsTeacher.forEach((item) => {
                item.courseList.forEach((course) => {
                  courseIds.push(course.courseId);
                });
              });
              if (courseIds.length > 0) {
                courses.forEach((item) => {
                  if (!courseIds.includes(item.courseId)) {
                    let data = {
                      teaList: [],
                      courseList: [],
                    };
                    data.courseList.push(item);
                    this.goodsTeacher.push(data);
                  }
                });
              }
              this.goodsTeacher.forEach((item) => {
                if (item.courseList && item.courseList.length > 0) {
                  item.courseList[0].show = 1;
                }
              });
            }
          } else {
            //没有双师资模板
            rows.forEach((item) => {
              item.show = 1;
              let data = {
                teaList: [],
                courseList: [],
              };
              data.courseList.push(item);
              this.goodsTeacher.push(data);
            });
          }
          this.goodsTeacher.forEach((item) => {
            if (item.courseList.some((x) => x.courseId == this.courseId)) {
              this.teacherList = item.teaList;
            }
          });
        });
    },
    erJianErZaoPauseTip() {
      if (this.playSecIsLearn && this.erJianErZao) {
        if (this.pauseTimer) {
          return;
        }
        this.pauseTime = Date.now();
        console.log("开启定时器");
        this.pauseTimer = setInterval(() => {
          console.log("暂停时间", Date.now() - this.pauseTime, this.pauseTime);
          if (Date.now() - this.pauseTime > 5 * 60 * 1000) {
            // 5 * 60 * 1000
            let text = this.photoPopup ? "拍照停留" : "暂停";
            this.photoPopup = false;
            uni.showModal({
              title: "提示",
              showCancel: false,
              content: `检测${text}时间过长，刷新当前页面`,
              cancelText: "取消",
              confirmText: "确定",
              success: (res) => {
                if (res.confirm) {
                  // #ifdef H5
                  location.reload();
                  // #endif
                  // #ifdef MP-WEIXIN
                  this.courseCourseList();
                  // #endif
                }
              },
            });
            this.clearPauseTimer();
          }
        }, 5000);
      }
    },
    // 原来onshow里面的内容
    async originOnShow() {
      this.getReMenuList();
      await this.studyRecordMenuAllList();
      // 消息过来 定位某个节
      if (this.option.noteSecond) {
        this.jumpNote({
          sectionType: 1,
          ...this.option,
        });
        return;
      }
      this.studyRecordQueryLiveLast();
    },
    // 原来的mouted内容
    originMounted() {
      uni.$on("changeSection", (oldSectionId) => {
        console.log(
          "切换课程-originMounted->playVID:",
          this.playVID,
          oldSectionId
        );
        this.studyTimer && clearInterval(this.studyTimer); // 清除定时器
        this.clearPauseTimer();
        this.hasStart = false;
        this.photoConfig = false;
        this.photoIndex = 0;
        //清除直播
        this.$store.commit("setPlayChannelId", { playChannelId: 0 });
        // 防止原先初始化错误
        if (!this.refPlv) {
          this.refPlv = this.$refs.player;
        }
        this.postStudyRecord(0, oldSectionId);
      });
      uni.$on("getSection", (item) => {
        //清除直播
        this.studyTimer && clearInterval(this.studyTimer);
        this.hasStart = false;
        this.isPlayRebuild = item.rebuild;
        this.photoConfig = false;
        this.photoIndex = 0;
        this.sectionItem = item;
        this.moduleId = item.moduleId || null;
        this.chapterId = item.chapterId || null;

        this.$store.commit("setPlayChannelId", { playChannelId: 0 });
        this.playVideo(item);
      });
      uni.$on("levelId", (item) => {
        let arr = item.split("-");
        //点击节获取的各层级ID
        this.moduleId = arr[0];
        this.chapterId = arr[1];
      });
      uni.$on("getChannel", (item) => {
        //清除录播
        this.studyTimer && clearInterval(this.studyTimer);
        this.hasStart = false;
        this.$store.commit("setPlayVID", { playVID: null });

        this.moduleId = item.moduleId;
        this.chapterId = item.chapterId;
        this.$store.commit("setPlaySectionId", {
          playSectionId: item.sectionId || item.menuId,
        });
        this.playChannel(item);
        this.channelItem = item;
      });
      uni.$on("isRebuild", (item) => {
        this.isRebuild = item;
      });
      this.updateChapterOpen(true);
    },
    clearPauseTimer() {
      if (this.pauseTimer) {
        this.pauseTime = 0;
        clearInterval(this.pauseTimer);
        this.pauseTimer = null;
      }
    },
    clearBarTimer() {
      if (this.barTimer) {
        clearInterval(this.barTimer);
        this.barTimer = null;
      }
    },
    // 原来onUnload里面的内容
    originUnload() {
      if (this.playSectionId > 0 && this.hasStart) {
        //退出提交记录
        this.postStudyRecord();
      }
      //清除正在播放的节ID
      // this.$store.commit('setPlayObj',null)
      this.$store.commit("setPlaySectionId", { playSectionId: 0 });
      this.$store.commit("setPlayChannelId", { playChannelId: 0 });
      this.$store.commit("setPlayVID", { playVID: null });
      //移除所有的事件监听器
      uni.$off();
      this.clearTimer && clearTimeout(this.clearTimer);
      this.toastTimer && clearTimeout(this.toastTimer);

      if (this.studyTimer) {
        clearInterval(this.studyTimer);
        this.hasStart = false;
      }
      this.clearPauseTimer();
      this.clearBarTimer();
      if (this.lockTimer) {
        clearInterval(this.lockTimer);
        this.$api
          .lockDelLock({
            action: "jxjy",
            uuid: this.$method.getUuid(),
          })
          .then((res) => {
            uni.hideLoading();
          });
      }
    },
    changeCourses() {
      this.toggleCourseShow = true;
    },
    closePop() {
      this.toggleCourseShow = false;
    },
    async activeFunc(item, index) {
      this.teacherIndex = index;
      let findResult = "";
      this.goodsTeacher.forEach((citem, index) => {
        citem.courseList.forEach((e, e_index) => {
          if (e.courseId == item.courseId) {
            findResult = e;
          }
        });
      });

      this.jump(findResult, 1);
    },
    // 进入学习
    async jump(item, index, type) {
      if (this.courseId === item.courseId) {
        this.toggleCourseShow = false;
        return;
      }
      if (this.orderNum == 2 && index != 0) {
        let prevItem = this.courseList[index - 1];
        if (
          prevItem.stuAllNum + prevItem.recordNum <
          prevItem.secAllNum + prevItem.examNum
        ) {
          uni.showToast({
            icon: "none",
            title: "请按顺序学完上一课再学习这一课",
          });
          return;
        }
      }
      // 打回 需重修
      if (item.rebuild === 0) {
        this.$navTo.togo("/pages2/learn/details", {
          id: item.courseId,
          gradeId: item.gradeId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
        });
        return;
      }
      if (type) {
        this.teacherIndex = 0;
        this.goodsTeacher.forEach((citem) => {
          if (citem.courseList.some((x) => x.courseId == item.courseId)) {
            this.teacherList = citem.teaList;
          }
        });
      }
      this.sectionItem = {};
      this.toggleCourseShow = false;
      this.courseId = item.courseId;
      this.originOnShow();
    },
    async nextCourses(item, type) {
      this.vid = "";
      this.hasStart = true;
      await this.originUnload();
      this.courseId = item.courseId;
      this.gradeId = item.gradeId;
      this.toggleCourseShow = false;
    },
    clickLeft() {
      // uni.navigateBack()
      uni.switchTab({
        url: "/pages/learn/index",
      });
    },
    toBack(delta = 1) {
      uni.navigateBack({
        delta,
      });
    },
    markConfirm() {
      uni.setClipboardData({
        data: this.markContent,
        success: () => {
          setTimeout(this.toBack, 1000);
        },
      });
    },
    closeNotice() {
      this.$api
        .baseHandoutTip({
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {});
    },
    noticeConfirm() {
      if (this.CountTo < 0) {
        this.noticeShow = false;
        if (this.handoutTipLength == 0 && this.goodsPlayConfig.autoPlay > 0) {
          this.autoplay = true;
          this.refPlv.resumeVideo();
        }
      }
    },
    baseHandoutTipList() {
      this.$api
        .baseHandoutTipList({
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          this.handoutTipLength = res.data.rows.length;
          if (res.data.rows.length == 0) {
            this.noticeShow = true;
            if (this.CountTo == 30) {
              var timer = setInterval(() => {
                this.CountTo--;
                if (this.CountTo < 0) {
                  clearInterval(timer);
                }
              }, 1000);
            }
          } else {
            this.CountTo = -1;
          }
        });
    },
    /**
     * 获取上次观看的直播
     */
    studyRecordGetLastLive() {
      this.$api
        .studyRecordGetLastLive({
          orderGoodsId: this.orderGoodsId,
          courseId: this.courseId,
        })
        .then((res) => {
          this.updateLiveLast(res.data.data);
        });
    },
    async initPlayVideo(sectionItem) {
      this.moduleId = sectionItem.moduleId;
      this.chapterId = sectionItem.chapterId;
      if (sectionItem.sectionType == 1) {
        //录播
        this.playVideo(sectionItem);
      } else if (sectionItem.sectionType == 2) {
        //直播
        this.studyRecordGetLastLive();
      } else if (sectionItem.sectionType == 3) {
        //回放
        this.playVideo(sectionItem);
      } else if (sectionItem.doType == 2) {
        uni.showModal({
          title: "温馨提示",
          content: "当前节视频已学完，是否进入考试？",
          success: (res) => {
            if (res.confirm) {
              this.toQuestionBank(sectionItem);
            }
          },
        });
        return;
      }
    },
    toQuestionBank(sectionItem) {
      uni.navigateTo({
        url:
          "/pages2/class/questionBank?courseId=" +
          this.courseId +
          "&gradeId=" +
          this.gradeId +
          "&isFromVideo=1&id=" +
          sectionItem.id +
          "&goodsid=" +
          this.goodsId +
          "&moduleId=" +
          (sectionItem.moduleId || 0) +
          "&chapterId=" +
          (sectionItem.chapterId || 0) +
          "&orderGoodsId=" +
          this.orderGoodsId +
          "&type=" +
          (sectionItem.type == 4 ? 1 : 3) +
          "&learning=" +
          sectionItem.studyStatus +
          "&isBackVideo=" +
          1,
      });
    },
    studyRecordQueryLiveLast() {
      // /study/record/queryLiveLast
      this.$api
        .studyRecordQueryLiveLast({
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
          courseId: this.courseId,
        })
        .then((res) => {
          let { data } = res.data;
          if (!data.sectionId) {
            data = this.menuAllList[0];
          }
          // if (data.learning == 1 && this.orderNum == 2) {
          //   let next = this.menuAllList.find((e) => e.studyStatus != 1);
          //   next && (data = next);
          // }
          this.initPlayVideo(data);
        });
    },
    /**
     * 模块大节播放完毕，刷新列表
     */
    sectionPlayEnd(isRebuild, index) {
      if (this.reMenuList.length > 0) {
        //有重修目录
        if (isRebuild.isRebuild) {
          //从重修点击
          this.$api
            .reMenuList({
              orderGoodsId: this.orderGoodsId,
              courseId: this.courseId,
              rebuild: 1,
              gradeId: this.gradeId,
            })
            .then((res) => {
              if (res.data.code == 200) {
                if (res.data.rows.length) {
                  res.data.rows[index].name = res.data.rows[index].menuName;
                  this.$set(this.reMenuList, index, res.data.rows[index]);
                  for (let i = 0; i < res.data.rows.length; i++) {
                    let item = res.data.rows[i];
                    item.down = true;
                    item.id = item.menuId;
                    item.name = item.menuName;
                  }
                  this.reMenuList = [];
                  this.$nextTick(() => {
                    this.reMenuList = res.data.rows;
                    // console.log(this.reMenuList,'this.reMenuList1')
                  });
                } else {
                  this.reMenuList = [];
                }
              }
            });

          this.$api
            .reMenuList({
              courseId: this.courseId,
              gradeId: this.gradeId,
              orderGoodsId: this.orderGoodsId,
            })
            .then((res) => {
              if (res.data.code == 200) {
                for (let i = 0; i < res.data.rows.length; i++) {
                  let item = res.data.rows[i];
                  item.down = true;
                  item.id = item.menuId;
                  item.name = item.menuName;
                  item.menuType = item.type;
                }
                this.menuList = [];
                this.$nextTick(() => {
                  this.menuList = res.data.rows;
                });
              }
            });
        } else {
          //从普通目录点击
          this.$api
            .reMenuList({
              courseId: this.courseId,
              gradeId: this.gradeId,
              orderGoodsId: this.orderGoodsId,
            })
            .then((res) => {
              if (res.data.code == 200) {
                res.data.rows[index].name = res.data.rows[index].menuName;
                res.data.rows[index].id = res.data.rows[index].menuId;
                this.$set(this.menuList, index, res.data.rows[index]);
              }
            });

          this.$api
            .reMenuList({
              orderGoodsId: this.orderGoodsId,
              courseId: this.courseId,
              rebuild: 1,
              gradeId: this.gradeId,
            })
            .then((res) => {
              if (res.data.code == 200) {
                if (res.data.rows.length) {
                  // for (let i = 0; i < res.data.rows.length; i++) {
                  // 	let item = res.data.rows[i];
                  // 	item.down = true;
                  // 	item.id = item.menuId;
                  // 	item.name = item.menuName;
                  // }
                  // this.reMenuList = res.data.rows;
                } else {
                  this.reMenuList = [];
                }
              }
            });
        }
      } else {
        console.log("--模块大节播放完毕，刷新列表-");
        //没有重修目录
        this.$api
          .reMenuList({
            courseId: this.courseId,
            gradeId: this.gradeId,
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            if (res.data.code == 200) {
              res.data.rows[index].name = res.data.rows[index].menuName;
              res.data.rows[index].id = res.data.rows[index].menuId;
              this.$set(this.menuList, index, res.data.rows[index]);
            }
          });
      }
    },
    goLive(item) {
      let moduleId = item.moduleId || 0;
      let chapterId = item.chapterId || 0;
      let sectionId = item.sectionId || item.menuId;
      let uuid = new Date().valueOf() + "";
      // buyCourse 是否购买课程：1是 0否
      let encode = encodeURIComponent(
        this.config.hostLive +
          "/pages/live/index?token=" +
          uni.getStorageSync("token") +
          "&userInfo=" +
          JSON.stringify(this.userInfo) +
          "&channelId=" +
          item.liveUrl +
          "&gradeId=" +
          this.gradeId +
          "&courseId=" +
          this.courseId +
          "&goodsId=" +
          this.goodsId +
          "&orderGoodsId=" +
          this.orderGoodsId +
          "&sectionId=" +
          sectionId +
          "&chapterId=" +
          chapterId +
          "&moduleId=" +
          moduleId +
          "&buyCourse=1" +
          "&ident=" +
          uuid
      );
      uni.navigateTo({
        url: `../../pages/webview/index?url=` + encode,
      });
    },
    studyRecordMenuAllList() {
      // study/record/menuAllList
      return this.$api
        .studMenuAllList({
          courseId: this.courseId,
          gradeId: this.gradeId,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          let nowTime = Number(new Date().getTime() / 1000).toFixed(0);
          if (res.data.data) {
            this.menuAllList = res.data.data.filter(
              (e) => e.doType != 1 || (e.doType == 2 && e.studyStatus == 1)
            );
            this.livingItem = res.data.data.find(
              (item) =>
                item.liveStartTime <= nowTime && item.liveEndTime > nowTime
            );
          }
          return Promise.resolve();
        });
    },
    async getbaseprofiletplists() {
      let {
        data: { code, rows },
      } = await this.$api.getbaseprofiletplists({
        goodsId: this.goodsId,
        orderGoodsId: this.orderGoodsId,
      });
      if (code === 200 && rows.length && rows[0].keyValue) {
        let baseRes = await this.$api.getbaseprofiletpId(this.goodsId);
        if (baseRes.data.code === 200 && baseRes.data.data) {
          let {
            data: { code, data },
          } = await this.$api.getbaseprofiletpgetInfo({
            goodsId: this.goodsId,
            orderGoodsId: this.orderGoodsId,
          });
          if (
            code === 200 &&
            (!data || (data.status === 3 && data.changeStatus === 1))
          ) {
            uni.showModal({
              content: !data
                ? "请前往填写资料"
                : "资料审核不通过，请前往重新填写",
              cancelText: "返回",
              success: (resultst) => {
                if (resultst.confirm) {
                  this.$navTo.togo("/pages2/verify/input", {
                    id: this.goodsId,
                    orderGoodsId: this.orderGoodsId,
                  });
                }
                if (resultst.cancel) {
                  uni.navigateBack();
                }
              },
            });
            return Promise.reject();
          } else if (data.status === 1 && JSON.parse(rows[0].keyValue2)[0]) {
            let {
              data: { code, data },
            } = await this.$api.getbaseprofileStampgetInfo({
              goodsId: this.goodsId,
              orderGoodsId: this.orderGoodsId,
            });
            if (
              code === 200 &&
              (!data || (data.status === 3 && data.changeStatus === 1))
            ) {
              uni.showModal({
                content: !data
                  ? "请前往填写盖章资料"
                  : "资料盖章审核不通过，请前往重新填写",
                cancelText: "返回",
                success: (resultst) => {
                  if (resultst.confirm) {
                    this.$navTo.togo("/pages2/verify/input2", {
                      id: this.goodsId,
                      orderGoodsId: this.orderGoodsId,
                    });
                  }
                  if (resultst.cancel) {
                    uni.navigateBack();
                  }
                },
              });
              return Promise.reject();
            }
          }
        }
      }
      return Promise.resolve();
    },
    async isCanLearn() {
      this.option.isQ !== "" && (await this.qCheckIsCanLearn());
      await this.getbaseprofiletplists();
      await this.getGradeInfo();
      await this.getGoodsDetail();
    },
    /**
     * 计算tabs宽度
     */
    itemWidth() {
      return 100 / this.list.length + "%";
    },
    findMenuNextSection(index) {
      for (let i = index + 1; i < this.reMenuList.length; i++) {
        let item = this.reMenuList[i];
        if (item.type == 3) {
          return item;
        }
      }
      return {};
    },
    loadedmetadata(event) {
      this.$refs["camera"].openCamera();
      this.refPlv = this.$refs.player;
    },
    getPhotoLastRecord() {
      // if (this.erJianErZao || !this.playSecIsLearn || this.photoNum <= 0) {
      //   return;
      // }
      let self = this;
      let { chapterId, sectionId, moduleId } = this.sectionItem;
      let data = {
        sectionId: sectionId || 0,
        goodsId: this.goodsId,
        courseId: this.courseId,
        gradeId: this.gradeId,
        chapterId: chapterId || 0,
        moduleId: moduleId || 0,
        orderGoodsId: this.orderGoodsId,
      };
      this.$api.getPhotoLastRecord(data).then((res) => {
        console.log(res.data.data, 99999999999);
        if (res.data.code == 200) {
          //清空历史数据
          self.photoHistoryList = [];
          this.photoIndex = 0;
          self.photoList = [];
          for (let i = 0; i < res.data.data.length; i++) {
            //-2存储随机拍照数组
            if (res.data.data[i].photoIndex == -2) {
              self.photoList =
                res.data.data[i].timeInterval &&
                res.data.data[i].timeInterval.split(",");
            } else {
              self.photoHistoryList.push(res.data.data[i].photoIndex);
            }
          }
        }
      });
    },
    //postTime 只提交随机时间
    postCoursePhotoRecord(postTime = false) {
      return new Promise((resolve, reject) => {
        let currentTime = 0;
        // var polyvPlayerContext = this.selectComponent("#playerVideo");
        if (polyvPlayerContext) {
          // #ifdef MP-WEIXIN
          currentTime = polyvPlayerContext.getCurrentTime();
          // #endif
          // #ifdef H5
          currentTime = polyvPlayerContext.j2s_getCurrentTime();
          // #endif
        }
        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(",") : "",
          orderGoodsId: this.orderGoodsId,
        };
        // console.log("提交接口", data);
        this.$api
          .coursePhotoRecord(data)
          .then((res) => {
            if (res.data.code == 200) {
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            reject();
          });
      });
    },
    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;
      }
    },
    //配置随机拍照时间
    configPhoto() {
      // var polyvPlayerContext = this.selectComponent("#playerVideo");
      let totalVideoTime = 0;
      let duration = 0;
      // #ifdef MP-WEIXIN
      totalVideoTime = polyvPlayerContext.getDuration();
      duration = polyvPlayerContext.getCurrentTime();
      // #endif
      // #ifdef H5
      totalVideoTime = polyvPlayerContext.j2s_getDuration();
      duration = polyvPlayerContext.j2s_getCurrentTime();
      // #endif
      if (!this.photoConfig) {
        this.photoConfig = true;
        if (this.erJianErZao) {
          this.photoList = this.randomConfig(totalVideoTime, duration);
          return;
        }
        //没有历史拍照间隔数据
        if (!this.photoList || this.photoList.length == 0) {
          this.photoList = this.commonConfig(
            totalVideoTime,
            this.jjShiGongYuan ? 46 * 60 : undefined
          );
          this.postCoursePhotoRecord(true); //提交随机拍照时间数组
        }
        //兼容已有观看历史
        for (let i = 0; i < this.photoList.length - 1; i++) {
          if (
            this.photoList[i] < duration &&
            this.photoList[i + 1] > duration
          ) {
            this.photoIndex = i + 1;
            break;
          }
          if (duration > this.photoList[this.photoList.length - 1]) {
            this.photoIndex = this.photoList.length - 1; //取最后一个下标
            break;
          }
        }
      }
    },
    // 二建随机拍摄时间
    randomConfig(totalVideoTime, duration) {
      this.photoHistoryList = [];
      let photoList = [duration];
      let pre = duration;
      if (totalVideoTime > 300) {
        while (pre <= totalVideoTime) {
          pre += this.randomNum(780, 900);
          pre <= totalVideoTime && photoList.push(pre);
        }
        if (totalVideoTime - 300 > photoList.slice(-1)[0]) {
          photoList.push(this.randomNum(totalVideoTime - 180, totalVideoTime));
        }
      }
      return photoList;
    },
    // 随机前后五分钟
    commonConfig(totalVideoTime, fixS) {
      console.log("🚀 ~ file: detail.vue:2407 ~ commonConfig ~ fixS:", fixS);
      let photoList = [0];
      // 固定间隔时间取
      if (fixS) {
        let num = Math.ceil(totalVideoTime / fixS);
        for (let i = 1; i < num; i++) {
          photoList.push(i * fixS);
        }
        this.photoNum = num + 1;
      } else {
        if (this.photoNum == 3) {
          if (totalVideoTime >= 900) {
            //大于15分钟
            let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
            let centerMinTime = centerTime - 300; //前后5分钟
            let centerMaxTime = centerTime + 300;
            let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
            photoList.push(centerTakeTime); //中间拍一张
            let endMaxTime = totalVideoTime - 60;
            let endMinTime = totalVideoTime - 300;
            let endTakeTime = this.randomNum(endMinTime, endMaxTime);
            photoList.push(endTakeTime); //最后拍一张
          } else {
            //小于15分钟
            let centerTime = this.randomNum(
              (1 / 3) * totalVideoTime,
              (2 / 3) * totalVideoTime
            );
            photoList.push(centerTime);
            let endTakeTime = this.randomNum(
              (2 / 3) * totalVideoTime,
              totalVideoTime
            );
            photoList.push(endTakeTime);
          }
        }
      }
      return photoList;
    },
    getLiveUid(channelId) {
      let self = this;
      return new Promise((resolve) => {
        let data = {
          channelId: channelId,
          orderGoodsId: this.orderGoodsId,
        };
        self.$api.polyvSign(data).then((res) => {
          resolve(res.data.data);
        });
      });
    },
    studyNotice() {
      this.noticeShow = true;
    },
    //正常播放视频
    async playVideo(item) {
      this.sectionItem = item;
      let { learning, videoCurrentTime, sectionId, recordingUrl } = item;
      console.log(this.sectionItem, "this.sectionItem");
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.recordObj = videoCurrentTime
        ? { videoCurrentTime }
        : await this.getRecordLast(item);
      await this.getPhotoLastRecord();
      // 查找拍照历史
      if ((this.photoNum > 0 || this.jjShiGongYuan) && learning != 1) {
        await this.getPhotoLastRecord();
      }
      this.$store.commit("setPlayVID", {
        playVID: recordingUrl,
      });
      this.$store.commit("setPlaySectionId", {
        playSectionId: sectionId,
      });
      this.startStatus = true;
      if (this.refPlv) {
        this.refPlv.changeVid({
          vid: recordingUrl,
          videoCurrentTime: this.recordObj.videoCurrentTime,
        });
      }
    },
    getRecordLast(sectionItem) {
      let { chapterId, sectionId, courseId, moduleId } = sectionItem;
      return new Promise((resolve) => {
        let data = {
          gradeId:
            this.gradeId || this.gradeId == 0 ? Number(this.gradeId) : null,
          goodsId:
            this.goodsId || this.goodsId == 0 ? Number(this.goodsId) : null,
          sectionId: sectionId || 0,
          courseId: courseId || courseId == 0 ? Number(courseId) : null,
          chapterId: chapterId || 0,
          moduleId: moduleId || 0,
          orderGoodsId: this.orderGoodsId,
        };
        this.$api.recordLast(data).then((res) => {
          resolve(res.data.data);
        });
      });
    },

    jumpNote(item) {
      this.$u.toast("即将跳到笔记位置");
      if (this.playSectionId != item.sectionId) {
        this.initPlayVideo({
          sectionType: 1,
          ...item,
          videoCurrentTime: Number(item.noteSecond),
        });
      } else {
        this.refPlv.seekVideo(item.noteSecond);
      }
    },
    getGradeInfo() {
      // 即刻 1  待定2  日期3
      return this.$api.goodsGradeInfo(this.gradeId).then((res) => {
        if (res.data.code == 200) {
          let { data } = res.data;
          if (
            data.learningStatus == 2 ||
            (data.learningStatus == 3 &&
              Number(data.learningTimeStart) > Number(new Date() / 1000))
          ) {
            uni.showModal({
              showCancel: false,
              confirmText: "确定",
              content:
                "当前课程正在申请中，正式开班后方可进行学习，请耐心等候！",
              success: function (resultst) {
                uni.navigateBack();
              },
            });
            return Promise.reject(123);
          }
        }
      });
    },
    postStudyRecord(status = 0, sectionId = this.playSectionId) {
      if (!this.refPlv) {
        return;
      }
      let currentTime = this.refPlv.playCurrentTime();
      let PlayDuration = this.refPlv.playVideoTime();
      if (currentTime < 10 && !this.ossAvatarUrl) {
        return;
      }
      if (this.playChannelId > 0) {
        currentTime = 2; //直播无法获取，无论开始结束都传2秒
      }
      let self = this;
      let data = {
        fromPlat: 1, //来源平台 1小程序 2网站
        photo: self.ossAvatarUrl,
        sectionId: sectionId || 0,
        goodsId: parseInt(self.goodsId),
        courseId: parseInt(self.courseId),
        orderGoodsId: this.orderGoodsId,
        studyDuration: parseInt(
          PlayDuration > 0 ? PlayDuration : self.studyDuration
        ),
        gradeId: parseInt(self.gradeId),
        chapterId: this.chapterId || 0,
        moduleId: this.moduleId || 0,
        videoCurrentTime: parseInt(
          currentTime > 0 ? currentTime : self.studyDuration
        ),
        erJianErZao: this.erJianErZao,
      };
      if (this.ossAvatarUrl) {
        data.similarity = this.compareFaceData; // 相似度
      }
      if (status > 0) {
        data.status = status;
      }
      console.log(data, "记录参数");
      return new Promise((resolve, reject) => {
        this.$api
          .studyRecord(data)
          .then((res) => {
            console.log(res, "记录返回");
            let { code, msg } = res.data;
            if (code == 200) {
              if (status > 0) {
                this.studyRecordMenuAllList();
                let moduleId = this.moduleId || 0;
                let chapterId = this.chapterId || 0;
                let playNextIdisRebuild = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}isRebuild`;
                let playNextId = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}`; //拼接对应章节唯一id

                uni.$emit("playNext" + playNextIdisRebuild, {
                  fromRebuild: this.isRebuild,
                }); //通知播放结束，不来自重修目录的点击不用弹窗学习下一节
                uni.$emit("playNext" + playNextId); //通知播放结束
              }
              self.ossAvatarUrl = "";
            } else if (code == 600) {
              uni.showModal({
                showCancel: false,
                title: "提示",
                content: msg,
                success: (resultst) => {
                  uni.navigateBack();
                },
              });
            } else if (code == 558) {
              this.CountTo1 = msg.split(",")[1];
              this.noticeShow1 = true;
              var timer = setInterval(() => {
                this.CountTo1--;
                if (this.CountTo1 < 0) {
                  this.noticeShow1 = false;
                  clearInterval(timer);
                  this.postStudyRecord(1);
                }
              }, 1000);
              reject("中断执行");
            } else {
              this.uploadLock = false;
              uni.showToast({
                icon: "none",
                title: res.data.msg,
                duration: 2000,
              });
              if (this.erJianErZao && code == 559) {
                this.isReach = true;
                this.openPhoto();
              }
              if (code == 559 || code == 588) {
                reject("中断执行");
              }
            }
            resolve();
          })
          .catch((err) => {
            this.studyRecordMenuAllList();
          });
      });
    },
    uploadFile(options, int) {
      var self = this;
      return new Promise((resolve, reject) => {
        var data = {
          imageStatus: int,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
        };
        self.$api.aliyunpolicy(data).then((res) => {
          if (res.data.code != 200) {
            self.$method.showToast("签名错误" + JSON.stringify(res.data));
            return;
          }
          var ossToken = res.data.data.resultContent;
          if (ossToken.host == null || ossToken.host == undefined) {
            self.$method.showToast("上传路径报错" + JSON.stringify(res.data));
            return;
          }
          let filePath = "";
          // #ifdef H5
          var localData = options; //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);
          }
          filePath = new File([url], "a.jpg", {
            type: "image/jpg",
          });
          uni.uploadFile({
            url: ossToken.host,
            name: "file",
            file: filePath,
            fileType: "image",
            header: {
              AuthorizationToken: "WX " + uni.getStorageSync("token"),
            },
            formData: {
              key: ossToken.dir,
              OSSAccessKeyId: ossToken.accessid,
              policy: ossToken.policy,
              Signature: ossToken.signature,
              callback: ossToken.callback,
              success_action_status: 200,
            },
            success: (result) => {
              this.$u.toast("上传成功");
              self.ossAvatarUrl = ossToken.dir;
              resolve(ossToken.dir);
            },
            fail: (error) => {
              uni.showToast({
                title: "上传接口报错，请重新拍照上传" + error,
                icon: "none",
              });
              this.openPhoto();
              return;
            },
          });
          // #endif

          // #ifdef MP-WEIXIN
          uni.uploadFile({
            url: ossToken.host,
            name: "file",
            filePath: options,
            fileType: "image",
            header: {
              AuthorizationToken: "WX " + uni.getStorageSync("token"),
            },
            formData: {
              key: ossToken.dir,
              OSSAccessKeyId: ossToken.accessid,
              policy: ossToken.policy,
              Signature: ossToken.signature,
              callback: ossToken.callback,
              success_action_status: 200,
            },
            success: (result) => {
              // if (result.statusCode === 200) {
              this.$u.toast("上传成功");
              self.ossAvatarUrl = ossToken.dir;
              resolve(ossToken.dir);
            },
            fail: (error) => {
              uni.showToast({
                title: "上传接口报错，请重新拍照上传" + error,
                icon: "none",
              });
              this.openPhoto();
              return;
            },
          });
          // #endif
        });
      });
    },
    imageInfos() {
      var self = this;
      return new Promise(async (resolve, reject) => {
        let resPath = await myCompressImage(this.avatarUrl || this.faceUrl, 50);
        const waitUpload = await self.uploadFile(resPath, 0);
        resolve(waitUpload);
      });
    },
    timeEvent(playTime) {
      this.configPhoto();
      let photoTime = 0; //获取拍照秒数
      for (let i = 0; i < this.photoList.length; i++) {
        photoTime = Number(this.photoList[i]); //获取拍照秒数
        if (
          (this.erJianErZao && !this.photoHistoryList.length) ||
          (photoTime < playTime && photoTime > playTime - 8)
        ) {
          //3秒区间内才触发拍照，避免拉动滚动条
          if (this.photoHistoryList.indexOf(i) < 0) {
            //不存在拍照历史，没有重修过，没有学过，则拍照
            //启动拍照
            //暂停
            console.log("去拍照");
            this.refPlv.playPause();
            this.refPlv.exitFullScreen();
            this.photoIndex = i;
          }
        }
      }
    },
    closeToast() {
      clearTimeout(this.toastTimer);
      this.videoToastShow = false;
    },
    // 新增用户视频学习日志
    studyLog() {
      this.$http({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: this.goodsId,
          courseId: this.courseId,
          moduleId: this.moduleId || 0,
          chapterId: this.chapterId || 0,
          sectionId: this.playSectionId || 0,
          fromPlat: 1, //来源平台 1小程序 2PC网站
          goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: this.orderGoodsId,
        },
      }).then((res) => {});
    },
    timeupdate(time) {
      // console.log("播放中", time);
      this.clearPauseTimer();
      if (this.playSecIsLearn && (this.erJianErZao || this.photoNum > 0)) {
        this.isReach = false;
        this.timeEvent();
      }
    },
    playing() {
      console.log("playing");
      if (this.noticeShow) {
        this.refPlv.playPause();
        return;
      }

      this.$refs["camera"].openCamera();
      this.studyLog();
      if (!this.recordObj.videoCurrentTime) {
        this.postStudyRecord(0);
      }
      this.studyTimer && clearInterval(this.studyTimer);
      this.studyTimer = setInterval(() => {
        this.postStudyRecord(0);
      }, 15000);
    },
    openCamera() {
      this.$refs["camera"].openCamera();
    },
    pause() {
      this.erJianErZaoPauseTip();
      clearInterval(this.timer);
      clearInterval(this.studyTimer);
    },
    async ended() {
      this.hasStart = false;
      uni.showToast({
        icon: "none",
        title: "播放完毕",
      });
      clearInterval(this.timer);
      clearInterval(this.studyTimer);
      await this.postStudyRecord(1);
      this.nextSection();
    },
    playerError() {
      console.log(46546);
    },
    //播放下一节
    nextSection() {
      console.log("播放下一节");
      if (!this.menuAllList.length) {
        return;
      }
      this.curPlayIndex = this.menuAllList.findIndex((item) => {
        let i_sectionId = item.sectionId || 0;
        let i_chapterId = item.chapterId || 0;
        let i_moduleId = item.moduleId || 0;
        return (
          i_sectionId == this.playSectionId &&
          i_chapterId == this.chapterId &&
          i_moduleId == this.moduleId
        );
      });
      let data = this.menuAllList[this.curPlayIndex + 1];
      if (!data) {
        //第二个弹窗
        uni.showModal({
          title: "温馨提示",
          content:
            "恭喜您课程学习全部完成，教务会在1-3个工作日内完成学习初审，请耐心等待。",
          showCancel: !this.erJianErZao,
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: "/pages/learn/index",
              });
            }
          },
        });
      } else {
        if (data.doType == 2) {
          if (data.studyStatus == 1) {
            uni.showToast({
              title: "试卷已合格！",
              duration: 2000,
              icon: "none",
            });
            return;
          }
          uni.showModal({
            title: "温馨提示",
            content: "当前节视频已学完，是否进入考试？",
            success: (res) => {
              if (res.confirm) {
                this.toQuestionBank(data);
              }
            },
          });
          return;
        }
        uni.showModal({
          title: "温馨提示",
          content: "当前节视频已学完，继续学习下一节？",
          success: async (res) => {
            if (res.confirm) {
              this.moduleId = data.moduleId;
              this.chapterId = data.chapterId;
              this.sectionId = data.sectionId;
              if (data.sectionType == 1) {
                //录播
                this.$store.commit("setPlaySectionId", {
                  playSectionId: data.sectionId,
                });
                this.$store.commit("setPlayVID", {
                  playVID: data.recordingUrl,
                });

                this.hasStart = false;
                this.photoConfig = false;
                this.photoIndex = 0;
                this.sectionItem = data;
                this.playVideo(data);
              } else if (data.sectionType == 2) {
                //直播
                this.studyRecordGetLastLive();
              } else if (data.sectionType == 3) {
                //回放
                this.$store.commit("setPlaySectionId", {
                  playSectionId: data.sectionId,
                });
                this.$store.commit("setPlayVID", {
                  playVID: data.recordingUrl,
                });
                this.sectionItem = data;
                this.playVideo(data);
              }
              let playNextId = `moduleId${data.moduleId}chapterId${data.chapterId}sectionId${data.sectionId}`;
              this.$store.commit("updatePlayNextId", playNextId);
              this.updateChapterOpen(true);
            }
          },
        });
      }
    },
    //拍照
    openPhoto() {
      if (polyvPlayerContext) {
        // #ifdef MP-WEIXIN
        polyvPlayerContext.exitFullScreen();
        // #endif
        // #ifdef H5
        if (this.isFullScreen()) {
          this.exitFullscreen();
        }
        // #endif
      }

      // #ifdef MP-WEIXIN
      this.enableAutoRotation = false;
      this.photoPopup = true;
      this.isTaking = true;
      uni.setKeepScreenOn({
        keepScreenOn: true,
      });
      uni.authorize({
        scope: "scope.camera",
        success() {},
      });
      // #endif
      // #ifdef H5
      if (
        (window.navigator.mediaDevices &&
          window.navigator.mediaDevices.getUserMedia) ||
        window.navigator.getUserMedia ||
        window.navigator.webkitGetUserMedia ||
        window.navigator.mozGetUserMedia
      ) {
        console.log("getUserMedia----");
        // 调用用户媒体设备, 访问摄像头
        this.getUserMedia(
          {
            video: {
              width: 400,
              height: 300,
              facingMode: "user",
            },
          },
          this.photographSuccess,
          this.photographError
        );
      } else {
        console.log("1111没有摄像");
        this.photographError();
      }
      // #endif
    },
    /**
     * 人脸匹配
     */
    faceRecognition() {
      return new Promise((resolve) => {
        // #ifdef MP-WEIXIN
        let fileSystem = uni.getFileSystemManager();
        fileSystem.readFile({
          filePath: `${this.avatarUrl}`,
          encoding: "base64",
          position: 0,
          success: (res) => {
            let base64 = "data:image/jpg;base64," + res.data;
            // console.log('base64Data人脸识别参数：', {
            //   imageA: base64,
            //   orderGoodsId: this.orderGoodsId,
            //   gradeId: this.gradeId,
            // })

            this.CompareFace(base64, resolve);
          },
          fail(err) {
            // this.$u.toast('人脸识别错误!')
            console.error(err, "err-----人脸识别错误");
          },
        });
        // #endif
        // #ifdef H5
        this.CompareFace(this.faceUrl, resolve);
        // #endif
      });
    },
    CompareFace(url, resolve) {
      let timer = setTimeout(() => {
        uni.showToast({
          icon: "none",
          title: "拍照超时，请重新拍照",
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          },
        });
      }, 10 * 1000);

      this.$api
        .faceCertificationCompareFace({
          imageA: url,
          orderGoodsId: this.orderGoodsId,
          gradeId: this.gradeId,
        })
        .then((res) => {
          clearTimeout(timer);
          console.log(res, "人脸识别成功res");
          resolve(res.data.data);
        })
        .catch((err) => {
          clearTimeout(timer);
          // 当前网络延迟，
          console.log("人脸识别错误:", err);
          uni.showModal({
            content: "当前网络延迟",
            showCancel: false,
            success: (resultst) => {
              if (resultst.confirm) {
                uni.navigateBack();
              }
            },
          });
        });
    },
    //确认拍照
    takePhoto() {
      // #ifdef MP-WEIXIN
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          this.avatarUrl = res.tempImagePath;
          console.log("开始拍照this.avatarUrl:", this.avatarUrl);
          this.isTaking = false;
        },
        fail: (err) => {},
      });
      // #endif
      // #ifdef H5
      const canvas = document.createElement("canvas");
      canvas.width = 400;
      canvas.height = 400;
      const context = canvas.getContext("2d");
      const box = document.querySelector(".photo_v");
      const video = box.querySelector("video");
      context.drawImage(video, 0, 0, 400, 400);
      this.faceUrl = canvas.toDataURL("image/png");
      this.isTaking = false;
      // #endif
    },
    playError(e) {
      console.log(e);
    },
    //拍照报错
    error(e) {
      console.log(e.detail);
    },
    //关闭相机
    closePhoto() {
      this.photoPopup = false;
      this.enableAutoRotation = true;
    },
    async userConfirmInfoDetail() {
      let info = await this.$api.userConfirmInfoDetail({
        orderGoodsId: this.orderGoodsId,
      });
      if (!info.data.data || info.data.data.pushInfo !== 1) {
        uni.showModal({
          showCancel: false,
          title: "提示",
          content: "开通信息推送不成功，无法进入学习！",
          success: (resultst) => {
            uni.navigateBack();
          },
        });
        return Promise.reject();
      }
    },
    checkFinishRequiredCourse() {
      return this.$api
        .checkFinishRequiredCourse({
          businessId: this.goodsData.businessId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          if (res.data.data > 0) {
            uni.showModal({
              showCancel: false,
              confirmText: "确定",
              content: "该业务层次下有未学完的商品，无法学习新商品！",
              success: function (resultst) {
                uni.navigateBack();
              },
            });
            return Promise.reject();
          }
          return Promise.resolve();
        });
    },
    async getGoodsDetail() {
      let { data } = await this.$api.goodsDetail(this.goodsId);
      console.log(
        "🚀 ~ file: detail.vue:2342 ~ getGoodsDetail ~ data:",
        data.data
      );
      this.goodsData = data.data;
      this.erJianErZao = this.goodsData.erJianErZao;
      this.erJianErZao && (await this.userConfirmInfoDetail());
      this.option.periodWaitTime && (await this.checkFinishRequiredCourse());
      this.goodsData.buyNote && this.baseHandoutTipList();
      this.gradeId = this.goodsData.gradeId;
      if (this.goodsData.goodsPlayConfig) {
        this.goodsPlayConfig = JSON.parse(this.goodsData.goodsPlayConfig);
        if (this.goodsPlayConfig.autoPlay > 0) {
          this.autoplay = true;
        }
        if (this.goodsPlayConfig.drag > 0 && !this.erJianErZao) {
          // #ifdef MP-WEIXIN
          this.isAllowSeek = "yes";
          // #endif
          // #ifdef H5
          this.isAllowSeek = "off";
          // #endif
        }
        if (this.goodsPlayConfig.speed > 0) {
          this.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
        }
      }
      if (this.goodsData.goodsPhotographConfig) {
        this.goodsPhotographConfig = JSON.parse(
          this.goodsData.goodsPhotographConfig
        );
        if (this.goodsPhotographConfig.photoNum > 0) {
          this.photoNum = this.goodsPhotographConfig.photoNum;
        }
      }
    },
    getReMenuList() {
      let self = this;
      this.$api
        .reMenuList({
          orderGoodsId: this.orderGoodsId,
          courseId: this.courseId,
          rebuild: 1,
          gradeId: this.gradeId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.rows.length; i++) {
              let item = res.data.rows[i];
              item.down = true;
              item.id = item.menuId;
              item.name = item.menuName;
            }
            self.reMenuList = res.data.rows;
            this.current = 0;
            if (self.reMenuList.length > 0) {
              this.showNotes = false;
              if (Object.keys(this.sectionItem).length) {
                let playNextIdisRebuild = `moduleId${this.sectionItem.moduleId}chapterId${this.sectionItem.chapterId}sectionId${this.sectionItem.sectionId}isRebuild`;
                this.$store.commit("updatePlayNextId", playNextIdisRebuild);
              }
            } else {
              if (Object.keys(this.sectionItem).length) {
                let playNextId = `moduleId${this.sectionItem.moduleId}chapterId${this.sectionItem.chapterId}sectionId${this.sectionItem.sectionId}`;
                this.$store.commit("updatePlayNextId", playNextId);
              }
            }
          }
        });
    },
    courseDetail() {
      this.$api.courseDetail(this.courseId).then((res) => {
        if (res.data.code == 200) {
          this.detail = res.data.data;
        }
      });
    },
    open(item) {
      item.showChildren = !item.showChildren;
    },
    change(index) {
      this.current = index;
    },
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        polyvPlayerContext && polyvPlayerContext.destroy();
        polyvPlayerContext = null;
        resolve();
      });
    },
    /**
     * 退出全屏
     */
    exitFullscreen() {
      try {
        var de = document;
        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());
    },
    getUserMedia(constraints, success, error) {
      console.log("getUserMedia===", constraints, "success:", success);
      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) {
      console.log("有摄像头---", stream);
      this.photoPopup = true;
      this.isTaking = true;
      this.enableAutoRotation = false;
      this.$nextTick(() => {
        const box = document.querySelector(".photo_v");
        const video = box.querySelector("video");
        video.srcObject = stream;
        video.play();
      });
    },
    photographError(err) {
      console.log("没有摄像头：", err);
      uni.showModal({
        title: "提示",
        content:
          "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scope>
@import "./css/detail.scss";
.top {
  &__header {
    position: relative;
    width: 100%;
    height: 150rpx;
    padding: 24rpx 150rpx 24rpx 24rpx;

    .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

    .note {
      position: relative;
      z-index: 10;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #efdbff;
    }

    .title {
      position: relative;
      z-index: 10;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
#top {
  position: relative;
  z-index: 99;
}
.polyv_detail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  .pops {
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc;
    opacity: 0.5;
    width: 100%;
    height: 300rpx;
    z-index: 9999;
  }
  .box {
    flex: 1;
    overflow: hidden;
    margin: 16rpx 16rpx 100rpx 16rpx;
    .box_in {
      height: 100%;
    }
  }
  .first_ml {
    margin: 16rpx 16rpx 16rpx 16rpx;
  }
}
.btnSet {
  width: 440rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  color: #ffffff;
  font-size: 28rpx;
  line-height: 80rpx;
}

.lecture-content {
  background: #fff;
  margin-top: 10rpx;
  padding: 10rpx;
  border-radius: 16rpx;
}

.tBox {
  display: flex;
  align-items: center;
  padding-top: 10rpx;
}
.title {
  font-size: 24rpx;
  color: #999999;
}

.t_content1 {
  color: #007aff;
  margin-left: 10rpx;
}
.tag1 {
  border: 2rpx solid #007aff;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #007aff;
  padding: 5rpx;
}
.b_title {
  color: #333333;
  font-size: 30rpx;
  font-weight: bold;
}
page {
  background: #eaeef1;
}
.menuBox {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 0rpx 20rpx;
  margin-bottom: 20rpx;
}
.btnspric {
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108rpx;
  padding-left: 43rpx;
  padding-right: 32rpx;
}
.btnspric > .lefprL {
  font-size: 36rpx;
  color: #0c141f;
  font-weight: bold;
}
.btnspric > .lefprR {
  padding: 0rpx 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background: #32467b;
  border-radius: 24rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
}
.yhj,
.hdyhj {
  padding: 24rpx 29rpx 24rpx 34rpx;
}
.yhj {
  border-bottom: 16rpx solid #f9f9f9;
}
.yhjtit {
  font-size: 30rpx;
  color: #0c141f;
  font-weight: 500;
  margin-bottom: 14rpx;
}
.yhjList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14rpx;
}
.yhjList > .yhjLefts {
  display: flex;
  align-items: center;
}
.yhjLefts > .yhl {
  color: #32467b;
  font-size: 30rpx;
  margin-right: 31rpx;
}
.yhjLefts > .yhbq {
  font-size: 24rpx;
  color: #ff9500;
  border-radius: 18rpx;
  background-color: rgba(255, 149, 0, 0.2);
  border: 2rpx solid #ff9500;
  height: 38rpx;
  line-height: 38rpx;
  padding: 0rpx 16rpx;
}
.ts {
  font-size: 24rpx;
  color: #999;
  margin: 14rpx 0rpx;
  padding-right: 29rpx;
  padding-left: 34rpx;
}
.yh {
  padding-top: 20rpx;
}
.yh > .yhtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 29rpx;
  padding-left: 34rpx;
}
.priceBxs {
  display: flex;
  align-items: center;
}
.priceBxs > .pricleft {
  border-radius: 24rpx;
  border: 1rpx solid #e91313;
  background-color: rgba(233, 19, 19, 0.1);
  padding: 0rpx 18rpx;
  height: 49rpx;
  line-height: 49rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: 500;
  color: #e91313;
  margin-right: 13rpx;
}
.topBox {
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 1rpx solid #eeeeee;
}
.topBox > .boldFonstType {
  font-weight: 500;
  font-size: 30rpx;
  margin: 16rpx 0rpx 23rpx;
}
.topBox > .firstTopL {
  display: flex;
  align-items: center;
}
.topBox > .firstTopL > .imageBs {
  width: 331rpx;
  height: 160rpx;
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 8rpx;
  box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
}
.topBox > .firstTopL > .imageBs > image {
  width: 100%;
  height: 100%;
}
.topBox > .firstTopL > .textBs {
  font-size: 30rpx;
  font-weight: bold;
  color: #0c141f;
}
.content {
  padding: 24rpx;
  text-align: left;
}
.catalogBox {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-left: 38rpx;
  max-height: 305rpx;
  overflow-y: auto;
  transition: all 0.4s;
}
.catalogBox > .catalogA {
  min-width: 200rpx;
  height: 48rpx;
  line-height: 48rpx;
  // text-align: center;
  border: 2rpx solid transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  border-radius: 10rpx;
  background: rgba(22, 119, 255, 0.05);
  padding-left: 19rpx;
  box-sizing: border-box;
  padding-right: 15rpx;
  margin-right: 16rpx;
  margin-bottom: 20rpx;
  margin-top: 15rpx;
  font-size: 24rpx;
  color: #666;
}
.catalogBox > .activesq {
  border-color: #1677ff;
}
.changeCatalogBox {
  display: block;
}
.catalogBox::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.price_t2 {
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: 500;
  text-decoration: line-through;
  color: #999999;
}
.price_t1 {
  font-size: 33rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #e91313;
}
.sc_t {
  font-size: 22rpx;
  color: #000000;
}
.sc {
  width: 29rpx;
  height: 29rpx;
}
.buy {
  width: 138rpx;
  height: 48rpx;
  line-height: 48rpx;
  background: #32467b;
  border-radius: 10rpx;
  color: #ffffff;
  font-size: 28rpx;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  right: 30rpx;
}
.video_body {
  padding-bottom: 96rpx;
}
.footer_tab {
  position: fixed;
  bottom: 0;
  height: 96rpx;
  width: 100%;
  background-color: #ffffff;
}
.tj_box {
  width: 50%;
  display: inline-block;
  text-align: center;
  margin: 10rpx 0;
}
.teacher_t {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 36rpx;
  margin-left: 15rpx;
}
.teacher_img {
  width: 87rpx;
  height: 129rpx;
}
.t2 {
  font-size: 24rpx;
  font-family: PingFang SC;
  color: #666666;
  line-height: 36rpx;
  margin: 15rpx;
}
.r_t2 {
  width: 201rpx;
  height: 49rpx;
  background: rgba(22, 119, 255, 0.05);
  border: 1rpx solid #32467b;
  border-radius: 16rpx;
  color: #666666;
  font-size: 23rpx;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 5rpx;
}
.scroll_box {
  width: 100%;
  height: 60rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  white-space: nowrap;
  overflow: hidden;
  margin: 15rpx 0;
}
.r_sliper {
  padding: 0 20rpx;
}
.top_line {
  width: 6rpx;
  height: 22rpx;
  background: #32467b;
  margin-right: 10rpx;
}
.video_t2 {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}

.video_play {
  position: absolute;
  width: 95rpx;
  height: 95rpx;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.video_box {
  position: relative;
}
.rotoct {
  transform: rotate(90deg);
}

.slot-content {
  padding: 0 20rpx;
}

.notice_modal {
  .content {
    width: 100%;
    height: 100%;
    padding: 56rpx 56rpx 56rpx 64rpx;

    .title {
      color: #222;
      line-height: 40rpx;
      font-size: 36rpx;
      text-align: center;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    .text {
      height: 340rpx;
      line-height: 40rpx;
      text-indent: 2em;
      font-size: 32rpx;
      color: #222;
    }
    .had_read {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #3577e8;
      border-radius: 240rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      margin-top: 20rpx;
      &.gray {
        background: #bbbec5;
      }
    }
  }
}
.full_mulu {
  position: absolute;
  top: 100rpx;
  right: 20rpx;
  width: 700rpx;
  height: 515rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99999;
  .mulus {
    width: 623rpx;
    // height: 515rpx;
    height: 400rpx;
    overflow-y: scroll;
    // overflow: scroll;
  }
  .mulu_box_in {
    background-color: #b7b7b7;
    border-radius: 16rpx;
    // transition: all 0.5s;
    &::after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: 235rpx;
      right: 27px;
      border-top: 16rpx solid transparent;
      border-right: 16rpx solid transparent;
      border-left: 16rpx solid #b7b7b7;
      border-bottom: 16rpx solid transparent;
    }
  }
  .mulu_box_out {
    // visibility: hidden;
    display: none;
  }
  .menuBox_mulu {
    // width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 0rpx 20rpx;
    margin-bottom: 20rpx;
  }
  .ml_img {
    position: absolute;
    right: 0;
    top: 100rpx;
  }
  .items {
    width: 620rpx;
    height: 100rpx;
    border: 1rpx solid red;
  }
}
</style>