金山词霸

src/views/bookShelf/components/PhraseModel.vue

@@ -400,7 +400,8 @@ export default {
                             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
+                            collect: this.likeWord.indexOf(itemi.word_name)>-1?true:false,
+                            isNew: true
                         }
                         this.showObj = obj
                     }

src/views/personalCenter/components/WordCard.vue

@@ -2,10 +2,14 @@
   <div class="word-card" v-loading="loading">
     <div class="word-card-top">
         <ul>
-            <li class="active">
+            <li :class="[activeMenu===0?'active':'']" v-if="isNew" @click="activeMenu=0">
                 <label>本文释义</label>
                 <span></span>
             </li>
+            <li :class="[activeMenu===1?'active':'']" @click="activeMenu=1">
+                <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>
@@ -17,27 +21,44 @@
         </div>
     </div>
     <div class="word-card-center">
-        <div class="word-card-center-box" v-if="data.rate||data.typeC">
-            <span class="star word-card-rate">
-                <template v-if="data.rate">
-                    <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in data.rate" :key="indexS" :style="{color:'#FFB224'}"></svg-icon>
-                </template>
-            </span>
-            <span class="wordType" v-if="data.typeCn">{{data.typeCn}}</span>
-        </div>
-        <h3 class="word">{{data.word}}</h3>
-        <div class="symbol-box">
-            <span class="symbol">{{data.symbol}}</span>
-            <svg-icon v-if="data.hasVoice&&!voiceSrc" icon-class="voice" className="icon-voice" @click="handlePlayVoice(data)"></svg-icon>
-            <img v-if="data.hasVoice&&voiceSrc" :src="voiceSrc" class="icon-voice" />
-            <svg-icon v-if="!data.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
-        </div>
-        <div class="para-list">
-            <div class="para" v-for="(itemP,indexP) in data.paraList" :key="indexP">
-                <span class="cixing">{{itemP.cixing}}</span>
-                <span class="shiyi">{{itemP.para}}</span>
+        <template v-if="activeMenu===0">
+            <div class="word-card-center-box" v-if="data.rate||data.typeC">
+                <span class="star word-card-rate">
+                    <template v-if="data.rate">
+                        <svg-icon icon-class="star-filled" v-for="(itemS,indexS) in data.rate" :key="indexS" :style="{color:'#FFB224'}"></svg-icon>
+                    </template>
+                </span>
+                <span class="wordType" v-if="data.typeCn">{{data.typeCn}}</span>
             </div>
-        </div>
+            <h3 class="word">{{data.word}}</h3>
+            <div class="symbol-box">
+                <span class="symbol">{{data.symbol}}</span>
+                <svg-icon v-if="data.hasVoice&&!voiceSrc" icon-class="voice" className="icon-voice" @click="handlePlayVoice(data)"></svg-icon>
+                <img v-if="data.hasVoice&&voiceSrc" :src="voiceSrc" class="icon-voice" />
+                <svg-icon v-if="!data.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
+            </div>
+            <div class="para-list">
+                <div class="para" v-for="(itemP,indexP) in data.paraList" :key="indexP">
+                    <span class="cixing">{{itemP.cixing}}</span>
+                    <span class="shiyi">{{itemP.para}}</span>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <h3 class="word">{{searchWordinfo.word}}</h3>
+            <div class="symbol-box">
+                <span class="symbol">{{searchWordinfo.symbol}}</span>
+                <svg-icon v-if="searchWordinfo.hasVoice&&!voiceSrc" icon-class="voice" className="icon-voice" @click="handlePlayVoice(searchWordinfo)"></svg-icon>
+                <img v-if="searchWordinfo.hasVoice&&voiceSrc" :src="voiceSrc" class="icon-voice" />
+                <svg-icon v-if="!searchWordinfo.hasVoice" icon-class="voice" className="icon-voice" style="color:rgba(78, 89, 105, 0.3)"></svg-icon>
+            </div>
+            <div class="para-list">
+                <div class="para" v-for="(itemP,indexP) in searchWordinfo.paraList" :key="indexP">
+                    <span class="cixing">{{itemP.part}}</span>
+                    <span class="shiyi">{{itemP.means.join('；')}}</span>
+                </div>
+            </div>
+        </template>
         <el-divider content-position="left">例句</el-divider>
         <div class="number-list" v-if="sentKwicData">
             <div class="number-item" :class="[activeIndex===0?'active':'']" @click="handleLookStore(0)">
