saas_pc/src/pages/course-detail/components/coreContent.vue

<template>
  <div id="coreContent">
    <div class="left_box">
      <video-cy
        :class="video_iframe == 'video' ? 'smallView' : ''"
        v-show="video_iframe == 'video' && !viewStatus ? false : true"
        ref="video_cy"
        @videoScript="videoScript"
        :activeSection.sync="activeSection"
      ></video-cy>
      <div
        class="office_style"
        :class="video_iframe == 'iframe' ? 'smallView' : ''"
        v-show="video_iframe == 'iframe' && !viewStatus ? false : true"
        v-if="SwitchOfficeData.url"
      >
        <iframe
          width="100%"
          height="100%"
          :src="
            'https://preview.xyyxt.net?src=' +
            $tools.splitImgHost(SwitchOfficeData.url)
          "
        ></iframe>
      </div>
      <div v-if="SwitchOfficeData.url && viewStatus" class="floatView">
        <el-button size="small" type="primary" @click="switchView"
          >切换</el-button
        >
        <el-button size="small" type="warning" @click="viewStatus = !viewStatus"
          >隐藏</el-button
        >
      </div>
      <el-button
        v-if="!viewStatus"
        size="small"
        class="showOK"
        @click="viewStatus = !viewStatus"
        >显示</el-button
      >
    </div>
    <div class="right_box">
      <el-tabs stretch v-model="courseTabIndex">
        <el-tab-pane
          lazy
          :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'">
            <course-tree ref="courseTree" :activeSection.sync="activeSection">
            </course-tree>
          </template>
          <!-- 重修目录 -->
          <template v-if="tab.name == '2'">
            <course-tree :activeSection.sync="activeSection" :rebuild="1">
            </course-tree>
          </template>
          <template v-if="tab.name == '3'">
            <answer-questions
              ref="answerQuestions"
              :activeSection.sync="activeSection"
            ></answer-questions>
          </template>
          <template v-if="tab.name == '4'">
            <Notes ref="notes"></Notes>
          </template>
          <template v-if="tab.name == '5'">
            <hand-out
              ref="handOut"
              @backSwitchOfficeData="backSwitchOfficeData"
            ></hand-out>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <dataReview ref="dataReview" @callbackDataReview="callbackDataReview" />
    <preference ref="preference" />
  </div>
</template>

