|
|
@@ -1,18 +1,18 @@
|
|
|
<template>
|
|
|
<CommonHeader />
|
|
|
- <div class="allPageWidthBg movPage">
|
|
|
+ <div class="allPageWidthBg movPage" v-loading="loading">
|
|
|
<div class="withShadow">
|
|
|
<div class="likeBread">
|
|
|
- <div class="likeBread_left">{{ sourceDetailData.kf_name }}</div>
|
|
|
+ <div class="likeBread_left">{{ zyName }}</div>
|
|
|
<div class="likeBread_right">
|
|
|
<span>课程资源</span>- <span>查看详情</span>-
|
|
|
- <span>{{ sourceDetailData.kf_name }}</span>
|
|
|
+ <span>{{ zyName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="common1280 vedioMain">
|
|
|
<div class="vedio_titel">
|
|
|
- <div class="vedio_titel_left">{{ sourceDetailData.kf_name }}</div>
|
|
|
+ <div class="vedio_titel_left">{{ zyName }} - {{ currentFilename }}</div>
|
|
|
<div class="vedio_titel_right" @mouseenter="showTrue" @mouseleave="showFalse">
|
|
|
<img src="../assets/kczy/shareIcon.png" alt="" /> 分享
|
|
|
<div class="qrcodeAll" v-if="shareSwitch">
|
|
|
@@ -96,7 +96,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="vedioMainContent_left_bottom" v-else>
|
|
|
+ <div class="vedioMainContent_left_bottom" v-else-if="transIconType == 'mp3'">
|
|
|
<audio ref="urlResouce" controls :src="sourceDetailData.kf_path">
|
|
|
<source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3">
|
|
|
</audio>
|
|
|
@@ -106,6 +106,8 @@
|
|
|
当前观看人数：{{ sourceDetailData.kf_view_num }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <iframe v-else class="vedioMainContent_left_bottom" name="content_frame" :src="previewUrl+currentUrl" frameborder=0 scrolling="no"></iframe>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="vedioMainContent_right">
|
|
|
@@ -164,15 +166,27 @@
|
|
|
{{ item.user_name == false ? "未知" : item.user_name }}
|
|
|
<span class="itemSon1">{{ item.create_time }}</span>
|
|
|
</p>
|
|
|
- <div class="fileAll">
|
|
|
+ <div class="px-5px pt-10px">
|
|
|
+ <div class="text-15px">{{ item.kf_name }}</div>
|
|
|
+ <div class="pt-8px">
|
|
|
+ <div class="flex items-center text-13px mb-3px" v-for="(value, i) in item.fileData" :key="`${index}-${i}`">
|
|
|
+ <div class="flex-1 truncate">
|
|
|
+ <el-tooltip effect="dark" :content="value.name" placement="left">{{ value.name }}</el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handleDownload(value)">下载</el-button>
|
|
|
+ <el-button class="!h-24px !bg-transparent !text-hex-409eff" plain round type="primary" size="mini" @click="handlePreview(item, value, i)">预览</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="fileAll">
|
|
|
<div class="fileAll_left">
|
|
|
<img :src="item.kf_img" />
|
|
|
</div>
|
|
|
<div class="fileAll_middle">{{ item.kf_name }}</div>
|
|
|
<div class="fileAll_right" @click="downloadFile(item)">下载</div>
|
|
|
- <!-- <div class="fileAll_right" @click="handlePreview(getFullUrl(item.kf_path))">预览</div> -->
|
|
|
<div class="fileAll_right" @click="preview(item)">预览</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -273,6 +287,12 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: false,
|
|
|
+ previewUrl: "https://view.officeapps.live.com/op/view.aspx?src=",
|
|
|
+ zyName: "",
|
|
|
+ currentIndex: 0,
|
|
|
+ currentUrl: "",
|
|
|
+ currentFilename: "",
|
|
|
starsValue: "",
|
|
|
transIconType: "",
|
|
|
transKfId: "",
|
|
|
@@ -335,13 +355,15 @@ export default {
|
|
|
},
|
|
|
/**初始化数据*/
|
|
|
initData() {
|
|
|
- this.transIconType = this.$route.query.icon;
|
|
|
+ // this.transIconType = this.$route.query.icon;
|
|
|
this.transKfId = this.$route.query.kfId;
|
|
|
this.transKkId = this.$route.query.kkID;
|
|
|
+ this.currentIndex = sessionStorage.getItem("index");
|
|
|
let transObj = {
|
|
|
token: user?.token,
|
|
|
kf_id: this.transKfId,
|
|
|
};
|
|
|
+ this.loading = true;
|
|
|
courseSourceDetail(transObj)
|
|
|
.then((res) => {
|
|
|
if (res.code == "1") {
|
|
|
@@ -352,43 +374,88 @@ export default {
|
|
|
|
|
|
//示例设置清晰度为超清和高清的地址("OD": "<原画URL>","FD": "<流畅URL>","LD":"<标清URL>","SD": "<高清URL>","HD": "<超清URL>","2K": "<2K URL>","4K": "<4K URL>")
|
|
|
// source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'
|
|
|
- let oneInfoData = res.data.one_info;
|
|
|
- this.sourceUrl = { "OD": oneInfoData.kf_path_od, "FD": oneInfoData.kf_path_fd, "LD": oneInfoData.kf_path_ld };
|
|
|
- let stringSourceUrl = JSON.stringify( this.sourceUrl)
|
|
|
- let _this = this;
|
|
|
- // 初始换aliplayer
|
|
|
- this.player = new Aliplayer({
|
|
|
- id: 'J_prismPlayer',
|
|
|
- source:stringSourceUrl,
|
|
|
- language: "zh-cn",
|
|
|
- width: '100%', //容器的大小
|
|
|
- height: '100%', //容器的大小
|
|
|
- isLive:false,//是不是直播
|
|
|
- preload:true,//播放器自动加载
|
|
|
- autoplay: true,//是否自动播放
|
|
|
- qualitySort:'asc',//从小到大排序
|
|
|
- },function(player){
|
|
|
- console.log('播发器创建完成~')
|
|
|
- });
|
|
|
- if(localStorage.getItem('cur_time_'+ this.transKkId)) {
|
|
|
- this.player.seek(localStorage.getItem('cur_time_'+ this.transKkId));
|
|
|
- }
|
|
|
- var timer = setInterval(() => {
|
|
|
- var curTime = parseInt(this.player.getCurrentTime());
|
|
|
- if (this.player && this.player.getStatus() == "playing") {
|
|
|
- localStorage.setItem('cur_time_'+ this.transKkId,curTime);
|
|
|
- }
|
|
|
- }, 30000);
|
|
|
+
|
|
|
+ // let oneInfoData = res.data.one_info;
|
|
|
+ // console.log(oneInfoData)
|
|
|
+ // this.sourceUrl = { "OD": oneInfoData.kf_path_od, "FD": oneInfoData.kf_path_fd, "LD": oneInfoData.kf_path_ld };
|
|
|
+ // let stringSourceUrl = JSON.stringify( this.sourceUrl)
|
|
|
+
|
|
|
this.fingerNum = res.data.one_info.kf_like_num; //点赞数
|
|
|
this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
|
|
|
this.loveNum = res.data.one_info.kf_fav_num; //关注
|
|
|
this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开
|
|
|
+
|
|
|
+ this.zyName = this.sourceDetailData.kf_name;
|
|
|
+ let fileData = this.initFileData(this.sourceDetailData.kf_path);
|
|
|
+ this.initCurrentFile(fileData[this.currentIndex || 0]);
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error);
|
|
|
});
|
|
|
},
|
|
|
+ initFileData(path) {
|
|
|
+ let arr = path.split(";");
|
|
|
+ let fileData = arr.map((item, index) => {
|
|
|
+ let file = item.split("|");
|
|
|
+ let url = this.getFullUrl(file[0])
|
|
|
+ let suffix = file[0]?.substr(file[0].lastIndexOf(".") + 1);
|
|
|
+ let name = file[1] || `文件${index+1}`;
|
|
|
+ return {
|
|
|
+ url, suffix, name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return fileData
|
|
|
+ },
|
|
|
+ initCurrentFile(data) {
|
|
|
+ this.player && this.player.dispose();
|
|
|
+ this.transIconType = data.suffix;
|
|
|
+ this.currentUrl = data.url;
|
|
|
+ this.currentFilename = data.name;
|
|
|
+ if (data.url && (data.suffix=="mp3" || data.suffix=="mp4")) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initPlayer(data.url)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initPlayer(source) {
|
|
|
+ let _this = this;
|
|
|
+ // 初始换aliplayer
|
|
|
+ this.player = new Aliplayer({
|
|
|
+ id: 'J_prismPlayer',
|
|
|
+ source: source,
|
|
|
+ language: "zh-cn",
|
|
|
+ width: '100%', //容器的大小
|
|
|
+ height: '100%', //容器的大小
|
|
|
+ isLive:false,//是不是直播
|
|
|
+ preload:true,//播放器自动加载
|
|
|
+ autoplay: true,//是否自动播放
|
|
|
+ qualitySort:'asc',//从小到大排序
|
|
|
+ },function(player){
|
|
|
+ console.log('播发器创建完成~')
|
|
|
+ });
|
|
|
+ if(localStorage.getItem('cur_time_'+ this.transKkId)) {
|
|
|
+ this.player.seek(localStorage.getItem('cur_time_'+ this.transKkId));
|
|
|
+ }
|
|
|
+ var timer = setInterval(() => {
|
|
|
+ var curTime = parseInt(this.player.getCurrentTime());
|
|
|
+ if (this.player && this.player.getStatus() == "playing") {
|
|
|
+ localStorage.setItem('cur_time_'+ this.transKkId,curTime);
|
|
|
+ }
|
|
|
+ }, 30000);
|
|
|
+ },
|
|
|
+ handlePreview(item, value, index) {
|
|
|
+ if (item.kf_id == this.transKfId) {
|
|
|
+ sessionStorage.setItem("index", index);
|
|
|
+ this.zyName = item.kf_name;
|
|
|
+ this.initCurrentFile(value);
|
|
|
+ } else {
|
|
|
+ const query = JSON.parse(JSON.stringify(this.$route.query));
|
|
|
+ query.kfId = item.kf_id;
|
|
|
+ this.$router.replace({ path: this.$route.path, query });
|
|
|
+ }
|
|
|
+ },
|
|
|
/**初始化评论*/
|
|
|
initEvaluaList() {
|
|
|
let transObj = {
|
|
|
@@ -431,6 +498,9 @@ export default {
|
|
|
sourceList(transObj)
|
|
|
.then(res => {
|
|
|
if (res.code == '1') {
|
|
|
+ res.data.page_data.map((item) => {
|
|
|
+ item.fileData = this.initFileData(item.kf_path);
|
|
|
+ })
|
|
|
this.sourceData = res.data.page_data;
|
|
|
}
|
|
|
})
|
|
|
@@ -442,7 +512,8 @@ export default {
|
|
|
initHomeworkList() {
|
|
|
let transObj = {
|
|
|
limit: 30,
|
|
|
- yzk_ids: this.transKkId
|
|
|
+ // yzk_ids: this.transKkId
|
|
|
+ yzk_id: this.sourceDetailData.yzk_id
|
|
|
}
|
|
|
homeWork_list(transObj)
|
|
|
.then(res => {
|
|
|
@@ -491,6 +562,10 @@ export default {
|
|
|
let downFileUrl = item.kf_path;
|
|
|
window.open(downFileUrl, '_self');
|
|
|
},
|
|
|
+ handleDownload(value) {
|
|
|
+ let downFileUrl = value.url;
|
|
|
+ window.open(downFileUrl);
|
|
|
+ },
|
|
|
/**预览*/
|
|
|
preview(item) {
|
|
|
let marklable = item.kf_path.substr(item.kf_path.lastIndexOf(".") + 1);
|
|
|
@@ -676,7 +751,7 @@ export default {
|
|
|
kk_id: this.transKkId,//所属课程资源编号
|
|
|
kk_name: this.kkName,//所属课程资源名称
|
|
|
kf_id: this.transKfId,//所属课程资源编号
|
|
|
- kf_name: this.sourceDetailData.kf_name,//所属课程资源名称
|
|
|
+ kf_name: this.zyName,//所属课程资源名称
|
|
|
yzkx_content_json: JSON.stringify(this.singleAnswer),//学生答题情况
|
|
|
yzkx_student_realname: user.user_realname,
|
|
|
}
|
|
|
@@ -815,8 +890,7 @@ export default {
|
|
|
},
|
|
|
//文件下载
|
|
|
downLoadFile1() {
|
|
|
- let downFileUrl = this.sourceDetailData.kf_path;
|
|
|
- window.open(downFileUrl);
|
|
|
+ window.open(this.currentUrl);
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
bzkf30