实时课堂

src/components/liveProjectDetail.vue

@@ -181,6 +181,19 @@
                   <div>思维导图</div>
                 </div>
               </div>
+              <div
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(28) != -1
+                "
+                @click="checkTools(28)"
+                class="toolCss"
+              >
+                <div class="toolImg">
+                  <img src="../assets/icon/thirdToolList/translation.png" alt />
+                  <div>翻译</div>
+                </div>
+              </div>
               <div
                 v-if="
                   tools[ppage - 1].tools &&
@@ -266,6 +279,23 @@
                   ref="mind"
                 ></iframe>
               </div>
+              <div v-if="toolCount == 28" class="tools_child_box">
+                <div class="tools_title">
+                  <span>翻译</span>
+                  <div>
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
+                  </div>
+                </div>
+                <iframe
+                  style="width: 100%; height: 100%; border: none"
+                  src="//dict.youdao.com/"
+                  ref="mind"
+                ></iframe>
+              </div>
               <div v-if="toolCount == 6" class="tools_child_box">
                 <div class="tools_title">
                   <span>协同文档</span>
@@ -334,7 +364,9 @@
                 </div>
               </div>
               <div class="nextStepBox">
-                <div class="nextStepOne" @click="isBlock = 4">返回</div>
+                <div class="nextStepOne" @click="(isBlock = 4), (full = false)">
+                  返回
+                </div>
               </div>
               <div
                 class="nextStepOne"
@@ -409,7 +441,7 @@
                 bottom: 0;
               "
             >
-              <el-button @click="isBlock = 0">取消</el-button>
+              <!-- <el-button @click="isBlock = 0">取消</el-button> -->
               <el-button type="primary" @click="addWork(6)">确定</el-button>
             </span>
           </div>
@@ -504,9 +536,9 @@
                 </div>
               </div>
             </div>
-            <div class="nextStepBox">
+            <!-- <div class="nextStepBox">
               <div class="nextStepOne" @click="isBlock = 0">关闭</div>
-            </div>
+            </div> -->
           </div>
           <div
             class="answerBox"
@@ -525,9 +557,9 @@
                   ></video-player>
                 </div>
               </div>
-              <div class="nextStepBox" style="margin-top: 5%">
+              <!-- <div class="nextStepBox" style="margin-top: 5%">
                 <div class="nextStepOne" @click="isBlock = 0">关闭</div>
-              </div>
+              </div> -->
             </div>
           </div>
           <div
@@ -548,6 +580,29 @@
               </div>
             </div>
           </div>
+          <div
+            class="answerBox"
+            :class="{ fullStyle: full }"
+            v-if="isBlock == 9"
+          >
+            <div style="height: 70%; width: 100%">
+              <div class="wheel">
+                <div class="workd_media" style="height: 100%">
+                  <audio
+                    style="margin: 0 auto; display: block"
+                    :src="audioUrl"
+                    controls="controls"
+                    ref="audio"
+                  >
+                    Your browser does not support the audio element.
+                  </audio>
+                </div>
+              </div>
+              <!-- <div class="nextStepBox" style="margin-top: 5%">
+                <div class="nextStepOne" @click="isBlock = 0">关闭</div>
+              </div> -->
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -610,6 +665,32 @@
         确定
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="dialogVisiblePick"
+      :append-to-body="true"
+      width="500px"
+      class="dialog_diy"
+    >
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
+        你被老师点名起来回答了！！！
+      </div>
+      <div
+        style="
+          width: 200px;
+          background: #4d8ae0;
+          height: 35px;
+          margin: 0 auto;
+          text-align: center;
+          line-height: 35px;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+        @click="pick"
+      >
+        确定
+      </div>
+    </el-dialog>
     <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
   </div>
 </template>
@@ -641,6 +722,7 @@ export default {
       mr: require("../assets/kc1.png"),
       timu: [],
       dialogVisible: false,
+      dialogVisiblePick: false,
       answerBox: "",
       isNoHomeWork: false,
       answer: [
@@ -665,6 +747,14 @@ export default {
       toolCount: 0,
       tools: [
         "",
+        //  {
+        //   file: [
+        //     {
+        //       name: "音频1.MP3",
+        //       src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
+        //     },
+        //   ],
+        // }
         "",
         {
           file: [
@@ -692,7 +782,7 @@ export default {
         },
         { tools: [9] },
         "",
-        { tools: [3] },
+        { tools: [3, 28] },
         { tools: [16] },
         { tools: [14] },
         "",
@@ -724,6 +814,8 @@ export default {
       imgFile: "",
       imgFileUp: [],
       videoList: [],
+      videoList2: [],
+      audioUrl: "",
       fileList: [],
       playerOptions: {
         playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
@@ -1021,16 +1113,19 @@ export default {
       //   this.$message.error("请填写简要描述");
       //   return;
       // }
+      var _str = "";
+      if (type == 6) {
+        _str = "您已经提交了评价了，如果您再提交将覆盖上次提交的评价！";
+      } else {
+        _str = "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！";
+      }
+
       if (this.isNoHomeWork == true || this.isAnswer == true) {
-        this.$confirm(
-          "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
-          "提示",
-          {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          }
-        )
+        this.$confirm(_str, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
           .then(() => {
             this.addSWork(type);
           })
@@ -1198,6 +1293,7 @@ export default {
     selectFile() {
       this.fileList = [];
       this.videoList = [];
+      this.videoList2 = [];
       var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
       var b = this.tools[this.ppage - 1].file;
       for (var i = 0; i < b.length; i++) {
@@ -1209,11 +1305,21 @@ export default {
           ) != -1
         ) {
           this.fileList.push(b[i]);
+        } else if (
+          b[i].src
+            .split(".")
+            [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
+        ) {
+          this.videoList2.push(b[i]);
         } else {
           this.videoList.push(b[i]);
         }
       }
-      this.playVideo();
+      if (this.videoList.length) {
+        this.playVideo();
+      } else if (this.videoList2.length) {
+        this.playVideo2();
+      }
     },
     openFile(u) {
       this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
@@ -1228,6 +1334,10 @@ export default {
       }
       this.isBlock = 6;
     },
+    playVideo2() {
+      this.audioUrl = this.videoList2[0].src;
+      this.isBlock = 9;
+    },
     switchVideo(media) {
       this.playerO = {};
       this.playerOptions.poster = "";
@@ -1240,7 +1350,7 @@ export default {
         return;
       }
       if (page == this.pageTotal) {
-        this.isBlock = 3;
+        // this.isBlock = 3;
       } else {
         this.isBlock = 0;
         if (
@@ -1308,12 +1418,34 @@ export default {
       }
       this.selectSWork();
     },
-
+    pick() {
+      let params = [
+        {
+          h: "",
+          cid: this.cid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updatePPTHandle", params)
+        .then((res) => {
+          this.dialogVisiblePick = false;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     setPage() {
       this.ajax
         .get(this.$store.state.api + "selectPptPage", "")
         .then((res) => {
           if (res.data[0].length > 0) {
+            if (
+              res.data[0][0].handle &&
+              JSON.parse(res.data[0][0].handle).type == 2 &&
+              JSON.parse(res.data[0][0].handle).userid == this.userid
+            ) {
+              this.dialogVisiblePick = true;
+            }
             if (this.ppage == res.data[0][0].page && this.isBlock !== 0) {
               return;
             } else {

src/components/liveRoom.vue

@@ -56,7 +56,7 @@
                 @click="
                   goTo(
                     '/liveProjectDetail?courseId=' +
-                      item.courseid +
+                      item.id +
                       '&userid=' +
                       userid +
                       '&oid=' +
@@ -76,18 +76,29 @@
               </div>
               <div class="projct_nav">
                 <div style="font-size: 18px">
-                  {{ item.title }}
+                  {{ item.name }}
                 </div>
                 <div style="color: #2fdb88">
                   <!-- 共{{ JSON.parse(item.chapters).length }}讲 -->
                   共1讲
                 </div>
                 <div>
-                  <span style="color: #999">{{ item.createTime }}</span>
+                  <span style="color: #999">{{ item.time }}</span>
                 </div>
               </div>
             </div>
           </div>
+          <div class="student_page">
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="total"
+              v-if="page && myCourse.length"
+              style="padding-bottom: 20px"
+              @current-change="handleCurrentChange"
+            ></el-pagination>
+          </div>
         </div>
       </div>
     </div>
@@ -99,20 +110,23 @@ export default {
   data() {
     return {
       myCourse: [
-        //   {cover:[],title:"认识种子的起源",chapters:[],createTime:new Date().getTime()},
-        {
-          cover: [],
-          courseid: "9a4e8dbe-132e-438e-97db-b07eb01fa04c",
-          title: "introduce a festival (Final)",
-          chapters: [],
-          createTime: this.getNowTime(),
-        },
+        // {
+        //   cover: [],
+        //   courseid: "9a4e8dbe-132e-438e-97db-b07eb01fa04c",
+        //   title: "introduce a festival (Final)",
+        //   chapters: [],
+        //   createTime: this.getNowTime(),
+        // },
       ],
       studentMessage: [],
       tx: require("../assets/avatar.png"),
       mpj: require("../assets/icon/pptImg2.png"),
       userid: this.$route.query.userid,
       oid: this.$route.query.oid,
+      classid: this.$route.query.classid,
+      loading: "",
+      page: 1,
+      total: 0,
     };
   },
   methods: {
@@ -120,13 +134,28 @@ export default {
       this.$router.push(path);
     },
     getNowTime() {
-      const yy = new Date().getFullYear()
-      const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
-      const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
-      const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
-      const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
-      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
-      return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
+      const yy = new Date().getFullYear();
+      const MM =
+        new Date().getMonth() + 1 < 10
+          ? "0" + (new Date().getMonth() + 1)
+          : new Date().getMonth() + 1;
+      const dd =
+        new Date().getDate() < 10
+          ? "0" + new Date().getDate()
+          : new Date().getDate();
+      const HH =
+        new Date().getHours() < 10
+          ? "0" + new Date().getHours()
+          : new Date().getHours();
+      const mm =
+        new Date().getMinutes() < 10
+          ? "0" + new Date().getMinutes()
+          : new Date().getMinutes();
+      const ss =
+        new Date().getSeconds() < 10
+          ? "0" + new Date().getSeconds()
+          : new Date().getSeconds();
+      return yy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
     },
     selectSDetail() {
       let params = {
@@ -142,9 +171,40 @@ export default {
           console.error(err);
         });
     },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.page = val;
+      this.getData();
+    },
+    getData() {
+      if (!this.loading) {
+        this.loading = this.openLoading(document.querySelector(".project_box"));
+      }
+
+      let params = {
+        oid: this.oid,
+        cid: this.classid,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getRealTimeClassStu", params)
+        .then((res) => {
+          this.loading.close();
+          this.loading = "";
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.myCourse = res.data[0];
+        })
+        .catch((err) => {
+          this.loading.close();
+          this.loading = "";
+          console.error(err);
+        });
+    },
   },
   created() {
     this.selectSDetail();
+    this.page = 1;
+    this.getData();
     document.scrollingElement.scrollTop = 0;
   },
 };
@@ -167,6 +227,7 @@ export default {
 .project > img {
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 .box_course {
   display: flex;
@@ -199,6 +260,9 @@ export default {
 }
 .project {
   width: 100%;
+  height: 150px;
+  overflow: hidden;
+  cursor: pointer;
 }
 .project_box {
   display: flex;
@@ -208,7 +272,7 @@ export default {
 }
 .three_box_inthis {
   display: flex;
-  width: 21%;
+  width: 300px;
   flex-direction: column;
   align-items: flex-start;
   border: 1px solid #ccc;