词典

src/views/dictionary/components/SearchInput.vue

@@ -28,11 +28,11 @@
             v-for="(itemB, indexB) in item.w.split(searchInput.trim())"
             :key="indexB"
           >
-            <a>{{ itemB }}</a>
+            <a :style="{ whiteSpace: 'pre-wrap' }">{{ itemB }}</a>
             <template
               v-if="indexB !== item.w.split(searchInput.trim()).length - 1"
             >
-              <b>{{ searchInput.trim() }}</b>
+              <b>{{ searchInput }}</b>
             </template>
           </span>
           <span class="para">{{ item.m }}</span>
@@ -46,7 +46,7 @@
 import { getLogin } from "@/api/ajax";
 export default {
   name: "searchInput",
-  props: ["restaurants", "searchQuery"],
+  props: ["restaurants", "searchQuery", "isIndex"],
   data() {
     return {
       searchInput: this.searchQuery ? this.searchQuery : "", // 搜索内容
@@ -114,7 +114,9 @@ export default {
           content: content,
         },
       });
-      window.location.reload();
+      if (!this.isIndex) {
+        window.location.reload();
+      }
     },
     // 监听上下键
     keyDownUp() {

src/views/dictionary/index.vue

@@ -9,7 +9,11 @@
     <div class="banner">
       <img src="../../assets/dictionary-big.png" />
     </div>
-    <SearchInput class="search-compent" :restaurants="restaurants" />
+    <SearchInput
+      class="search-compent"
+      :restaurants="restaurants"
+      :isIndex="true"
+    />
     <div class="main">
       <div v-if="lastSearchList.length > 0">
         <h2>查询记录</h2>

src/views/dictionary/searchDetail.vue

@@ -20,43 +20,68 @@
       </div>
     </div>
     <div class="main">
-      <span class="source">{{ data.source }}</span>
+      <span class="source">金山词霸</span>
       <div class="headWord-box">
-        <p>{{ data.headWord }}</p>
-        <svg-icon
+        <p>{{ searchWordinfo.word }}</p>
+        <!-- <svg-icon
           icon-class="like"
-          className="icon-like"
-          @click="handleCollect('no')"
+          className="icon-like active"
+          v-if="searchWordinfo.collect"
+          @click="handleCollect(searchWordinfo)"
         ></svg-icon>
+        <svg-icon
+          icon-class="like-line"
+          className="icon-like"
+          v-else
+          @click="handleCollect(searchWordinfo)"
+        ></svg-icon> -->
       </div>
-      <p class="testType" v-if="data.testType">{{ data.testType }}</p>
       <div
         class="pronunciations-list"
-        v-if="data.pronunciations && data.pronunciations.length > 0"
+        v-if="
+          searchWordinfo.pronunciations &&
+          searchWordinfo.pronunciations.length > 0
+        "
       >
         <div
           class="pronunciations-item"
-          v-for="(itemP, indexP) in data.pronunciations"
+          v-for="(itemP, indexP) in searchWordinfo.pronunciations"
           :key="indexP"
         >
           <label v-if="itemP.region">{{
             itemP.region == "uk" ? "英" : "美"
           }}</label>
           <span v-if="itemP.phonetic">{{ itemP.phonetic }}</span>
-          <img v-if="itemP.sound" src="../../assets/icon-speaker.png" />
+          <svg-icon
+            v-if="(itemP.sound && !voiceSrc) || indexP !== playIndex"
+            icon-class="voice"
+            className="icon-voice"
+            @click="handlePlayVoice(itemP.sound, indexP)"
+          ></svg-icon>
+          <img
+            v-if="itemP.sound && voiceSrc && indexP === playIndex"
+            :src="voiceSrc"
+            class="icon-voice"
+          />
+          <svg-icon
+            v-if="!itemP.sound"
+            icon-class="voice"
+            className="icon-voice"
+            style="color: rgba(78, 89, 105, 0.3)"
+          ></svg-icon>
         </div>
       </div>
       <div
         class="definition-list"
-        v-if="data.definition_list && data.definition_list.length > 0"
+        v-if="searchWordinfo.paraList && searchWordinfo.paraList.length > 0"
       >
         <div
           class="definition-item"
-          v-for="(itemD, indexD) in data.definition_list"
+          v-for="(itemD, indexD) in searchWordinfo.paraList"
           :key="indexD"
         >
           <label>{{ itemD.part }}</label>
-          <p>{{ itemD.des }}</p>
+          <p>{{ itemD.means.join("；") }}</p>
         </div>
       </div>
       <el-divider content-position="left">例句</el-divider>
@@ -221,84 +246,11 @@ export default {
     return {
       restaurants: [],
       searchQuery: this.$route.query.content ? this.$route.query.content : "",
-      data: {
-        source: "金山词霸",
-        headWord: "cogent",
-        testType: "GRE/IELTS",
-        pronunciations: [
-          {
-            region: "uk",
-            phonetic: "/ˈkəʊdʒənt/",
-            sound:
-              "https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3",
-          },
-          {
-            region: "us",
-            phonetic: "/ˈkoʊdʒənt/",
-            sound:
-              "https://mk.wmjh.cn/bva-upload-h8o01cxdm6g/word_mp3/03/03717__bond_n0205.mp3",
-          },
-        ],
-        definition_list: [
-          {
-            part: "adj.",
-            des: "（理由、论据）有说服力的，令人信服的；",
-          },
-          {
-            part: "n.",
-            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
-          },
-          {
-            part: "v.",
-            des: "得到说明，可加以举例说明",
-          },
-          {
-            part: "adj.",
-            des: "（理由、论据）有说服力的，令人信服的；",
-          },
-          {
-            part: "n.",
-            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
-          },
-          {
-            part: "v.",
-            des: "得到说明，可加以举例说明",
-          },
-          {
-            part: "adj.",
-            des: "（理由、论据）有说服力的，令人信服的；",
-          },
-          {
-            part: "n.",
-            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
-          },
-          {
-            part: "v.",
-            des: "得到说明，可加以举例说明",
-          },
-          {
-            part: "adj.",
-            des: "（理由、论据）有说服力的，令人信服的；",
-          },
-          {
-            part: "n.",
-            des: "例子，例证；榜样，楷模；典型，范例；例句，例题；警戒，受罚（以示警告）者",
-          },
-          {
-            part: "v.",
-            des: "得到说明，可加以举例说明",
-          },
-        ],
-        bookstore: [
-          {
-            label: "全部",
-            value: 9,
-          },
-          {
-            label: "我的书架",
-            value: 7,
-          },
-        ],
+      searchWordinfo: {
+        word: "",
+        pronunciations: [],
+        paraList: [],
+        hasVoice: false,
       },
       kwicFlag: false,
       activeIndex: 0, // 高亮索引
@@ -339,6 +291,7 @@ export default {
         shelf_list_sort_mid: [],
         shelf_list_sort_right: [],
       },
+      playIndex: null,
     };
   },
   //计算属性 类似于data概念
@@ -362,14 +315,72 @@ export default {
   },
   //方法集合
   methods: {
-    handleCollect(type) {
-      if (type == "no") {
-        alert("收藏成功");
+    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",
+              });
+            }
+          })
+          .catch(() => {});
+      } else {
+        let MethodName = "/ShopServer/Client/CollectManager/AddCollect_Word";
+        let data = {
+          word: item.word,
+          pinyin: item.symbol,
+          explain: JSON.stringify(item.paraList),
+          is_new: false,
+          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
+              : "",
+        };
+        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);
+            }
+          })
+          .catch(() => {});
       }
     },
     handleLookStore(index) {
       this.activeIndex = index;
     },
