提交我的笔记

src/api/cesource/index.js

@@ -17,7 +17,6 @@ import errorCode from '@/utils/errorCode'
  *delete请求 axios.delete(url[, config])
  */
   
-  console.log(process.env.VUE_APP_CESOURCE_BASE_API ,'lmj')
 const ReLoginUrl="/login";
 const TokenName='XBOE-Access-Token';
 /**axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'**/

src/assets/styles/portal-index.scss

@@ -120,3 +120,18 @@
   vertical-align: top;
   padding: 4px 12px;
   }
+  /**滚动条的宽度*/
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+/*滚动条的滑块*/
+::-webkit-scrollbar-thumb {
+    background-color:  #D8D8D8;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background:  #D8D8D8;
+}

src/components/Course/myNote.vue

@@ -9,16 +9,17 @@
                     <div class="newcote-content" v-if="notetab == 1">
                         <div class="newcote-time" v-if="mynoteData.playTime != 0">
                             <img src="../../../public/images/coteplay.png" alt="">
-                            8:40
+                            {{mynoteData.playTime}}
                             <img src="../../../public/images/cotedetel.png" alt="">
                         </div>
                         <div class="newcote-text">
                             <el-input
                                 type="textarea"
+                                :autofocus="true"
                                 placeholder="好记性不如烂笔头，记录些什么吧～"
                                 v-model="mynoteData.content"
                                 maxlength="200"
-                                :autosize="{ minRows: 4, maxRows: 8}"
+                                :autosize="{ minRows: 20, maxRows: 20}"
                                 show-word-limit>
                             </el-input>
                         </div>
@@ -26,33 +27,43 @@
                     <!-- 我的笔记  -->
                     <div class="mycote-content" v-if="notetab == 2">
                         <div v-if="noteList.length > 0">
-                            <div style="border-bottom:1px solid #4444;padding-bottom:25px;" >
-                                <span class="mycote-time">2022-06-21  21:35:12 <span class="sm">私密</span> <span class="more" icon="el-icon-more"></span> </span>
-                                <div style="margin-top:20px" class="newcote-time">
+                            <div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList" :key="note.id">
+                                <span class="mycote-time">{{note.sysCreateTime}} 
+                                    <span class="sm">{{note.openType == 1?'公开':'私密'}}</span> 
+                                    <span class="more">
+                                        <el-dropdown>
+                                            <span class="el-dropdown-link">
+                                                <svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
+                                            </span>
+                                            <el-dropdown-menu slot="dropdown" class="dropdown-box" style="background:#333333;border: none;">
+                                                <el-dropdown-item command="a" style="color:#fff" @click.native="noteDel(note)"><img style="width:13px;height:18px;vertical-align: middle;" src="@/assets/images/icon/note-del.png" /> 删除</el-dropdown-item>
+                                                <el-dropdown-item command="b" style="color:#fff" @click.native="noteEdit(note)"><img style="width:13px;height:14px;margin-right:4px;vertical-align: middle;" src="@/assets/images/icon/note-edit.png" />编辑</el-dropdown-item>
+                                            </el-dropdown-menu>
+                                        </el-dropdown>
+                                        
+                                    </span> 
+                                </span>
+                                <div style="margin-top:20px" class="newcote-time" v-if="note.playTime">
                                     <img src="../../../public/images/coteplay.png" alt="">
-                                    8:40
+                                    {{note.playTime}}
                                     <img src="../../../public/images/cotedetel.png" alt="">
                                 </div>
                                 <div class="newcote-text">
-                                    在做策略写方案的时候，都经常错套。都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
-                                    
-                                    我见划公司的，在做策略写方案的时候，都经常不管是什么行业、企业处在什么来实施营销传播，写PPT时也要照着这个理论的框架来写。
+                                    {{note.content}}
                                 </div>
                             </div>
                             <h6 class="mycote-dibu">已经到底啦</h6>
                         </div>
-                        
                         <div class="my-nonote" v-else>
                             <img src="../../../public/images/no-note.png" alt=""/>
                             <h6 style="color: #666666;font-size: 14px;">你还没有记录此课程的笔记哦～</h6>
                         </div>
-                       
                     </div>
                    <div class="newcote-bottom" v-if="notetab == 1">
                        <span style="cursor: pointer;" @click="videoLocation"> <img src="../../../public/images/playtime.png" alt=""> 视频位置</span>
                        <el-radio v-model="mynoteData.openType" :label="1">公开</el-radio>
                        <el-radio v-model="mynoteData.openType" :label="2">私密</el-radio>
-                        <el-button type="primary" size="small" :disabled="mynoteData.content == ''" @click="saveNote()">保存</el-button>
+                        <el-button type="primary" size="small" @click="saveNote()">保存</el-button>
                    </div>
                </div>
     </div>
@@ -74,6 +85,7 @@
       return {
         radio:'1',
         notetab:1,
+        autoSave:null,
         mynoteData:{
             type:1, //我发布的是1 我导入的是2
             content:'',
@@ -84,6 +96,7 @@
             openType:1,// 1表不公开 9表完全公开
         },
         noteList:[],
+        type:1, // 1自动保存 2点击保存
       };
     },
     computed: {
@@ -92,7 +105,16 @@
     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;
+      }
       this.getMyNote();
