|
|
@@ -1018,7 +1018,9 @@
|
|
|
placeholder=""
|
|
|
></el-input>
|
|
|
</div>
|
|
|
- <div class="submit">提出疑问</div>
|
|
|
+ <el-button type="primary" class="submit"
|
|
|
+ >提出疑问</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="answer-question__body">
|
|
|
<div class="question-list">
|
|
|
@@ -1073,7 +1075,13 @@
|
|
|
false
|
|
|
)
|
|
|
}}
|
|
|
- <div class="del">删除</div>
|
|
|
+ <div
|
|
|
+ class="del"
|
|
|
+ @click="del(item)"
|
|
|
+ v-if="item.userId != userInfo.userId"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="reply-list"
|
|
|
@@ -1132,22 +1140,49 @@
|
|
|
type="textarea"
|
|
|
placeholder="觉得重要的就记下来吧~"
|
|
|
></el-input>
|
|
|
- <div class="submit">提交笔记</div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="submit"
|
|
|
+ @click="noteSubmit"
|
|
|
+ >
|
|
|
+ 提交笔记
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="note-list">
|
|
|
<div
|
|
|
- class="note-list__item"
|
|
|
- v-for="(item, index) in 4"
|
|
|
+ v-if="noteList.length == 0"
|
|
|
+ style="text-align: center"
|
|
|
+ >
|
|
|
+ 暂无笔记
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="note-list__content"
|
|
|
+ v-for="(item, index) in noteList"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <i class="el-icon-video-play"></i>
|
|
|
- <div class="note-list__item__content">
|
|
|
- <div class="title">02:03</div>
|
|
|
- <div class="desc">
|
|
|
- 这么简单居然还有人要做笔记吗？
|
|
|
+ <div class="note-list__content__title">
|
|
|
+ {{ $tools.timestampToTime(item.dateNote) }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="note-list__item"
|
|
|
+ v-for="(note, index) in item.userNotes"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ class="el-icon-video-play"
|
|
|
+ @click="initVideo(note)"
|
|
|
+ ></i>
|
|
|
+ <div class="note-list__item__content">
|
|
|
+ <div class="title" @click="initVideo(note)">
|
|
|
+ {{ $tools.secondToDate(note.noteSecond) }}
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ {{ note.sectionName }}
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ note.noteText }}</div>
|
|
|
</div>
|
|
|
- <div class="time">2022-03-10 10:19</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1155,12 +1190,12 @@
|
|
|
<el-pagination
|
|
|
background
|
|
|
layout="prev, pager, next"
|
|
|
- :total="1000"
|
|
|
+ :total="noteTotal"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-box">
|
|
|
+ <div class="right-box" v-if="courseHandoutsData">
|
|
|
<div class="lecture-list">
|
|
|
<div class="lecture-list__header">
|
|
|
讲义
|
|
|
@@ -1177,18 +1212,37 @@
|
|
|
v-if="lectureShow"
|
|
|
>
|
|
|
<div class="list">
|
|
|
- <div
|
|
|
- class="list__item"
|
|
|
- v-for="(item, index) in 4"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
+ <div class="list__item">
|
|
|
<div class="title">
|
|
|
- 1、这是第一个讲义名称
|
|
|
+ {{ courseHandoutsData.handoutsName }}
|
|
|
</div>
|
|
|
<div class="btns">
|
|
|
- <div class="btn">预览</div>
|
|
|
- <div class="btn">打印</div>
|
|
|
- <div class="btn">下载</div>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ @click="
|
|
|
+ previvew(
|
|
|
+ $tools.splitImgHost(
|
|
|
+ courseHandoutsData.handoutsUrl
|
|
|
+ )
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 预览
|
|
|
+ </div>
|
|
|
+ <!-- <div class="btn">打印</div> -->
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ @click="
|
|
|
+ download(
|
|
|
+ $tools.splitImgHost(
|
|
|
+ courseHandoutsData.handoutsUrl
|
|
|
+ ),
|
|
|
+ courseHandoutsData.urlName
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 下载
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1197,10 +1251,19 @@
|
|
|
<div class="lecture-list__footer">
|
|
|
<div class="lecture-scan">
|
|
|
<div class="lecture-scan__header">
|
|
|
- 这是用户点击预览后显示的讲义名称
|
|
|
+ {{ courseHandoutsData.urlName }}
|
|
|
</div>
|
|
|
<div class="lecture-scan__body">
|
|
|
- <img src="@/assets/banner.png" alt="" />
|
|
|
+ <iframe
|
|
|
+ class="iframe"
|
|
|
+ :src="
|
|
|
+ $tools.splitImgHost(
|
|
|
+ courseHandoutsData.handoutsUrl
|
|
|
+ )
|
|
|
+ "
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ <!-- <img src="@/assets/banner.png" alt="" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1261,6 +1324,7 @@
|
|
|
import Footer from "@/components/footer/index";
|
|
|
import Header from "@/components/header/index";
|
|
|
import ToolBar from "@/components/toolbar/index";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
export default {
|
|
|
name: "CourseDetail",
|
|
|
components: {
|
|
|
@@ -1270,6 +1334,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ playSectionId: 0,
|
|
|
menuTab: [],
|
|
|
lectureShow: true,
|
|
|
textarea: "",
|
|
|
@@ -1288,7 +1353,7 @@ export default {
|
|
|
lockTimer: null,
|
|
|
courseList: [],
|
|
|
businessData: {},
|
|
|
- courseHandoutsData: {},
|
|
|
+ courseHandoutsData: "",
|
|
|
menuList: [],
|
|
|
goodsData: {},
|
|
|
tabList: [],
|
|
|
@@ -1305,9 +1370,18 @@ export default {
|
|
|
reMenuList: [],
|
|
|
answerList: [],
|
|
|
noteList: [],
|
|
|
+ noteTotal: 0,
|
|
|
+ duration: 0,
|
|
|
+ noteParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ },
|
|
|
nowTime: 0,
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["userInfo"]),
|
|
|
+ },
|
|
|
mounted() {
|
|
|
this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
|
|
|
this.goodsId = this.$route.params.goodsId;
|
|
|
@@ -1321,6 +1395,12 @@ export default {
|
|
|
* 切换科目
|
|
|
*/
|
|
|
courseChange() {
|
|
|
+ this.noteParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ };
|
|
|
+ this.duration = 0;
|
|
|
+ this.playSectionId = 0;
|
|
|
this.vid = "";
|
|
|
this.vidzb = "";
|
|
|
this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
|
|
|
@@ -1522,7 +1602,8 @@ export default {
|
|
|
|
|
|
if (section.type != 2) {
|
|
|
//播放视频
|
|
|
-
|
|
|
+ this.playSectionId = section.sectionId;
|
|
|
+ this.getNoteList();
|
|
|
this.initVideo(section);
|
|
|
}
|
|
|
},
|
|
|
@@ -1534,6 +1615,7 @@ export default {
|
|
|
this.loadPlayerScriptzb(this.loadPlayerzb);
|
|
|
} else {
|
|
|
this.vid = option.recordingUrl;
|
|
|
+ this.duration = option.noteSecond || option.durationTime || 0;
|
|
|
this.loadPlayerScript(this.loadPlayer);
|
|
|
}
|
|
|
},
|
|
|
@@ -1555,7 +1637,10 @@ export default {
|
|
|
wrap: "#player",
|
|
|
width: 810,
|
|
|
height: 455,
|
|
|
+ speed: 2,
|
|
|
vid: self.vid,
|
|
|
+ watchStartTime: this.duration,
|
|
|
+ autoplay: true,
|
|
|
teaser_show: 0,
|
|
|
ts: res.data.ts,
|
|
|
sign: res.data.sign,
|
|
|
@@ -1608,12 +1693,15 @@ export default {
|
|
|
courseId: this.courseId,
|
|
|
gradeId: this.gradeId,
|
|
|
goodsId: this.goodsId,
|
|
|
+ pageNum: this.noteParams.pageNum,
|
|
|
+ pageSize: this.noteParams.pageSize,
|
|
|
};
|
|
|
if (this.playSectionId > 0) {
|
|
|
data.sectionId = this.playSectionId;
|
|
|
}
|
|
|
this.$request.noteList(data).then((res) => {
|
|
|
self.noteList = res.rows;
|
|
|
+ self.noteTotal = res.total;
|
|
|
});
|
|
|
},
|
|
|
|
|
|
@@ -1711,6 +1799,113 @@ export default {
|
|
|
this.courseChange();
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ download(url, fileName) {
|
|
|
+ let xhr = new XMLHttpRequest();
|
|
|
+ xhr.open("get", url, true);
|
|
|
+ xhr.setRequestHeader("Content-Type", `application/pdf`);
|
|
|
+ xhr.responseType = "blob";
|
|
|
+ let that = this;
|
|
|
+ xhr.onload = function () {
|
|
|
+ if (this.status == 200) {
|
|
|
+ //接受二进制文件流
|
|
|
+ var blob = this.response;
|
|
|
+ that.downloadExportFile(blob, fileName);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
+ },
|
|
|
+ downloadExportFile(blob, tagFileName) {
|
|
|
+ let downloadElement = document.createElement("a");
|
|
|
+ let href = blob;
|
|
|
+ if (typeof blob == "string") {
|
|
|
+ downloadElement.target = "_blank";
|
|
|
+ } else {
|
|
|
+ href = window.URL.createObjectURL(blob); //创建下载的链接
|
|
|
+ }
|
|
|
+ downloadElement.href = href;
|
|
|
+ downloadElement.download = tagFileName;
|
|
|
+ //下载后文件名
|
|
|
+ document.body.appendChild(downloadElement);
|
|
|
+ downloadElement.click(); //点击下载
|
|
|
+ document.body.removeChild(downloadElement); //下载完成移除元素
|
|
|
+ if (typeof blob != "string") {
|
|
|
+ window.URL.revokeObjectURL(href); //释放掉blob对象
|
|
|
+ }
|
|
|
+ },
|
|
|
+ previvew(url) {
|
|
|
+ window.open(url, "_blank");
|
|
|
+ },
|
|
|
+ noteSubmit() {
|
|
|
+ let self = this;
|
|
|
+ if (!(this.playSectionId > 0)) {
|
|
|
+ this.$message({
|
|
|
+ message: "目前无播放视频",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.textareaNote) {
|
|
|
+ this.$message({
|
|
|
+ message: "请输入内容",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.gradeId) {
|
|
|
+ this.$message({
|
|
|
+ message: "暂无班级数据",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ let noteDate = this.$method.getZeroTime();
|
|
|
+ let noteSecond = polyvPlayerContext.j2s_getCurrentTime();
|
|
|
+ if (!noteSecond) {
|
|
|
+ if (noteSecond == 0) {
|
|
|
+ //播放结束
|
|
|
+ noteSecond = polyvPlayerContext.j2s_getDuration();
|
|
|
+ console.log(noteSecond, 63398);
|
|
|
+ }
|
|
|
+ if (!noteSecond) {
|
|
|
+ this.$message({
|
|
|
+ message: "视频暂未开始",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ gradeId: this.gradeId,
|
|
|
+ goodsId: this.goodsId,
|
|
|
+ sectionId: this.playSectionId,
|
|
|
+ courseId: this.courseId,
|
|
|
+ noteText: this.textareaNote,
|
|
|
+ noteDate: noteDate,
|
|
|
+ noteSecond: noteSecond,
|
|
|
+ };
|
|
|
+ this.$request.postNote(data).then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "发布成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ self.getNoteList();
|
|
|
+ this.textareaNote = "";
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ del(item) {
|
|
|
+ console.log(item);
|
|
|
+ let data = { answerId: item.answerId, status: -1 };
|
|
|
+ this.$request.delAnswer(data).then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getAnswerList();
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -2149,14 +2344,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.submit {
|
|
|
- width: 160px;
|
|
|
- height: 40px;
|
|
|
- background: #3f8dfd;
|
|
|
+ padding: 10px 20px;
|
|
|
border-radius: 20px;
|
|
|
- line-height: 40px;
|
|
|
text-align: center;
|
|
|
font-size: 16px;
|
|
|
- color: #fff;
|
|
|
margin: 10px 0;
|
|
|
float: right;
|
|
|
}
|
|
|
@@ -2223,6 +2414,7 @@ export default {
|
|
|
|
|
|
.del {
|
|
|
float: right;
|
|
|
+ cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: 400;
|
|
|
@@ -2302,6 +2494,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.del {
|
|
|
+ cursor: pointer;
|
|
|
margin-right: 20px;
|
|
|
float: right;
|
|
|
font-size: 14px;
|
|
|
@@ -2331,22 +2524,34 @@ export default {
|
|
|
.submit {
|
|
|
float: right;
|
|
|
width: 138px;
|
|
|
- height: 32px;
|
|
|
- background: #3f8dfd;
|
|
|
- border-radius: 16px;
|
|
|
+ padding: 10px 0;
|
|
|
margin: 10px 0 25px 0;
|
|
|
+ border-radius: 20px;
|
|
|
text-align: center;
|
|
|
- line-height: 32px;
|
|
|
- color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.note-list {
|
|
|
+ &__content {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ &__title {
|
|
|
+ width: 216px;
|
|
|
+ height: 24px;
|
|
|
+ background: #ccc;
|
|
|
+ border-radius: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
&__item {
|
|
|
display: flex;
|
|
|
padding: 15px;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
.el-icon-video-play {
|
|
|
+ cursor: pointer;
|
|
|
font-size: 20px;
|
|
|
color: #3f8dfd;
|
|
|
}
|
|
|
@@ -2356,6 +2561,7 @@ export default {
|
|
|
margin-left: 10px;
|
|
|
|
|
|
.title {
|
|
|
+ cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-weight: bold;
|
|
|
@@ -2468,8 +2674,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
&__body {
|
|
|
- img {
|
|
|
+ height: 800px;
|
|
|
+
|
|
|
+ .iframe {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
chenxiong