From 75036cc5fc0b5ec1de0585379134e705ed134c57 Mon Sep 17 00:00:00 2001
From: zhaofang <752743406@qq.com>
Date: Fri, 9 Sep 2022 15:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/success-note.png       | Bin 0 -> 768 bytes
 src/assets/styles/portal-index.scss  |  17 ++++
 src/components/Course/myNote.vue     | 128 +++++++++++++++++++++------
 src/components/VideoPlayer/index.vue |  11 +++
 src/views/study/coursenew.vue        |  12 ++-
 5 files changed, 138 insertions(+), 30 deletions(-)
 create mode 100644 public/images/success-note.png

diff --git a/public/images/success-note.png b/public/images/success-note.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca91f8b6f75d321b612bb0ca9c06b60ed0ebb18d
GIT binary patch
literal 768
zcmV+b1ONPqP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%x=BPqR9HvFm(NQSVHn4s@2o-MtPzow5R|)X*B~N@gglj<f^x^Moy#b#pgMRc
zp-`;;flmIIt)Np^1FcJR=$P(SAQ&n^G$VD$`NqsT>+H_%&bzBHdzi!W{P;ZY^W%M9
zNX$Q|`X3>+@vkpW3we>k6C%<nM5m_@E{n)A1fK+WGt|}pVFYkgY)1kd`8K=z=f>(F
zMTSUrC>aG-Au_%%(eeEI(cZuHbm{`=1@jWg385TTaU7C?ECIM_r;OLN^s54pM6!^3
zNb+7&jw_S^j9RJe0|2bF7Xm0cH>XK4cEY)D0}#_n8CNPHLI8T+e6&-MhoS{W?X+<}
z_<tFImve`&b~5r1goew(nkWId)xNf|ve0zFsZv9h_9qT>``u9jNaoEu4*6Ks&UWN9
z;I5T6o_Hg~{kTJBtdRSm+UJqZfsdXHd9s=;fYsqt_K-WQJb+{&cgAs?xk$qb0s!V)
z+tKHW{`u{^C8ejDnx<(zRw_GR1jw6X4mqS?zpjYye61sEyMk?n+zoM@r&R%faVu>M
zdjNWVW|ow*+W`P%uC-me;5*kBXZk6a5@AdAG{`$UJ<#g|d?BT~S%5~Jd&LJ?u+sy_
ziU5nIMWJ4UbfqPso&UGNt0b?7hf9^nfoUNV^#X#xwlhXD5@1(Cj{oW!_*_ht`HbYC
zZ#W#enWe~Ntz!=YL15V#qdhVOnqb1p7`J?7AHsFsrtj@rIe2b;^Axj$OhrW=fDfb~
zq6otfxod6uo)=}#6(bJ-Y!#tO8&*P;PGr$+DDqMofU)(oal4^GROKWL3MW;MJy-)}
zgQ%fVyh$F_=XE=vaujb)L*>f|z<W|osZ@K7DOi3Pxk9mD$6hPNxsU|<Jie98g@}DA
y-GYc|Ee}?0Y!8zlM66G<AV_SF(`J_xRlWb%{G>34j6z8O0000<MNUMnLSTXb)?xPm

literal 0
HcmV?d00001

diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss
index a5ed2489..c092171f 100644
--- a/src/assets/styles/portal-index.scss
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Course/myNote.vue b/src/components/Course/myNote.vue
index 7cb97fca..27ac72b4 100644
--- a/src/components/Course/myNote.vue
+++ b/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="">
-                            {{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;
diff --git a/src/components/VideoPlayer/index.vue b/src/components/VideoPlayer/index.vue
index 7015cfa1..83f96fe5 100644
--- a/src/components/VideoPlayer/index.vue
+++ b/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();
diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue
index 55ce9ced..cd82a987 100644
--- a/src/views/study/coursenew.vue
+++ b/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);
       },