文章预览

src/views/content_manage/newspaper_manage/ArticleDetail.vue

@@ -54,11 +54,11 @@
                     <div v-if="showGlossary">
                         <template v-if="articleInfo.art_voc_data.length>0">
                             <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]" :likeWordList="likeWordList" @changeLike="changeLike" ref="newWordList"></new-word-list>
+                            <new-word-list class="newWord-list" :list="articleInfo.art_voc_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likeWordList="likeWordList" @changeLike="changeLike" ref="newWordList" type="preview"></new-word-list>
                         </template>
                         <template v-if="articleInfo.art_phrase_data.length>0">
                             <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">短语</h4>
-                            <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likePhraseList="likePhraseList" @changeLike="changeLike" ref="phraseList"></phrase-list>
+                            <phrase-list class="newWord-list" :list="articleInfo.art_phrase_data" :style="{background:bgColorList[activeIndex].glossaryBg}" :colorObj="bgColorList[activeIndex]" :likePhraseList="likePhraseList" @changeLike="changeLike" ref="phraseList" type="preview"></phrase-list>
                         </template>
                         <template v-if="articleInfo.art_explain_data.length>0">
                             <h4 :style="{color:bgColorList[activeIndex].glossarySubtitle}">注释</h4>
@@ -1436,10 +1436,10 @@ export default {
     right: calc((100% - 1000px)/2);
     left: auto;
     margin-left: auto;
-    .treeList{
-        ul{
-            padding: 0;
-        }   
+    ul{
+        padding: 0;
+    }  
+    .treeList{ 
         .parent-node{
             display: flex;
             align-items: center;
@@ -1456,6 +1456,7 @@ export default {
                 font-size: 16px;
                 line-height: 24px;
                 color: #2F3742;
+                word-break: break-word;
             }
         }
         ul{
@@ -1490,6 +1491,7 @@ export default {
                 }
                 .title{
                     flex: 1;
+                    word-break: break-word;
                 }
                 .number,.title{
                     font-weight: 400;

src/views/content_manage/newspaper_manage/components/NewWordList.vue

@@ -2,41 +2,78 @@
     <div v-if="wordList.length>0">
         <ul>
             <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>
-                        <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>
-                        </span>
-                        <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.para}}</span>
+                <template v-if="!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" :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>
+                            </span>
+                            <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.para}}</span>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <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>
-                <b class="border"></b>
-                <el-button
-                    @click="handleEdit(itemW,indexW)"
-                    type="text"
-                    size="small"
-                    class="primary-btn">
-                    编辑
-                </el-button>
-                <el-button
-                    @click="handleDelete(itemW, indexW)"
-                    type="text"
-                    size="small"
-                    class="red-btn">
-                    删除
-                </el-button>
+                    <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>
+                    <b class="border"></b>
+                    <el-button
+                        @click="handleEdit(itemW,indexW)"
+                        type="text"
+                        size="small"
+                        class="primary-btn">
+                        编辑
+                    </el-button>
+                    <el-button
+                        @click="handleDelete(itemW, indexW)"
+                        type="text"
+                        size="small"
+                        class="red-btn">
+                        删除
+                    </el-button>
+                </template>
+                <template v-else>
+                    <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" />
+                    <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,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>
+                            </span>
+                            <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.para}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <label class="word-type" :style="{color:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].color:'',background:colorObj.newWordType[itemW.type]?colorObj.newWordType[itemW.type].bg:''}">{{itemW.typeCn}}</label>
+                    <!-- <template v-if="!noLike"> -->
+                        <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>
+                    <!-- </template> -->
+                </template>
             </li>
         </ul>
+        <el-dialog
+            :visible.sync="wordcardShow"
+            :show-close="false"
+            :close-on-click-modal="false"
+            width="570px"
+            class="login-dialog"
+            :append-to-body="true"
+            v-if="wordcardShow">
+            <WordCard @closeWord="closeWord" :dataObj="activeItem" :wordList="wordList" :activeObjIndex="activeObjIndex" @changeLike="changeLike" :likePhrase="likeWord"/>
+        </el-dialog>
     </div>
     
 </template>
@@ -45,10 +82,11 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/ajax";
+import WordCard from "@/components//WordCard.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: {},
-  props: ["list", "colorObj"],
+  components: {WordCard},
+  props: ["list", "colorObj", "type"],
   data() {
     //这里存放数据
     return {
@@ -57,7 +95,11 @@ export default {
         voiceSrc: "",
         voicePauseSrc: '',
         voicePlaySrc: require("../../../../assets/voice-play-gray.png"),
-        activeIndex: null
+        activeIndex: null,
+        wordcardShow: false, // 词汇卡片flag
+        likeWord: [],
+        activeItem: null,
+        activeObjIndex: null,
     }
   },
   //计算属性 类似于data概念
@@ -129,11 +171,68 @@ export default {
     },
     handleEdit(item){
         this.$emit('handleAddWords',item)
-    }
+    },
+    // 查看单词卡片
+    showWord(obj,indexi){
+        this.wordcardShow = true
+        this.activeObjIndex = indexi  
+        this.activeItem = obj
+    },
+    // 收藏
+    handleCollect(item){
+        if(item.collect){
+            item.collect = false
+            this.$message({
+                message: "取消收藏",
+                type: "success",
+            });
+            this.likeWord.splice(this.likeWord.indexOf(item.word),1)
+        }else{
+            item.collect = true
+            this.$message({
+                message: "收藏成功",
+                type: "success",
+            });
+            this.likeWord.push(item.word)
+        }
+    },
+    // 关闭单词卡片
+    closeWord(){
+        this.wordcardShow = false
+    },
+    changeLike(obj,list){
+        
+    },
+    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,
+                id: items.id,
+                collect: this.likeWord.indexOf(items.word_name)>-1?true:false,
+                isNew: true
+            }
+            this.wordList.push(obj)
+        });
+        // console.log(this.likeWordList)
+        // console.log(this.likeWord)
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.wordList = JSON.parse(JSON.stringify(this.list))
+    if(this.type){
+        this.handleData()
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {