生词、短语、文章收藏

src/views/bookShelf/articleDetail.vue

@@ -23,8 +23,8 @@
                 <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}"></normal-model>
                 <div class="article-btn">
                     <div class="left">
-                        <span :class="['support',support?'active':'']" @click="changeStatus('support')"><svg-icon icon-class="support"></svg-icon>2847</span>
-                        <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span>
+                        <span :class="['support colloct-article',support?'active':'']" @click="changeStatus('support')"><svg-icon icon-class="like-line"></svg-icon>2847</span>
+                        <!-- <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span> -->
                     </div>
                     <div class="center">
                         <el-button type="text" class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
@@ -51,9 +51,9 @@
                         <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">生词</h4>
                         <new-word-list class="newWord-list" :list="articleInfo.art_voc_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></new-word-list>
                         <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">短语</h4>
-                        <phrase-list class="newWord-list" :list="phraseList" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></phrase-list>
+                        <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></phrase-list>
                         <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">注释</h4>
-                        <annotation-list class="newWord-list" :list="annotationList" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></annotation-list>
+                        <annotation-list class="newWord-list" :list="articleInfo.art_explain_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]"></annotation-list>
                     </div>
                 </el-collapse-transition>
                 <div class="title" :style="{color:bgColorList[activeIndex].glossaryTitle,marginTop:'40px'}">
@@ -640,7 +640,38 @@ export default {
         }); 
     },
     changeStatus(flag){
-        this[flag] = !this[flag]
+        if(!this[flag]){
+            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Article";
+            let data = {
+                article_id: this.articleId
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                if(res.status===1){
+                    this[flag] = !this[flag]
+                    this.$message({
+                        message: "收藏成功",
+                        type: "success",
+                    });
+                }
+            })
+            .catch(() => {
+            }); 
+            // let datas = {
+            //     sentence_id: this.articleInfo.art_sound_srt_data.sents[1].id,
+            //     audio_file_id: this.articleInfo.art_sound_srt_data.mp3,
+            //     audio_begin_time: this.articleInfo.art_sound_srt_data.sents[1].s,
+            //     audio_end_time: this.articleInfo.art_sound_srt_data.sents[1].e
+            // }
+            // getLogin('/ShopServer/Client/CollectManager/AddCollect_Sentence', datas)
+            // .then((res) => {
+            //     if(res.status===1){
+                    
+            //     }
+            // })
+            // .catch(() => {
+            // }); 
+        }
     }
   },
   created(){
@@ -835,6 +866,14 @@ export default {
             }
         }
     }
+    .colloct-article{
+        .svg-icon{
+            color: rgba(242, 85, 90, 1);
+        }
+        &.active{
+            background: rgba(242, 85, 90, 1);
+        }
+    }
     .oppose{
         padding: 12px;
         border-radius: 20px;

src/views/bookShelf/components/AnnotationList.vue

@@ -1,8 +1,8 @@
 <template>
     <ul>
         <li v-for="(itemW,indexW) in list" :key="indexW">
-            <b class="prefix" :style="{color:colorObj.phraseOhterColor}">{{itemW.prefix}}</b>
-            <div class="para-list" :style="{color:colorObj.newWordOtherColor}" v-html="itemW.para"></div>
+            <b class="prefix" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_title}}</b>
+            <div class="para-list" :style="{color:colorObj.newWordOtherColor}" v-html="itemW.exp_content"></div>
         </li>
     </ul>
 </template>

src/views/bookShelf/components/NewWordList.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <div v-if="wordList.length>0">
         <ul>
-            <li v-for="(itemW,indexW) in list" :key="indexW" :class="['li-'+colorObj.type]">
-                <svg-icon icon-class="voice" className="icon-voice"></svg-icon>
+            <li v-for="(itemW,indexW) in wordList" :key="indexW" :class="['li-'+colorObj.type]">
+                <svg-icon v-if="itemW.hasVoice&&!voiceSrc||itemW.hasVoice&&activeIndex!==indexW" icon-class="voice" className="icon-voice" @click="handlePlayVoice(itemW,indexW)"></svg-icon>
+                <img v-if="itemW.hasVoice&&voiceSrc&&activeIndex===indexW" :src="voiceSrc" class="icon-voice" />
                 <div class="word-info">
                     <div class="word-info-top">
                         <b class="word" @click="showWord(itemW)" :style="{color:colorObj.newWordColor}">{{itemW.word}}</b>
@@ -13,12 +14,12 @@
                         <div class="para-list">
                             <div class="para" v-for="(itemP,indexP) in itemW.paraList" :key="indexP">
                                 <span class="cixing" :style="{color:colorObj.newWordOtherColor}">{{itemP.cixing}}</span>
-                                <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.shiyi}}</span>
+                                <span class="shiyi" :style="{color:colorObj.newWordOtherColor}">{{itemP.para}}</span>
                             </div>
                         </div>
                     </div>
                 </div>
-                <label class="word-type" :style="{color:colorObj.newWordType[itemW.type].color,background:colorObj.newWordType[itemW.type].bg}">{{colorObj.newWordType[itemW.type].text}}</label>
+                <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?olorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
                 <svg-icon icon-class="like-line" className="icon-like" v-if="!itemW.collect" @click="handleCollect(itemW)"></svg-icon>
                 <svg-icon icon-class="like" className="icon-like active" v-else @click="handleCollect(itemW)"></svg-icon>
                 <!-- <i class="el-icon-arrow-right"></i> -->
