深度监听

src/views/bookShelf/articleDetail.vue

@@ -32,12 +32,12 @@
                         <el-button type="text" class="btn-right" :class="[activeArticleIndex===issueChnTanList.length-1?'not-allow':'']" @click="handlePage('+')">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
                     </div>
                     <div class="right">
-                        <!-- <template v-if="noRead">
+                        <template v-if="support">
                             <span class="support" @click="handleReadArticle"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
                         </template>
                         <template v-else>
                             <span class="support readed"><svg-icon icon-class="readed"></svg-icon>已读</span>
-                        </template> -->
+                        </template>
                     </div>
                 </div>
             </div>
@@ -758,10 +758,6 @@ export default {
             if(res.status===1){
                 this.noRead = res.is_collect_article === 'false'
                 this.articleNumber = res.collect_person_count
-                if(!this.noRead){
-                    clearInterval(this_.timer);
-                    this_.timer = null;
-                }
                 this.likeWordList = []
                 res.word_list.forEach(item=>{
                     this.likeWordList.push(item.word)
@@ -779,6 +775,22 @@ export default {
         .catch(() => {
             this.loading = false
         }); 
+        getLogin('/ShopServer/Client/ReadingRecordManager/GetReadingStatus_Article', {
+            goods_type: 21,
+            article_id: this.articleId
+        })
+        .then((res) => {
+            if(res.status===1){
+                this.support = res.reading_info.is_reading === 'false'
+                if(!this.support){
+                    clearInterval(this_.timer);
+                    this_.timer = null;
+                }
+            }
+        })
+        .catch(() => {
+            this.loading = false
+        }); 
     },
     handleReadArticle(){
         let this_ = this;
@@ -793,7 +805,7 @@ export default {
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
-                this.noRead = false
+                this.support = false
             }
         })
         .catch(() => {

src/views/bookShelf/components/NewWordList.vue

@@ -7,7 +7,7 @@
                 <svg-icon v-if="!itemW.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
                 <div class="word-info">
                     <div class="word-info-top">
-                        <b class="word" @click="showWord(itemW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
+                        <b class="word" @click="showWord(itemW,indexW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
                         <span class="symbol" :style="{color:colorObj.newWordOtherColor}">{{itemW.symbol}}</span>
                         <span class="star" v-if="itemW.rate">
                             <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in itemW.rate" :key="indexS" :style="{color:colorObj.newWordStar}"></svg-icon>
@@ -35,7 +35,7 @@
             width="570px"
             class="login-dialog"
             v-if="wordcardShow">
-            <WordCard @closeWord="closeWord" :data="activeItem" />
+            <WordCard @closeWord="closeWord" :dataObj="activeItem" :wordList="wordList" :activeObjIndex="activeObjIndex" @changeLike="changeLike" :likePhrase="likeWord"/>
         </el-dialog>
     </div>
     
@@ -61,7 +61,8 @@ export default {
         voicePlaySrc: require("../../../assets/voice-play-gray.png"),
         activeIndex: null,
         likeWord: JSON.parse(JSON.stringify(this.likeWordList)),
-        activeItem: null
+        activeItem: null,
+        activeObjIndex: null,
     }
   },
   //计算属性 类似于data概念
@@ -78,6 +79,17 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    likeWordList:{
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+          this.likeWord= JSON.parse(JSON.stringify(this.likeWordList))
+          this.handleData()
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -134,8 +146,9 @@ export default {
         }
     },
     // 查看单词卡片
-    showWord(obj){
+    showWord(obj,indexi){
         this.wordcardShow = true
+        this.activeObjIndex = indexi  
         this.activeItem = obj
     },
     // 关闭单词卡片
@@ -189,6 +202,11 @@ export default {
             }
             this.wordList.push(obj)
         });
+        console.log(this.likeWordList)
+        console.log(this.likeWord)
+    },
+    changeLike(obj,list){
+        this.$emit('changeLike',obj,list)
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/views/bookShelf/components/PhraseCard.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="word-card" v-loading="loading">
     <div class="word-card-top">
-        <span class="progress" v-if="wordList&&wordList.length>0">{{(phraseActiveIndex+1)+' / '+wordList.length}}</span>
-        <template v-else>
-            <ul>
-                <li class="active">
-                    <label>本文释义</label>
-                    <span></span>
-                </li>
-            </ul>
-        </template>
+        <ul>
+            <li class="active">
+                <label>本文释义</label>
+                <span></span>
+            </li>
+        </ul>
         <div class="btn-box">
             <svg-icon icon-class="arrow-left-line" :class="[phraseActiveIndex===0?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('-')"></svg-icon>
+            <span class="progress" v-if="wordList&&wordList.length>0">{{(phraseActiveIndex+1)+' / '+wordList.length}}</span>
             <svg-icon icon-class="arrow-right-line" :class="[phraseActiveIndex===wordList.length-1?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('+')"></svg-icon>
             <svg-icon icon-class="like-line" className="icon-like" v-if="!data.collect" @click="handleCollect(data)"></svg-icon>
             <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(data)"></svg-icon>
@@ -308,6 +306,7 @@ export default {
             font-size: 14px;
             line-height: 32px;
             color: #000;
+            margin: 0 4px;
         }
         .btn-box{
             text-align: right;

src/views/bookShelf/components/PhraseModel.vue

@@ -142,18 +142,30 @@
         v-if="showPhraseFlag&&showObj">
         <phrase-card :dataObj="showObj" @closeWord="closeExplain" @changeLike="changeLike" :likePhrase="likePhraseList"></phrase-card>
     </el-dialog>
+    <el-dialog
+        :visible.sync="showWordFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        width="570px"
+        class="login-dialog"
+        :modal="false"
+        v-if="showWordFlag">
+        <WordCard @closeWord="closeExplain" :dataObj="showObj" @changeLike="changeLike" :likePhrase="likeWord"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
 import PhraseCard from "./PhraseCard.vue"
+import WordCard from "../../personalCenter/components/WordCard.vue"
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo","likePhraseList","likeWord"],
   components: {
     AudioLine,
-    PhraseCard
+    PhraseCard,
+    WordCard
   },
   data() {
     return {
@@ -221,7 +233,43 @@ export default {
       return playing;
     },
   },
-  watch: {},
+  watch: {
+    likeWordList:{
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+            debugger
+            this.phraseList.forEach(item=>{
+                item.type='phrase'
+                item.collect = this.likePhraseList.indexOf(item.exp_title)>-1?true:false
+            })
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    likeWord:{
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+            this.wordLit.forEach(item=>{
+                item.type='newWord'
+                item.exp_title = item.word_name
+                let paraStr = ''
+                if(item.word_explain&&item.word_explain.word_para_list){
+                    item.word_explain.word_para_list.forEach(items=>{
+                        paraStr += items.para
+                    })
+                }
+                item.exp_content = paraStr
+                item.collect = this.likeWord.indexOf(item.word_name)>-1?true:false
+            })
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
   //方法集合
   methods: {
     getCurTime(curTime) {
@@ -339,18 +387,40 @@ export default {
                 })
                 this.showPhraseFlag = true
             }else if(item.type==='newWord'){
+                this.wordLit.forEach(itemi=>{
+                    if(item.word_id===itemi.id){
+                        let obj = {
+                            src: itemi.ph_file_url?itemi.ph_file_url:'',
+                            word: itemi.word_name,
+                            symbol: itemi.word_explain.ph?itemi.word_explain.ph:'',
+                            paraList: itemi.word_explain.word_para_list,
+                            type: itemi.word_explain.vl_level?itemi.word_explain.vl_level:'',
+                            typeCn: itemi.word_explain.vl_level_name?itemi.word_explain.vl_level_name:'',
+                            rate: itemi.word_explain.star?itemi.word_explain.star:null,
+                            originalObj: itemi,
+                            hasVoice: itemi.word_explain.ph_mp3_id||itemi.word_explain.ph_file_url?true:false,
+                            id: itemi.id,
+                            collect: this.likeWord.indexOf(itemi.word_name)>-1?true:false
+                        }
+                        this.showObj = obj
+                    }
+                })
                 this.showWordFlag = true
             }else{
-                this.showSearchWordFlag = true
+                let obj = {
+                    word: item.tokens[2],
+                    isNew: false
+                }
+                this.showObj = obj
+                this.showWordFlag = true
             }
         }
-        console.log(item)
+        // console.log(item)
     },
     closeExplain(){
         this.showExplainFlag = false
         this.showPhraseFlag = false
         this.showWordFlag = false
-        this.showSearchWordFlag = false
         this.showObj = null
     },
     changeLike(obj,list){

src/views/personalCenter/components/WordCard.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="word-card" v-loading="loading">
     <div class="word-card-top">
-        <span class="progress">1 / 10</span>
+        <ul>
+            <li class="active">
+                <label>本文释义</label>
+                <span></span>
+            </li>
+        </ul>
         <div class="btn-box">
-            <svg-icon icon-class="arrow-left-line"></svg-icon>
-            <svg-icon icon-class="arrow-right-line"></svg-icon>
-            <svg-icon icon-class="like-line"></svg-icon>
+            <svg-icon icon-class="arrow-left-line" :class="[phraseActiveIndex===0?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('-')"></svg-icon>
+            <span class="progress" v-if="wordList&&wordList.length>0">{{(phraseActiveIndex+1)+' / '+wordList.length}}</span>
+            <svg-icon icon-class="arrow-right-line" :class="[phraseActiveIndex===wordList.length-1?'not-allow':'']" v-if="wordList&&wordList.length>0" @click="changeIndex('+')"></svg-icon>
+            <svg-icon icon-class="like-line" className="icon-like" v-if="!data.collect" @click="handleCollect(data)"></svg-icon>
+            <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(data)"></svg-icon>
             <i class="el-icon-close" @click="closeWord"></i>
         </div>
     </div>
@@ -120,7 +127,7 @@ import { getLogin } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { },
-  props: ["data"],
+  props: ["dataObj","wordList","activeObjIndex","likePhrase"],
   data() {
     //这里存放数据
     return {
@@ -135,6 +142,8 @@ export default {
       voicePlaySrc: require("../../../assets/voice-play-gray.png"),
       sentKwicData: null,
       allList: [],
+      phraseActiveIndex: this.activeObjIndex, //JSON.parse(JSON.stringify(this.activeObjIndex))
+      data: JSON.parse(JSON.stringify(this.dataObj))
     }
   },
   //计算属性 类似于data概念
@@ -211,6 +220,75 @@ export default {
         .catch(() => {
             this.loading = false
         });
+    },
+    handleCollect(item){
+        if(item.collect){
+            let MethodName = "/ShopServer/Client/CollectManager/CancelCollect_Word";
+            let data = {
+                word: item.word,
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    item.collect = false
+                    this.$forceUpdate()
+                    this.$message({
+                        message: "取消收藏",
+                        type: "success",
+                    });
+                    this.likePhrase.splice(this.likePhrase.indexOf(item.word),1)
+                    this.$emit('changeLike','likeWordList',this.likePhrase)
+                }
+            })
+            .catch(() => {
+            });
+        }else{
+            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
+            let data = {
+                word: item.word,
+                pinyin: item.symbol,
+                explain: JSON.stringify(item.paraList),
+                is_new: "true",
+                audio_file_id: item.word_explain&&item.word_explain.ph_mp3_id?item.word_explain.ph_mp3_id:'',
+                audio_file_url: item.word_explain&&item.word_explain.ph_file_url?item.word_explain.ph_file_url:'',
+                article_id: this.$route.query.id,
+                word_id: item.id
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                if(res.status===1){
+                    item.collect = true
+                    this.$forceUpdate()
+                    this.$message({
+                        message: "收藏成功",
+                        type: "success",
+                    });
+                    this.likePhrase.push(item.word)
+                    this.$emit('changeLike','likeWordList',this.likePhrase)
+                }
+            })
+            .catch(() => {
+            }); 
+        }
+    },
+    changeIndex(type){
+        if(type==='-'){
+            if(this.phraseActiveIndex>0){
+                this.phraseActiveIndex--
+                this.data = this.wordList[this.phraseActiveIndex]
+            }else{
+                return
+            }
+        }else{
+            if(this.phraseActiveIndex<this.wordList.length-1){
+                this.phraseActiveIndex++
+                this.data = this.wordList[this.phraseActiveIndex]
+            }else{
+                return
+            }
+        }
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -274,6 +352,15 @@ export default {
                 cursor: pointer;
                 width: 32px;
                 height: 16px;
+                &.not-allow{
+                    color: rgba(78, 89, 105, 0.3);
+                    cursor: not-allowed;
+                }
+            }
+            .icon-like{
+                &.active{
+                    color: #F2555A;  
+                }
             }
         }
     }