讲义列表修改＋大小窗切换

src/pages/course-detail/components/HandOut.vue

@@ -1,58 +1,68 @@
 <template>
   <div class="lecture-notesjy">
-    <div class="listItem">
-      <div class="titles">
-        {{ courseHandoutsData.handoutsName }}
-      </div>
-      <div class="btns">
-        <div
-          class="btn"
-          @click="previvew($tools.splitImgHost(courseHandoutsData.handoutsUrl))"
-        >
-          预览
-        </div>
-        <div
-          v-if="courseHandoutsData.canDownload == 1 ? true : false"
-          class="btn"
-          @click="
-            printView($tools.splitImgHost(courseHandoutsData.handoutsUrl))
-          "
-        >
-          打印
+    <div class="header">
+      <div class="header__name">{{ courseHandoutsData.handoutsName }}</div>
+      <el-button
+        class="header__btn"
+        size="mini"
+        v-if="showId"
+        @click="showId = null"
+        >收起当前PDF</el-button
+      >
+    </div>
+    <ul
+      class="center"
+      v-if="
+        courseHandoutsData.fileList && courseHandoutsData.fileList.length > 0
+      "
+    >
+      <li
+        class="centerLi"
+        v-for="(item, index) in courseHandoutsData.fileList"
+        :key="index"
+      >
+        <div class="centerLibox">
+          <div class="centerLiboxName">{{ item.urlName }}</div>
+          <div class="centerLiboxBtnBox">
+            <el-button
+              v-if="showId !== item.fileId"
+              type="text"
+              @click="loadSeePdf(item)"
+              >预览</el-button
+            >
+            <el-button
+              type="text"
+              v-if="courseHandoutsData.canDownload == 1 ? true : false"
+              @click="printView($tools.splitImgHost(item.url))"
+              >打印</el-button
+            >
+            <el-button
+              type="text"
+              v-if="courseHandoutsData.canDownload == 1 ? true : false"
+              @click="download($tools.splitImgHost(item.url), item.urlName)"
+              >下载</el-button
+            >
+          </div>
         </div>
-        <div
-          v-if="courseHandoutsData.canDownload == 1 ? true : false"
-          class="btn"
-          @click="
-            download(
-              $tools.splitImgHost(courseHandoutsData.handoutsUrl),
-              courseHandoutsData.urlName
-            )
-          "
-        >
-          下载
+        <div class="pdf_box" v-show="showId === item.fileId">
+          <pdf
+            class="iframe"
+            :src="$tools.splitImgHost(item.url)"
+            v-for="i in item.pdf"
+            :key="i"
+            :page="i"
+            ref="pdf"
+          ></pdf>
+          <iframe
+            id="printIframe"
+            :src="$tools.splitImgHost(item.url)"
+            frameborder="0"
+            style="display: none"
+          ></iframe>
         </div>
-      </div>
-    </div>
-    <div class="lecture-listFooter" v-if="showPdf">
-      <div style="color: #fff">
-        {{ courseHandoutsData.urlName }}
-      </div>
-      <pdf
-        class="iframe"
-        :src="$tools.splitImgHost(courseHandoutsData.handoutsUrl)"
-        v-for="i in numPages"
-        :key="i"
-        :page="i"
-        ref="pdf"
-      ></pdf>
-      <iframe
-        id="printIframe"
-        :src="$tools.splitImgHost(courseHandoutsData.handoutsUrl)"
-        frameborder="0"
-        style="display: none"
-      ></iframe>
-    </div>
+      </li>
+    </ul>
+    <p class="no_center" v-else>暂无讲义列表</p>
   </div>
 </template>
 
@@ -71,8 +81,8 @@ export default {
   },
   data() {
     return {
-      showPdf: false,
       courseHandoutsData: {},
+      showId: null, //当前显示pdfID号
     };
   },
   watch: {
@@ -86,9 +96,6 @@ export default {
     },
   },
   methods: {
-    previvew(url) {
-      this.showPdf = true;
-    },
     /**
      * 打印
      */
@@ -145,65 +152,75 @@ export default {
         this.$request
           .courseHandouts(this.goodsData.handoutsId)
           .then((res) => {
-            this.courseHandoutsData = res.data;
-            const loadingTask = pdf.createLoadingTask(
-              this.$tools.splitImgHost(this.courseHandoutsData.handoutsUrl)
-            );
-            loadingTask.promise
-              .then((pdf) => {
-                this.numPages = pdf.numPages;
-              })
-              .catch((err) => {});
+            this.courseHandoutsData = res.data || {};
+            if(res.data.fileList &&res.data.fileList.length > 0){
+              this.loadSeePdf(res.data.fileList[0])
+            }
           })
           .catch((err) => {});
       }
     },
