课程笔记

src/assets/styles/portal-index.scss

@@ -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;
+    }
+}

src/components/Course/myNote.vue

@@ -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="">
+                            <img src="../../../public/images/coteplay.png" />
-                            {{mynoteData.playTime}}
+                            {{formatSeconds(mynoteData.playTime)}}
-                            <img src="../../../public/images/cotedetel.png" alt="">
+                            <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}}
+                                    {{formatSeconds(note.playTime)}}
-                                    <img src="../../../public/images/cotedetel.png" alt="">
                                 </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") !=''){
+    //   if(localStorage.getItem("NOTE_TEXT") !=''){
-        this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
+    //     this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
-        this.notetab = 1;
+    //     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) {
+        onPlayVideo(time) {
-           console.log(e,'e');
+          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('添加成功');
+                if(!this.mynoteData.id) {
-                this.getMyNote();
+                    this.inAnimation = true;
-                this.notetabType(2);
+                }
+                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;

src/components/VideoPlayer/index.vue

@@ -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();

src/views/study/coursenew.vue

@@ -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);
       },