update

src/components/pptEasyClass/index copy.vue

@@ -0,0 +1,284 @@
+<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:"",
+    };
+  },
+  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
+        )
+      }
+    }
+  },
+  mounted() {
+    this.getCourseDetail();
+  }
+};
+</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>