添加笔记

src/components/common/BookCard.vue

@@ -22,7 +22,7 @@
             <span class="isReservation" v-if="item.is_reservation&&item.is_reservation==='true'">订阅</span>
             <el-image
                 class="image"
-                :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
+                :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'||goodsTypeList[item.type]&&goodsTypeList[item.type].type==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
                 :fit="'cover'">
             </el-image>
             <div class="bottom">

src/views/bookShelf/components/LexicalType.vue

@@ -498,6 +498,7 @@ export default {
     }
     .wordshasbottom {
       position: relative;
+      float: left;
     }
     .word-bottom{
         width: 100%;

src/views/bookShelf/components/NotesModel.vue

@@ -1,60 +1,83 @@
 <!--  -->
 <template>
   <div id="notes-model">
-  <div class="NNPE-ArticleView" v-if="articleInfo">
-    <template v-if="resArr[0]&&resArr[0].wordsList">
-        <h2>
-            <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}">
-                    <span
-                        class="NNPE-chs"
-                        >{{ itemR.text }}</span
-                    >
-                <!-- {{itemR.tokens[2]}} -->
-            </span>
-        </h2>
-    </template>
-    <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
-        {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
-    </h6>
-    <div class="audio-box">
-        <div
-            class="aduioLine-content aduioLine-box"
-            v-if="
-                articleInfo.art_sound_url
-            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
-        >
-            <AudioLine
-                audioId="artNormalAudio"
-                :mp3="articleInfo.art_sound_url"
-                :getCurTime="getCurTime"
-                ref="audioLine"
-                :mp3Source="'mp3'"
-            />
-            <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
+    <div class="NNPE-ArticleView" v-if="articleInfo">
+        <template v-if="resArr[0]&&resArr[0].wordsList">
+            <h2>
+                <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}">
+                        <span
+                            class="NNPE-chs"
+                            >{{ itemR.text }}</span
+                        >
+                    <!-- {{itemR.tokens[2]}} -->
+                </span>
+            </h2>
+        </template>
+        <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
+            {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
+        </h6>
+        <div class="audio-box">
+            <div
+                class="aduioLine-content aduioLine-box"
+                v-if="
+                    articleInfo.art_sound_url
+                " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
+            >
+                <AudioLine
+                    audioId="artNormalAudio"
+                    :mp3="articleInfo.art_sound_url"
+                    :getCurTime="getCurTime"
+                    ref="audioLine"
+                    :mp3Source="'mp3'"
+                />
+                <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
+            </div>
+        </div>
+        <template v-if="resArr.length > 0">
+        <div class="table-box">
+            <div
+            :class="['NNPE-detail']"
+            v-for="(item, index) in resArr"
+            :key="'detail' + index"
+            >
+                <template v-if="index!==0">
+                    <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}" @mousedown="mouseupClick(pItem)">
+                            {{ pItem.text }}
+                    </span>
+                </template>
+            </div>
         </div>
+        </template>
     </div>
-    <template v-if="resArr.length > 0">
-      <div class="table-box">
-        <div
-          :class="['NNPE-detail']"
-          v-for="(item, index) in resArr"
-          :key="'detail' + index"
-        >
-            <template v-if="index!==0">
-                <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}" @mousedown="mouseupClick(pItem)">
-                        {{ pItem.text }}
-                </span>
-            </template>
+    <el-dialog
+        :visible.sync="notesFlag"
+        :show-close="true"
+        :title="'笔记'"
+        :close-on-click-modal="false"
+        width="367px"
+        class="notes-dialog"
+        v-if="notesFlag">
+        <p>{{notesObj.title}}</p>
+        <el-input
+            type="textarea"
+            :rows="4"
+            maxlength="200"
+            show-word-limit
+            placeholder="请输入"
+            v-model="notesObj.notes">
+        </el-input>
+        <div class="btn-box">
+            <el-button type="danger" plain size="small" @click="deleteNotes">删除</el-button>
+            <el-button type="primary" @click="handleSave" size="small" :loading="loading">保存</el-button>
         </div>
-      </div>
-    </template>
-  </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
 import Highlighter from 'web-highlighter';