<script>
import preference from "@/components/preference";
import dataReview from "@/components/dataReview";
import CourseTree from "./CourseTree.vue";
import AnswerQuestions from "./AnswerQuestions.vue";
import HandOut from "./HandOut.vue";
import Notes from "./Notes.vue";
export default {
  components: {
    videoCy: () => import("@/components/videoCy/index.vue"),
    Notes,
    HandOut,
    AnswerQuestions,
    CourseTree,
    dataReview,
    preference,
  },
  inject: ["getGoodsData"],
  provide() {
    return {
      getPlayer: () => this.player,
      getActiveSection: () => this.activeSection,
    };
  },
  data() {
    return {
      video_iframe: "iframe", //当前缩小视图层
      viewStatus: true, //开关隐藏
      courseTabIndex: "",
      menuTab: [
        {
          name: "1",
          label: "章节目录",
        },
        {
          name: "3",
          label: "答疑",
        },
        {
          name: "4",
          label: "笔记",
        },
        {
          name: "5",
          label: "讲义",
        },
      ],
      gradeDetail: {}, //班级详情
      player: null, //视频播放器实例
      SwitchOfficeData: {}, //当前选中讲义数据
      activeSection: {}, //当前选中节数据
    };
  },
  computed: {
    goodsData() {
      return this.getGoodsData();
    },
  },
  watch: {
    //因为刚开始获取不到goodsData的数据 所以需要监听
    goodsData: function (newVal, oldVal) {
      if (newVal) {
        this.getBeforeWork(); //处理前置任务
      }
    },
  },
  methods: {
    //切换视图
    switchView() {
      this.video_iframe == "iframe"
        ? (this.video_iframe = "video")
        : (this.video_iframe = "iframe");
    },
    //处理前置任务
    getBeforeWork() {
      //商品优选操作
      if (this.goodsData.firstChoiceStatus) {
        this.$refs.preference.openBoxs(this.goodsData);
      } else {
        this.$refs.dataReview.init({
          goodsId: this.goodsData.goodsId,
          orderGoodsId: this.goodsData.orderGoodsId,
          gradeId: this.goodsData.gradeId,
          goodsName: this.goodsData.goodsName,
          educationName: this.goodsData.educationName,
          projectName: this.goodsData.projectName,
          businessName: this.goodsData.businessName,
          categoryName: this.goodsData.categoryName,
        });
      }
    },
    //资料填写回调
    async callbackDataReview() {
      await this.RequiredCourse(); //检测必修
      await this.orderstudycheckFunc(); //七大员是否允许学习
      await this.confirmInfoDetail(); //判断开通信息推送是否成功
      if (this.goodsData.gradeId > 0 && this.goodsData.jjShiGongYuan) {
        await this.getGradeInfo(); //提交完资料返回判断是否已开班
        //继教七大员公共课程同步
        const res = await this.$request.ordersevenyear(
          this.goodsData.orderGoodsId
        );
        if (res.data) {
          this.goodsData.orderYears = res.data;
          await this.sevenCommonCourse();
        }
      }
      await this.getRebuildCourse(); //获取重修列表
      this.courseTabIndex = "1";
    },
    //七大员是否允许学习
    orderstudycheckFunc() {
      return new Promise((resolve, reject) => {
        this.$request
          .orderstudycheck(this.goodsData.orderGoodsId)
          .then((res) => {
            resolve();
          })
          .catch((err) => {
            this.$confirm(err.msg, "提示", {
              confirmButtonText: "确定",
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showCancelButton: false,
              distinguishCancelAndClose: false,
              showClose: false,
            })
              .then((_) => {
                this.$router.back(-1);
              })
              .catch((_) => {});
            reject();
          });
      });
    },
    //检测必修
    RequiredCourse() {
      return new Promise((resolve, reject) => {
        if (
          this.goodsData.educationName == "继续教育" &&
          this.goodsData.businessName == "二级" &&
          (this.goodsData.projectName == "建造师" ||
            this.goodsData.projectName == "造价师")
        ) {
          this.$request
            .goodsGradeCheckFinishRequiredCourse({
              businessId: this.goodsData.businessId,
              goodsId: this.goodsData.goodsId,
            })
            .then((res) => {
              if (res.data > 0) {
                this.$confirm(`请先学习必修商品`, "提示", {
                  confirmButtonText: "确定",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  showCancelButton: false,
                  distinguishCancelAndClose: false,
                  showClose: false,
                })
                  .then((_) => {
                    this.$router.back(-1);
                  })
                  .catch((_) => {});
                reject();
              } else {
                resolve();
              }
            })
            .catch((err) => {
              this.$confirm(err.msg, "提示", {
                confirmButtonText: "确定",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showCancelButton: false,
                distinguishCancelAndClose: false,
                showClose: false,
              })
                .then((_) => {
                  this.$router.back(-1);
                })
                .catch((_) => {});
              reject();
            });
        } else {
          resolve();
        }
      });
    },
    //提交完资料返回判断是否已开班
    getGradeInfo() {
      return new Promise((resolve, reject) => {
        this.$request.goodsGradeInfo(this.goodsData.gradeId).then((res) => {
          if (res.code == 200) {
            this.gradeDetail = res.data;
            let nowTime = parseInt(new Date().getTime() / 1000);
            if (this.goodsData.erJianErZao || this.goodsData.jjShiGongYuan) {
              if (res.data.classEndTime && res.data.classEndTime < nowTime) {
                this.$confirm(
                  `当前课程所属班级有效期已过期,无法继续学习！`,
                  "提示",
                  {
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    showCancelButton: false,
                    distinguishCancelAndClose: false,
                    showClose: false,
                  }
                )
                  .then((_) => {
                    this.$router.back(-1);
                  })
                  .catch((_) => {});
                return;
              }
            }
            if (res.data.interfaceAccountId > 0 && res.data.learnStatus > 0) {
              const confirmText = [
                "您的学习账号已经开通，请按照步骤操作，进行学习。",
                "1.点击【跳转学习网址】按钮",
                "2.打开学习网址后，选择【个人用户】进行登录",
                "(1)账号：您个人的身份证号码",
                "(2)密码：身份证号码，再加111111",
              ];
              const newDatas = [];
              const h = this.$createElement;
              for (const i in confirmText) {
                newDatas.push(h("p", null, confirmText[i]));
              }
              this.$confirm(h("div", null, newDatas), "温馨提示", {
                beforeClose: (type, y, done) => {
                  if (type == "confirm") {
                    window.open("http://admin.zhujianpeixun.com/", "_blank");
                  } else if (type == "cancel") {
                    this.$router.back(-1);
                  }
                },
                confirmButtonText: "跳转学习网址",
                cancelButtonText: "关闭",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
              });
              return;
            }
            if (res.data.learningStatus == 2) {
              this.$confirm(
                `当前课程正在申请中，正式开班后方可进行学习，请耐心等候！`,
                "提示",
                {
                  confirmButtonText: "确定",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  showCancelButton: false,
                  distinguishCancelAndClose: false,
                  showClose: false,
                }
              )
                .then((_) => {
                  this.$router.back(-1);
                })
                .catch((_) => {});
              return;
            }
            if (
              res.data.learningStatus == 3 &&
              Number(res.data.learningTimeStart) > Number(new Date() / 1000)
            ) {
              this.$confirm(
                `当前课程正在申请中，正式开班后方可进行学习，请耐心等候！`,
                "提示",
                {
                  confirmButtonText: "返回",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  showCancelButton: false,
                  distinguishCancelAndClose: false,
                  showClose: false,
                }
              )
                .then((_) => {
                  this.$router.back(-1);
                })
                .catch((_) => {});
              return;
            }
            if (
              (res.data.interfaceAccountId > 0 && res.data.learnStatus > 0) ||
              res.data.learningStatus == 2 ||
              (res.data.learningStatus == 3 &&
                Number(res.data.learningTimeStart) > Number(new Date() / 1000))
            ) {
              reject();
            } else {
              resolve();
            }
          }
        });
      });
    },
    //继教七大员公共课程同步
    sevenCommonCourse() {
      return new Promise((resolve, reject) => {
        this.$request
          .syncSevenPublicClass({ orderGoodsId: this.goodsData.orderGoodsId })
          .then((res) => {
            if (res.code == 200) {
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            if(err.msg=='课程定位错误')
          {
            resolve();
          }
          else{
            this.$alert(err.msg, "提示", {
              confirmButtonText: "返回",
              showClose: false,
              callback: (action) => {
                this.$router.go(-1);
              },
            });
            reject();
          }
          });
      });
    },
    //判断开通信息推送是否成功
    confirmInfoDetail() {
      return new Promise(async (resolve, reject) => {
        if (this.goodsData.erJianErZao || this.goodsData.jjShiGongYuan) {
          let info = await this.$request.userConfirmInfoDetail({
            orderGoodsId: this.goodsData.orderGoodsId,
          });
          if (!info.data || info.data.pushInfo !== 1) {
            this.$confirm(`您的信息正在推送中，请稍后再进入学习！`, "提示", {
              confirmButtonText: "确定",
              closeOnClickModal: false,
              closeOnPressEscape: false,
              distinguishCancelAndClose: false,
              showCancelButton: false,
              showClose: false,
            })
              .then((_) => {
                //停止执行-退出页面
                this.$router.back(-1);
              })
              .catch((_) => {
                //停止执行-退出页面
                this.$router.back(-1);
              });
            reject();
          } else {
            resolve();
          }
        } else {
          resolve();
        }
      });
    },
    //获取重修列表
    getRebuildCourse() {
      return new Promise((resolve, reject) => {
        this.$request
          .getRebuildCourse({
            goodsId: this.goodsData.goodsId,
            rebuild: 1,
            gradeId: this.goodsData.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
          })
          .then(async (res) => {
            if (res.data.length > 0) {
              console.log(res.data, "resda");
              this.menuTab.splice(1, 0, {
                name: "2",
                label: "重修目录",
              });
            }
            resolve();
          })
          .catch((err) => {
            this.$message.error(err + "、重修列表获取失败");
            reject();
          });
      });
    },
    //讲义模块返回
    backSwitchOfficeData(item) {
      this.SwitchOfficeData = Object.assign({}, item);
    },
    //视频播放实例
    videoScript(player) {
      this.player = player;
      this.video_iframe = "iframe"; //当前缩小视图层
      this.viewStatus = true; //开关隐藏
    },
  },
};
</script>

<style lang="scss" scoped>
#coreContent {
  // background-color: skyblue;
  display: flex;
  width: 100%;
  height: 455px;
  & > .left_box {
    width: 810px;
    flex-shrink: 0;
    position: relative;
    & > .office_style {
      width: 810px;
      height: 455px;
    }
    & > .smallView {
      position: absolute;
      z-index: 123;
      right: 4px;
      bottom: 60px;
      transform: scale(0.2);
      transform-origin: 100% 100%;
    }
    & > .floatView {
      position: absolute;
      z-index: 124;
      right: 4px;
      bottom: 60px;
      width: 162px;
      height: 91px;
      background-color: rgba(225, 225, 225, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    & > .showOK {
      position: absolute;
      z-index: 124;
      right: 10px;
      bottom: 87px;
      opacity: 0.3;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  & > .right_box {
    width: 1px;
    flex: 1;
    & > .el-tabs {
      height: 100%;
      background-color: #3f4449;
      display: flex;
      flex-direction: column;
      /deep/ .el-tabs__header {
        background-color: #3f4449 !important;
        margin: 0px !important;
        .label {
          color: #fff;
        }
      }
      /deep/ .el-tabs__content {
        flex: 1;
        height: 1px;
        overflow: auto;
        background-color: #3f4449 !important;
      }
    }
  }
}
</style>