pbl-student-table/src/components/pptEasyClass/index.vue

<template>
  <div class="pptEasyClass">
    <div class="pec_main" v-loading="pageLoading">
      <div class="pec_header">
        <div class="pec_h_left">
          <div class="pec_h_l_title">
            <span>{{ courseDetail.title }}</span>
          </div>

          <div v-if="tcid && inviteCode" class="inviteBox" style="margin-left: 20px;">
              <span>随机码：{{ inviteCode }}</span>
            </div>
        </div>

        <div class="pec_h_right">
          <div class="pec_h_r_btnArea">
            <el-tooltip effect="light" content="刷新" placement="top">
              <div class="pec_h_r_btn_refresh" @click="refreshCourse">
                <img src="../../assets/icon/newIcons/refresh.png" alt="" />
                <span>刷新</span>
              </div>
            </el-tooltip>

            <div
              @click.stop="back"
              v-if="screenType!=2"
            >
              <img src="../../assets/icon/newIcon/return.png" alt="" />
              <span style="color: #000">返回</span>
            </div>
          </div>
        </div>
      </div>

      <div class="pec_content">
        <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc" v-if="showIframe" style="width: 100%; height: 100%; border: none"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.courseId,
      userid: this.$route.query.userid,
      classId: this.$route.query.cid,
      role: this.$route.query.role,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      tType: this.$route.query.tType,
      courseType: this.$route.query.type,
      screenType: this.$route.query.screenType,
      tcid2: this.$route.query.tcid,
      tcid:"",
      showIframe: false,
      iframeSrc: "",
      courseDetail: {},
      pageLoading: false,
      inviteCode:"",
      opertimer: null, // 定时器
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    refreshCourse() {
      this.getCourseDetail();
    },
    getCourseDetail() {
      this.pageLoading = true;
      let params = {
        courseId: this.id
      };

      this.ajax
        .get(this.$store.state.api + "selectCourseDetail3", params)
        .then(res => {
          console.log("getCourseDetail", res);
          this.courseDetail = res.data[0][0];
          this.courseDetail.chapters = JSON.parse(this.courseDetail.chapters);
          this.tcid = this.arrayToArray(
            this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
            this.tcid2 ? this.tcid2.split(",") : []
          )[0] || "";
          if (this.tcid && res.data[1].length) {
            let _inviteA = [];
            for (var ik = 0; ik < res.data[1].length; ik++) {
              _inviteA.push({
                cid: res.data[1][ik].classid,
                ic: res.data[1][ik].code,
              });
            }
            for (var ik = 0; ik < _inviteA.length; ik++) {
              if (
                this.arrayToArray(
                  _inviteA[ik].cid.split(","),
                  this.tcid.split(",")
                ).length
              ) {
                this.inviteCode = _inviteA[ik].ic;
                break;
              }
            }
          }
          this.setPptIframe()
          this.pageLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取课程数据失败");
          this.pageLoading = false;
        });
    },
    setPptIframe() {
      this.showIframe = false;

      this.$nextTick(() => {
        let _url = `https://ppt.cocorobo.cn/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;

        this.iframeSrc = _url;

        this.showIframe = true;
      });
    },
    arrayToArray(arrayo, arrayt) {
      let array1 = arrayo;
      let array2 = arrayt;

      let commonElements = [];

      for (let i = 0; i < array1.length; i++) {
        for (let j = 0; j < array2.length; j++) {
          if (array1[i] === array2[j]) {
            commonElements.push(array1[i]);
          }
        }
      }
      return commonElements;
    },
    back(){
      if(this.tType!=2){
        this.goTo(
          '/courseDetail?userid=' +
            this.userid +
            '&oid=' +
            this.oid +
            '&org=' +
            this.org +
            '&cid=' +
            this.classId +
            '&courseId=' +
            this.id +
            '&tType=' +
            this.tType +
            '&screenType=' +
            this.screenType
        )
      }else{
        this.goTo(
          '/index?userid=' +
            this.userid +
            '&oid=' +
            this.oid +
            '&org=' +
            this.org +
            '&cid=' +
            this.classId +
            '&tType=' +
            this.tType +
            '&screenType=' +
            this.screenType
        )
      }
    },
    setOperationTime() {
      let _this = this;
      if (_this.opertimer) {
        clearInterval(_this.opertimer);
        _this.opertimer = null;
      }
      _this.opertimer = setInterval(() => {
        _this.setoTime("600");
      }, 600000);
    },
    setoTime(time) {
      let params = [
        {
          uid: this.userid,
          cid: this.id,
          type: "2",
          time: time,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addOperationTimeT2", params)
        .then((res) => {})
        .catch((err) => {
          console.error(err);
        });
    },
  },
  destroyed() {
    clearInterval(this.opertimer);
    this.opertimer = null;
  },
  mounted() {
    this.getCourseDetail();
    this.setOperationTime();
  }
};
</script>

<style scoped>
.pptEasyClass {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f2f2f2;
}

.pec_main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
}

.pec_header {
  width: 100%;
  height: 80px;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
  border-bottom: solid 1px #cad1dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pec_h_left {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  font-weight: bold;
  font-size: 20px;
  color: #0e1e33;
}

.pec_h_right {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.pec_h_r_btnArea {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pec_h_r_btnArea > div {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #f0f4fa;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  border: 1px solid #cad1dc;
}

.pec_h_r_btnArea > div > img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.pec_h_r_btnArea > .pec_h_r_btn_refresh {
  color: #fff;
  background-color: #0061ff;
  border-color: #0061ff;
}

.pec_content {
  width: 100%;
  height: calc(100% - 80px);
  border-radius: 0 0 12px 12px;
  background-color: #fff;
}


.inviteBox {
  font-size: 14px;
  /* margin-top: 5px; */
  color: #00000099;
  text-align: center;
}
</style>