+    //   this.autoSaveNote();
+      this.autoSave = setInterval(()=>{
+        localStorage.setItem("NOTE_TEXT",this.mynoteData.content);
+        console.log("2222222222");
+      },10000);
     },
     watch:{
         intTimeNote(val) {
@@ -100,10 +122,38 @@
         }
     },
     methods: {
+        onfocusEnevt(e) {
+           console.log(e,'e');
+        },
+        autoSaveNote() {
+           
+        },
+        noteEdit() {
+
+        },
+        noteDel(note) {
+            this.$confirm('您确定要删除这条笔记吗？', '删除提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+                }).then(async() => {
+                    apiNote.del(note.id).then(res=>{
+                       if(res.status == 200) {
+                        this.getMyNote();
+                       } else {
+                        this.$message({ type: 'error', message: res.message, offset: 50 });
+                       }
+                 })
+                })
+                .catch((err) => {
+                  this.$message({ type: 'info', message: '已取消删除', offset: 50 });
+                });
+            
+        },
         getMyNote() {
             apiNote.myCourse(this.mynoteData.courseId).then(res=>{
                 if(res.status == 200) {
-
+                   this.noteList = res.result;
                 }
             })
         },
@@ -114,19 +164,30 @@
             this.notetab = num;
         },
         saveNote() {
-
             apiNote.save(this.mynoteData).then(res=>{
-
+              if(res.status == 200 ) {
+                this.$message.warning('添加成功');
+                this.getMyNote();
+                this.notetabType(2);
+              }
             })
         }
-    }
+    },
+    beforeDestroy() {
+       clearInterval(this.autoSave);
+       this.autoSave = null;
+    },
   }
   </script>
   
   <style scoped lang="scss">
+   ::v-deep .el-dropdown-menu__item:hover{
+      background: #333333;
+    }
 .mynote{
     // width: 100%;
       margin: 35px 30px;
+     
       .newcote-time{
         width: 120px;
         height: 30px;
@@ -177,8 +238,9 @@
     .mycote-content{
         margin: 30px 0px;
         box-sizing: border-box;
-        padding: 35px 30px;
-        height: 474px;
+        padding: 8px 30px;
+        height: 550px;
+        overflow-y: auto;
         background-color: #fff;
         .my-nonote{
             text-align: center;
@@ -203,6 +265,10 @@
                 margin-left: 20px;
                 padding:  3px 10px;
             }
+            .more{
+                margin-top: 12px;
+                float: right;
+            }
     }
    .mycote-dibu{
        margin: 50px 38%;

src/icons/svg/spot.svg

@@ -0,0 +1 @@
+<svg t="1662627913521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1676" width="200" height="200"><path d="M512 814.545455c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z m0-232.727273c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z m0-232.727273c-39.563636 0-69.818182-30.254545-69.818182-69.818182s30.254545-69.818182 69.818182-69.818182 69.818182 30.254545 69.818182 69.818182-30.254545 69.818182-69.818182 69.818182z" fill="#666666" p-id="1677"></path></svg>

src/views/study/coursenew.vue

@@ -7,9 +7,9 @@
                     <el-breadcrumb-item class="hear-nav">课程详情</el-breadcrumb-item>
                 </el-breadcrumb>
                 <div class="coures-title">
-                    <div>课程名称 标准化异常处理流程</div>
-                    <span>课程简介通俗易懂的入门课程！</span> 
-                    <h6>评分5.0分</h6>
+                    <div>{{courseInfo.name}}</div>
+                    <!-- <span>{{courseInfo.summary}}</span>  -->
+                    <h6>评分{{toScore(courseInfo.score)}}分</h6>
                 </div>
         </div>
         <div class="coures-content">
@@ -104,12 +104,12 @@
                 </div>
               </div>
                </div>
-            <div style="padding-left:5px;margin: 24px 0px;background-color: #FFFFFF;" class="info">
+            <div style="margin: 24px 0px;background-color: #FFFFFF;" class="info">
                 <div class="coure-tab">
                     <div @click="coutab" :class="courestab == true? 'coureactive' : ''">课程评论<span class=""></span> </div>
                     <div @click="coutab" :class="courestab == false? 'coureactive' : ''">课程笔记<span class=""></span> </div>
                 </div>
-                <div v-if="courestab" class="coures-comments">
+                <div v-if="courestab" class="coures-comments" style="margin-left:17px">
                    <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
                 </div>
                 <div v-else class="coures-note">
@@ -304,7 +304,7 @@ export default {
     // 笔记功能
       
       videoLocation() {// 记录笔记视频位置
-        this.$store.dispatch("SetIntTimeNote", 1);
+        this.$store.dispatch("SetIntTimeNote", this.intTimeNote);
       },
       coutab(){
          this.courestab = !this.courestab;
@@ -1069,7 +1069,7 @@ export default {
     display: flex;
     width: 300px;
     padding-top: 30px;
-    margin-left: 55px;
+    margin-left: 47px;
     div{
         flex: 1;
         color: #666666;
@@ -1439,9 +1439,9 @@ export default {
   padding: 10px 0px;
   .teacher-avator {
     ::v-deep .el-avatar {
-      width: 68px !important;
-      height: 68px !important;
-      border-radius: 0px;
+      width: 60px !important;
+      height: 60px !important;
+      border-radius: 50%;
     }
     .teacher-text {
       width: 68px;
@@ -1475,7 +1475,7 @@ export default {
 }
 .teachers {
   background-color: #fff;
-  padding: 5px 15px 5px 10px;
+  padding: 36px;
   margin-top: 0;
   .top {
     font-size: 16px;