mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 11:26:43 +08:00
课程笔记
This commit is contained in:
zhaofang
BIN
public/images/success-note.png
Normal file
BIN
public/images/success-note.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 768 B |
@@ -135,3 +135,20 @@
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #D8D8D8;
|
||||
}
|
||||
@keyframes ubAddBlock {
|
||||
// from {
|
||||
// bottom: 0;
|
||||
// }
|
||||
// to {
|
||||
// bottom: 200px;
|
||||
// }
|
||||
0% {
|
||||
bottom: 0;
|
||||
}
|
||||
50% {
|
||||
bottom: 200px;
|
||||
}
|
||||
100% {
|
||||
bottom: 200px;
|
||||
}
|
||||
}
|
||||
@@ -8,9 +8,9 @@
|
||||
<!-- 新增笔记 -->
|
||||
<div class="newcote-content" v-if="notetab == 1">
|
||||
<div class="newcote-time" v-if="mynoteData.playTime != 0">
|
||||
<img src="../../../public/images/coteplay.png" alt="">
|
||||
{{mynoteData.playTime}}
|
||||
<img src="../../../public/images/cotedetel.png" alt="">
|
||||
<img src="../../../public/images/coteplay.png" />
|
||||
{{formatSeconds(mynoteData.playTime)}}
|
||||
<img src="../../../public/images/cotedetel.png" @click="timeDel()"/>
|
||||
</div>
|
||||
<div class="newcote-text">
|
||||
<el-input
|
||||
@@ -19,7 +19,7 @@
|
||||
placeholder="好记性不如烂笔头，记录些什么吧～"
|
||||
v-model="mynoteData.content"
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 20, maxRows: 20}"
|
||||
:autosize="{ minRows: 18, maxRows: 20}"
|
||||
show-word-limit>
|
||||
</el-input>
|
||||
</div>
|
||||
@@ -43,10 +43,9 @@
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<div style="margin-top:20px" class="newcote-time" v-if="note.playTime">
|
||||
<div style="margin-top:10px" class="newcote-time" v-if="note.playTime" @click="onPlayVideo(note.playTime)">
|
||||
<img src="../../../public/images/coteplay.png" alt="">
|
||||
{{note.playTime}}
|
||||
<img src="../../../public/images/cotedetel.png" alt="">
|
||||
{{formatSeconds(note.playTime)}}
|
||||
</div>
|
||||
<div class="newcote-text">
|
||||
{{note.content}}
|
||||
@@ -66,6 +65,11 @@
|
||||
<el-button type="primary" size="small" @click="saveNote()">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animation-box" :class="inAnimation?'animation':''" @animationend="inAnimation=false">
|
||||
<div class="box-text">
|
||||
<img src="../../../public/images/success-note.png"/>笔记保存成功，U币+2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -83,6 +87,7 @@
|
||||
name:'MyNote',
|
||||
data() {
|
||||
return {
|
||||
inAnimation:false,
|
||||
radio:'1',
|
||||
notetab:1,
|
||||
autoSave:null,
|
||||
@@ -105,16 +110,13 @@
|
||||
mounted() {
|
||||
this.mynoteData.courseId = this.data.courseId;
|
||||
this.mynoteData.contentId = this.data.id;
|
||||
if(localStorage.getItem("NOTE_TEXT") !=''){
|
||||
this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
|
||||
this.notetab = 1;
|
||||
}
|
||||
// if(localStorage.getItem("NOTE_TEXT") !=''){
|
||||
// this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
|
||||
// this.notetab = 1;
|
||||
// }
|
||||
this.getMyNote();
|
||||
// this.autoSaveNote();
|
||||
this.autoSave = setInterval(()=>{
|
||||
localStorage.setItem("NOTE_TEXT",this.mynoteData.content);
|
||||
console.log("2222222222");
|
||||
},10000);
|
||||
|
||||
},
|
||||
watch:{
|
||||
intTimeNote(val) {
|
||||
@@ -122,14 +124,35 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onfocusEnevt(e) {
|
||||
console.log(e,'e');
|
||||
onPlayVideo(time) {
|
||||
this.$emit('onPlayVideo',time);
|
||||
},
|
||||
formatSeconds(value) {
|
||||
let result = parseInt(value)
|
||||
let h = Math.floor(result / 3600);
|
||||
let m = Math.floor((result / 60 % 60));
|
||||
let s = Math.floor((result % 60));
|
||||
|
||||
let res = '';
|
||||
if(h > 0){
|
||||
res += `${h}:${m}:${s}`;
|
||||
} else {
|
||||
res += `${m}:${s}`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
timeDel(){
|
||||
this.mynoteData.playTime = 0;
|
||||
},
|
||||
autoSaveNote() {
|
||||
|
||||
this.autoSave = setInterval(()=>{
|
||||
localStorage.setItem("NOTE_TEXT",this.mynoteData.content);
|
||||
console.log("2222222222");
|
||||
},10000);
|
||||
},
|
||||
noteEdit() {
|
||||
|
||||
noteEdit(note) {
|
||||
this.mynoteData = note;
|
||||
this.notetabType(1);
|
||||
},
|
||||
noteDel(note) {
|
||||
this.$confirm('您确定要删除这条笔记吗？', '删除提示', {
|
||||
@@ -162,19 +185,41 @@
|
||||
},
|
||||
notetabType(num) {
|
||||
this.notetab = num;
|
||||
// if(num == 1) {
|
||||
// this.autoSaveNote();
|
||||
// }
|
||||
},
|
||||
saveNote() {
|
||||
if(this.mynoteData.content == '') {
|
||||
this.$message({ type: 'info', message: '您还没有书写笔记！', offset: 50 });
|
||||
return;
|
||||
}
|
||||
apiNote.save(this.mynoteData).then(res=>{
|
||||
if(res.status == 200 ) {
|
||||
this.$message.warning('添加成功');
|
||||
this.getMyNote();
|
||||
this.notetabType(2);
|
||||
if(!this.mynoteData.id) {
|
||||
this.inAnimation = true;
|
||||
}
|
||||
setTimeout(()=>{
|
||||
localStorage.setItem("NOTE_TEXT",'');
|
||||
// clearInterval(this.autoSave);
|
||||
this.getMyNote();
|
||||
this.notetabType(2);
|
||||
this.mynoteData={
|
||||
type:1, //我发布的是1 我导入的是2
|
||||
content:'',
|
||||
playTime:'',
|
||||
courseId:'',// 课程id
|
||||
contentId:'',//课程内容id
|
||||
courseName:'',// 课程名称
|
||||
openType:1,// 1表不公开 9表完全公开
|
||||
};
|
||||
},2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.autoSave);
|
||||
// clearInterval(this.autoSave);
|
||||
this.autoSave = null;
|
||||
},
|
||||
}
|
||||
@@ -187,18 +232,45 @@
|
||||
.mynote{
|
||||
// width: 100%;
|
||||
margin: 35px 30px;
|
||||
|
||||
position: relative;
|
||||
.animation{
|
||||
display: block !important;
|
||||
animation-name:ubAddBlock;
|
||||
animation-duration:2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.animation-box{
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right:200px;
|
||||
.box-text{
|
||||
padding: 12px 16px;
|
||||
width: 252px;
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 8px 20px 0px rgba(0,35,114,0.1);
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.65);
|
||||
img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.newcote-time{
|
||||
width: 120px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3379FB;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #387DF7;;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 12px;
|
||||
img{
|
||||
vertical-align: middle;
|
||||
margin: 0 5px;
|
||||
|
||||
@@ -257,6 +257,10 @@ export default {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
notePlay:{//回到笔记时间点播放
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
isDrag:{
|
||||
type: Boolean,
|
||||
default: null,
|
||||
@@ -535,6 +539,13 @@ export default {
|
||||
this.$emit('onPlayerEnded', {})
|
||||
}
|
||||
},
|
||||
notePlay: function(val) {
|
||||
if(val) {
|
||||
this.updateProgressBySetTime(val);
|
||||
this.isPlaying = true;
|
||||
this.videoDom.play();
|
||||
}
|
||||
},
|
||||
src: function () {
|
||||
// 当视频地址变更时，重载视频
|
||||
this.videoDom.load();
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
:src="blobUrl"
|
||||
@onPlayerPlaying="onPlayerPlaying"
|
||||
:initTime="contentData.lastStudyTime"
|
||||
:notePlay="notePlay"
|
||||
@onPlayerPlay="onPlayerPlay"
|
||||
:isDrag="curriculumData.isDrag"
|
||||
@onFullscreen="onFullscreen"
|
||||
@@ -142,7 +143,7 @@
|
||||
</div>
|
||||
<!-- 我的笔记 -->
|
||||
<div class="mynote" v-if="tab == 2">
|
||||
<my-note :data="contentData" @videoLocation="videoLocation"></my-note>
|
||||
<my-note :data="contentData" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"></my-note>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coures-tearch">
|
||||
@@ -210,6 +211,7 @@ export default {
|
||||
components: {courseImage, portalHeader, hyperLink, comments, homework, exam, interactBar, assess, pdfPreview, audioPlayer, videoPlayer,myNote },
|
||||
data(){
|
||||
return{
|
||||
notePlay:null,
|
||||
intTimeNote:'',
|
||||
courestab:true,
|
||||
curCFile:{
|
||||
@@ -301,8 +303,14 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPlayVideo(time) {
|
||||
this.playerBoxShow = false;
|
||||
this.notePlay = null;
|
||||
setTimeout(()=>{
|
||||
this.notePlay = time;
|
||||
},1000)
|
||||
},
|
||||
// 笔记功能
|
||||
|
||||
videoLocation() {// 记录笔记视频位置
|
||||
this.$store.dispatch("SetIntTimeNote", this.intTimeNote);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user