分享海报以弹框的形式展示

src/modules/viewer/components/player/chapterPlayer.vue

@@ -34,6 +34,9 @@
       </em>
       <em :class="skipClass" @click="toggleSkip">{{ $t('viewerPlayer.skipTitle') }}</em>
     </div>
+    <el-dialog :visible.sync="dialogVisible" width="700px" top="60px">
+      <iframe :src="sharePageUrl" style="width:100%;height:800px;border:0;"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -76,7 +79,8 @@ export default {
       },
       player: null,
       watchedTime: 0,
-      watchedTimePoint: [] // 视频观看的时间点
+      watchedTimePoint: [], // 视频观看的时间点
+      dialogVisible: false // 分享海报弹出
     }
   },
   watch: {
@@ -118,6 +122,9 @@ export default {
         'player-button-skip': !this.isSkip,
         'player-button-skip__active': this.isSkip
       }
+    },
+    sharePageUrl() {
+      return `https://webapp-pub.ezijing.com/website/prod/share/index.html#/share?semesterId=${this.sid}&courseId=${this.cid}&chapterId=${this.chapter.id}`
     }
   },
   methods: {
@@ -160,11 +167,8 @@ export default {
         chapter_id: this.chapter.id
       }
       api.getShare(params).then(res => {
-        if (res.code === 0) {
-          if (res.data.need_share) {
-            const url = `https://webapp-pub.ezijing.com/website/prod/share/index.html#/share?semesterId=${params.semester_id}&courseId=${params.course_id}&chapterId=${params.chapter_id}`
-            window.open(url)
-          }
+        if (res.code === 0 && res.data.need_share) {
+          this.dialogVisible = true
         }
       })
     },
@@ -348,4 +352,17 @@ export default {
   background-position: 0 -200px;
   color: #b19241;
 }
+::v-deep .el-dialog {
+  background-color: #3f3f3f;
+  border-radius: 10px;
+}
+::v-deep .el-dialog__header {
+  min-height: 30px;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  font-size: 30px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
 </style>