|
|
@@ -48,14 +48,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="student_head">
|
|
|
- <div class="course_text" v-if="chapInfo.dyText != ''">{{ chapInfo.dyText }}</div>
|
|
|
+ <div class="course_text" v-if="chapInfo.dyText != ''">
|
|
|
+ {{ chapInfo.dyText }}
|
|
|
+ </div>
|
|
|
<div class="course_text" v-else>暂无课程简介</div>
|
|
|
<div class="box_course" v-if="vedio.length > 0">
|
|
|
<div class="wheel">
|
|
|
<div class="workd_media">
|
|
|
<video-player
|
|
|
class="video-player vjs-custom-skin"
|
|
|
- ref="videoPlayer"
|
|
|
:playsinline="true"
|
|
|
:options="playerO"
|
|
|
@play="onPlayerPlay($event)"
|
|
|
@@ -69,7 +70,7 @@
|
|
|
class="media"
|
|
|
v-for="(media, index) in vedio"
|
|
|
:key="index"
|
|
|
- style="width: 160px; margin: 10px auto"
|
|
|
+ style="width: 160px; margin: 10px auto; position: relative"
|
|
|
>
|
|
|
<img
|
|
|
style="height: 90px; width: 160px"
|
|
|
@@ -83,13 +84,14 @@
|
|
|
alt=""
|
|
|
@click="lookVedio(media.url)"
|
|
|
/>
|
|
|
+ <div class="vedioName">{{ media.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div style="font-size: 18px; margin: 15px">
|
|
|
{{ chapInfo.dyName }}
|
|
|
</div> -->
|
|
|
</div>
|
|
|
- <div v-else style="padding: 20px 50px;">暂无视频</div>
|
|
|
+ <div v-else style="padding: 20px 50px">暂无视频</div>
|
|
|
</div>
|
|
|
<div class="study_top">
|
|
|
<div class="checkbox">
|
|
|
@@ -152,7 +154,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="student_body">
|
|
|
- <div class="videoTop" v-if="chapInfoList[courseType - 0].question != undefined">
|
|
|
+ <div
|
|
|
+ class="videoTop"
|
|
|
+ v-if="chapInfoList[courseType - 0].question != undefined"
|
|
|
+ >
|
|
|
<div v-if="type == 1"></div>
|
|
|
<div v-if="type == 3">{{ chapInfo.dyName }}</div>
|
|
|
<div v-if="type == 5">工具</div>
|
|
|
@@ -175,7 +180,9 @@
|
|
|
<div
|
|
|
class="project_box"
|
|
|
style="padding-bottom: 40px"
|
|
|
- v-if="type == 1 && chapInfoList[courseType - 0].question != undefined"
|
|
|
+ v-if="
|
|
|
+ type == 1 && chapInfoList[courseType - 0].question != undefined
|
|
|
+ "
|
|
|
>
|
|
|
<div
|
|
|
style="
|
|
|
@@ -237,9 +244,18 @@
|
|
|
class="addEditor"
|
|
|
style="margin-top: 23px"
|
|
|
@click="openAddWork"
|
|
|
+ v-if="isAddWork == false"
|
|
|
>
|
|
|
选择文件
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="addEditor"
|
|
|
+ style="margin-top: 23px"
|
|
|
+ @click="openAddWork"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ 已提交
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -255,22 +271,28 @@
|
|
|
<div>{{ f.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="upFile" v-if="type == 3 || type == 4">提交</div>
|
|
|
+ <div class="upFile" v-if="type == 3">提交</div>
|
|
|
</div>
|
|
|
<div class="project_box" v-if="type == 4">
|
|
|
- <div class="filebox">
|
|
|
- 暂无数据
|
|
|
- <!-- <div
|
|
|
- class="file"
|
|
|
- v-for="(f, index) in file"
|
|
|
+ <div class="homebox">
|
|
|
+ <div class="homework" v-for="(h, index) in imgList" :key="index">
|
|
|
+ <img :src="h.url" alt="" style="height: 100px" />
|
|
|
+ <div>{{ h.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="homework"
|
|
|
+ v-for="(noH, index) in noImgList"
|
|
|
:key="index"
|
|
|
- @click="downFile(index)"
|
|
|
+ @click="downFileList(index)"
|
|
|
>
|
|
|
- <img :src="require('../assets/file.png')" alt="" />
|
|
|
- <div>{{ f.name }}</div>
|
|
|
- </div> -->
|
|
|
+ <img
|
|
|
+ :src="require('../assets/file.png')"
|
|
|
+ alt=""
|
|
|
+ style="width: auto; height: auto"
|
|
|
+ />
|
|
|
+ <div>{{ noH.name }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="upFile" v-if="type == 3 || type == 4">提交</div>
|
|
|
</div>
|
|
|
<div class="project_box" v-if="type == 5">
|
|
|
<div class="filebox" v-if="!chapInfo.chapterInfo[0].toolChoose">
|
|
|
@@ -509,10 +531,12 @@ export default {
|
|
|
upFile: [],
|
|
|
},
|
|
|
],
|
|
|
- mr: require("../assets/tu4.png"),
|
|
|
+ mr: require("../assets/vedioPic.png"),
|
|
|
courseDetail: {},
|
|
|
chapInfo: [],
|
|
|
chapInfoList: [],
|
|
|
+ imgList: [],
|
|
|
+ noImgList: [],
|
|
|
playerOptions: {
|
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
@@ -548,6 +572,7 @@ export default {
|
|
|
mindCount: 0,
|
|
|
askCount: 0,
|
|
|
noteCount: 0,
|
|
|
+ isAddWork: false,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -824,12 +849,46 @@ export default {
|
|
|
: require("../assets/icon/wheel.png");
|
|
|
console.log(this.playerOptions.sources[0].src);
|
|
|
this.playerO = this.playerOptions;
|
|
|
+ var a = this.chapInfo.chapterInfo[0].homeworkList;
|
|
|
+ // var c = [];
|
|
|
+ // var d = [];
|
|
|
+ for (var k = 0; k < a.length; k++) {
|
|
|
+ var b = this.isAssetTypeAnImage(
|
|
|
+ a[k].name.split(".").pop().toLowerCase()
|
|
|
+ );
|
|
|
+ if (b == true) {
|
|
|
+ this.imgList.push(a[k]);
|
|
|
+ } else {
|
|
|
+ this.noImgList.push(a[k]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(function () {
|
|
|
+ var a =
|
|
|
+ document.getElementsByClassName("video-player")[0].offsetHeight;
|
|
|
+ document.getElementsByClassName("vedioList")[0].style.height =
|
|
|
+ a + "px";
|
|
|
+ });
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
loading.close();
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
+ isAssetTypeAnImage(ext) {
|
|
|
+ return (
|
|
|
+ [
|
|
|
+ "png",
|
|
|
+ "jpg",
|
|
|
+ "jpeg",
|
|
|
+ "bmp",
|
|
|
+ "gif",
|
|
|
+ "webp",
|
|
|
+ "psd",
|
|
|
+ "svg",
|
|
|
+ "tiff",
|
|
|
+ ].indexOf(ext) !== -1
|
|
|
+ );
|
|
|
+ },
|
|
|
switchVideo(media, index) {
|
|
|
this.playerO = {};
|
|
|
this.playerOptions.poster = "";
|
|
|
@@ -844,6 +903,9 @@ export default {
|
|
|
downFile(i) {
|
|
|
window.open(this.file[i].url);
|
|
|
},
|
|
|
+ downFileList(i) {
|
|
|
+ window.open(this.noImgList[i].url);
|
|
|
+ },
|
|
|
openAddWork() {
|
|
|
this.dialogVisible = true;
|
|
|
this.studyJuri = [
|
|
|
@@ -867,6 +929,7 @@ export default {
|
|
|
this.ajax
|
|
|
.post(this.$store.state.api + "addWorks", params)
|
|
|
.then((res) => {
|
|
|
+ this.isAddWork = true;
|
|
|
this.$message({
|
|
|
message: "提交成功",
|
|
|
type: "success",
|
|
|
@@ -921,43 +984,48 @@ export default {
|
|
|
} else {
|
|
|
this.wbCount++;
|
|
|
a = this.wbCount;
|
|
|
- this.toolsCount(a,t);
|
|
|
+ this.toolsCount(a, t);
|
|
|
}
|
|
|
+ window.parent.postMessage({ tools: "1" }, "*");
|
|
|
} else if (t == 2) {
|
|
|
if (this.wordCount > 0) {
|
|
|
this.updateCount(this.wordCount, t);
|
|
|
} else {
|
|
|
this.wordCount++;
|
|
|
a = this.wordCount;
|
|
|
- this.toolsCount(a,t);
|
|
|
+ this.toolsCount(a, t);
|
|
|
}
|
|
|
+ window.parent.postMessage({ tools: "2" }, "*");
|
|
|
} else if (t == 3) {
|
|
|
if (this.mindCount > 0) {
|
|
|
this.updateCount(this.mindCount, t);
|
|
|
} else {
|
|
|
this.mindCount++;
|
|
|
a = this.mindCount;
|
|
|
- this.toolsCount(a,t);
|
|
|
+ this.toolsCount(a, t);
|
|
|
}
|
|
|
+ window.parent.postMessage({ tools: "3" }, "*");
|
|
|
} else if (t == 4) {
|
|
|
if (this.askCount > 0) {
|
|
|
this.updateCount(this.askCount, t);
|
|
|
} else {
|
|
|
this.askCount++;
|
|
|
a = this.askCount;
|
|
|
- this.toolsCount(a,t);
|
|
|
+ this.toolsCount(a, t);
|
|
|
}
|
|
|
+ window.parent.postMessage({ tools: "4" }, "*");
|
|
|
} else {
|
|
|
if (this.noteCount > 0) {
|
|
|
this.updateCount(this.noteCount, t);
|
|
|
} else {
|
|
|
this.noteCount++;
|
|
|
a = this.noteCount;
|
|
|
- this.toolsCount(a,t);
|
|
|
+ this.toolsCount(a, t);
|
|
|
}
|
|
|
+ window.parent.postMessage({ tools: "6" }, "*");
|
|
|
}
|
|
|
},
|
|
|
- toolsCount(a,t) {
|
|
|
+ toolsCount(a, t) {
|
|
|
let params = {
|
|
|
cid: this.id,
|
|
|
chid: this.courseType,
|
|
|
@@ -995,10 +1063,18 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
+ destroyed() {
|
|
|
+ window.onresize = null;
|
|
|
+ },
|
|
|
created() {
|
|
|
this.getCourseDetail();
|
|
|
this.selectCount();
|
|
|
document.scrollingElement.scrollTop = 0;
|
|
|
+
|
|
|
+ window.onresize = function () {
|
|
|
+ var a = document.getElementsByClassName("video-player")[0].offsetHeight;
|
|
|
+ document.getElementsByClassName("vedioList")[0].style.height = a + "px";
|
|
|
+ };
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -1022,7 +1098,8 @@ export default {
|
|
|
.up_photo > img,
|
|
|
.chapter_add > img,
|
|
|
.deleteWord > img,
|
|
|
-.question > img {
|
|
|
+.question > img,
|
|
|
+.homework > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -1055,6 +1132,7 @@ export default {
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
+ padding: 0 0 30px 0;
|
|
|
}
|
|
|
.wheel {
|
|
|
width: 70%;
|
|
|
@@ -1492,10 +1570,10 @@ export default {
|
|
|
color: #c0c0c0;
|
|
|
}
|
|
|
.course_text {
|
|
|
- padding: 20px 0 10px 15px;
|
|
|
+ padding: 20px 0 0 15px;
|
|
|
text-indent: 30px;
|
|
|
width: 80%;
|
|
|
- min-height: 80px;
|
|
|
+ min-height: 20px;
|
|
|
}
|
|
|
.vedioList {
|
|
|
background: #f2f2f2;
|
|
|
@@ -1539,4 +1617,30 @@ export default {
|
|
|
box-shadow: 1px 3px 6px 1px #bfbfbf;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.vedioName {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.homework {
|
|
|
+ width: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.homebox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|
zengyicheng