+import { getLogin } from "@/api/ajax";
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
@@ -108,7 +131,16 @@ export default {
       tokensArr: [],
       sentenceList: [],
       notesId: '',
-      highlighter: null
+      highlighter: null,
+      notesFlag: false, // 笔记弹窗
+      notesObj: {
+        title: '',
+        id: '',
+        notes: '',
+        pos: ''
+      },
+      activeSentObj: null, // 点击的句子
+      loading: false
     };
   },
   computed: {
@@ -172,19 +204,68 @@ export default {
                 .on('selection:create', ({sources}) => {
                     // sources = sources.map(hs => ({hs}));
                     console.log(sources)
-                    this.notesId = sources[0].id
+                    if(sources&&sources[0]){
+                        _this.notesObj.title = sources[0].text
+                        _this.notesObj.pos = JSON.stringify({
+                            sent_id: _this.activeSentObj.id,
+                            s: sources[0].startMeta.textOffset,
+                            e: sources[0].endMeta.textOffset,
+                        })
+                        _this.notesId = sources[0].id
+                        _this.notesFlag = true
+                    }
+                    
                     // 存储
                     // store.save(sources);
+                    document.getElementsByClassName('highlight-mengshou-wrap').forEach((itemH,indexH)=>{
+                        if(indexH===0){
+                            itemH.addEventListener("mousedown", function () {
+                                _this.notesFlag = true
+                                console.log(itemH.getAttribute('data-highlight-id'))
+                            });
+                        }
+                    })
                 });
             _this.highlighter.run()
         }, 1000);
     },
     mouseupClick(obj){
-        setTimeout(() => {
-            console.log(obj)
-            console.log(this.notesId)
-        }, 300);
+        this.activeSentObj = obj
+    },
+    // 保存
+    handleSave(){
+        this.loading = true
+        let MethodName = '/PaperServer/Client/Article/ArtNoteAdd'
+        let data = {
+            iss_id: this.$route.query.iss_id,
+            art_id: this.$route.query.id,
+            pos: this.notesObj.pos,
+            select_text: this.notesObj.title,
+            note: this.notesObj.notes.trim()
+        }
+        if(this.notesObj.id){
+            MethodName = '/PaperServer/Client/Article/ArtNoteEdit'
+            data.id = this.notesObj.id
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.loading = false
+            this.notesFlag = false
+            this.$message.success('保存成功')
+        }).catch(()=>{
+            this.loading = false
+        })
     },
+    // 删除
+    deleteNotes(){
+        this.$confirm("确定删除吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        }).then(() => {
+            
+        });
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -215,31 +296,6 @@ export default {
   h2{
     display: flex;
     flex-flow: wrap;
-    &.sentActive {
-        background: rgba(24, 144, 255, 0.1);
-    }
-    &.overActive {
-        background: rgba(0, 0, 0, 0.06);
-    }
-    .wordActive {
-        color: #175DFF !important;
-    }
-    .hasExplain{
-        min-width: 3px;
-        position: relative;
-    }
-    .explain-sub{
-        position: absolute;
-        bottom: -25px;
-        right: -10px;
-        z-index: 1;
-        font-size: 0;
-        cursor: pointer;
-        img{
-            width: 14px;
-            height: 12px;
-        }
-    }
   }
   .table-box {
     // background: #f7f7f7;
@@ -257,21 +313,6 @@ export default {
         flex-flow: wrap;
         .word-box{
             position: relative;
-            &.hasExplain{
-                min-width: 3px;
-            }
-            .explain-sub{
-                position: absolute;
-                bottom: -5px;
-                right: -10px;
-                z-index: 1;
-                font-size: 0;
-                cursor: pointer;
-                img{
-                    width: 14px;
-                    height: 12px;
-                }
-            }
         }
       }
       > img {
@@ -341,4 +382,40 @@ export default {
     text-decoration: underline dotted;
     text-decoration-color: #175DFF;
 }
+.notes-dialog{
+    .el-dialog__header{
+        padding: 13px 16px 0 16px;
+    }
+    .el-dialog__title{
+        color: #000;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+    }
+    .el-dialog__body{
+        padding: 0 16px 13px 16px;
+        p{
+            color: #2F3742;
+            font-family: "Smartisan";
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 26px;
+            margin: 6px 0;
+            word-break: break-word;
+        }
+        .el-textarea{
+            border-radius: 2px;
+            .el-textarea__inner{
+                border: 1px solid #E5E6EB;
+                background: #F2F3F5;
+                padding: 8px;
+            }
+        }
+        .btn-box{
+            text-align: right;
+            padding-top: 6px;
+        }
+    }
+}
+
 </style>