+    //点击预览加载
+    loadSeePdf(item) {
+      if (item.pdf) {
+        this.showId = item.fileId;
+        this.$emit("backSwitchPdfData", item);
+        return;
+      }
+      const loadingTask = pdf.createLoadingTask(
+        this.$tools.splitImgHost(item.url)
+      );
+      loadingTask.promise
+        .then((pdf) => {
+          this.showId = item.fileId;
+          item.pdf = pdf.numPages;
+          this.$emit("backSwitchPdfData", item);
+        })
+        .catch((err) => {});
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .lecture-notesjy {
-  display: flex;
-  flex-direction: column;
   max-height: 416px;
-
-  .listItem {
-    padding-bottom: 14px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #eee;
-
-    .titles {
+  .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #fff;
+    &__name {
+      flex: 1;
       color: #fff;
-      font-weight: bold;
-      text-align: center;
       padding: 10px;
     }
-
-    .btns {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-
-      .btn {
-        border-radius: 8px;
-        background-color: #fff;
-        padding: 6px 16px;
-        user-select: none;
-        cursor: pointer;
-        transition: all 0.2s;
-
-        &:hover {
-          background-color: #f2f7ff;
-          color: #3f8dfd;
-        }
-      }
+    &__btn {
+      flex-shrink: 0;
+      margin: 0px 10px;
     }
   }
-
-  .lecture-listFooter {
+  .no_center {
+    text-align: center;
+    color: #fff;
+    padding: 10px;
+  }
+  .center {
     flex: 1;
     overflow: auto;
+    .centerLi {
+      padding: 4px 10px;
+      & > .centerLibox {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        & > .centerLiboxName {
+          flex: 1;
+        }
+        & > .centerLiboxBtnBox {
+          flex-shrink: 0;
+        }
+      }
+    }
   }
 }
 </style>

src/pages/course-detail/index.vue

@@ -29,9 +29,50 @@
                     )})`,
                   }"
                 >
-                  <div v-show="vid" id="player"></div>
+                  <div
+                    :class="switchBox ? 'smallBox' : ''"
+                    :style="switchBox && hideBox ? 'display:none;' : ''"
+                    v-show="vid"
+                    id="player"
+                  ></div>
+                  <div
+                    v-if="switchPdf.pdf"
+                    :class="!switchBox ? 'smallBox' : 'switchPdf'"
+                    :style="!switchBox && hideBox ? 'display:none;' : ''"
+                  >
+                    <div v-if="switchPdf.pdf && switchPdf.pdf > 0">
+                      <template> </template>
+                      <pdf
+                        class="iframe"
+                        :src="$tools.splitImgHost(switchPdf.url)"
+                        v-for="i in computedPdf(switchPdf.pdf)"
+                        :key="i"
+                        :page="i"
+                        ref="pdf"
+                      ></pdf>
+                      <iframe
+                        id="printIframe"
+                        :src="$tools.splitImgHost(switchPdf.url)"
+                        frameborder="0"
+                        style="display: none"
+                      ></iframe>
+                    </div>
+                  </div>
+                  <i
+                    v-if="!hideBox && switchPdf.pdf"
+                    class="switch el-icon-monitor"
+                    @click="switchBox = !switchBox"
+                  ></i>
+                  <i
+                    v-if="switchPdf.pdf"
+                    class="hideSwitchBox el-icon-view"
+                    @click="hideBox = !hideBox"
+                  ></i>
                   <div v-show="vidzb" id="playerzb"></div>
-                  <div class="recordStyle" v-if="showRecordStatus">
+                  <div
+                    class="recordStyle"
+                    v-if="showRecordStatus && !switchBox"
+                  >
                     您上次看{{
                       $tools.secondToTime(recordObj.videoCurrentTime)
                     }},正在自动续播
@@ -118,90 +159,8 @@
                             <Hand-out
                               ref="handOut"
                               :goodsData="goodsData"
+                              @backSwitchPdfData="backSwitchPdfData"
                             ></Hand-out>
-                            <div v-if="false" class="lecture-notesjy">
-                              <div class="listItem">
-                                <div class="titles">
-                                  {{ courseHandoutsData.handoutsName }}
-                                </div>
-                                <div class="btns">
-                                  <div
-                                    class="btn"
-                                    @click="
-                                      previvew(
-                                        $tools.splitImgHost(
-                                          courseHandoutsData.handoutsUrl
-                                        )
-                                      )
-                                    "
-                                  >
-                                    预览
-                                  </div>
-                                  <div
-                                    v-if="
-                                      courseHandoutsData.canDownload == 1
-                                        ? true
-                                        : false
-                                    "
-                                    class="btn"
-                                    @click="
-                                      printView(
-                                        $tools.splitImgHost(
-                                          courseHandoutsData.handoutsUrl
-                                        )
-                                      )
-                                    "
-                                  >
-                                    打印
-                                  </div>
-                                  <div
-                                    v-if="
-                                      courseHandoutsData.canDownload == 1
-                                        ? true
-                                        : false
-                                    "
-                                    class="btn"
-                                    @click="
-                                      download(
-                                        $tools.splitImgHost(
-                                          courseHandoutsData.handoutsUrl
-                                        ),
-                                        courseHandoutsData.urlName
-                                      )
-                                    "
-                                  >
-                                    下载
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="lecture-listFooter" v-if="showPdf">
-                                <div style="color: #fff">
-                                  {{ courseHandoutsData.urlName }}
-                                </div>
-                                <pdf
-                                  class="iframe"
-                                  :src="
-                                    $tools.splitImgHost(
-                                      courseHandoutsData.handoutsUrl
-                                    )
-                                  "
-                                  v-for="i in numPages"
-                                  :key="i"
-                                  :page="i"
-                                  ref="pdf"
-                                ></pdf>
-                                <iframe
-                                  id="printIframe"
-                                  :src="
-                                    $tools.splitImgHost(
-                                      courseHandoutsData.handoutsUrl
-                                    )
-                                  "
-                                  frameborder="0"
-                                  style="display: none"
-                                ></iframe>
-                              </div>
-                            </div>
                           </template>
                         </el-tab-pane>
                       </el-tabs>
@@ -1288,6 +1247,9 @@ export default {
   },
   data() {
     return {
+      hideBox: false, //隐藏窗口
+      switchBox: false, //切换窗口
+      switchPdf: {}, //pdf数据
       liveDuration: 0,
       numPages: 0,
       showPdf: false,
@@ -1617,7 +1579,15 @@ export default {
   },
   computed: {
     ...mapGetters(["userInfo"]),
-
+    computedPdf: function () {
+      return function (array) {
+        if (!this.switchBox) {
+          return 1;
+        } else {
+          return array;
+        }
+      };
+    },
     compyRecommend: function () {
       return function (array) {
         let ary = [];
@@ -1742,6 +1712,9 @@ export default {
   methods: {
     ...mapMutations(["getCartCount"]),
     ...mapActions(["getUserInfo"]),
+    backSwitchPdfData(item) {
+      this.switchPdf = item;
+    },
     pauseVideo() {
       let _p = this.player;
       if (document.visibilityState === "hidden") {
@@ -2925,7 +2898,11 @@ export default {
           /**
            * 补充条件 Start
            */
-          console.log("补充条件：",res.data.interfaceAccountId,res.data.learnStatus)
+          console.log(
+            "补充条件：",
+            res.data.interfaceAccountId,
+            res.data.learnStatus
+          );
           if (res.data.interfaceAccountId > 0 && res.data.learnStatus > 0) {
             const confirmText = [
               "您的学习账号已经开通，请按照步骤操作，进行学习。",
@@ -3727,7 +3704,7 @@ export default {
       }
       if (option.sectionType == 2) {
         //直播
-        
+
         //提交保存观看历史
         if (this.playSectionId) {
           this.postStudyRecord(0, this.playSectionId);
@@ -4921,7 +4898,62 @@ export default {
             background-position: center center;
             background-repeat: no-repeat;
             position: relative;
-
+            .smallBox {
+              position: absolute;
+              width: 162px;
+              height: 91px;
+              border-radius: 4px;
+              background: #fff;
+              right: 20px;
+              bottom: 75px;
+              z-index: 1;
+              overflow: hidden;
+              /deep/ .pv-video-player {
+                // width: 100%!important;
+                // height: 100%!important;
+                transform-origin: 0 0;
+                transform: scale(0.2);
+              }
+            }
+            .switch {
+              position: absolute;
+              right: 22px;
+              bottom: 77px;
+              z-index: 2;
+              font-size: 30px;
+              transition: all 0.3;
+              border-radius: 50%;
+              overflow: hidden;
+              padding: 4px;
+              cursor: pointer;
+              &:hover {
+                color: #000;
+                background-color: rgba(225, 225, 225, 0.8);
+              }
+            }
+            .hideSwitchBox {
+              position: absolute;
+              right: 22px;
+              bottom: 126px;
+              z-index: 2;
+              font-size: 30px;
+              transition: all 0.3;
+              border-radius: 50%;
+              overflow: hidden;
+              padding: 4px;
+              cursor: pointer;
+              opacity: 0.5;
+              &:hover {
+                opacity: 1;
+                color: #000;
+                background-color: rgba(225, 225, 225, 0.9);
+              }
+            }
+            .switchPdf {
+              width: 810px;
+              height: 455px;
+              overflow: auto;
+            }
             .video {
               width: 100%;
               height: 100%;