文章词典

src/views/bookShelf/components/InnerTextSearch.vue

@@ -226,11 +226,11 @@
 
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
     <div class="search-box" v-if="showSearch">
-      <span
-        class="search-show-btn"
-        id="dragDrop"
-        @mousedown="positionChange"
-      ></span>
+      <div id="dragDrop" @mousedown="positionChange" class="search-show-btn">
+        <span></span>
+        <b>注：点击灰条后按住灰条可拖动位置</b>
+      </div>
+
       <div class="search">
         <div class="select-result" @click="showSearchColorList">
           <span
@@ -909,13 +909,20 @@ export default {
   right: calc((100% - 1000px) / 2);
   padding: 0 16px 16px;
   .search-show-btn {
-    border-radius: 4px;
-    background: #d0d3d9;
-    width: 48px;
-    height: 4px;
-    display: block;
-    margin: 6px auto;
     cursor: move;
+    padding: 6px 0;
+    span {
+      border-radius: 4px;
+      background: #d0d3d9;
+      width: 48px;
+      display: block;
+      height: 4px;
+      margin: 0 auto;
+    }
+    b {
+      font-size: 11px;
+      color: #d0d3d9;
+    }
   }
   .search {
     position: relative;

src/views/bookShelf/components/LexicalType.vue

@@ -402,11 +402,14 @@
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
     <div class="lexical-search" v-if="showSearch">
       <div class="search-box">
-        <span
-          class="search-show-btn"
+        <div
           id="dragDrop"
           @mousedown="positionChange('dragDrop')"
-        ></span>
+          class="search-show-btn"
+        >
+          <span></span>
+          <b>注：点击灰条后按住灰条可拖动位置</b>
+        </div>
         <div class="tabs-box">
           <a
             :class="['tabs-btn', tabsIndex === 0 ? 'active' : '']"
@@ -466,11 +469,14 @@
         </ul>
       </div>
       <div class="clear-box">
-        <span
-          class="search-show-btn"
+        <div
           id="dragDrops"
           @mousedown="positionChange('dragDrops')"
-        ></span>
+          class="search-show-btn"
+        >
+          <span></span>
+          <!-- <b>注：点击灰条后按住灰条可拖动位置</b> -->
+        </div>
         <h5>词汇标记设置</h5>
         <div class="item" v-if="tabsIndex === 0">
           <span>隐藏标记词</span>
@@ -1104,13 +1110,20 @@ export default {
   top: 200px;
   width: 270px;
   .search-show-btn {
-    border-radius: 4px;
-    background: #d0d3d9;
-    width: 48px;
-    height: 4px;
-    display: block;
-    margin: 6px auto;
-    cursor: pointer;
+    cursor: move;
+    padding: 6px 0;
+    span {
+      border-radius: 4px;
+      background: #d0d3d9;
+      width: 48px;
+      display: block;
+      height: 4px;
+      margin: 0 auto;
+    }
+    b {
+      font-size: 11px;
+      color: #d0d3d9;
+    }
   }
   .tabs-box {
     display: flex;
@@ -1194,13 +1207,20 @@ export default {
     0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
   margin-top: 24px;
   .search-show-btn {
-    border-radius: 4px;
-    background: #d0d3d9;
-    width: 48px;
-    height: 4px;
-    display: block;
-    margin: 6px auto;
-    cursor: pointer;
+    cursor: move;
+    padding: 6px 0;
+    span {
+      border-radius: 4px;
+      background: #d0d3d9;
+      width: 48px;
+      display: block;
+      height: 4px;
+      margin: 0 auto;
+    }
+    b {
+      font-size: 11px;
+      color: #d0d3d9;
+    }
   }
   h5 {
     margin: 0;

src/views/dictionary/searchDetail.vue

@@ -48,12 +48,12 @@
           v-for="(itemP, indexP) in searchWordinfo.pronunciations"
           :key="indexP"
         >
-          <label v-if="itemP.region">{{
+          <label v-if="itemP.region && itemP.sound">{{
             itemP.region == "uk" ? "英" : "美"
           }}</label>
           <span v-if="itemP.phonetic">{{ itemP.phonetic }}</span>
           <svg-icon
-            v-if="(itemP.sound && !voiceSrc) || indexP !== playIndex"
+            v-if="itemP.sound && (!voiceSrc || indexP !== playIndex)"
             icon-class="voice"
             className="icon-voice"
             @click="handlePlayVoice(itemP.sound, indexP)"

src/views/personalCenter/components/WordCard.vue

@@ -97,7 +97,7 @@
       </template>
       <template v-else>
         <h3 class="word">{{ searchWordinfo.word }}</h3>
-        <div class="symbol-box">
+        <!-- <div class="symbol-box">
           <span class="symbol">{{ searchWordinfo.symbol }}</span>
           <svg-icon
             v-if="searchWordinfo.hasVoice && !voiceSrc"
@@ -126,6 +126,57 @@
             <span class="cixing">{{ itemP.part }}</span>
             <span class="shiyi">{{ itemP.means.join("；") }}</span>
           </div>
+        </div> -->
+        <div
+          class="pronunciations-list"
+          v-if="
+            searchWordinfo.pronunciations &&
+            searchWordinfo.pronunciations.length > 0
+          "
+        >
+          <div
+            class="pronunciations-item"
+            v-for="(itemP, indexP) in searchWordinfo.pronunciations"
+            :key="indexP"
+          >
+            <label v-if="itemP.region && itemP.sound">{{
+              itemP.region == "uk" ? "英" : "美"
+            }}</label>
+            <span v-if="itemP.phonetic">{{ itemP.phonetic }}</span>
+            <svg-icon
+              v-if="itemP.sound && (!voiceSrc || indexP !== playIndex)"
+              icon-class="voice"
+              className="icon-voice"
+              @click="handlePlayVoice(itemP, indexP)"
+            ></svg-icon>
+            <img
+              v-if="itemP.sound && voiceSrc && indexP === playIndex"
+              :src="voiceSrc"
+              class="icon-voice"
+            />
+          </div>
+        </div>
+        <div
+          v-for="(item, index) in searchWordinfo.data"
+          :key="index"
+          class="definition-box"
+        >
+          <label v-if="searchWordinfo.data.length > 1">{{
+            item.word_name
+          }}</label>
+          <div
+            class="definition-list"
+            v-if="item.symbols[0].parts && item.symbols[0].parts.length > 0"
+          >
+            <div
+              class="definition-item"
+              v-for="(itemD, indexD) in item.symbols[0].parts"
+              :key="indexD"
+            >
+              <label>{{ itemD.part }}</label>
+              <p>{{ itemD.means.join("；") }}</p>
+            </div>
+          </div>
         </div>
       </template>
       <el-divider content-position="left">例句</el-divider>
@@ -313,9 +364,10 @@ export default {
       activeMenu: this.dataObj.isNew ? 0 : 1,
       searchWordinfo: {
         word: "",
-        symbol: "",
+        pronunciations: [],
         paraList: [],
         hasVoice: false,
+        data: [],
       },
       pageNo: 1,
       pageNoNew: 1,
@@ -336,6 +388,7 @@ export default {
         '"',
         "#",
       ],
+      playIndex: null,
     };
   },
   //计算属性 类似于data概念
@@ -351,11 +404,11 @@ export default {
     handleLookStore(index) {
       this.activeIndex = index;
     },
-    async handlePlayVoice(item) {
+    async handlePlayVoice(item, index) {
       let _this = this;
       let url = "";
-      if (item.ph_file_url) {
-        url = item.ph_file_url;
+      if (item.sound) {
+        url = item.sound;
       } else if (item.originalObj.word_explain.ph_mp3_id) {
         await getLogin("/FileServer/GetFileInfo", {
           file_id: item.originalObj.word_explain.ph_mp3_id,
@@ -374,6 +427,7 @@ export default {
       //     this.audio.pause();
       //   } else
       {
+        _this.playIndex = index;
         _this.audio.pause();
         _this.audio.load();
         _this.audio.src = url;
@@ -395,32 +449,113 @@ export default {
           if (res.status === 1) {
             this.searchWordinfo.word = this.data.word;
             let list = res.data.dict_info ? res.data.dict_info : [];
+            list = this.uniqueArray(list, "word_name");
+            // 排序
             for (let i = 0; i < list.length; i++) {
+              if (list[i].word_name === this.data.word) {
+                list.unshift(list[i]); // 将元素移到数组最前面
+                list.splice(i + 1, 1); // 删除原位置的元素
+                break;
+              }
+            }
+            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 (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
+                    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,
+                    });
+                  } else {
+                    this.searchWordinfo.pronunciations.push({
+                      region: "uk",
+                      phonetic: 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.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.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,
+                    });
+                  } else {
+                    this.searchWordinfo.pronunciations.push({
+                      region: "us",
+                      phonetic: list[i].symbols[0].ph_en,
+                      sound: list[i].symbols[0].ph_en_mp3,
+                    });
                   }
-                  this.searchWordinfo.paraList = list[i].symbols[0].parts;
+
+                  // this.searchWordinfo.paraList = list[i].symbols[0].parts;
+                }
+              } else {
+                if (list[i].symbols && list[i].symbols.length > 0) {
+                  this.searchWordinfo.pronunciations[0] = {
+                    region: "uk",
+                    phonetic: this.searchWordinfo.pronunciations[0].phonetic
+                      ? this.searchWordinfo.pronunciations[0].phonetic
+                      : list[i].symbols[0].ph_am
+                      ? "/" + list[i].symbols[0].ph_am + "/"
+                      : "",
+                    sound: this.searchWordinfo.pronunciations[0].sound
+                      ? this.searchWordinfo.pronunciations[0].sound
+                      : list[i].symbols[0].ph_am_mp3
+                      ? list[i].symbols[0].ph_am_mp3
+                      : "",
+                  };
+                  this.searchWordinfo.pronunciations[1] = {
+                    region: "us",
+                    phonetic: this.searchWordinfo.pronunciations[1].phonetic
+                      ? this.searchWordinfo.pronunciations[1].phonetic
+                      : list[i].symbols[0].ph_en
+                      ? "/" + list[i].symbols[0].ph_en + "/"
+                      : "",
+                    sound: this.searchWordinfo.pronunciations[1].sound
+                      ? this.searchWordinfo.pronunciations[1].sound
+                      : list[i].symbols[0].ph_en_mp3
+                      ? list[i].symbols[0].ph_en_mp3
+                      : "",
+                  };
                 }
               }
             }
-            if (this.searchWordinfo.ph_file_url) {
-              this.searchWordinfo.hasVoice = true;
-            }
+            // if (this.searchWordinfo.ph_file_url) {
+            //   this.searchWordinfo.hasVoice = true;
+            // }
+            this.searchWordinfo.data = list;
           }
         })
         .catch(() => {
@@ -962,6 +1097,16 @@ export default {
       newarr.push(arr3);
       return newarr;
     },
+    // 去重
+    uniqueByProperty(arr, key) {
+      return Array.from(new Set(arr.map((item) => item[key])));
+    },
+    uniqueArray(arr, key) {
+      return arr.filter(
+        (value, index, self) =>
+          index === self.findIndex((t) => t[key] === value[key])
+      );
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -1323,6 +1468,57 @@ export default {
     margin: 4px;
   }
 }
+.pronunciations-list {
+  margin-bottom: 16px;
+  display: flex;
+  > div {
+    display: flex;
+    margin-right: 24px;
+  }
+  label {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1c2129;
+    margin-right: 8px;
+  }
+  span {
+    margin-right: 8px;
+    font-family: "robot";
+    color: #1c2129;
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+.definition-box {
+  display: flex;
+  gap: 10px;
+  label {
+    font-size: 18px;
+    line-height: 24px;
+  }
+}
+.definition-list {
+  padding-bottom: 8px;
+  .definition-item {
+    padding-bottom: 16px;
+    display: flex;
+    label {
+      color: #1c2129;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      min-width: 44px;
+    }
+    p {
+      margin: 0;
+      flex: 1;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+}
 </style>
 <style lang="scss">
 .word-card {