|
@@ -14,14 +14,6 @@
|
|
|
v-if="exerciseData.postfix == 'png' || exerciseData.postfix == 'jpeg' || exerciseData.postfix == 'gif'"
|
|
|
:src="exerciseData.chapterData">
|
|
|
<!--视频-->
|
|
|
- <!--<video-player-->
|
|
|
- <!--class="video-player vjs-custom-skin"-->
|
|
|
- <!--v-if="exerciseData.postfix == 'mp4' || exerciseData.postfix == 'webm'"-->
|
|
|
- <!--@pause="demo($event)"-->
|
|
|
- <!--:playsinline="true"-->
|
|
|
- <!--:options="playerOptions">-->
|
|
|
- <!--</video-player>-->
|
|
|
- <!--poster="@/assets/ZDimages/video_logo.jpg"-->
|
|
|
<video class="video-player vjs-custom-skin"
|
|
|
style="width:910px;height:512px;"
|
|
|
autoplay="autoplay"
|
|
@@ -30,11 +22,19 @@
|
|
|
<source :src="exerciseData.chapterData" type="video/mp4">
|
|
|
</video>
|
|
|
<!--word-->
|
|
|
- <iframe
|
|
|
- class="iframe"
|
|
|
- v-if="exerciseData.postfix == 'pdf' || exerciseData.postfix == 'docx'"
|
|
|
- :src="exerciseData.iframeSrc" scrolling="auto" frameborder="0">
|
|
|
- </iframe>
|
|
|
+ <vue-office-docx
|
|
|
+ v-if="exerciseData.postfix == 'docx'"
|
|
|
+ :src="exerciseData.iframeSrc"
|
|
|
+ @rendered="renderedHandler"
|
|
|
+ @error="errorHandler"
|
|
|
+ />
|
|
|
+ <!--pdf-->
|
|
|
+ <vue-office-pdf
|
|
|
+ v-if="exerciseData.postfix == 'pdf'"
|
|
|
+ :src="exerciseData.iframeSrc"
|
|
|
+ @rendered="renderedHandler"
|
|
|
+ @error="errorHandler"
|
|
|
+ />
|
|
|
<!--富文本-->
|
|
|
<div v-if="exerciseData.type == 5" v-html="exerciseData.chapterData"></div>
|
|
|
</div>
|
|
@@ -42,6 +42,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ //引入VueOfficeDocx组件
|
|
|
+ import VueOfficeDocx from '@vue-office/docx'
|
|
|
+ import '@vue-office/docx/lib/index.css'
|
|
|
+ //引入VueOfficePdf组件
|
|
|
+ import VueOfficePdf from '@vue-office/pdf'
|
|
|
import { videoPlayer } from 'vue-video-player'
|
|
|
export default {
|
|
|
name: 'coursePreview',
|
|
@@ -49,7 +54,9 @@
|
|
|
exerciseData:{},
|
|
|
},
|
|
|
components:{
|
|
|
- videoPlayer
|
|
|
+ videoPlayer,
|
|
|
+ VueOfficeDocx,
|
|
|
+ VueOfficePdf
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -88,7 +95,7 @@
|
|
|
methods: {
|
|
|
judgeFunction(){
|
|
|
if(this.exerciseData.postfix == "mp4"){
|
|
|
- // this.getVideo();
|
|
|
+ this.exerciseData.chapterData = window.location.href.split('://')[0]+'://'+localStorage.getItem('fileBrowseEnvironment')+this.exerciseData.chapterData
|
|
|
this.loading = true;
|
|
|
}else if(this.exerciseData.postfix == "pdf" || this.exerciseData.postfix == "docx"){
|
|
|
this.getWord();
|
|
@@ -101,20 +108,9 @@
|
|
|
this.exerciseData.chapterData = unescape(this.exerciseData.chapterData)
|
|
|
this.loading = true;
|
|
|
},
|
|
|
- //视频处理
|
|
|
- getVideo(){
|
|
|
- let list = [];
|
|
|
- let obj = {
|
|
|
- type:'video/'+this.exerciseData.postfix,
|
|
|
- src:this.exerciseData.chapterData,
|
|
|
- };
|
|
|
- list.push(obj);
|
|
|
- this.playerOptions.sources = list;
|
|
|
- this.loading = true;
|
|
|
- },
|
|
|
//word处理
|
|
|
async getWord(){
|
|
|
- this.exerciseData.iframeSrc = this.urlJudge(this.exerciseData.chapterData)
|
|
|
+ this.exerciseData.iframeSrc = window.location.href.split('://')[0]+'://'+localStorage.getItem('fileBrowseEnvironment')+this.exerciseData.chapterData
|
|
|
this.loading = true;
|
|
|
},
|
|
|
}
|
|
@@ -126,7 +122,7 @@
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- overflow-y: scroll;
|
|
|
+ overflow: hidden;
|
|
|
*{
|
|
|
margin:0;
|
|
|
padding:0;
|
|
@@ -159,7 +155,6 @@
|
|
|
}
|
|
|
.center-info-components-max-box{
|
|
|
margin:20px;
|
|
|
- overflow-y: scroll;
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|