@@ -40,7 +41,7 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-
+import { getLogin } from "@/api/ajax";
 import WordCard from "../../personalCenter/components/WordCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -50,13 +51,28 @@ export default {
     //这里存放数据
     return {
         wordcardShow: false, // 词汇卡片flag
+        wordList: [],
+        audio: new Audio(),
+        voiceSrc: "",
+        voicePauseSrc: '',
+        voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+        activeIndex: null
     }
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-
+    list:{
+      handler(val, oldVal) {
+        const _this = this;
+        if (val) {
+          this.handleData()
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -64,18 +80,37 @@ export default {
     handleCollect(item){
         if(item.collect){
             item.collect = false
+            this.$forceUpdate()
             this.$message({
                 message: "取消收藏",
                 type: "success",
             });
         }else{
-            item.collect = true
-            this.$message({
-                message: "收藏成功",
-                type: "success",
-            });
+            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
+            let data = {
+                word: item.word,
+                pinyin: item.symbol,
+                definition_list: 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
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                this.$forceUpdate()
+                if(res.status===1){
+                    item.collect = true
+                    this.$message({
+                        message: "收藏成功",
+                        type: "success",
+                    });
+                }
+            })
+            .catch(() => {
+            }); 
         }
-        this.$forceUpdate()
     },
     // 查看单词卡片
     showWord(obj){
@@ -85,13 +120,72 @@ export default {
     closeWord(){
         this.wordcardShow = false
     },
+    async handlePlayVoice(item,index) {
+      let _this = this;
+      let url = ''
+      if(item.originalObj.word_explain.ph_mp3_id){
+        await getLogin('/FileServer/GetFileInfo', {file_id:item.originalObj.word_explain.ph_mp3_id})
+        .then((res) => {
+            if(res.status===1){
+                url = res.file_url
+            }
+        })
+      }else if(item.originalObj.word_explain.ph_file_url){
+        url = item.originalObj.word_explain.ph_file_url
+      }
+      if (!url) {
+        return;
+      }
+    //   if (!this.audio.paused) {
+    //     this.audio.pause();
+    //   } else 
+      {
+        _this.audio.pause();
+        _this.audio.load();
+        _this.audio.src = url;
+        _this.audio.loop = false;
+        _this.audio.play();
+        _this.activeIndex = index
+      }
+    },
+    handleData(){
+        this.wordList = []
+        let wordList = JSON.parse(JSON.stringify(this.list))
+        wordList.forEach(items => {
+            let obj = {
+                src: items.ph_file_url?items.ph_file_url:'',
+                word: items.word_name,
+                symbol: items.word_explain.ph?items.word_explain.ph:'',
+                paraList: items.word_explain.word_para_list,
+                type: items.word_explain.vl_level?items.word_explain.vl_level:'',
+                typeCn: items.word_explain.vl_level_name?items.word_explain.vl_level_name:'',
+                rate: items.word_explain.star?items.word_explain.star:null,
+                originalObj: items,
+                hasVoice: items.word_explain.ph_mp3_id||items.word_explain.ph_file_url?true:false
+            }
+            this.wordList.push(obj)
+        });
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    this.handleData()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-
+    let _this = this;
+    _this.voiceSrc = _this.voicePauseSrc;
+    _this.audio.addEventListener("play", function () {
+    //   console.log("播放");
+      _this.voiceSrc = _this.voicePlaySrc;
+    });
+    _this.audio.addEventListener("pause", function () {
+      _this.voiceSrc = _this.voicePauseSrc;
+    });
+    _this.audio.addEventListener("ended", function () {
+    //   console.log("停止");
+      _this.voiceSrc = _this.voicePauseSrc;
+    });
   },
   //生命周期-创建之前
   beforeCreated() { },

src/views/bookShelf/components/PhraseList.vue

@@ -3,10 +3,10 @@
         <li v-for="(itemW,indexW) in list" :key="indexW">
             <div class="word-info">
                 <div class="word-info-top">
-                    <b class="phrase" :style="{color:colorObj.phraseColor}">{{itemW.word}}</b>
+                    <b class="phrase" :style="{color:colorObj.phraseColor}">{{itemW.exp_title}}</b>
                     <div class="para-list">
-                        <div class="para" v-for="(itemP,indexP) in itemW.paraList" :key="indexP">
-                            <span class="shiyi" :style="{color:colorObj.phraseOhterColor}">{{itemP}}</span>
+                        <div class="para">
+                            <span class="shiyi" :style="{color:colorObj.phraseOhterColor}">{{itemW.exp_content}}</span>
                         </div>
                     </div>
                 </div>
@@ -21,7 +21,7 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-
+import { getLogin } from "@/api/ajax";
 import WordCard from "../../personalCenter/components/WordCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -50,13 +50,26 @@ export default {
                 type: "success",
             });
         }else{
-            item.collect = true
-            this.$message({
-                message: "收藏成功",
-                type: "success",
-            });
+            let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Phrase";
+            let data = {
+                phrase: item.exp_title,
+                article_id: this.$route.query.id
+            }
+            getLogin(MethodName, data)
+            .then((res) => {
+                this.loading = false
+                this.$forceUpdate()
+                if(res.status===1){
+                    item.collect = true
+                    this.$message({
+                        message: "收藏成功",
+                        type: "success",
+                    });
+                }
+            })
+            .catch(() => {
+            }); 
         }
-        this.$forceUpdate()
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）