update

src/components/pptEasyClass/index.vue

@@ -3,11 +3,7 @@
     <div class="pec_main" v-loading="pageLoading">
       <div class="pec_header">
         <div class="pec_h_left">
-          <div
-            @click.stop="back"
-            class="backBtn"
-            v-if="screenType!=2"
-          >
+          <div @click.stop="back" class="backBtn" v-if="screenType != 2">
             <img src="../../assets/icon/newIcon/return.svg" alt="" />
           </div>
           <div v-if="tcid" class="class-info-group">
@@ -23,6 +19,18 @@
           <div class="pec_h_l_title">
             <span>{{ courseDetail.title }}</span>
           </div>
+          <div class="free-browse-switch">
+            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? '自由浏览' : '跟随模式' }}</span>
+            <el-switch
+              v-model="freeBrowse"
+              :active-value="true"
+              :inactive-value="false"
+              class="custom-switch"
+              active-color="#FCCF00"
+              inactive-color="#F53F3F"
+              @change="onFreeBrowseChange"
+            ></el-switch>
+          </div>
         </div>
         <div class="pec_h_right">
           <div class="pec_h_r_btnArea">
@@ -41,7 +49,9 @@
       </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>
+        <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" ref="ppt"></iframe>
       </div>
     </div>
   </div>
@@ -64,14 +74,15 @@ export default {
       courseType: this.$route.query.type,
       screenType: this.$route.query.screenType,
       tcid2: this.$route.query.tcid,
-      tcid:"",
-      className:"",
+      tcid: "",
+      className: "",
       showIframe: false,
       iframeSrc: "",
       courseDetail: {},
       pageLoading: false,
-      inviteCode:"",
+      inviteCode: "",
       startTime: "",
+      freeBrowse: true, // 默认自由浏览
     };
   },
   methods: {
@@ -131,9 +142,9 @@ export default {
 
       this.$nextTick(() => {
         let api = ''
-        if(this.$region == 'beta'){
+        if (this.$region == 'beta') {
           api = 'https://beta.ppt.cocorobo.cn'
-        }else {
+        } else {
           api = 'https://ppt.cocorobo.cn'
         }
         let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
@@ -158,55 +169,60 @@ export default {
       }
       return commonElements;
     },
-    async getClassName(){
+    async getClassName() {
       let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
       this.className = courseGrade.data[0][0].grade;
     },
-    back(){
-      if(this.tType!=2){
+    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
+          this.userid +
+          '&oid=' +
+          this.oid +
+          '&org=' +
+          this.org +
+          '&cid=' +
+          this.classId +
+          '&courseId=' +
+          this.id +
+          '&tType=' +
+          this.tType +
+          '&screenType=' +
+          this.screenType
         )
-      }else{
+      } else {
         this.goTo(
           '/index?userid=' +
-            this.userid +
-            '&oid=' +
-            this.oid +
-            '&org=' +
-            this.org +
-            '&cid=' +
-            this.classId +
-            '&tType=' +
-            this.tType +
-            '&screenType=' +
-            this.screenType
+          this.userid +
+          '&oid=' +
+          this.oid +
+          '&org=' +
+          this.org +
+          '&cid=' +
+          this.classId +
+          '&tType=' +
+          this.tType +
+          '&screenType=' +
+          this.screenType
         )
       }
     },
-    afterClass(){
+    afterClass() {
       this.$message.warning('下课功能暂未开放')
     },
+    onFreeBrowseChange(value) {
+      this.freeBrowse = value;
+      console.log('自由浏览模式已切换为1：', this.freeBrowse);
+      this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
+    }
   },
-  destroyed(){
-    if(this.courseDetail.userid == this.userid && this.tcid2 && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840'){
-      let endTime = new Date().toLocaleString("zh-CN", { 
-          hour12: false, 
-          timeZone: "Asia/Shanghai" 
-        }).replace(/\//g, "-")
+  destroyed() {
+    if (this.courseDetail.userid == this.userid && this.tcid2 && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840') {
+      let endTime = new Date().toLocaleString("zh-CN", {
+        hour12: false,
+        timeZone: "Asia/Shanghai"
+      }).replace(/\//g, "-")
       let courseTime = Math.floor((new Date(endTime) - new Date(this.startTime)) / (1000 * 60))
       this.syncClassData({
         courseId: this.id,
@@ -220,12 +236,16 @@ export default {
     }
   },
   mounted() {
-    this.startTime = new Date().toLocaleString("zh-CN", { 
-      hour12: false, 
-      timeZone: "Asia/Shanghai" 
+    this.startTime = new Date().toLocaleString("zh-CN", {
+      hour12: false,
+      timeZone: "Asia/Shanghai"
     }).replace(/\//g, "-")
     this.getClassName()
     this.getCourseDetail();
+    window.onFreeBrowseChange = (value) => {
+      this.freeBrowse = value;
+      console.log('自由浏览模式已切换为：', this.freeBrowse);
+    }
   }
 };
 </script>
@@ -300,7 +320,7 @@ export default {
   justify-content: center;
 }
 
-.pec_h_r_btnArea > div {
+.pec_h_r_btnArea>div {
   width: auto;
   height: auto;
   display: flex;
@@ -316,20 +336,20 @@ export default {
   border: 1px solid #cad1dc;
 }
 
-.pec_h_r_btnArea > div > img {
+.pec_h_r_btnArea>div>img {
   width: 15px;
   height: 15px;
   margin-right: 5px;
 }
 
-.pec_h_r_btnArea > .pec_h_r_btn_refresh {
+.pec_h_r_btnArea>.pec_h_r_btn_refresh {
   color: #fff;
   background-color: #0061ff;
   border-color: #0061ff;
 }
 
-.pec_h_r_btnArea > .pec_h_r_btn_afterClass{
-  border-color:#F0E1DD;
+.pec_h_r_btnArea>.pec_h_r_btn_afterClass {
+  border-color: #F0E1DD;
   background-color: #FFF7F5;
   color: #F53F3F;
 }
@@ -380,4 +400,20 @@ export default {
   border-radius: 0 0 12px 12px;
   background-color: #fff;
 }
+
+.free-browse-switch {
+  display: flex;
+  align-items: center;
+  padding: 9px 10px;
+  background: #FFF7F5;
+  border-radius: 26px;
+  margin-left: 15px;
+  gap: 5px;
+}
+
+.switch-label {
+  background: linear-gradient(to right, #F53F3F, #FCCF00);
+  -webkit-background-clip: text;
+  color: transparent;
+}
 </style>