+    handlePlayVoice(url, index) {
+      let _this = this;
+      if (!url) {
+        return;
+      }
+      _this.playIndex = index;
+      _this.audio.pause();
+      _this.audio.load();
+      _this.audio.src = url;
+      _this.audio.loop = false;
+      _this.audio.play();
+    },
     getWordDetail() {
       let MethodName = "/PaperServer/Client/Dict/QueryJinShanDictData";
       let data = {
@@ -377,6 +388,34 @@ export default {
       };
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {
+          this.searchWordinfo.word = this.searchQuery;
+          let list = res.data ? res.data : [];
+          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) {
+                if (list[i].symbols[0].ph_am || list[i].symbols[0].ph_am_mp3) {
+                  this.searchWordinfo.pronunciations.push({
+                    region: "uk",
+                    phonetic: list[i].symbols[0].ph_am
+                      ? "/" + list[i].symbols[0].ph_am + "/"
+                      : "",
+                    sound: list[i].symbols[0].ph_am_mp3,
+                  });
+                }
+                if (list[i].symbols[0].ph_en || list[i].symbols[0].ph_en_mp3) {
+                  this.searchWordinfo.pronunciations.push({
+                    region: "us",
+                    phonetic: list[i].symbols[0].ph_en
+                      ? "/" + list[i].symbols[0].ph_en + "/"
+                      : "",
+                    sound: list[i].symbols[0].ph_en_mp3,
+                  });
+                }
+
+                this.searchWordinfo.paraList = list[i].symbols[0].parts;
+              }
+            }
+          }
         }
       });
     },
@@ -817,7 +856,21 @@ export default {
     this.getQuerySentKwic();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  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() {},
   //生命周期-挂载之前
@@ -1176,6 +1229,12 @@ export default {
       margin: 4px;
     }
   }
+  .icon-voice {
+    width: 22px;
+    height: 22px;
+    color: #4e5969;
+    cursor: pointer;
+  }
 }
 </style>
 <style lang="scss">

src/views/search/index.vue

@@ -105,7 +105,7 @@ export default {
     },
     // 查询用户最近搜索的单词
     getUserSearchList() {
-      let MethodName = "/PaperServer/Client/Dict/QueryUserSearchWordList";
+      let MethodName = "/PaperServer/Client/Search/QueryUserSearchWordList";
       let data = {
         limit: 10,
       };