@@ -143,7 +164,15 @@ export default {
       sentKwicData: null,
       allList: [],
       phraseActiveIndex: this.activeObjIndex, //JSON.parse(JSON.stringify(this.activeObjIndex))
-      data: JSON.parse(JSON.stringify(this.dataObj))
+      data: JSON.parse(JSON.stringify(this.dataObj)),
+      isNew: this.dataObj.isNew,
+      activeMenu: this.dataObj.isNew?0:1,
+      searchWordinfo: {
+        word: '',
+        symbol: '',
+        paraList: [],
+        hasVoice: false
+      }
     }
   },
   //计算属性 类似于data概念
@@ -162,7 +191,9 @@ export default {
     async handlePlayVoice(item) {
       let _this = this;
       let url = ''
-      if(item.originalObj.word_explain.ph_mp3_id){
+      if(item.ph_file_url){
+        url = item.ph_file_url
+      }else 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){
@@ -173,6 +204,7 @@ export default {
         url = item.originalObj.word_explain.ph_file_url
       }
       if (!url) {
+        debugger
         return;
       }
     //   if (!this.audio.paused) {
@@ -198,7 +230,22 @@ export default {
         .then((res) => {
             this.loading = false
             if(res.status===1){
-                
+                this.searchWordinfo.word = this.data.word
+                let list = res.data.dict_info?res.data.dict_info:[]
+                for(let i = 0; i < list.length; i++){
+                    if(list[i].word_name === this.searchWordinfo.word){
+                        if(list[i].symbols&&list[i].symbols.length>0){
+                            this.searchWordinfo.symbol = '/' + (list[i].symbols[0].ph_am || list[i].symbols[0].ph_en || list[i].symbols[0].ph_other) + '/'
+                            if(list[i].symbols[0].ph_am_mp3||list[i].symbols[0].ph_en_mp3||list[i].symbols[0].ph_tts_mp3){
+                                this.searchWordinfo.ph_file_url = list[i].symbols[0].ph_am_mp3||list[i].symbols[0].ph_en_mp3||list[i].symbols[0].ph_tts_mp3
+                            }
+                            this.searchWordinfo.paraList = list[i].symbols[0].parts
+                        }
+                    }
+                }
+                if(this.searchWordinfo.ph_file_url){
+                    this.searchWordinfo.hasVoice = true
+                }
             }
         })
         .catch(() => {
@@ -249,7 +296,7 @@ export default {
                 word: item.word,
                 pinyin: item.symbol,
                 explain: JSON.stringify(item.paraList),
-                is_new: "true",
+                is_new: this.isNew,
                 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,
@@ -363,6 +410,36 @@ export default {
                 }
             }
         }
+        ul{
+            padding: 0;
+            margin: 0;
+            display: flex;
+            li{
+                color:#929CA8;
+                font-size: 16px;
+                line-height: 24px;
+                margin-right: 24px;
+                label{
+                    font-weight: 400;
+                    cursor: pointer;
+                }
+                span{
+                   width: 15px;
+                   height: 2px; 
+                   display: block;
+                   margin: 2px auto;
+                }
+                &.active{
+                    color: #3459D2;
+                    label{
+                        font-weight: 600;
+                    }
+                    span{
+                        background: #3459D2;
+                    }
+                }
+            }
+        }
     }
     &-center{
         padding-top: 24px;